/* ght-title */
/* GHH Title. (Root is .ght.gtt.) */
.ght.gtt { display: grid; gap: 10px; }
.ght.gtt .gtt__sub { font-size: 14px; font-weight: 700; color: var(--ght-blue-d); }
.ght.gtt .gtt__h { margin: 0; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--ght-ink); text-wrap: balance; }
.ght.gtt--s .gtt__h { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -.015em; }
.ght.gtt--m .gtt__h { font-size: clamp(28px, 2.8vw, 40px); }
.ght.gtt--l .gtt__h { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.03em; }
.ght.gtt--xl .gtt__h { font-size: clamp(40px, 5.6vw, 84px); font-weight: 900; line-height: .96; letter-spacing: -.04em; }
.ght.gtt .gtt__h u { text-decoration: none; color: var(--ght-blue); }
.ght.gtt .gtt__h a { color: inherit; text-decoration: none; }
.ght.gtt .gtt__after { max-width: 62ch; font-size: 17px; color: var(--ght-mute); }
.ght.gtt[style*="center"] .gtt__after, .elementor-widget-ght_title [style*="center"] .gtt__after { margin-inline: auto; }

/* zakat-advanced */
/* Advanced Zakat Calculator — SkyDonate Elementor widget
   Brand palette mirrors zakat-calculator-classic + zakat-preview:
   teal #2cb7d8, dark teal #0b3741, gold CTA #fdbb2b on dark text.
   Every visible field / border / control carries its own BEM class
   so admins can target it from Elementor Custom CSS.

   Why all the !important + ancestor chains: WP themes (Woodmart,
   Astra, Hello, etc.) ship blanket `input[type="number"] { ... }`
   and `button { ... }` rules that beat a single-class selector on
   specificity. We use `.skd-zakat-adv .skd-zakat-adv__X` (two classes
   = specificity 0,0,2,0) plus !important on layout-critical props
   (border, height, padding, background, color, font-size) so the
   widget renders consistently across themes. */

.skd-zakat-adv {
    --skd-accent:        #2cb7d8;
    --skd-accent-dark:   #2793ad;
    --skd-accent-text:   #ffffff;
    --skd-text:          #0b3741;
    --skd-muted:         rgba(11, 55, 65, 0.65);
    --skd-card-bg:       #ffffff;
    --skd-soft-bg:       #ebf9fc;
    --skd-soft-bg-2:     #d8eff5;
    --skd-border:        #b6cfd6;
    --skd-border-soft:   #ededed;
    --skd-cta-bg:        #fdbb2b;
    --skd-cta-bg-hover:  #fcda91;
    --skd-cta-text:      #0b3741;
    --skd-radius:        14px;
    --skd-radius-pill:   999px;

    box-sizing: border-box;
    color: var(--skd-text);
    background: var(--skd-card-bg);
    border: 1px solid var(--skd-border-soft);
    border-radius: var(--skd-radius);
    padding: 28px;
    max-width: 720px;
    margin: 0 auto;
    font-family: inherit;
}

.skd-zakat-adv *,
.skd-zakat-adv *::before,
.skd-zakat-adv *::after {
    box-sizing: border-box;
}

/* ── Hero ───────────────────────────────────────────────── */

.skd-zakat-adv__hero {
    margin: -28px -28px 20px;
    overflow: hidden;
    border-radius: var(--skd-radius) var(--skd-radius) 0 0;
    background: var(--skd-soft-bg);
}

.skd-zakat-adv .skd-zakat-adv__hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
}

.skd-zakat-adv__head {
    text-align: center;
    margin-bottom: 18px;
}

.skd-zakat-adv .skd-zakat-adv__title {
    margin: 0 0 6px !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--skd-text) !important;
    line-height: 1.25 !important;
}

.skd-zakat-adv .skd-zakat-adv__subtitle {
    margin: 0 !important;
    color: var(--skd-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
}

/* ── Progress bar ───────────────────────────────────────── */

.skd-zakat-adv__progress {
    width: 100%;
    height: 6px;
    background: var(--skd-soft-bg);
    border-radius: var(--skd-radius-pill);
    overflow: hidden;
    margin-bottom: 24px;
}

.skd-zakat-adv__progress-bar {
    height: 100%;
    background: var(--skd-accent);
    width: 0%;
    transition: width 240ms ease;
}

/* ── Stage / step container ─────────────────────────────── */

.skd-zakat-adv__stage {
    min-height: 200px;
}

.skd-zakat-adv .skd-zakat-adv__step-title {
    margin: 0 0 8px !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--skd-text) !important;
    line-height: 1.3 !important;
}

.skd-zakat-adv .skd-zakat-adv__step-body {
    margin: 0 0 18px !important;
    color: var(--skd-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* ── Buttons (resilient against theme button resets) ────── */

.skd-zakat-adv .skd-zakat-adv__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 12px 24px !important;
    border-radius: var(--skd-radius-pill) !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    background: var(--skd-accent) !important;
    color: var(--skd-accent-text) !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease !important;
}

.skd-zakat-adv .skd-zakat-adv__btn:hover,
.skd-zakat-adv .skd-zakat-adv__btn:focus {
    background: var(--skd-accent-dark) !important;
    color: var(--skd-accent-text) !important;
    border-color: transparent !important;
}

.skd-zakat-adv .skd-zakat-adv__btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: var(--skd-accent) !important;
}

.skd-zakat-adv .skd-zakat-adv__btn--ghost {
    background: transparent !important;
    color: var(--skd-text) !important;
    border: 1px solid var(--skd-border) !important;
}
.skd-zakat-adv .skd-zakat-adv__btn--ghost:hover,
.skd-zakat-adv .skd-zakat-adv__btn--ghost:focus {
    background: var(--skd-soft-bg) !important;
    color: var(--skd-text) !important;
    border-color: var(--skd-accent) !important;
}

.skd-zakat-adv .skd-zakat-adv__btn--link {
    background: transparent !important;
    color: var(--skd-accent) !important;
    border: 0 !important;
    padding: 8px 0 !important;
    font-weight: 600 !important;
}

.skd-zakat-adv__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--skd-border-soft);
}

.skd-zakat-adv__nav-spacer { flex: 1; }

/* ── Checklist (assets / liabilities) ───────────────────── */

.skd-zakat-adv__checklist {
    display: grid;
    gap: 10px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.skd-zakat-adv .skd-zakat-adv__check {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--skd-border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    background: var(--skd-card-bg) !important;
    color: var(--skd-text) !important;
    transition: border-color 160ms ease, background 160ms ease;
    width: 100% !important;
    margin: 0 !important;
}

.skd-zakat-adv .skd-zakat-adv__check:hover {
    border-color: var(--skd-accent) !important;
}

.skd-zakat-adv .skd-zakat-adv__check--selected {
    border-color: var(--skd-accent) !important;
    background: var(--skd-soft-bg) !important;
}

.skd-zakat-adv .skd-zakat-adv__check-label {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--skd-text) !important;
    line-height: 1.4 !important;
}

/* ── Amount inputs ──────────────────────────────────────── */

.skd-zakat-adv__field {
    display: block;
    margin-bottom: 14px;
}

.skd-zakat-adv .skd-zakat-adv__field-label {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--skd-text) !important;
    line-height: 1.4 !important;
}

.skd-zakat-adv .skd-zakat-adv__row-static-label {
    display: block;
    padding: 0 !important;
    margin: 0 0 6px !important;
    background: transparent !important;
    color: var(--skd-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.skd-zakat-adv__amount {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--skd-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--skd-card-bg);
}

.skd-zakat-adv__amount:focus-within {
    border-color: var(--skd-accent);
    box-shadow: 0 0 0 3px rgba(44, 183, 216, 0.18);
}

.skd-zakat-adv .skd-zakat-adv__amount-prefix {
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    background: var(--skd-soft-bg) !important;
    color: var(--skd-text) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-right: 1px solid var(--skd-border) !important;
    min-width: 44px !important;
    height: auto !important;
}

.skd-zakat-adv .skd-zakat-adv__amount-input {
    flex: 1 !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    padding: 12px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: var(--skd-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.skd-zakat-adv .skd-zakat-adv__amount-input:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.skd-zakat-adv .skd-zakat-adv__amount-input::-webkit-outer-spin-button,
.skd-zakat-adv .skd-zakat-adv__amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.skd-zakat-adv__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 10px;
}

.skd-zakat-adv .skd-zakat-adv__row-remove {
    background: transparent !important;
    border: 1px solid var(--skd-border) !important;
    color: var(--skd-muted) !important;
    width: 44px !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, color 160ms ease;
}
.skd-zakat-adv .skd-zakat-adv__row-remove:hover {
    border-color: var(--skd-accent) !important;
    color: var(--skd-text) !important;
    background: var(--skd-soft-bg) !important;
}

.skd-zakat-adv .skd-zakat-adv__add-row {
    display: block !important;
    background: transparent !important;
    border: 1px dashed var(--skd-border) !important;
    color: var(--skd-accent) !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    height: auto !important;
    width: 100% !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease !important;
}
.skd-zakat-adv .skd-zakat-adv__add-row:hover,
.skd-zakat-adv .skd-zakat-adv__add-row:focus {
    border-color: var(--skd-accent) !important;
    color: var(--skd-accent-dark) !important;
    background: var(--skd-soft-bg) !important;
}

/* ── Radio groups (nisab, pension type) ─────────────────── */

.skd-zakat-adv__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.skd-zakat-adv__radio-group--column { flex-direction: column; }

.skd-zakat-adv .skd-zakat-adv__radio {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    border: 1px solid var(--skd-border) !important;
    border-radius: var(--skd-radius-pill) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: var(--skd-text) !important;
    background: var(--skd-card-bg) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    transition: border-color 160ms ease, background 160ms ease;
}

.skd-zakat-adv .skd-zakat-adv__radio--selected {
    border-color: var(--skd-accent) !important;
    background: var(--skd-soft-bg) !important;
}

.skd-zakat-adv .skd-zakat-adv__radio-label {
    color: var(--skd-text) !important;
    font-weight: 500 !important;
}

/* ── Nisab panel (intro step — today's gold/silver values) ─ */

.skd-zakat-adv__nisab-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.skd-zakat-adv__nisab-card {
    padding: 14px 16px;
    border: 1px solid var(--skd-border);
    border-radius: 12px;
    background: var(--skd-soft-bg);
    text-align: center;
}

.skd-zakat-adv__nisab-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--skd-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.skd-zakat-adv__nisab-card-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--skd-accent-dark);
    line-height: 1.2;
    margin-bottom: 2px;
}

.skd-zakat-adv__nisab-card-weight {
    font-size: 0.8rem;
    color: var(--skd-muted);
}

@media (max-width: 420px) {
    .skd-zakat-adv__nisab-panel {
        grid-template-columns: 1fr;
    }
}

/* ── Toggle (mortgage opt-in, grams/value switch) ───────── */

.skd-zakat-adv .skd-zakat-adv__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border: 1px solid var(--skd-border) !important;
    border-radius: 12px !important;
    margin: 0 0 14px !important;
    background: var(--skd-card-bg) !important;
    width: 100% !important;
    cursor: pointer !important;
}

.skd-zakat-adv .skd-zakat-adv__toggle-label {
    color: var(--skd-text) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

.skd-zakat-adv .skd-zakat-adv__toggle-input {
    accent-color: var(--skd-accent) !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--skd-border) !important;
    background: var(--skd-card-bg) !important;
    box-shadow: none !important;
}

/* ── Running tally pill ─────────────────────────────────── */

.skd-zakat-adv__tally {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--skd-soft-bg-2);
    color: var(--skd-text);
    margin-bottom: 18px;
    font-weight: 700;
}

.skd-zakat-adv__tally-label  { color: var(--skd-text); }
.skd-zakat-adv__tally-amount { color: var(--skd-accent-dark); }

/* ── Summary table ──────────────────────────────────────── */

.skd-zakat-adv__summary {
    border: 1px solid var(--skd-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--skd-card-bg);
}

.skd-zakat-adv__summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--skd-border-soft);
    font-size: 0.95rem;
    color: var(--skd-text);
}

.skd-zakat-adv__summary-row:last-child { border-bottom: 0; }

.skd-zakat-adv__summary-name   { color: var(--skd-text); }
.skd-zakat-adv__summary-amount { color: var(--skd-text); font-weight: 600; }

.skd-zakat-adv__summary-row--total {
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 14px;
}

.skd-zakat-adv__summary-row--total .skd-zakat-adv__summary-amount {
    color: var(--skd-accent-dark);
}

.skd-zakat-adv__not-eligible {
    padding: 14px 18px;
    border: 1px solid var(--skd-border);
    border-radius: 12px;
    background: var(--skd-soft-bg);
    color: var(--skd-text);
    margin-bottom: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── Round-up choices ───────────────────────────────────── */

.skd-zakat-adv__roundup-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.skd-zakat-adv .skd-zakat-adv__roundup {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--skd-border) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    background: var(--skd-card-bg) !important;
    margin: 0 !important;
    width: 100% !important;
    transition: border-color 160ms ease, background 160ms ease;
}

.skd-zakat-adv .skd-zakat-adv__roundup--selected {
    border-color: var(--skd-accent) !important;
    background: var(--skd-soft-bg) !important;
}

.skd-zakat-adv__roundup-pick {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skd-zakat-adv .skd-zakat-adv__roundup-input {
    accent-color: var(--skd-accent) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 1px solid var(--skd-border) !important;
    background: var(--skd-card-bg) !important;
    box-shadow: none !important;
}

.skd-zakat-adv .skd-zakat-adv__roundup-label {
    font-weight: 500 !important;
    color: var(--skd-text) !important;
}

.skd-zakat-adv .skd-zakat-adv__roundup-amount {
    font-weight: 700 !important;
    color: var(--skd-accent-dark) !important;
    font-size: 1.05rem !important;
}

/* ── Give CTA (gold button — theme-resilient) ───────────── */

.skd-zakat-adv__give {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.skd-zakat-adv .skd-zakat-adv__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 36px !important;
    border-radius: var(--skd-radius-pill) !important;
    border: 0 !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: var(--skd-cta-bg) !important;
    color: var(--skd-cta-text) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background 160ms ease, opacity 160ms ease, transform 160ms ease !important;
}

.skd-zakat-adv .skd-zakat-adv__cta:hover,
.skd-zakat-adv .skd-zakat-adv__cta:focus {
    background: var(--skd-cta-bg-hover) !important;
    color: var(--skd-cta-text) !important;
}
.skd-zakat-adv .skd-zakat-adv__cta:active   { transform: translateY(1px); }
.skd-zakat-adv .skd-zakat-adv__cta:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.skd-zakat-adv .skd-zakat-adv__cta.is-loading { opacity: 0.7 !important; cursor: progress !important; }

.skd-zakat-adv .skd-zakat-adv__cta-icon { display: inline-flex !important; align-items: center !important; }
.skd-zakat-adv .skd-zakat-adv__cta-icon svg {
    fill: currentColor !important;
    width: 18px !important;
    height: 18px !important;
}
.skd-zakat-adv .skd-zakat-adv__cta-label { color: inherit !important; }

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 540px) {
    .skd-zakat-adv {
        padding: 20px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        max-width: none;
    }
    .skd-zakat-adv__hero {
        margin: -20px -20px 16px;
        border-radius: 0;
    }
    .skd-zakat-adv .skd-zakat-adv__title { font-size: 1.35rem !important; }
    .skd-zakat-adv .skd-zakat-adv__cta   { padding: 14px 28px !important; font-size: 1rem !important; }
}

/* ght-zcside */
/* GHH Zakat calculator side (root .ght.zcs): the checkout summary's mist column — calm blocks,
   hairline rules between them, ink headings, the blue for links. */
.ght.zcs { font-family: var(--ght-f); color: var(--ght-ink); }
.ght.zcs .zcs__body { display: grid; gap: 28px; }
.ght.zcs .zcs__toggle { display: none; }

/* phones and tablets: the checkout's summary bar — "Show today's Nisab ˅  £866" — the panel opens under it */
@media (max-width: 959px) {
	.ght.zcs .zcs__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 16px 21px; border: 0; border-radius: 0; background: none; color: var(--ght-ink); font: 600 15px/1.2 var(--ght-f); text-align: left; cursor: pointer; }
	.ght.zcs .zcs__toggle-t { display: inline-flex; align-items: center; gap: 8px; color: var(--ght-blue-d); }
	.ght.zcs .zcs__toggle i { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
	.ght.zcs.is-open .zcs__toggle i { transform: translateY(2px) rotate(-135deg); }
	.ght.zcs .zcs__toggle-v { flex: none; font-size: 17px; font-weight: 800; }
	.ght.zcs .zcs__body { display: none; padding: 4px 21px 28px; }
	.ght.zcs.is-open .zcs__body { display: grid; }
}
.ght.zcs .zcs__box + .zcs__box, .ght.zcs .zcs__promise + .zcs__box { padding-top: 28px; border-top: 1px solid #D3DDE3; }
.ght.zcs .zcs__h { margin: 0 0 14px; font: 700 18px/1.3 var(--ght-f); letter-spacing: -.01em; color: var(--ght-ink); }

/* today's nisab ([ghh_nisab] keeps its own inline styles: these win on the column) */
.ght.zcs .ghh-nisab { margin: 0; padding: 0; border: 0; background: none; text-align: left; font-family: var(--ght-ui); }
.ght.zcs .ghh-nisab__label { margin: 0 0 12px; font: 700 18px/1.3 var(--ght-f); letter-spacing: -.01em; text-transform: none; color: var(--ght-ink); }
.ght.zcs .ghh-nisab__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ght.zcs .ghh-nisab__item { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid #D3DDE3; border-radius: 12px; background: #fff; }
.ght.zcs .ghh-nisab__val { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ght-ink); }
.ght.zcs .ghh-nisab__sub { font-size: 13.5px; color: var(--ght-mute); }
.ght.zcs .ghh-nisab__note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--ght-mute); }

/* the four steps: numbered, title over a muted line */
.ght.zcs .zcs__steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: zcs; }
.ght.zcs .zcs__steps li { position: relative; display: grid; gap: 2px; padding-left: 38px; counter-increment: zcs; }
.ght.zcs .zcs__steps li::before { content: counter(zcs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #D3DDE3; border-radius: 50%; background: #fff; font-size: 13px; font-weight: 700; color: var(--ght-blue-d); }
.ght.zcs .zcs__steps b { font-size: 15px; font-weight: 700; line-height: 26px; }
.ght.zcs .zcs__steps span { font-size: 14px; line-height: 1.55; color: var(--ght-mute); }

/* the promise */
.ght.zcs .zcs__promise { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border: 1px solid #D3DDE3; border-radius: 12px; background: #fff; font-size: 14.5px; line-height: 1.55; }
.ght.zcs .zcs__promise svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ght-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ght.zcs .zcs__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ght-blue-d); text-decoration: none; }

/* guide links */
.ght.zcs .zcs__links { display: grid; margin: 0; padding: 0; list-style: none; }
.ght.zcs .zcs__links li + li { border-top: 1px solid #D3DDE3; }
.ght.zcs .zcs__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--ght-ink); text-decoration: none; }
.ght.zcs .zcs__link:hover, .ght.zcs .zcs__more:hover { color: var(--ght-blue); }
.ght.zcs .zcs__link svg, .ght.zcs .zcs__more svg { flex: none; width: 16px; height: 16px; }

/* elementor-post-3500 */
.elementor-3500 .elementor-element.elementor-element-0e4b157{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3500 .elementor-element.elementor-element-421255c{--display:flex;}.elementor-3500 .elementor-element.elementor-element-b9625fa .skd-zakat-adv{--skd-accent:#2cb7d8;--skd-accent-dark:#2793ad;--skd-accent-text:#FFFFFF;--skd-card-bg:#FFFFFF;--skd-soft-bg:#ebf9fc;--skd-soft-bg-2:#d8eff5;--skd-text:#0b3741;--skd-border:#b6cfd6;--skd-border-soft:#ededed;--skd-cta-bg:#fdbb2b;--skd-cta-bg-hover:#fcda91;--skd-cta-text:#0b3741;}.elementor-3500 .elementor-element.elementor-element-2020b63{--display:flex;}
/* base-desktop */
.elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-list-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-list-item-base{display:flex;flex-direction:row;gap:8px;}.elementor .e-list-item-marker-base{width:auto;height:1lh;display:flex;align-items:center;}.elementor .e-list-item-content-base{flex:1 1 auto;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-icon-open-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-carousel-base{position:relative;padding:0px;display:grid;grid-template-columns:repeat(1, 1fr);}.elementor .e-carousel-viewport-base{overflow:hidden;padding:0px;display:block;grid-column:1;grid-row:1;}.elementor .e-carousel-container-base{padding:0px;display:flex;}.elementor .e-carousel-slide-base{min-width:0px;position:relative;display:block;}.elementor .e-carousel-arrow-prev-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:0px;margin-inline-end:auto;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-prev-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:hover,.elementor .e-carousel-arrow-prev-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-prev-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-arrow-next-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:auto;margin-inline-end:0px;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-next-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:hover,.elementor .e-carousel-arrow-next-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-next-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-pagination-base{padding-block-start:16px;padding-block-end:16px;padding-inline-start:0px;padding-inline-end:0px;display:flex;gap:12px;grid-column:1;grid-row:2;justify-content:center;align-items:center;}.elementor .e-carousel-dot-base{width:6px;height:6px;min-width:6px;min-height:6px;cursor:pointer;padding-block-start:0px;padding-block-end:0px;padding-inline-start:0px;padding-inline-end:0px;border-radius:50%;border-width:0px;border-style:none;background-color:rgba(0, 0, 0, 0.2);display:inline-flex;appearance:none;}.elementor .e-carousel-dot-base:focus{background-color:rgba(0, 0, 0, 0.2);}.elementor .e-carousel-dot-base:hover,.elementor .e-carousel-dot-base:focus-visible{background-color:#000;}.elementor .e-carousel-dot-base.e--selected{background-color:#000;}.elementor .e-carousel-dot-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-controls-base{width:auto;margin-inline-start:auto;margin-inline-end:auto;display:flex;grid-column:1;grid-row:3;align-items:center;}.elementor .e-carousel-autoplay-play-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-play-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:hover,.elementor .e-carousel-autoplay-play-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-pause-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-pause-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:hover,.elementor .e-carousel-autoplay-pause-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;}.elementor .e-google-maps-base{width:100%;border-style:none;display:block;}
/* base-mobile */
@media (max-width:767px) {
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}
}
/* ght-zakatcalc */
/* ==========================================================================
 * GHH Toolkit — SkyDonate's Advanced Zakat Calculator (.skd-zakat-adv) in the GHH design system
 * (DESIGN-SYSTEM.md), on every page that shows it (/zakat/, /zakat/zakat-calculator/).
 *
 * A fixed height on phones and desktop (user): the card never grows or shrinks between steps (the
 * first step alone jumped 514 → 867px), so the page doesn't move under the donor and Back / Next are
 * always in the same place. The title and progress stay at the top, the step's own content scrolls
 * inside the card when it's long (nine asset types on a phone), and the buttons are pinned at the
 * bottom of it.
 *
 * SkyDonate's sheet colours everything through --skd-* variables and guards its controls with
 * `.skd-zakat-adv .x { … !important }`; GHH's values are its variables, and the few direct rules are
 * written `body .skd-zakat-adv …` with !important to win.
 * ======================================================================== */

/* !important: the widget's Elementor style settings set these same variables (post-<id>.css,
   `.elementor-<id> .elementor-element-<x> .skd-zakat-adv`, SkyDonate's teal) more specifically */
body .skd-zakat-adv {
	--skd-accent: var(--ght-blue) !important;
	--skd-accent-dark: var(--ght-blue-d) !important;
	--skd-accent-text: #fff !important;
	--skd-text: var(--ght-ink) !important;
	--skd-muted: var(--ght-mute) !important;
	--skd-card-bg: #fff !important;
	--skd-soft-bg: var(--ght-soft) !important;
	--skd-soft-bg-2: var(--ght-mist) !important;
	--skd-border: var(--ght-line) !important;
	--skd-border-soft: var(--ght-line) !important;
	--skd-cta-bg: var(--ght-blue) !important;
	--skd-cta-bg-hover: var(--ght-blue-d) !important;
	--skd-cta-text: #fff !important;
	--skd-radius: var(--ght-r-l) !important;
	/* the fixed size, like an app (user: as calculate-ga3.nzf.org.uk): 440px wide, tall enough for
	   most steps, never taller than the screen under the header */
	/* 600px (was 720): the first step left ~300px of white under its choices (user: "massive spacing") */
	--zc-h: min(600px, calc(100svh - var(--ght-hdr) - 48px));

	display: flex;
	flex-direction: column;
	width: 100%;
	height: var(--zc-h);
	min-height: 500px;
	max-width: 440px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ght-line);
	border-radius: var(--ght-r-l);
	background: #fff;
	font-family: var(--ght-ui);
}
/* top: the progress, a thin line along the card's top edge; the widget's own title is left to the
   section around it (the step's title heads the card, as in an app) */
body .skd-zakat-adv .skd-zakat-adv__hero, body .skd-zakat-adv .skd-zakat-adv__head { display: none; }
body .skd-zakat-adv .skd-zakat-adv__progress { flex: none; width: auto; height: 4px; margin: 0; border-radius: 0; background: var(--ght-mist); }
body .skd-zakat-adv .skd-zakat-adv__progress-bar { border-radius: 0 999px 999px 0; }
/* middle: the step, scrolling inside the card when it's long */
body .skd-zakat-adv .skd-zakat-adv__stage { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 22px 24px 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body .skd-zakat-adv .skd-zakat-adv__stage > * { flex-shrink: 0; }
/* the step's name heads the card, centred */
body .skd-zakat-adv .skd-zakat-adv__step-title { margin: 0 0 16px !important; padding-bottom: 16px; border-bottom: 1px solid var(--ght-line); font: 700 22px/1.3 var(--ght-ui) !important; letter-spacing: -.01em; text-align: center; color: var(--ght-ink) !important; }
body .skd-zakat-adv .skd-zakat-adv__step-body { margin: 0 0 18px !important; font: 400 15px/1.55 var(--ght-ui) !important; color: var(--ght-ink-2) !important; }
/* bottom: Back / Next pinned to the card's foot while the step scrolls above it */
/* (margin-top: auto puts them at the foot of a short step too) */
body .skd-zakat-adv .skd-zakat-adv__nav { position: sticky; bottom: 0; z-index: 2; gap: 10px; margin: auto -24px 0; padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); background: #fff; }
/* the way forward is the wide button (Next / Start / See my Zakat); Back is a compact outline beside it */
body .skd-zakat-adv .skd-zakat-adv__nav .skd-zakat-adv__nav-spacer { display: none; }
body .skd-zakat-adv .skd-zakat-adv__nav .skd-zakat-adv__btn:not(.skd-zakat-adv__btn--ghost) { flex: 1; }

/* buttons: the site's pills */
body .skd-zakat-adv .skd-zakat-adv__btn { min-height: 52px; padding: 0 24px !important; font: 600 16px/1 var(--ght-ui) !important; }
body .skd-zakat-adv .skd-zakat-adv__btn--ghost { border-color: var(--ght-line) !important; }
body .skd-zakat-adv .skd-zakat-adv__btn--ghost:hover, body .skd-zakat-adv .skd-zakat-adv__btn--ghost:focus { border-color: var(--ght-line) !important; background: var(--ght-mist) !important; }
body .skd-zakat-adv .skd-zakat-adv__btn:focus:not(:focus-visible) { outline: none; }
body .skd-zakat-adv .skd-zakat-adv__btn:focus-visible, body .skd-zakat-adv .skd-zakat-adv__cta:focus-visible { outline: 2px solid var(--ght-blue) !important; outline-offset: 2px; }

/* choices: bordered rows, the chosen one light blue with a blue ring */
body .skd-zakat-adv .skd-zakat-adv__checklist { gap: 8px; }
body .skd-zakat-adv .skd-zakat-adv__check, body .skd-zakat-adv .skd-zakat-adv__toggle, body .skd-zakat-adv .skd-zakat-adv__roundup { min-height: 52px; padding: 12px 16px !important; border-radius: var(--ght-r-m) !important; }
body .skd-zakat-adv :is(.skd-zakat-adv__check--selected, .skd-zakat-adv__radio--selected, .skd-zakat-adv__roundup--selected) { box-shadow: inset 0 0 0 .5px var(--ght-blue) !important; }
body .skd-zakat-adv .skd-zakat-adv__check-label, body .skd-zakat-adv .skd-zakat-adv__toggle-label { font: 500 15px/1.4 var(--ght-ui) !important; }
body .skd-zakat-adv .skd-zakat-adv__radio { min-height: 48px; padding: 0 18px !important; font: 500 15px var(--ght-ui) !important; }
body .skd-zakat-adv :is(.skd-zakat-adv__check-input, .skd-zakat-adv__toggle-input, .skd-zakat-adv__roundup-input) { accent-color: var(--ght-blue) !important; }

/* amounts */
body .skd-zakat-adv .skd-zakat-adv__field-label, body .skd-zakat-adv .skd-zakat-adv__row-static-label { font: 600 14px/1.4 var(--ght-ui) !important; color: var(--ght-ink) !important; }
body .skd-zakat-adv .skd-zakat-adv__amount { min-height: 48px; border-radius: var(--ght-r-s); }
body .skd-zakat-adv .skd-zakat-adv__amount:focus-within { border-color: var(--ght-blue); box-shadow: none; }
body .skd-zakat-adv .skd-zakat-adv__amount-prefix { background: var(--ght-page) !important; font: 600 16px var(--ght-ui) !important; }
body .skd-zakat-adv .skd-zakat-adv__amount-input { font: 400 16px var(--ght-ui) !important; }
body .skd-zakat-adv .skd-zakat-adv__row-remove { border-radius: var(--ght-r-s) !important; }
/* a row with no remove button: the field takes the whole width (it stopped 8px short) */
body .skd-zakat-adv .skd-zakat-adv__row:not(:has(.skd-zakat-adv__row-remove)) { grid-template-columns: minmax(0, 1fr); }
/* "+ add another": a quiet bordered row, not dashed */
body .skd-zakat-adv .skd-zakat-adv__add-row { min-height: 48px; border: 1px solid var(--ght-line) !important; border-radius: var(--ght-r-s) !important; color: var(--ght-blue-d) !important; font: 600 15px var(--ght-ui) !important; }

/* today's nisab: calm cards, no tracked capitals */
body .skd-zakat-adv .skd-zakat-adv__nisab-card { padding: 14px 16px; border-radius: var(--ght-r-m); background: #fff; text-align: left; }
body .skd-zakat-adv .skd-zakat-adv__nisab-card-title { margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); }
body .skd-zakat-adv .skd-zakat-adv__nisab-card-amount { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ght-ink); }
body .skd-zakat-adv .skd-zakat-adv__nisab-card-weight { font-size: 13px; }

/* running total, summary and result */
body .skd-zakat-adv .skd-zakat-adv__tally { padding: 14px 16px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: var(--ght-page); font-weight: 600; }
body .skd-zakat-adv .skd-zakat-adv__tally-amount { font-weight: 700; color: var(--ght-ink); }
body .skd-zakat-adv .skd-zakat-adv__summary { padding: 6px 18px; border-radius: var(--ght-r-m); }
body .skd-zakat-adv .skd-zakat-adv__summary-row { padding: 12px 0; font-size: 15px; }
body .skd-zakat-adv .skd-zakat-adv__summary-row--total { font-size: 18px; }
body .skd-zakat-adv .skd-zakat-adv__summary-row--total .skd-zakat-adv__summary-amount { color: var(--ght-ink); font-size: 22px; letter-spacing: -.01em; }
body .skd-zakat-adv .skd-zakat-adv__not-eligible { border-radius: var(--ght-r-m); font-size: 15px; }
body .skd-zakat-adv .skd-zakat-adv__roundup-amount { color: var(--ght-ink) !important; font-size: 16px !important; }
/* the gift button: the site's one blue action, full width */
body .skd-zakat-adv .skd-zakat-adv__give { padding-top: 4px; }
body .skd-zakat-adv .skd-zakat-adv__cta { width: 100% !important; min-height: 52px; padding: 0 28px !important; font: 600 17px/1 var(--ght-ui) !important; }

/* ── the calculator page (/zakat/zakat-calculator/, its band is .ght-zc-band): a working page, so
   tighter than the site's 120px sections (user: "massive spacing, I don't like it") ── */
.e-con.ght-zc-band { --padding-top: clamp(32px, 4vw, 56px); --padding-bottom: clamp(40px, 4.5vw, 64px); }
body:has(.ght-zc-band) .ght.phero--plain { padding-bottom: clamp(32px, 4vw, 56px); }
body:has(.ght-zc-band) .ght.sec { padding: clamp(48px, 5.5vw, 80px) 0; }

/* ── the Zakat page's calculator section (.ght-zc-split, build/ght-build-zakat.php): heading and
   today's nisab beside the card on desktop, instead of a lone 440px card in a wide empty section ── */
.e-con.ght-zc-split .ght.gtt { margin-bottom: 20px; }
/* today's nisab ([ghh_nisab], mu-plugin with its own inline styles): two calm figures */
.e-con.ght-zc-split .ghh-nisab { max-width: 520px; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-family: var(--ght-ui); }
.e-con.ght-zc-split .ghh-nisab__label { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); }
.e-con.ght-zc-split .ghh-nisab__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: stretch; }
.e-con.ght-zc-split .ghh-nisab__item { gap: 2px; padding: 16px 18px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; }
.e-con.ght-zc-split .ghh-nisab__val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ght-ink); }
.e-con.ght-zc-split .ghh-nisab__sub { font-size: 14px; color: var(--ght-mute); }
.e-con.ght-zc-split .ghh-nisab__note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--ght-mute); }
.e-con.ght-zc-split .elementor-widget-shortcode { margin-bottom: 24px; }
/* stacked (tablets, phones): the card uses the section's width rather than a narrow column in the middle */
@media (max-width: 959px) {
	.e-con.ght-zc-split .skd-zakat-adv { max-width: none; }
}
@media (min-width: 960px) {
	.e-con.ght-zc-split > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 6vw, 104px); align-items: start; }
	.e-con.ght-zc-split > .e-con-inner > .elementor-widget-ght_title { grid-column: 1; grid-row: 2; }
	.e-con.ght-zc-split > .e-con-inner > .elementor-widget-shortcode { grid-column: 1; grid-row: 3; margin-bottom: 0; }
	.e-con.ght-zc-split > .e-con-inner > .elementor-widget-skyweb_donation_zakat_advanced { grid-column: 2; grid-row: 1 / -1; }
	/* the heading's own wrap is the column here, not a second page width */
	.e-con.ght-zc-split .ght.gtt .wrap { padding: 0; }
}

@media (max-width: 760px) {
	/* phones: the card fills the screen under the header (an app screen), inside the page margins */
	body .skd-zakat-adv { --zc-h: calc(100svh - var(--ght-hdr) - 24px); min-height: 480px; max-width: none; border-left: 1px solid var(--ght-line); border-right: 1px solid var(--ght-line); }
	body .skd-zakat-adv .skd-zakat-adv__stage { padding: 18px 18px 0; }
	body .skd-zakat-adv .skd-zakat-adv__step-title { padding-bottom: 14px; font-size: 20px !important; }
	body .skd-zakat-adv .skd-zakat-adv__nav { margin: auto -18px 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
	body .skd-zakat-adv .skd-zakat-adv__nisab-panel { grid-template-columns: 1fr 1fr; gap: 8px; }
}
body .skd-zakat-adv .skd-zakat-adv__btn:not(.skd-zakat-adv__btn--ghost) { background-color: var(--ght-btn) !important; }
body .skd-zakat-adv .skd-zakat-adv__btn:not(.skd-zakat-adv__btn--ghost):hover { background-color: var(--ght-blue-d) !important; }

/* ght-zakatpage */
/* GHH Toolkit — the Zakat calculator page (GHT_Zakatpage), laid out like the checkout (ght-checkout.css):
 * the slim bar with the logo and basket; the page splits at the centre line — the title and the
 * calculator on white, flush to the divider, on the left; the side panel (ght_zcside) on a mist column
 * to the right edge and the full height. Stacked on tablets and phones, calculator first.
 *
 * The page is an Elementor Canvas page: .e-con.ght-zc > .e-con.ght-zc__main + .e-con.ght-zc__side.
 * `body.ght-zc-page .e-con…` out-ranks Elementor's own container rules. */

body.ght-zc-page { --ght-hdr: 77px; --zc-l: 580px; --zc-r: 440px; --zc-g: 38px; --zc-line: #D3DDE3; margin: 0; background: #fff; color: var(--ght-ink); font: 400 16px/1.5 var(--ght-f); -webkit-font-smoothing: antialiased; }

/* ---------- bar (the checkout's) ---------- */
.ght-zcbar { border-bottom: 1px solid var(--zc-line); background: #fff; }
.ght-zcbar__in { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 max(21px, calc(50vw - var(--zc-g) - var(--zc-r))) 0 max(21px, calc(50vw - var(--zc-g) - var(--zc-l))); }
.ght-zcbar__logo { display: inline-flex; }
.ght-zcbar__logo img { display: block; width: 236px; height: auto; }
.ght-zcbar__bag { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -9px; border-radius: 50%; color: var(--ght-ink); }
.ght-zcbar__bag:hover { background: var(--ght-mist); }
.ght-zcbar__bag svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the split ---------- */
body.ght-zc-page .e-con.ght-zc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: calc(100vh - 77px); margin: 0; padding: 0; }
body.ght-zc-page .e-con.ght-zc > .e-con { display: flex; flex-direction: column; width: auto; min-width: 0; margin: 0; }
body.ght-zc-page .e-con.ght-zc > .ght-zc__main { align-items: flex-end; padding: 32px var(--zc-g) 32px 21px; }
body.ght-zc-page .e-con.ght-zc > .ght-zc__side { align-items: flex-start; padding: 32px 21px 32px var(--zc-g); border-left: 1px solid var(--zc-line); background: var(--ght-mist); }
body.ght-zc-page .e-con.ght-zc > .ght-zc__main > .elementor-element { width: 100%; max-width: var(--zc-l); }
body.ght-zc-page .e-con.ght-zc > .ght-zc__side > .elementor-element { width: 100%; max-width: var(--zc-r); }

/* the title over the calculator; the card uses the column's width, not a 440px card in the middle */
body.ght-zc-page .ght-zc__main .elementor-widget-ght_title { flex: none; margin-bottom: 24px; }
body.ght-zc-page .ght-zc__main .ght.gtt .wrap { padding: 0; }
body.ght-zc-page .ght-zc__main .skd-zakat-adv { max-width: none; margin: 0; }

/* ---------- a fixed-height page, like an app (user): the page never scrolls; the calculator card fills
   the screen under its title with Back / Next / Start pinned at its foot, and the side panel scrolls in
   its own column. Short windows (under 560px) scroll as a normal page. ---------- */
@media (min-height: 560px) {
	/* no height: 100% here — with the admin bar's 32px margin on <html> the page was a screen plus 32px
	   tall, so it sat 32px up (the logo under the admin bar, a strip at the foot). The split's own
	   height (screen − bar − admin bar) makes the page exactly one screen. */
	html:has(body.ght-zc-page), body.ght-zc-page { overflow: hidden; }
	body.ght-zc-page .e-con.ght-zc { height: calc(100dvh - 77px - var(--wp-admin--admin-bar--height, 0px)); min-height: 0; }
	body.ght-zc-page .e-con.ght-zc > .e-con { min-height: 0; }
	/* min-width 0 all the way down: as flex items they'd otherwise grow to their widest step and slide
	   the card off the side of a phone */
	body.ght-zc-page .ght-zc__main .elementor-widget-skyweb_donation_zakat_advanced { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
	body.ght-zc-page .ght-zc__main .elementor-widget-skyweb_donation_zakat_advanced > .elementor-widget-container { display: flex; flex: 1; width: 100%; min-width: 0; min-height: 0; }
	/* the whole height of the column, on every screen: the button bar then sits at the foot of the
	   screen and never moves between steps (a 720px cap moved it up when the title hid; user) */
	body.ght-zc-page .ght-zc__main .skd-zakat-adv { --zc-h: auto; flex: 1 1 0; width: 100%; height: auto; min-width: 0; min-height: 0; max-height: none; }
	body.ght-zc-page .e-con.ght-zc > .ght-zc__side { overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-height: 560px) and (max-width: 760px) {
	body.ght-zc-page .e-con.ght-zc { height: calc(100dvh - 65px - var(--wp-admin--admin-bar--height, 0px)); }
}

/* ---------- stacked: tablets and phones (as the checkout: the summary bar first, then the form) ---------- */
@media (max-width: 959px) {
	body.ght-zc-page .e-con.ght-zc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
	body.ght-zc-page .e-con.ght-zc > .ght-zc__main { order: 2; align-items: center; padding: 24px 21px 0; }
	/* the panel is the "Show today's Nisab" bar under the logo bar; it opens over the calculator */
	body.ght-zc-page .e-con.ght-zc > .ght-zc__side { order: 1; position: relative; z-index: 5; align-items: stretch; padding: 0; border-left: 0; border-bottom: 1px solid var(--zc-line); overflow: visible; }
	body.ght-zc-page .e-con.ght-zc > .ght-zc__side > .elementor-element { max-width: none; }
	body.ght-zc-page .ght.zcs.is-open .zcs__body { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--zc-line); background: var(--ght-mist); box-shadow: 0 18px 30px -18px rgba(11, 35, 52, .35); }
	/* the card runs to the foot of the screen: its buttons sit on the bottom edge, above the home bar */
	body.ght-zc-page .ght-zc__main .skd-zakat-adv { max-height: none; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
@media (max-width: 960px) and (max-height: 559px) {
	body.ght-zc-page .ght-zc__main { padding-bottom: 24px; }
}
@media (max-width: 760px) {
	body.ght-zc-page { --ght-hdr: 65px; }
	.ght-zcbar__in { height: 64px; padding: 0 21px; }
	.ght-zcbar__logo img { width: 190px; }
	body.ght-zc-page .e-con.ght-zc > .ght-zc__main { padding: 14px 16px 0; }
	/* a working screen: a small title and no intro */
	body.ght-zc-page .ght-zc__main .elementor-widget-ght_title { margin-bottom: 12px; }
	body.ght-zc-page .ght-zc__main .ght.gtt .gtt__h { font-size: 26px; }
	body.ght-zc-page .ght-zc__main .ght.gtt .gtt__after { display: none; }
}

/* Elementor lets a container wrap; in a fixed-height column a tall step wrapped the calculator into a
   second column, off the side of the screen */
body.ght-zc-page .e-con.ght-zc > .e-con { flex-wrap: nowrap; }

/* ---------- the calculator as part of the page, in the checkout's look (user: "not a widget in a frame") ----------
   No card: the progress line, the step heading, the answers as checkout fields (hairline, 5px corners,
   ink on the chosen one) and the buttons on a bar pinned to the foot of the column. The step scrolls
   between the heading and the bar when it is long. */
body.ght-zc-page .skd-zakat-adv { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__progress { flex: none; height: 3px; margin: 0 0 24px; border-radius: 3px; background: #E3EAEE; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__progress-bar { border-radius: 3px; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__stage { padding: 0 !important; scrollbar-width: thin; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__step-title { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; font: 700 21px/1.3 var(--ght-f) !important; letter-spacing: -.015em; text-align: left !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__step-body { margin: 0 0 20px !important; font: 400 15px/1.55 var(--ght-f) !important; color: var(--ght-mute) !important; }
/* answers: the checkout's fields */
body.ght-zc-page .skd-zakat-adv :is(.skd-zakat-adv__check, .skd-zakat-adv__toggle, .skd-zakat-adv__roundup, .skd-zakat-adv__radio, .skd-zakat-adv__nisab-card, .skd-zakat-adv__amount, .skd-zakat-adv__add-row) { border: 1px solid var(--zc-line) !important; border-radius: 5px !important; background: #fff !important; box-shadow: none !important; }
body.ght-zc-page .skd-zakat-adv :is(.skd-zakat-adv__check, .skd-zakat-adv__toggle, .skd-zakat-adv__roundup) { min-height: 54px; }
body.ght-zc-page .skd-zakat-adv :is(.skd-zakat-adv__check--selected, .skd-zakat-adv__radio--selected, .skd-zakat-adv__roundup--selected) { border-color: var(--ght-ink) !important; box-shadow: inset 0 0 0 1px var(--ght-ink) !important; background: #fff !important; }
body.ght-zc-page .skd-zakat-adv :is(.skd-zakat-adv__check-input, .skd-zakat-adv__toggle-input, .skd-zakat-adv__roundup-input, input[type="radio"]) { accent-color: var(--ght-ink) !important; }
body.ght-zc-page .skd-zakat-adv :is(.skd-zakat-adv__check-label, .skd-zakat-adv__toggle-label, .skd-zakat-adv__radio) { font-family: var(--ght-f) !important; color: var(--ght-ink) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__amount { min-height: 52px; overflow: hidden; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__amount:focus-within { border-color: var(--ght-ink) !important; box-shadow: 0 0 0 1px var(--ght-ink) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__amount-prefix { background: var(--ght-mist) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__tally { border: 0 !important; border-radius: 5px !important; background: var(--ght-mist) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__summary-row { border-color: var(--zc-line) !important; }
/* the bar of buttons: pinned to the foot of the column, a hairline above (as the checkout's sections) */
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__nav { margin: auto 0 0 !important; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--zc-line) !important; background: #fff !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__stage > .skd-zakat-adv__nav:not(:first-child) { margin-top: auto !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__btn, body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__cta { height: 56px; min-height: 56px; border-radius: 5px !important; font: 700 17px/1 var(--ght-f) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__btn--ghost { border: 1px solid var(--zc-line) !important; background: #fff !important; color: var(--ght-ink) !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__btn:disabled { opacity: .45; }
@media (max-width: 760px) {
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__progress { margin-bottom: 18px; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__step-title { font-size: 20px !important; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__nav { padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* the tick lists (what you own / what you owe) in two columns: nine choices in five rows fit the screen,
   so the step doesn't scroll (user) */
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check { min-height: 52px; height: 100%; margin: 0 !important; padding: 10px 14px !important; }
body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check-label { font-size: 14.5px !important; line-height: 1.3 !important; }
@media (max-width: 760px) {
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist { gap: 6px !important; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check { min-height: 48px; padding: 8px 10px !important; gap: 8px !important; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check-label { font-size: 13.5px !important; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__step-body { margin-bottom: 14px !important; font-size: 14px !important; }
}

/* once the donor has started (zcside.js sets .zc-started on the first step change), the big title and
   its intro give their room to the step: the lists fit without scrolling on laptops and phones */
body.ght-zc-page.zc-started .ght-zc__main .elementor-widget-ght_title { display: none; }
@media (max-width: 760px) {
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check { min-height: 44px; padding: 6px 10px !important; }
	body.ght-zc-page.zc-started .e-con.ght-zc > .ght-zc__main { padding-top: 16px; }
}
/* very short screens (iPhone SE): the one-line instruction under the step heading goes, the rows tighten */
@media (max-width: 760px) and (max-height: 620px) {
	body.ght-zc-page.zc-started .skd-zakat-adv .skd-zakat-adv__step-body { display: none; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__step-title { margin-bottom: 12px !important; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__checklist .skd-zakat-adv__check { min-height: 40px; }
	body.ght-zc-page .skd-zakat-adv .skd-zakat-adv__progress { margin-bottom: 14px; }
}