/* Deengen zakat calculator v2 (zakat-calculator.html only).
   Desktop: two columns, live result panel. Mobile (<= 820px): 4-step flow
   with a sticky stepper and a sticky result bar above the tab bar. */

.zk-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"main side" "more side";gap:20px;align-items:start}
.zk-main{grid-area:main;display:flex;flex-direction:column;gap:16px;min-width:0}
.zk-side{grid-area:side;position:sticky;top:84px;display:flex;flex-direction:column;gap:14px;min-width:0}
.zk-more{grid-area:more;display:flex;flex-direction:column;gap:16px;min-width:0}
.zk-step{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.zk-step .no{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#03130D;background:var(--mint);border-radius:5px;padding:2px 7px;font-weight:600}
.zk-step h2{font-size:17px;font-weight:600;outline:none}
.zk-help{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.6}
#zkApp [hidden]{display:none!important}
.zk-num{font-family:'IBM Plex Mono',monospace;direction:ltr;unicode-bidi:isolate}

/* ---------- explainer ---------- */
.zk-explain h3{font-size:16px;font-weight:600;margin:18px 0 6px}
.zk-explain p,.zk-explain li{font-size:14.5px;color:var(--muted);line-height:1.7}
.zk-explain ul{padding-inline-start:18px;margin-top:6px}

/* ---------- crypto rows ---------- */
.zk-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.7fr) 36px;gap:8px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.zk-row:first-child{padding-top:0}
.zk-row .field{margin-bottom:0;min-width:0}
.zk-row .field label{font-size:10.5px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zk-row .field input,.zk-row .field select{padding:10px 10px;font-size:13px}
.zk-row .custom{grid-column:1/-1;display:none}
.zk-row.is-custom .custom{display:block}
.zk-row .meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint)}
.zk-row .meta b{color:var(--text);font-weight:600;direction:ltr;unicode-bidi:isolate}
.zk-row .warn{grid-column:1/-1;font-size:12px;color:var(--amber);display:none}
.zk-row.is-fail .warn{display:block}
.zk-rhint{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.5;padding-inline-start:10px;border-inline-start:2px solid rgba(105,240,192,.35)}
.zk-del{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line-2);color:var(--faint)}
.zk-del:hover{color:var(--crimson);border-color:var(--crimson)}
.zk-del:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.zk-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:1px 6px;border-radius:4px;border:1px solid var(--line-2);color:var(--faint);margin-inline-start:4px}
.zk-tag.live{color:var(--mint);border-color:rgba(105,240,192,.3)}
.zk-tag.manual{color:var(--amber);border-color:rgba(242,196,90,.3)}
.zk-rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- fields ---------- */
.zk-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.zk-f2 .field{margin-bottom:0;min-width:0}
.field input[type=date]{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:14px;outline:none;color-scheme:dark;min-height:46px}
.field input[type=date]:focus{border-color:var(--mint)}
.field label.zk-oz,.zk-oz{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint)}
.zk-oz span{white-space:nowrap}
.field .zk-oz input,.zk-oz input{flex:1;width:auto;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:12.5px;outline:none}
.zk-oz input:focus{border-color:var(--mint)}
.zk-mem{margin-top:6px;font-size:11.5px;color:var(--faint);line-height:1.5;min-height:0}
.zk-mem.stale{color:var(--amber)}
.zk-mem button{all:unset;cursor:pointer;color:var(--mint);text-decoration:underline;text-underline-offset:2px;margin-inline-start:4px}
.zk-mem button:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:3px}

/* ---------- segmented radios ---------- */
.zk-radio,.zk-seg{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line-2);border-radius:9px;padding:4px}
.zk-radio label,.zk-seg label{flex:1;position:relative;margin:0!important;min-width:0}
.zk-radio input,.zk-seg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}
.zk-radio span,.zk-seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.3;color:var(--muted);padding:8px 6px;border-radius:6px;transition:background .15s,color .15s}
.zk-radio input:checked+span,.zk-seg input:checked+span{background:rgba(105,240,192,.12);color:var(--mint)}
.zk-radio input:focus-visible+span,.zk-seg input:focus-visible+span{outline:2px solid var(--mint)}
.zk-def{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.zk-seg input:checked+span .zk-def{color:rgba(105,240,192,.7)}

/* ---------- approach ---------- */
.zk-appr{border:0;padding:16px 0;margin:0;border-top:1px solid var(--line);min-width:0}
.zk-appr:first-of-type{border-top:0;padding-top:4px}
.zk-appr legend{float:left;width:100%;padding:0;margin-bottom:9px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);letter-spacing:.03em}
[dir=rtl] .zk-appr legend{float:right}
.zk-appr legend+*{clear:both}
.zk-differ{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:9px}
.zk-differ b{color:var(--text);font-weight:600}
.zk-appr-x{margin-top:10px}
.zk-appr-x[hidden]{display:none}
.zk-appr-x .field{margin-bottom:0}
.zk-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.zk-check input{margin-top:3px;accent-color:var(--mint);width:16px;height:16px;flex-shrink:0}
.zk-notfatwa{margin-top:16px;font-size:12.5px;color:var(--faint);line-height:1.6;border:1px dashed var(--line-2);border-radius:9px;padding:10px 12px}
.zk-notfatwa a{color:var(--mint)}
.zk-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:2px 0 10px}

/* ---------- result ---------- */
.zk-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:500;display:flex;justify-content:space-between;gap:8px;align-items:center}
.zk-est{font-size:10px;letter-spacing:.08em;border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;color:var(--muted)}
.zk-big{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;color:var(--mint);line-height:1.1;margin-top:6px;word-break:break-all;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir=rtl] .zk-big{text-align:right}
.zk-big.dim{color:var(--muted)}
.zk-lines{margin-top:14px;border-top:1px solid var(--line)}
.zk-lines>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.zk-lines>div>span:first-child{color:var(--muted)}
.zk-lines>div>span:last-child{font-family:'IBM Plex Mono',monospace;text-align:end;direction:ltr;unicode-bidi:isolate}
.zk-lines>div>span.mix{direction:inherit}
.zk-lines bdi{direction:ltr;unicode-bidi:isolate}
.zk-status{margin-top:12px;font-size:13px;line-height:1.55;border-radius:9px;padding:10px 12px;border:1px solid var(--line-2);color:var(--muted)}
.zk-status.ok{border-color:rgba(105,240,192,.3);color:var(--text);background:rgba(105,240,192,.05)}
.zk-status.no{border-color:rgba(242,196,90,.3);background:rgba(242,196,90,.05)}
.zk-status b{color:var(--text)}
.zk-actions{display:flex;flex-wrap:wrap;gap:8px}
.zk-msg{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint);min-height:16px}

/* ---------- hawl ---------- */
.zk-hmode{margin-bottom:14px}
.zk-hgrid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:12px}
.zk-hgrid .field,.zk-hrow .field{margin-bottom:0;min-width:0}
.zk-hrow{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.zk-hfrom{font-size:12.5px;color:var(--muted);margin-top:8px;min-height:18px}
.zk-next{margin-top:16px;border:1px solid rgba(105,240,192,.25);background:linear-gradient(180deg,rgba(105,240,192,.06),rgba(105,240,192,.015));border-radius:12px;padding:16px}
.zk-next .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.zk-next .h{font-size:21px;font-weight:600;margin-top:6px;line-height:1.25}
.zk-next .g{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--text);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.zk-next .in{color:#03130D;background:var(--mint);border-radius:5px;padding:1px 7px;font-size:11.5px;font-weight:600}
.zk-next .approx{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.zk-next ul{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:4px}
.zk-next li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.zk-next li span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--text);unicode-bidi:isolate;text-align:end}
.zk-hact{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.zk-hnote{font-size:12px;color:var(--faint);line-height:1.55;margin-top:10px}
.zk-hsaved{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint);margin-top:8px}
.zk-hsaved.ok{color:var(--mint)}

/* ---------- history ---------- */
.zk-hist-empty{font-size:13px;color:var(--muted);line-height:1.6;border:1px dashed var(--line-2);border-radius:10px;padding:14px}
.zk-histchart{height:170px;margin:4px 0 12px}
.zk-htable{width:100%;border-collapse:collapse;font-size:13px}
.zk-htable th{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:start;padding:6px 6px 8px;border-bottom:1px solid var(--line)}
.zk-htable td{padding:9px 6px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:middle}
.zk-htable td.n,.zk-htable th.n{text-align:end}
.zk-htable td.n,.zk-htable td.y{font-family:'IBM Plex Mono',monospace;color:var(--text);white-space:nowrap}
.zk-htable td.n span{direction:ltr;unicode-bidi:isolate}
.zk-htable td.d{font-size:12px;white-space:nowrap}
.zk-htable td.x{width:34px;text-align:end;padding-inline-end:0}
.zk-htable .zk-del{width:30px;height:30px;border-radius:7px}
.zk-htable tr.cur td.y{color:var(--mint)}

/* ---------- mobile flow (stepper + sticky bar) ---------- */
.zk-steps,.zk-bar{display:none}
.zk-stepnav{display:none}
@media(max-width:980px){
  .zk-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "more"}
  .zk-side{position:static}
}
@media(max-width:820px){
  .zk-flow .zk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:calc(54px + var(--dg-safe-t,0px));z-index:30;margin:-6px -16px 14px;padding:10px 12px 10px;background:rgba(6,8,10,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .zk-steps button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 2px 0;position:relative;min-width:0;-webkit-tap-highlight-color:transparent}
  .zk-steps button::before{content:"";position:absolute;top:13px;inset-inline-start:calc(-50% + 16px);inset-inline-end:calc(50% + 16px);height:1px;background:var(--line-2)}
  .zk-steps button:first-child::before{display:none}
  .zk-steps button.done::before,.zk-steps button.on::before{background:rgba(105,240,192,.55)}
  .zk-steps .c{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;border:1px solid var(--line-2);color:var(--faint);background:var(--panel);transition:all .2s}
  .zk-steps .t{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.25;color:var(--faint);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zk-steps button.done .c{border-color:rgba(105,240,192,.45);color:var(--mint)}
  .zk-steps button.on .c{background:var(--mint);border-color:var(--mint);color:#03130D;box-shadow:0 0 0 4px rgba(105,240,192,.14)}
  .zk-steps button.on .t{color:var(--text)}
  .zk-steps button:focus-visible .c{outline:2px solid var(--mint);outline-offset:3px}

  .zk-flow .zk-grid{display:block}
  .zk-flow [data-step]:not(.on){display:none!important}
  .zk-flow .zk-main,.zk-flow .zk-side,.zk-flow .zk-more{gap:14px}
  .zk-flow .zk-side.on{margin-bottom:14px}
  .zk-flow [data-step].on{animation:zkin .28s var(--dg-ease,ease) both}
  @keyframes zkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .zk-flow .zk-stepnav{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
  .zk-flow .zk-stepnav .btn{flex:1;justify-content:center}

  .zk-bar{position:fixed;left:0;right:0;bottom:calc(var(--dg-tab-h,60px) + var(--dg-safe-b,0px));z-index:65;padding:10px 12px;background:rgba(12,16,20,.96);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-top:1px solid var(--line-2);box-shadow:0 -10px 30px rgba(0,0,0,.35);align-items:center;gap:10px}
  .zk-flow-on .zk-bar{display:flex}
  .zk-flow-on .zk-bar.off{display:none}
  html.dg-kb .zk-bar{bottom:0}
  body.zk-flow-on{padding-bottom:calc(var(--dg-tab-h,60px) + var(--dg-safe-b,0px) + 66px)}
  html.dg-kb body.zk-flow-on{padding-bottom:70px}
  .zk-bar .bk{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 40px;height:44px;border-radius:10px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .zk-bar .bk[hidden]{display:none}
  .zk-bar .bk:focus-visible,.zk-bar .sum:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
  .zk-bar .sum{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:2px 2px}
  .zk-bar .sum .l{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden}
  .zk-bar .sum .l span:first-child{overflow:hidden;text-overflow:ellipsis}
  .zk-bar .pill{flex-shrink:0;font-size:9.5px;letter-spacing:.05em;padding:1px 6px;border-radius:4px;border:1px solid var(--line-2);color:var(--muted)}
  .zk-bar .pill.due{color:var(--mint);border-color:rgba(105,240,192,.4)}
  .zk-bar .pill.warn{color:var(--amber);border-color:rgba(242,196,90,.4)}
  .zk-bar .amt{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;color:var(--mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;unicode-bidi:isolate;text-align:start}
  [dir=rtl] .zk-bar .amt{text-align:right}
  .zk-bar .amt.dim{color:var(--text)}
  .zk-bar .nx{flex-shrink:0;height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:6px}
  .zk-bar .nx svg,.zk-bar .bk svg{width:16px;height:16px}
  [dir=rtl] .zk-bar .nx svg,[dir=rtl] .zk-bar .bk svg,[dir=rtl] .zk-stepnav svg{transform:scaleX(-1)}

  .zk-row{grid-template-columns:repeat(2,minmax(0,1fr)) 36px}
  .zk-row .f-asset{grid-column:1/3}
  .zk-row .zk-del{grid-column:3;grid-row:1}
  .zk-row .f-units{grid-column:1/2}
  .zk-row .f-price{grid-column:2/4}
  .zk-row .f-intent{grid-column:1/2}
  .zk-row .f-pct{grid-column:2/4}
  .zk-row .field label{font-size:11px}
  .zk-row .field input,.zk-row .field select{padding:11px 10px;font-size:14px;min-height:44px}
  .zk-f2{grid-template-columns:minmax(0,1fr)}
  .zk-big{font-size:30px}
  .zk-flow .pagehero{padding:28px 0 18px}
  .zk-flow .pagehero h1{font-size:28px}
  .zk-flow .pagehero p{font-size:15px;margin-top:10px}
  .panel.zk-p{padding:18px 16px}
}
@media(max-width:400px){
  .zk-seg span,.zk-radio span{font-size:11.5px;padding:8px 4px}
  .zk-hgrid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
  .zk-htable td.d,.zk-htable th.d{display:none}
}

/* ---------- printable worksheet ---------- */
#printSum{display:none}
@page{size:A4;margin:12mm 13mm}
@media print{
  html,body{background:#fff!important;color:#000!important}
  body{padding:0!important}
  body.blueprint::before,body.blueprint::after{display:none!important}
  header.site,footer.site,.sticky-cta,.announce,#cookieBar,.consentbar,.dg-tabbar,.dg-toasts,.zk-bar,.zk-steps,main>*:not(#printSum){display:none!important}
  #printSum{display:block!important;color:#111;font-family:Inter,Arial,sans-serif;font-size:10.5px;line-height:1.4;padding:0}
  #printSum .ws-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:8px}
  #printSum .ws-brand{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em}
  #printSum h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.01em}
  #printSum .ws-meta{font-size:10px;color:#333;text-align:end}
  #printSum h2{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#444;margin:10px 0 4px;font-weight:600}
  #printSum table{width:100%;border-collapse:collapse;margin:0;font-size:10px}
  #printSum th,#printSum td{border:1px solid #bbb;padding:3.5px 6px;text-align:start;vertical-align:top}
  #printSum thead th{background:#f1f3f4;font-weight:600}
  #printSum td.n,#printSum th.n{text-align:end;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
  #printSum .ws-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #printSum .ws-ass td:first-child{color:#444;width:42%}
  #printSum tr.tot th,#printSum tr.tot td{background:#f1f3f4;font-weight:700}
  #printSum .ws-due{margin-top:8px;border:2px solid #111;border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
  #printSum .ws-due b{font-size:17px;font-family:'IBM Plex Mono',monospace}
  #printSum .ws-pay{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px;margin-top:14px}
  #printSum .ws-pay div{border-bottom:1px solid #777;padding-top:16px;font-size:9.5px;color:#444}
  #printSum p{font-size:9.5px;color:#333;margin-top:8px;line-height:1.45}
  #printSum .ws-disc{border-top:1px solid #bbb;padding-top:6px;margin-top:12px}
  #printSum *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){.zk-flow [data-step].on{animation:none}}
#zkApp input[type=number]{-moz-appearance:textfield;appearance:textfield}
#zkApp input[type=number]::-webkit-inner-spin-button,#zkApp input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}