/* Zakat calculator — page styles (niyatapp.com/zakat-calculator/)
   Design tokens come from /assets/styles.css. Namespaced .zk-* */

.zk-main{padding:56px 0 96px}
.zk-breadcrumbs{font-size:13px;color:var(--cream-muted);letter-spacing:.04em;margin-bottom:28px}
.zk-breadcrumbs a{color:var(--gold)}
.zk-breadcrumbs span[aria-current]{color:var(--cream-dim)}

.zk-head{max-width:760px;margin-bottom:44px}
.zk-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,60px);line-height:1.06;letter-spacing:-.02em;margin:14px 0 18px;text-wrap:balance}
.zk-head h1 em{font-style:italic;color:var(--gold)}
.zk-head .lead{max-width:62ch}

.zk-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media (max-width:920px){.zk-grid{grid-template-columns:1fr}}

.zk-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:28px}
.zk-card + .zk-card{margin-top:28px}
.zk-card h2{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:0 0 6px;color:var(--emerald)}
.zk-card .zk-card-sub{font-size:13.5px;color:var(--cream-dim);margin:0 0 20px;line-height:1.5}

/* Form rows */
.zk-row{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:end;padding:14px 0;border-top:1px solid var(--line)}
.zk-row:first-of-type{border-top:0}
.zk-row.wide{grid-template-columns:1fr}
@media (max-width:560px){.zk-row{grid-template-columns:1fr;align-items:stretch}}
.zk-label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--cream);flex-wrap:wrap}
.zk-help{font-size:12.5px;color:var(--cream-muted);margin-top:3px;line-height:1.45}
.zk-input,.zk-select{width:100%;min-height:44px;padding:10px 12px;font-family:var(--sans);font-size:15px;color:var(--cream);background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;transition:border-color .15s}
.zk-input:focus,.zk-select:focus{outline:none;border-color:var(--gold)}
.zk-unit{position:relative}
.zk-unit .zk-sym{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--cream-muted);pointer-events:none}
.zk-unit .zk-input{padding-left:30px}

/* "i" tooltip */
.tip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:1px solid var(--gold);border-radius:50%;font-size:10px;font-weight:700;color:var(--gold);cursor:help;position:relative;flex-shrink:0}
.tip:hover,.tip:focus{background:var(--gold);color:#fff;text-decoration:none;outline:none}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:230px;max-width:76vw;padding:10px 12px;background:var(--emerald);color:#f5f1e8;font-size:12px;font-weight:400;line-height:1.5;border-radius:10px;opacity:0;visibility:hidden;transition:opacity .15s;z-index:20;text-align:left}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible}

/* Settings strip (currency + nisab basis) */
.zk-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.zk-settings{grid-template-columns:1fr}}
.zk-basis{display:flex;flex-direction:column;gap:8px}
.zk-radio{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:10px;font-size:14px;color:var(--cream);cursor:pointer;background:var(--bg)}
.zk-radio:has(input:checked){border-color:var(--gold);background:var(--bg-elevated)}
.zk-radio input{accent-color:var(--gold);width:16px;height:16px}
.zk-radio small{color:var(--cream-muted);font-size:12px}

/* Price table */
.zk-prices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:560px){.zk-prices{grid-template-columns:1fr}}
.zk-price-note{font-size:12px;color:var(--cream-muted);margin:14px 0 0;line-height:1.5}
.zk-price-note strong{color:var(--cream-dim)}

/* Results panel */
.zk-result-card{position:sticky;top:92px}
@media (max-width:920px){.zk-result-card{position:static}}
.zk-amount{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,52px);line-height:1.05;letter-spacing:-.02em;color:var(--emerald);display:block}
.zk-amount.gold{color:var(--gold)}
.zk-status{display:inline-block;margin-top:12px;padding:7px 14px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:.03em;border:1px solid var(--line-strong);color:var(--cream-dim)}
.zk-status.due{background:var(--emerald);color:#f5f1e8;border-color:var(--emerald)}
.zk-status.wait{background:var(--bg-elevated);color:var(--gold);border-color:var(--gold-soft)}
.zk-mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.zk-mini-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--cream-dim)}
.zk-mini-row strong{color:var(--cream);font-weight:600}
.zk-note{font-size:12.5px;color:var(--cream-muted);line-height:1.55;margin-top:16px}
.zk-note a{color:var(--gold);font-weight:600}

.zk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.zk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:100px;font-size:14px;font-weight:600;letter-spacing:.02em;background:var(--emerald);color:#f5f1e8;transition:transform .15s,background .15s}
.zk-btn:hover{transform:translateY(-1px);background:var(--emerald-hover)}
.zk-btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line-strong)}
.zk-btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);background:transparent}

.zk-privacy{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elevated);font-size:12.5px;color:var(--cream-dim);line-height:1.5}
.zk-privacy svg{width:16px;height:16px;flex-shrink:0;color:var(--gold);margin-top:1px}

.zk-hawl{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elevated);font-size:13.5px;color:var(--cream-dim);line-height:1.5;cursor:pointer}
.zk-hawl input{accent-color:var(--gold);width:16px;height:16px;margin-top:2px;flex-shrink:0}

/* Breakdown table */
.zk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.zk-table{width:100%;border-collapse:collapse;font-size:14px}
.zk-table th,.zk-table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.zk-table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.zk-table td:last-child,.zk-table th:last-child{text-align:right}
.zk-table .zk-sub td{font-weight:600;color:var(--cream);background:var(--bg-elevated)}
.zk-table .zk-net td{font-weight:700;color:var(--emerald);background:var(--bg-elevated);border-bottom:0}
.zk-table td.zk-neg{color:var(--cream-dim)}
.zk-table small{display:block;font-size:11.5px;color:var(--cream-muted);font-weight:400;margin-top:2px}

/* Prose sections */
.zk-section{padding:72px 0;border-top:1px solid var(--line);margin-top:72px}
.zk-section:first-of-type{border-top:0;margin-top:0}
.zk-prose{max-width:720px}
.zk-prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.zk-prose h2 em{font-style:italic;color:var(--gold)}
.zk-prose p{font-size:16px;line-height:1.65;color:var(--cream-dim);margin:0 0 16px}
.zk-prose p strong{color:var(--cream)}
.zk-prose ul{margin:0 0 16px;padding-left:22px;font-size:15.5px;line-height:1.7;color:var(--cream-dim)}
.zk-prose li{margin-bottom:6px}
.zk-prose a{color:var(--gold);font-weight:500}
.zk-prose a:hover{text-decoration:underline}
.zk-callout{margin:24px 0;padding:18px 20px;border-left:3px solid var(--gold);background:var(--bg-elevated);border-radius:0 12px 12px 0;font-size:14.5px;line-height:1.6;color:var(--cream-dim)}
.zk-callout strong{color:var(--cream)}
.zk-example{border:1px solid var(--line);border-radius:14px;background:var(--bg-card);padding:24px;margin:24px 0}
.zk-example h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:0 0 14px;color:var(--emerald)}

/* FAQ */
.zk-faq{border-top:1px solid var(--line)}
.zk-faq details{border-bottom:1px solid var(--line)}
.zk-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:22px 0;font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--cream);min-height:44px}
.zk-faq summary::-webkit-details-marker{display:none}
.zk-faq summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--gold);flex-shrink:0;transition:transform .25s}
.zk-faq details[open] summary::after{transform:rotate(45deg)}
.zk-faq details p{margin:0 0 22px;font-size:15px;line-height:1.65;color:var(--cream-dim);max-width:660px}

/* Related links */
.zk-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media (max-width:820px){.zk-related{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.zk-related{grid-template-columns:1fr}}
.zk-related a{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-deep);font-size:14.5px;font-weight:600;color:var(--cream);transition:border-color .2s,transform .2s}
.zk-related a:hover{border-color:var(--gold);transform:translateY(-2px)}
.zk-related a small{font-size:12.5px;font-weight:400;color:var(--cream-muted)}

/* App CTA */
.app-cta{margin-top:72px;padding:48px 40px;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg-elevated);text-align:center;position:relative;overflow:hidden}
.app-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(161,120,47,.12),transparent 70%);pointer-events:none}
.app-cta h2{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.1;margin:0 0 12px;text-wrap:balance}
.app-cta h2 em{font-style:italic;color:var(--gold)}
.app-cta p{position:relative;max-width:520px;margin:0 auto 28px;font-size:15.5px;line-height:1.6;color:var(--cream-dim)}
.app-cta .zk-btn{position:relative;text-decoration:none}
.app-cta .zk-btn.ghost{color:var(--cream)}

/* Print */
@media print{
  .nav,.footer,.app-cta,.zk-actions,.zk-privacy,.zk-related,.zk-section,.zk-faq,.zk-breadcrumbs,.tip{display:none !important}
  body{background:#fff}
  .zk-main{padding:0}
  .zk-card,.zk-result-card{border:1px solid #ccc;background:#fff}
  .zk-amount{color:#000}
  .zk-print-head{display:block !important;margin-bottom:16px;font-family:var(--sans)}
  .zk-print-head strong{font-size:18px}
}
.zk-print-head{display:none}

/* keep hover tooltips from widening the page on narrow screens */
.zk-main{overflow-x:clip}