/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/* Quran CMS - zakat calculator */
.zc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.4rem; align-items: start; padding-bottom: 3rem; }
.zc-main { display: grid; gap: 1rem; }
.zc-card { padding: 0; overflow: hidden; }
.zc-card > .zc-grid, .zc-card > .zc-rows, .zc-card > .btn, .zc-card > p, .zc-card > .zc-nisab { margin: 0 1.2rem 1.1rem; }
.zc-card-h { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.zc-card-h::-webkit-details-marker { display: none; }
.zc-card-h h2 { font-size: 1.08rem; margin: 0; }
.zc-card-h small { color: var(--muted, #6b7f78); display: block; font-size: .82rem; margin-top: .1rem; }
.zc-card-h > div { flex: 1; min-width: 0; }
.zc-sub { color: var(--brand); font-size: .95rem; white-space: nowrap; }
details.zc-card[open] > .zc-card-h { border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
.zc-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.zc-i.gold { background: var(--gold-soft); color: var(--gold); }
.zc-i.silver { background: #eef1f4; color: #6b7a88; }
.zc-i.red { background: #fdecec; color: #b42318; }
.zc-prices .zc-card-h { cursor: default; border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
.zc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1rem; }
.zc-field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 600; }
.zc-field small { display: block; font-weight: 400; color: var(--muted, #6b7f78); }
.zc-money { position: relative; }
.zc-money input, .zc-row input, .zc-row select { width: 100%; padding: .62rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; }
.zc-money input:focus, .zc-row input:focus, .zc-row select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.zc-rows { display: grid; gap: .6rem; }
.zc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px minmax(90px, auto) 36px; gap: .5rem; align-items: center; }
[data-rows="silver"] .zc-row { grid-template-columns: minmax(0, 1fr) 120px minmax(90px, auto) 36px; }
.zc-row output { font-weight: 600; color: var(--brand); text-align: right; font-size: .9rem; }
.zc-nisab { display: grid; gap: .5rem; }
.zc-nisab > span { font-weight: 600; font-size: .9rem; }
.zc-nisab .pill-tabs { flex-wrap: wrap; }
.zc-minus .zc-sub { color: #b42318; }
.zc-notes { padding: 1.1rem 1.3rem; }
.zc-notes h3 { margin: 0 0 .5rem; font-size: 1rem; display: flex; gap: .4rem; align-items: center; }
.zc-notes ul { margin: 0 0 .6rem; padding-left: 1.2rem; color: var(--ink-2); font-size: .92rem; }
.zc-side { position: sticky; top: 90px; }
.zc-result { padding: 0; overflow: hidden; }
.zc-result-top { background: linear-gradient(135deg, var(--brand), #064536); color: #fff; padding: 1.3rem 1.3rem 1.1rem; position: relative; }
.zc-result-top small { opacity: .85; font-weight: 600; }
.zc-big { font-size: 2.1rem; font-weight: 800; line-height: 1.2; margin-top: .2rem; word-break: break-word; }
.zc-rate { position: absolute; top: 1rem; right: 1.1rem; background: rgba(255,255,255,.16); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; font-weight: 700; }
.zc-wrap.is-due .zc-result-top { background: linear-gradient(135deg, #b07a17, #6f4a08); }
.zc-break { width: calc(100% - 2.4rem); margin: .9rem 1.2rem 0; font-size: .88rem; border-collapse: collapse; }
.zc-break td { padding: .25rem 0; color: var(--ink-2); }
.zc-break td:last-child { text-align: right; font-weight: 600; }
.zc-line { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 1.2rem; border-top: 1px solid var(--line-2); font-size: .92rem; }
.zc-line:first-of-type { margin-top: .6rem; }
.zc-line.minus strong { color: #b42318; }
.zc-line.total { background: var(--surface-2); font-weight: 700; }
.zc-line small { color: var(--muted, #6b7f78); font-weight: 400; }
.zc-meter { height: 8px; background: var(--line-2); margin: .3rem 1.2rem .6rem; border-radius: 8px; overflow: hidden; }
.zc-meter span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 8px; transition: width .3s; }
.zc-meter span.full { background: var(--brand); }
.zc-result > p { margin: 0 1.2rem .8rem; color: var(--ink-2); }
.zc-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.2rem 1.2rem; }
.zc-result .btn-block { margin: 0 1.2rem 1.2rem; width: calc(100% - 2.4rem); }
/* "+ add more" rows, each with its own description */
.zc-card > .zc-extra, .zc-card > .zc-addx { margin: 0 1.2rem 1.1rem; }
.zc-extra { display: grid; gap: .6rem; }
.zc-xrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px; gap: .5rem; align-items: center; }
.zc-xrow input { width: 100%; padding: .62rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; }
.zc-xrow input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.zc-addx { border-style: dashed; }
/* name and date shown on the statement */
.zc-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; padding: .2rem 1.2rem .9rem; }
.zc-meta label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.zc-meta input { width: 100%; min-width: 0; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.zc-actions .btn[data-act="print"], .zc-actions .btn[data-act="image"] { flex: 1 1 140px; justify-content: center; }
.zc-print { display: none; }

/* ------------------------------------------------ the printed statement */
.zp { --zp: var(--brand, #0b6b55); --zg: #b8862b; --zi: #1d2a26; --zm: #5f716b; color: var(--zi); background: #fff; font-size: 10pt; line-height: 1.45;
      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.zp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-sizing: border-box; }
.zp-frame { position: relative; border: 2px solid var(--zg); padding: 0 8mm 5mm; overflow: hidden;
            background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b8862b' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M40 16l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='23' y='23' width='34' height='34' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E") repeat; }
.zp-frame::before { content: ''; position: absolute; inset: 1.4mm; border: .25mm solid var(--zg); pointer-events: none; z-index: 2; }
.zp-c { position: absolute; width: 14mm; height: 14mm; z-index: 3; pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23b8862b' stroke-width='2'%3E%3Cpath d='M3 57V3h54'/%3E%3Cpath d='M10 57V10h47'/%3E%3Cpath d='M10 34c13 0 24-11 24-24'/%3E%3C/g%3E%3Ccircle cx='21' cy='21' r='4' fill='%23b8862b'/%3E%3C/svg%3E") no-repeat center / contain; }
.zp-c.tl { top: 2.5mm; left: 2.5mm; }
.zp-c.tr { top: 2.5mm; right: 2.5mm; transform: scaleX(-1); }
.zp-c.bl { bottom: 2.5mm; left: 2.5mm; transform: scaleY(-1); }
.zp-c.br { bottom: 2.5mm; right: 2.5mm; transform: scale(-1); }
.zp-c.tl, .zp-c.tr { display: none; }
.zp-foot { position: relative; z-index: 4; }
.zp-head { display: flex; justify-content: space-between; align-items: center; gap: 6mm; padding: 4.5mm 9mm; margin: 0 -8mm;
           background: linear-gradient(135deg, var(--zp), #063d31); color: #fff; border-bottom: 1.4mm solid var(--zg); position: relative; }
.zp-brand { display: flex; align-items: center; gap: 4mm; min-width: 0; }
.zp-brand img { width: 17mm; height: 17mm; object-fit: contain; background: #fff; border-radius: 50%; padding: 1.8mm; border: .7mm solid var(--zg); flex: 0 0 auto; }
.zp-brand strong { display: block; font-size: 18pt; line-height: 1.2; }
.zp-brand small { display: block; opacity: .88; font-size: 9pt; }
.zp-contact { text-align: right; font-size: 8.5pt; opacity: .95; line-height: 1.6; }
.zp-title { text-align: center; margin: 3mm 0 3mm; }
.zp-bis { font-family: var(--font-ar, serif); font-size: 14pt; color: var(--zp); line-height: 1.8; direction: rtl; }
.zp-title h1 { margin: 0; font-size: 19pt; color: var(--zp); line-height: 1.3; }
.zp-title p { margin: .5mm 0 0; color: var(--zg); font-weight: 700; font-size: 9pt; letter-spacing: 2.5px; text-transform: uppercase; }
.zp-title p::before, .zp-title p::after { content: ''; display: inline-block; width: 14mm; height: .35mm; background: var(--zg); vertical-align: middle; margin: 0 3mm; }
.zp-meta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: .35mm solid #e4dcc8; border-radius: 3mm; overflow: hidden; margin-bottom: 4mm; background: #fbf6ea; }
.zp-meta > div { padding: 2.4mm 3.5mm; border-left: .35mm solid #e4dcc8; }
.zp-meta > div:first-child { border-left: 0; }
.zp-meta small { display: block; color: var(--zm); font-size: 7.5pt; letter-spacing: .4px; }
.zp-meta strong { display: block; font-size: 10pt; line-height: 1.35; }
.zp-meta em { display: block; font-style: normal; color: var(--zm); font-size: 8pt; }
.zp-ref { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; color: #8a6414; }
.zp-table { width: 100%; border-collapse: collapse; margin-bottom: 3.5mm; font-size: 9.8pt; }
.zp-table thead th { background: var(--zp); color: #fff; text-align: left; padding: 2mm 3mm; font-size: 8.5pt; letter-spacing: .4px; }
.zp-table thead th:last-child, .zp-table td:last-child, .zp-table .zp-sec th:last-child { text-align: right; white-space: nowrap; }
.zp-table td { padding: 1.1mm 3mm 1.1mm 7mm; border-bottom: .3mm dashed #e4dcc8; color: #33443f; }
.zp-table .zp-sec th { text-align: left; padding: 1.6mm 3mm; background: #eef5f1; color: var(--zp); border-top: .35mm solid #cfe2d8; font-size: 10.5pt; }
.zp-table .zp-sec.minus th { background: #fdf0ee; color: #b42318; border-top-color: #f3c9c2; }
.zp-table tr { break-inside: avoid; }
.zp-table .zp-empty { text-align: center; color: var(--zm); padding: 6mm; }
.zp-sum { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 5mm; align-items: stretch; break-inside: avoid; margin-bottom: 4mm; }
.zp-lines { border: .35mm solid #d5e5dd; border-radius: 3mm; background: #f4f9f6; padding: .5mm 4mm; }
.zp-lines div { display: flex; justify-content: space-between; gap: 3mm; padding: 1.4mm 0; border-bottom: .3mm solid #dfeae4; }
.zp-lines div:last-child { border-bottom: 0; }
.zp-lines .minus b { color: #b42318; }
.zp-lines .net { font-weight: 700; color: var(--zp); font-size: 11pt; }
.zp-due { position: relative; border-radius: 3mm; padding: 5mm; color: #fff; background: linear-gradient(135deg, #c99a3a, #7a4f0c); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.zp-due.none { background: linear-gradient(135deg, var(--zp), #063d31); }
.zp-due small { font-size: 9pt; opacity: .92; font-weight: 600; }
.zp-due strong { font-size: 21pt; line-height: 1.25; word-break: break-word; }
.zp-seal { position: absolute; right: 3mm; top: 3mm; width: 12mm; height: 12mm; border-radius: 50%; border: .45mm dashed rgba(255,255,255,.75); display: grid; place-items: center; font-size: 8pt; font-weight: 700; }
.zp-msg { margin: 0 0 3mm; padding: 2.4mm 4mm; border-left: 1.2mm solid var(--zg); background: #fbf6ea; font-size: 9.5pt; }
.zp-prices { font-size: 8.5pt; color: var(--zm); margin-bottom: 3.5mm; }
.zp-verse { text-align: center; padding: 2.5mm 0; border-top: .35mm solid #e4dcc8; border-bottom: .35mm solid #e4dcc8; margin-bottom: 3mm; break-inside: avoid; }
.zp-ar { font-family: var(--font-ar, serif); font-size: 15pt; direction: rtl; color: var(--zp); line-height: 1.9; }
.zp-verse p { margin: 0; font-size: 9pt; color: var(--zm); }
.zp-who { font-size: 8.5pt; break-inside: avoid; margin-bottom: 3mm; }
.zp-who b { color: var(--zp); }
.zp-who ol.bn { list-style-type: bengali; }
.zp-who ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8mm 3mm; margin: 1.5mm 0 0; padding-left: 5mm; }
.zp-foot { border-top: .5mm solid var(--zp); padding-top: 2mm; font-size: 7.8pt; color: var(--zm); }
.zp-foot p { margin: 0 0 1.5mm; }
.zp-foot div { display: flex; justify-content: space-between; gap: 3mm; }

@media (max-width: 960px) {
  .zc-wrap { grid-template-columns: 1fr; }
  .zc-side { position: static; order: -1; }
}
@media (max-width: 560px) {
  .zc-row, [data-rows="silver"] .zc-row { grid-template-columns: 1fr 1fr; }
  .zc-row output { grid-column: 1 / 2; text-align: left; }
  .zc-big { font-size: 1.7rem; }
  .zc-xrow { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 34px; gap: .4rem; }
}
@media print {
  @page { size: A4; margin: 8mm; }
  html, body { background: #fff !important; }
  body.page-zakat > *:not(main) { display: none !important; }
  body.page-zakat main > *:not(#zakat-app) { display: none !important; }
  #zakat-app { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; }
  #zakat-app > *:not(.zc-print) { display: none !important; }
  .zc-print { display: block !important; }
}