/* daily-giving */
/* ==========================================================================
   SkyDonate — Daily Giving widget (LaunchGood-style scheduled giving)
   ========================================================================== */

.skd-dg {
    --skd-dg-accent: #F59E0B;
    --skd-dg-ink: #451A03;
    --skd-dg-muted: #78716C;
    --skd-dg-welcome-top: #F6A83C;
    --skd-dg-welcome-bottom: #FFF9EC;
    --skd-dg-amount-top: #FDF3D5;
    --skd-dg-amount-bottom: #FFFFFF;
    --skd-dg-btn: #1D1F24;
    --skd-dg-border: #E7E5E4;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
    width: 100%;
    color: var(--skd-dg-ink);
}

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

/* ---------- steps ---------- */
.skd-dg__step {
    display: none;
    min-height: 640px;
    animation: skd-dg-fade .45s ease;
}
.skd-dg__step.is-active { display: flex; }
/* full-height flag: CSS fallback; JS sets the exact viewport-minus-header value */
.skd-dg--fullheight .skd-dg__step { min-height: 100vh; min-height: 100dvh; }

@keyframes skd-dg-fade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- welcome ---------- */
.skd-dg__step--welcome {
    background: linear-gradient(180deg, var(--skd-dg-welcome-top) 0%, var(--skd-dg-welcome-bottom) 100%);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
}
.skd-dg__welcome-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 540px;
    max-width: 560px;
    width: 100%;
}
.skd-dg__welcome-copy { margin-top: 18vh; }
.skd-dg__welcome-title {
    font-size: clamp(44px, 7vw, 72px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--skd-dg-ink);
}
.skd-dg__welcome-subtitle {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--skd-dg-ink);
}
.skd-dg__welcome-text {
    font-size: 14px;
    color: rgba(69, 26, 3, 0.75);
    max-width: 300px;
    margin: 0 auto;
}

/* ---------- amount ---------- */
.skd-dg__step--amount {
    background: linear-gradient(180deg, var(--skd-dg-amount-top) 0%, var(--skd-dg-amount-bottom) 82%);
    justify-content: center;
    padding: 32px 24px 48px;
}
.skd-dg__amount-inner {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.skd-dg__heading {
    font-size: clamp(20px, 5vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 30px;
    color: var(--skd-dg-ink);
    white-space: nowrap;
}

/* stepper */
.skd-dg__stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.skd-dg .skd-dg__step-btn {
    width: 56px !important;
    height: 56px !important;
    min-height: 0 !important;
    flex: 0 0 56px;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #D4D4D4 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
    color: var(--skd-dg-ink) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.skd-dg .skd-dg__step-btn:hover { background: #fff !important; }
.skd-dg__step-btn:active { transform: scale(0.94); }
.skd-dg__step-btn svg { width: 22px; height: 22px; }
.skd-dg__step-btn[disabled] { opacity: .35; cursor: default; }

.skd-dg__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    color: var(--skd-dg-ink);
}
.skd-dg__amount-symbol {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    line-height: 1;
}
.skd-dg .skd-dg__amount-input {
    width: 1.4ch;
    min-width: 1.4ch;
    max-width: 220px;
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: clamp(60px, 9vw, 84px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--skd-dg-ink) !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
    field-sizing: content;
}
.skd-dg .skd-dg__amount-input:focus { outline: none !important; box-shadow: none !important; }
.skd-dg__amount-input::-webkit-outer-spin-button,
.skd-dg__amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.skd-dg__tagline {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--skd-dg-ink);
    margin: 0 0 26px;
}

/* duration / end date */
.skd-dg__duration { margin-bottom: 22px; }
.skd-dg__duration-heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--skd-dg-ink);
}
.skd-dg__duration-chips {
    display: flex;
    gap: 10px;
}
.skd-dg__duration-chips .skd-dg__chip { flex: 1 1 0; }
.skd-dg__enddate { margin-top: 12px; }
.skd-dg .skd-dg__enddate-input {
    width: 100%;
    cursor: pointer;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--skd-dg-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--skd-dg-ink) !important;
}
.skd-dg .skd-dg__enddate-input:focus {
    outline: none !important;
    border-color: var(--skd-dg-accent) !important;
}
.skd-dg__enddate-summary {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--skd-dg-accent);
}

/* zakat card */
.skd-dg__zakat {
    background: #F7F5F2;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 26px;
    overflow: hidden;
}
.skd-dg__zakat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}
.skd-dg__zakat-head .skd-dg__zakat-toggle { margin-left: auto; }
.skd-dg__zakat-text {
    font-size: 14px;
    font-weight: 600;
    color: #57534E;
    margin: 0;
}

/* toggle switch */
.skd-dg__zakat-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
}
.skd-dg__zakat-toggle .skd-dg__zakat-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.skd-dg__zakat-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #D6D3D1;
    transition: background .18s ease;
    pointer-events: none;
}
.skd-dg__zakat-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform .18s ease;
}
.skd-dg__zakat-input:checked + .skd-dg__zakat-track { background: #16A34A; }
.skd-dg__zakat-input:checked + .skd-dg__zakat-track::after { transform: translateX(20px); }
.skd-dg__zakat-input:focus-visible + .skd-dg__zakat-track {
    outline: 2px solid #16A34A;
    outline-offset: 2px;
}

/* total */
.skd-dg__total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--skd-dg-ink);
    border-top: 1px solid var(--skd-dg-border);
    border-bottom: 1px solid var(--skd-dg-border);
    padding: 18px 0;
    margin: 18px 0 26px;
}
.skd-dg__total-value { font-weight: 800; }
.skd-dg__total-note {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--skd-dg-muted);
    white-space: nowrap;
}

/* CTA */
.skd-dg .skd-dg__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 17px 26px !important;
    border: none !important;
    border-radius: 999px !important;
    background: var(--skd-dg-btn) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: transform .12s ease, opacity .15s ease;
}
.skd-dg .skd-dg__cta:hover { opacity: .92; background: var(--skd-dg-btn) !important; color: #fff !important; }
.skd-dg__cta:active { transform: scale(0.985); }
.skd-dg__cta svg { width: 18px; height: 18px; }
.skd-dg__cta[disabled] { opacity: .6; cursor: wait; }
.skd-dg__cta.is-loading svg { display: none; }
.skd-dg__cta.is-loading::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: skd-dg-spin .7s linear infinite;
}
@keyframes skd-dg-spin { to { transform: rotate(360deg); } }

.skd-dg__welcome-cta .skd-dg__cta { max-width: 460px; margin: 0 auto; }

.skd-dg__footnote {
    text-align: center;
    font-size: 12px;
    color: var(--skd-dg-muted);
    margin: 12px 0 0;
}

/* error state */
.skd-dg__amount.is-invalid .skd-dg__amount-input { color: #DC2626; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    .skd-dg__step { min-height: 560px; }
    .skd-dg__welcome-copy { margin-top: 10vh; }
    .skd-dg__step--amount { padding: 24px 18px 40px; }
    .skd-dg .skd-dg__step-btn { width: 48px !important; height: 48px !important; flex-basis: 48px; }
}

/* shared quick-pick / segment chips (base — classic uses the accent fill) */
.skd-dg__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.skd-dg .skd-dg__chip {
    flex: 1 1 0;
    min-width: 64px;
    min-height: 0 !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--skd-dg-border) !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--skd-dg-ink) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.skd-dg .skd-dg__chip:hover { border-color: var(--skd-dg-accent) !important; }
.skd-dg .skd-dg__chip.is-active {
    border-color: var(--skd-dg-accent) !important;
    background: var(--skd-dg-accent) !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .skd-dg__step,
    .skd-dg--sky .skd-dg__step--welcome::before,
    .skd-dg--sky .skd-dg__step--welcome::after,
    .skd-dg--sky .skd-dg__welcome-copy,
    .skd-dg--sky .skd-dg__welcome-cta { animation: none !important; }
}

/* ==========================================================================
   SKY SKIN — minimal card (Claude Design "Daily Giving" redesign).
   Space Grotesk, near-black ink, a single green accent (#12A150).
   ========================================================================== */

.skd-dg--sky {
    --skd-dg-accent: #12A150;   /* the only green */
    --skd-dg-ink: #111111;
    --skd-dg-muted: #999999;
    --skd-dg-btn: #004F9F;       /* SkyDonate brand blue */
    --skd-dg-btn-hover: #003D7A;
    --skd-dg-border: #E6E6E6;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* amount step: frameless — content sits flat on a plain surface, no card */
.skd-dg--sky .skd-dg__step--amount {
    background: radial-gradient(130% 95% at 50% 0%, #E7EFFA 0%, #F4F8FD 45%, #FFFFFF 85%);
    padding: 24px 20px 40px;
    align-items: stretch;
}
.skd-dg--sky .skd-dg__amount-inner {
    max-width: 460px;
    background: none;
    padding: 0;
}
/* white panel wraps only the top controls; total + CTA + footnote sit below it */
.skd-dg--sky .skd-dg__panel {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(11, 37, 69, 0.08);
    padding: 30px 30px 26px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

/* drag handle hidden in the frameless layout */
.skd-dg__handle { display: none; }
.skd-dg__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.skd-dg--sky .skd-dg__header .skd-dg__heading {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}
.skd-dg__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--skd-dg-accent);
    white-space: nowrap;
}
.skd-dg__secure-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--skd-dg-accent);
}

/* fundraising progress bar (wired to the linked product's SkyDonate goal) */
.skd-dg--sky .skd-dg__goal { margin-bottom: 20px; }
.skd-dg__goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.skd-dg__goal-raised {
    font-size: 16px;
    font-weight: 700;
    color: var(--skd-dg-ink);
}
.skd-dg__goal-raised span {
    font-size: 12px;
    font-weight: 500;
    color: var(--skd-dg-muted);
}
.skd-dg__goal-target {
    font-size: 13px;
    font-weight: 600;
    color: var(--skd-dg-muted);
}
.skd-dg__goal-track {
    height: 8px;
    border-radius: 999px;
    background: #E7EFFA;
    overflow: hidden;
}
.skd-dg__goal-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--skd-dg-btn);
    transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

/* preset chips: black when chosen */
.skd-dg--sky .skd-dg__chips { gap: 8px; margin-bottom: 16px; }
.skd-dg--sky .skd-dg__chip {
    border-radius: 10px !important;
    border-color: var(--skd-dg-border) !important;
    font-size: 15px !important;
    padding: 12px 0 !important;
}
.skd-dg--sky .skd-dg__chip:hover { border-color: var(--skd-dg-btn) !important; }
.skd-dg--sky .skd-dg__chip.is-active {
    border-color: var(--skd-dg-btn) !important;
    background: var(--skd-dg-btn) !important;
    color: #fff !important;
}

/* stepper bar */
.skd-dg--sky .skd-dg__stepper {
    background: #F5F5F4;
    border-radius: 14px;
    padding: 9px 11px;
    gap: 8px;
    margin-bottom: 16px;
}
.skd-dg--sky .skd-dg__step-btn {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border-radius: 9px !important;
    border: none !important;
}
.skd-dg--sky .skd-dg__decrease {
    background: #fff !important;
    color: #666 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
}
.skd-dg--sky .skd-dg__decrease:hover { background: #F0F0EF !important; }
.skd-dg--sky .skd-dg__increase {
    background: var(--skd-dg-btn) !important;
    color: #fff !important;
}
.skd-dg--sky .skd-dg__increase:hover { background: var(--skd-dg-btn-hover) !important; }
.skd-dg--sky .skd-dg__step-btn svg { width: 16px; height: 16px; }
.skd-dg--sky .skd-dg__amount { gap: 2px; }
.skd-dg--sky .skd-dg__amount-symbol {
    font-size: 22px;
    font-weight: 700;
    color: var(--skd-dg-ink) !important;
}
.skd-dg--sky .skd-dg__amount-input {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--skd-dg-ink) !important;
    text-align: left !important;
    min-width: 0 !important;
    font-variant-numeric: tabular-nums;
}
.skd-dg__per-day {
    font-size: 13px;
    font-weight: 500;
    color: var(--skd-dg-muted);
    margin-left: 4px;
}

/* segment / chip labels keep their source casing (theme buttons capitalize) */
.skd-dg--sky .skd-dg__chip,
.skd-dg--sky .skd-dg__duration-chip { text-transform: none !important; }

.skd-dg--sky .skd-dg__tagline { color: var(--skd-dg-muted); font-weight: 600; }

/* duration segments (no heading in sky) */
.skd-dg--sky .skd-dg__duration { margin-bottom: 0; }
.skd-dg--sky .skd-dg__duration-chips { gap: 8px; margin-bottom: 14px; }
.skd-dg--sky .skd-dg__duration-chip {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 9px 0 !important;
    border-radius: 9px !important;
}
.skd-dg--sky .skd-dg__duration-chip:hover { border-color: var(--skd-dg-btn) !important; }
.skd-dg--sky .skd-dg__duration-chip.is-active {
    border-color: var(--skd-dg-btn) !important;
    background: var(--skd-dg-btn) !important;
    color: #fff !important;
}
.skd-dg--sky .skd-dg__enddate { margin: 0 0 14px; }
.skd-dg--sky .skd-dg__enddate-input {
    border-color: var(--skd-dg-border) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}
.skd-dg--sky .skd-dg__enddate-input:focus { border-color: var(--skd-dg-accent) !important; }
.skd-dg--sky .skd-dg__enddate-summary { color: var(--skd-dg-accent); }

/* editable date fields: default "Today"/"Ongoing" + edit pin → date picker */
.skd-dg--sky .skd-dg__df { margin-bottom: 14px; }
.skd-dg--sky .skd-dg__df-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--skd-dg-ink);
    margin: 0 0 8px;
}
.skd-dg--sky .skd-dg__df-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--skd-dg-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--skd-dg-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.skd-dg--sky .skd-dg__df-btn:hover { border-color: var(--skd-dg-btn) !important; }
.skd-dg--sky .skd-dg__df-edit { display: inline-flex; color: var(--skd-dg-muted); }
.skd-dg--sky .skd-dg__df-edit svg { width: 16px; height: 16px; }
.skd-dg--sky .skd-dg__df-edit-wrap { display: flex; align-items: center; gap: 8px; }
.skd-dg--sky .skd-dg__df-edit-wrap input { flex: 1 1 auto; }
.skd-dg--sky .skd-dg__df-clear {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-height: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1.5px solid var(--skd-dg-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--skd-dg-muted) !important;
    font-size: 22px !important;
    line-height: 1;
    cursor: pointer;
}
.skd-dg--sky .skd-dg__df-clear:hover { border-color: var(--skd-dg-btn) !important; color: var(--skd-dg-ink) !important; }
.skd-dg--sky .skd-dg__startdate-input {
    width: 100%;
    cursor: pointer;
    min-height: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--skd-dg-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--skd-dg-ink) !important;
}
.skd-dg--sky .skd-dg__startdate-input:focus { outline: none !important; border-color: var(--skd-dg-accent) !important; }

/* zakat: bare row, green toggle */
.skd-dg--sky .skd-dg__zakat {
    background: none;
    border-radius: 0;
    padding: 2px 4px 18px;
    margin-bottom: 0;
    overflow: visible;
}
/* Zakat moved to the bottom group (above the CTA): white card like the total */
.skd-dg--sky .skd-dg__zakat--bottom {
    background: #fff;
    border: 1px solid #ECECEA;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.skd-dg--sky .skd-dg__zakat-text {
    font-size: 13px;
    font-weight: 400;
    color: #555;
}
.skd-dg--sky .skd-dg__zakat-track { width: 44px; height: 25px; background: #E6E6E6; }
.skd-dg--sky .skd-dg__zakat-track::after { width: 21px; height: 21px; top: 2px; left: 2px; }
.skd-dg--sky .skd-dg__zakat-input:checked + .skd-dg__zakat-track { background: var(--skd-dg-accent); }
.skd-dg--sky .skd-dg__zakat-input:checked + .skd-dg__zakat-track::after { transform: translateX(19px); }
.skd-dg--sky .skd-dg__zakat-input:focus-visible + .skd-dg__zakat-track {
    outline: 2px solid var(--skd-dg-accent);
}

/* total card */
.skd-dg--sky .skd-dg__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ECECEA;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0 14px;  /* straight under the panel: pinned to the bottom it left a blank gap that looked broken */
}
.skd-dg--sky .skd-dg__total-main { display: flex; flex-direction: column; }
.skd-dg--sky .skd-dg__total-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--skd-dg-muted);
    margin-bottom: 2px;
}
.skd-dg--sky .skd-dg__total-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--skd-dg-ink);
    line-height: 1;
}
.skd-dg--sky .skd-dg__total-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--skd-dg-border);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}
.skd-dg--sky .skd-dg__total-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--skd-dg-accent);
}
.skd-dg--sky .skd-dg__total-note {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

/* CTA: rounded-rect black button, live amount */
.skd-dg--sky .skd-dg__cta {
    border-radius: 15px !important;
    padding: 17px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    gap: 0;
}
.skd-dg--sky .skd-dg__cta:hover { background: var(--skd-dg-btn-hover) !important; opacity: 1; }
.skd-dg--sky .skd-dg__footnote { color: #5F6B7A; font-size: 13px; margin: 13px 0 0; }

/* welcome entrance: the light rises + fades in from the bottom, copy and
   button slide up from below (LaunchGood-style reveal) */
@keyframes skd-dg-light-in {
    from { opacity: 0; transform: translateY(70px); }
    to   { opacity: 0.65; transform: translateY(0); }
}
@keyframes skd-dg-glow-in {
    from { opacity: 0; transform: translate(-50%, 70px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes skd-dg-rise-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* welcome step: warm sunrise — client-supplied amber gradient + rising glow */
.skd-dg--sky .skd-dg__step--welcome {
    position: relative;
    overflow: hidden;
    background: radial-gradient(249.61% 140% at 50% 120%, rgb(255, 255, 255) 0%, rgb(0, 147, 255) 100%);
}
/* sun-rays: soft light fan rising from the bottom (LaunchGood effect) */
.skd-dg--sky .skd-dg__step--welcome::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 300%;
    transform-origin: 50% 100%;
    background: radial-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 75%);
    clip-path: polygon(50% 100%, 42% 104%, 135% 50%, -35% 50%);
    opacity: 0.65;
    filter: blur(20px);
    pointer-events: none;
    animation: skd-dg-light-in 1.5s ease-out both;
}
.skd-dg--sky .skd-dg__step--welcome::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 180%;
    height: 92%;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    background-position: center bottom, center bottom, center bottom;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.25) 50%, transparent 85%),
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.2) 45%, transparent 80%),
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.15) 40%, transparent 75%);
    background-size: 170% 100%, 160% 85%, 180% 71%;
    animation: skd-dg-glow-in 1.5s ease-out both;
}
.skd-dg--sky .skd-dg__welcome-inner { position: relative; z-index: 1; justify-content: normal; }
/* copy vertically centred, CTA pinned to the bottom (LaunchGood layout) */
.skd-dg--sky .skd-dg__welcome-copy {
    margin-top: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: skd-dg-rise-in 0.9s ease-out 0.15s both;
}
/* button block slides up from the bottom */
.skd-dg--sky .skd-dg__welcome-cta {
    animation: skd-dg-rise-in 0.9s ease-out 0.4s both;
}
.skd-dg--fullheight .skd-dg__step--welcome { align-items: stretch; }
.skd-dg--fullheight.skd-dg--sky .skd-dg__welcome-inner { min-height: 100%; }
.skd-dg--sky .skd-dg__welcome-title,
.skd-dg--sky .skd-dg__welcome-subtitle { color: #0B2545; }
/* navy on the blue sky (the old amber-skin brown read as off-brand); larger and darker so it reads on the blue */
.skd-dg--sky .skd-dg__welcome-text { color: rgba(11, 37, 69, 0.85); font-size: 16px; line-height: 1.55; max-width: 340px; }
.skd-dg--sky .skd-dg__step--welcome .skd-dg__footnote { color: rgba(11, 37, 69, 0.72); font-size: 13px; }
.skd-dg--sky .skd-dg__step--welcome .skd-dg__cta {
    background: var(--skd-dg-btn) !important;
    color: #fff !important;
    border-radius: 999px !important;
}

@media (max-width: 640px) {
    .skd-dg--sky .skd-dg__step--amount { padding: 28px 16px 40px; }
    /* widen the white light on mobile so it spreads across the screen */
    .skd-dg--sky .skd-dg__step--welcome::after { width: 320%; }
    .skd-dg--sky .skd-dg__step--welcome::before { width: 190%; left: -45%; }
}

/* ==========================================================================
   TEST ONLY — preview the welcome background + white glow on the amount step.
   Remove this whole block to revert step 2 to the plain tinted backdrop.
   ========================================================================== */
.skd-dg--sky .skd-dg__step--amount {
    position: relative;
    overflow: hidden;
    background: radial-gradient(249.61% 140% at 50% 120%, rgb(255, 255, 255) 0%, rgb(0, 147, 255) 100%);
}
.skd-dg--sky .skd-dg__step--amount::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 300%;
    transform-origin: 50% 100%;
    background: radial-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 75%);
    clip-path: polygon(50% 100%, 42% 104%, 135% 50%, -35% 50%);
    opacity: 0.65;
    filter: blur(20px);
    pointer-events: none;
}
.skd-dg--sky .skd-dg__step--amount::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 180%;
    height: 92%;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    background-position: center bottom, center bottom, center bottom;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.25) 50%, transparent 85%),
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.35) 25%, rgba(255, 255, 255, 0.2) 45%, transparent 80%),
        radial-gradient(100% 50% at 50% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.15) 40%, transparent 75%);
    background-size: 170% 100%, 160% 85%, 180% 71%;
}
.skd-dg--sky .skd-dg__step--amount .skd-dg__amount-inner { position: relative; z-index: 1; }
@media (max-width: 640px) {
    .skd-dg--sky .skd-dg__step--amount::after { width: 320%; }
    .skd-dg--sky .skd-dg__step--amount::before { width: 190%; left: -45%; }
}

/* elementor-post-79950 */
.elementor-79950 .elementor-element.elementor-element-97e45fc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79950 .elementor-element.elementor-element-e23f8e5 .skd-dg__amount-inner{max-width:460px;}.elementor-79950 .elementor-element.elementor-element-e23f8e5 .skd-dg__welcome-inner{max-width:560px;min-height:540px;}.elementor-79950 .elementor-element.elementor-element-0463cd0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-79950 .elementor-element.elementor-element-31941db{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-79950 .elementor-element.elementor-element-97e45fc{--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-79950 .elementor-element.elementor-element-97e45fc{--width:100%;}}
/* 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-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-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-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{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{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;}
/* base-mobile */
@media (max-width:767px) {
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}
}
/* elementor-post-166504 */
.elementor-166504 .elementor-element.elementor-element-b2b1cc8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
/* ght-appealstory */
/* GHH Appeal: Description — the appeal's own content, in the GHH type. */
.ght.apst { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--ght-line); background: #fff; }
.ght .apst__h { margin-bottom: 28px; }
.ght .apst__body { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); }
/* the description's own boxed containers line up with the page */
.ght .apst__body > .elementor > .e-con.e-parent { --content-width: min(var(--ght-max), 100%); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); }
/* prose rules skip SkyDonate's Daily Giving, which brings its own type and centring, and the page
   sections placed in a description (shared blocks such as "Our promise"), which bring their own */
.ght .apst__body :is(h2, h3, h4):not(.skd-dg *, .apst__body .ght *) { margin: 0 0 .5em; font-family: var(--ght-f); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__body h2:not(.skd-dg *, .apst__body .ght *) { font-size: clamp(28px, 2.8vw, 40px); }
.ght .apst__body h3:not(.skd-dg *, .apst__body .ght *) { font-size: 24px; }
.ght .apst__body p:not(.skd-dg *, .apst__body .ght *) { margin: 0 0 1em; }
/* a container holding a page section runs edge to edge; the section keeps its own band and width */
.ght .apst__body .e-con.e-parent:has(> .elementor-widget-shortcode .ght, > .elementor-widget :is(.ght.sec, .ght.phero)) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; }
/* a description built of page sections from its page hero down (Fidyah): it is the page, so the
   description's own padding and top rule go */
.ght.apst:has(.apst__body > .elementor > .e-con:first-child > .elementor-widget-ght_pagehero) { padding: 0; border-top: 0; }
/* a description that is only Daily Giving: its full-height sky is the page, so no section padding or rule */
.ght.apst:has(.skd-dg--fullheight) { padding: 0; border-top: 0; }
/* …and edge to edge, from the top of the screen (behind the floating header) to the bottom, as on the
   live site (user: "the blue design must be full height and width like the original site") */
.ght .apst__body .e-con.e-parent:has(.skd-dg--fullheight) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; --padding-top: 0px; --padding-bottom: 0px; --margin-top: 0px; margin-top: 0; }
body.ght-site .ght-site-header ~ main.site-main.ght-appeal-page:has(.skd-dg--fullheight) { padding-top: 0; }
/* the notices box holds an empty WooCommerce wrapper, so it's never :empty; with no notice in it, its
   16px top margin would push the whole page (and the sky) down out from under the header */
.ght-appeal-page:has(.skd-dg--fullheight) .ght-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { margin: 0; }
.ght .apst__body .skd-dg--fullheight { border-radius: 0; }
/* the sky runs under the header, so each step's content starts clear of it (the amount card touched it) */
.ght .apst__body .skd-dg--fullheight .skd-dg__step { box-sizing: border-box; padding-top: calc(var(--ght-tuck, 20px) + 24px); }
/* ght-base's `.ght p { margin: 0 }` outranks SkyDonate's centring of the intro line */
.ght .skd-dg__welcome-text { margin-left: auto; margin-right: auto; }
.ght .apst__body a:not(.skd-dg *, .apst__body .ght *) { color: var(--ght-blue-d); }
.ght .apst__body ul:not(.skd-dg *, .apst__body .ght *) { padding-left: 1.2em; list-style: disc; }
/* story and film (the appeal template's column) */
.ght.apst--parts .apst__text { max-width: 66ch; font-size: 17.5px; }
.ght.apst--parts .apst__text h3, .ght.apst--parts .apst__text h4 { margin-top: 1.4em; font-size: 19px; }
.ght .apst__pts { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ght .rich .apst__pts { padding-left: 0; list-style: none; }
.ght .apst__pts li { position: relative; margin: 0; padding: 14px 16px 14px 50px; border-radius: 14px; background: var(--ght-mist); font-size: 16px; line-height: 1.5; }
.ght .apst__pts li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--ght-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ght .apst__pts li b { display: block; color: var(--ght-ink); }
/* gifts with a price ("Water tanker £120"): pressing one puts the amount in the donation form */
.ght .apst__gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 8px; padding: 0; list-style: none; }
.ght .rich .apst__gifts { padding-left: 0; list-style: none; }
.ght .apst__gifts li { display: flex; margin: 0; }
.ght .apst__gift, .ght .apst__gift:hover, .ght .apst__gift:focus { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; align-content: start; gap: 6px 12px; width: 100%; margin: 0; padding: 18px; border: 1.5px solid var(--ght-line); border-radius: 16px; background: #fff; color: var(--ght-ink); font: inherit; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ght-ease); }
.ght .apst__gift:hover { border-color: var(--ght-blue); box-shadow: 0 16px 34px -24px rgba(6, 20, 30, .5); transform: translateY(-2px); }
.ght .apst__gift.is-on { border-color: var(--ght-blue); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght .apst__gift b { grid-area: name; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.ght .apst__price { grid-area: price; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ght-blue-d); }
.ght .apst__gift small { grid-area: desc; font-size: 14px; line-height: 1.5; color: var(--ght-mute); }
/* progress under the heading: raised of target, a bar marked at each quarter, three totals */
/* first in the section; a hairline parts it from "About this appeal" below */
.ght .apst__prog { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ght-line); container-type: inline-size; }
.ght .apst__ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ght .apst__raised { display: grid; gap: 2px; margin: 0; }
.ght .apst__raised b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__raised > span { font-size: 14px; color: var(--ght-mute); }
.ght .apst__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ght .apst__bar { position: relative; height: 8px; border-radius: 999px; background: var(--ght-mist); box-shadow: inset 0 0 0 1px var(--ght-line); overflow: hidden; }
.ght .apst__fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--ght-blue); overflow: hidden; }
/* in view (story.js): the bar fills from the start while the amount rolls in, a light passes along it,
   and the badge settles when it's done. Without the script, or with reduced motion, it's simply full. */
.ght .apst__prog.is-armed .apst__fill { width: 0; transition: none; }
.ght .apst__prog.is-in .apst__fill { transition: width 1.8s cubic-bezier(.22, .8, .24, 1); }
.ght .apst__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); }
.ght .apst__prog.is-in .apst__fill::after { animation: ght-apst-sheen 1.4s .5s ease-out both; }
@keyframes ght-apst-sheen { to { transform: translateX(100%); } }
.ght .apst__prog.is-done .apst__pill { animation: ght-apst-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ght-apst-pop { 40% { transform: scale(1.08); } }
/* the raised amount as an odometer: each digit column is sized by an invisible copy of its final digit
   (Onest's own spacing), and its 0–9 strip is parked on that digit (--to = 10 + digit) */
.ght .apst__od { --lh: 1.1em; display: inline-flex; align-items: flex-start; }
.ght .apst__oc { position: relative; display: block; height: var(--lh); clip-path: inset(0 -.3em); }
.ght .apst__oc > i { display: block; font-style: normal; line-height: var(--lh); visibility: hidden; }
.ght .apst__os { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
.ght .apst__os span { display: block; height: var(--lh); line-height: var(--lh); text-align: center; }
.ght .apst__ox { display: block; line-height: var(--lh); }
.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, 0); transition: none; }
.ght .apst__prog.is-rolling .apst__os { transition: transform var(--dur, 1.6s) cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }
.ght .apst__prog.is-rolling .apst__oc { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
@media (prefers-reduced-motion: reduce) {
	.ght .apst__prog.is-armed .apst__fill { width: var(--p); }
	.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
	.ght .apst__fill::after, .ght .apst__prog.is-done .apst__pill { animation: none; }
}
.ght .apst__bar i { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(11, 38, 56, .18); }
.ght .apst__marks { position: relative; display: flex; justify-content: space-between; height: 16px; margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--ght-mute); }
.ght .apst__marks span[style] { position: absolute; top: 0; transform: translateX(-50%); }
.ght .apst__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ght .apst__stat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: 12px; background: #fff; }
.ght .apst__si { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #FDF1DA; color: #A86A06; }
.ght .apst__si svg { width: 16px; height: 16px; stroke-width: 2; }
/* Onest's own (proportional) figures: its fixed-width ones spread "£147,470" apart (user) */
.ght .apst__stat > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ght .apst__stat b { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ght-ink); white-space: nowrap; }
.ght .apst__stat small { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--ght-mute); }
/* narrow column: no room for the icon beside "£19,239", so the totals go without it */
@container (max-width: 480px) {
	.ght .apst__si { display: none; }
}
@media (max-width: 760px) {
	.ght .apst__marks span[style] { display: none; } /* 0 and the target only */
}
.ght .apst__film { margin-top: 28px; }
.ght .apst__film .pmedia { border-radius: 20px; overflow: hidden; }
.ght .apst__film .gtv { aspect-ratio: 16 / 9; }
.ght .apst__body iframe { max-width: 100%; border: 0; border-radius: 18px; }
.ght .apst__body .elementor-widget-video .elementor-wrapper { overflow: hidden; border-radius: 22px; }

/* ght-appeal-sd */
/* ==========================================================================
 * GHH Toolkit — SkyDonate's donation form on the appeal page, in the GHH look (moved out of
 * ght-appeal.css in 1.53.6). Loaded only while Settings → GHH Toolkit → "Style SkyDonate widgets"
 * is on; off, SkyDonate's own design shows.
 * ======================================================================== */

/* ── SkyDonate's form, as the donation checkout draws it (also in the Donate section, .ght-sdform) ── */
:is(.ght-ap-side, .ght-sdform) .elementor-widget-skyweb_donation_form { --accent-color: var(--ght-blue); margin: 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper { font-family: var(--ght-f); }
:is(.ght-ap-side, .ght-sdform) .donation-form { gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form button, :is(.ght-ap-side, .ght-sdform) .donation-form input, :is(.ght-ap-side, .ght-sdform) .donation-form select { font-family: var(--ght-f); }
/* Give once / Monthly: two boxes, the chosen one light blue */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-switch { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100%; gap: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn { width: 100% !important; max-width: none !important; flex: none !important; min-height: 46px; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 16px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:first-child { border-radius: 8px 0 0 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:last-child { border-radius: 0 8px 8px 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn::before { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn.active { position: relative; z-index: 1; background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
/* amounts */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons { gap: 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 17px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn::after { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn.active { background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .currency-symbol, :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .price { color: inherit; font-weight: inherit; }
/* project options with a label ("Fully fund a complete water well" £1,120) — water wells, masjids:
   one per row, what it does on the left, the amount on the right, sentence case; SkyDonate ran
   "£1120Fully Fund A Complete…" together, title-cased, the others in pink */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons:has(.btn-label) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label) { display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 50px; white-space: normal !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ght-line) !important; color: var(--ght-ink) !important; font: 500 15px/1.3 var(--ght-f) !important; text-align: left; text-transform: none !important; letter-spacing: 0 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label):hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn.active:has(.btn-label) { background: var(--ght-soft) !important; box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .btn-label { flex: 1; min-width: 0; color: var(--ght-ink) !important; font: inherit !important; text-transform: none !important; white-space: normal !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .price { flex: none; color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label)::before { display: none !important; }
/* the project's promise above the options: a calm line, not blue part-way through */
:is(.ght-ap-side, .ght-sdform) .donation-box-title, :is(.ght-ap-side, .ght-sdform) .donation-box-title * { color: var(--ght-ink-2) !important; font-weight: 400 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-box-title { margin-bottom: 12px; font-size: 15px; line-height: 1.5; }
/* custom amount: one big field */
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom { min-height: 56px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); }
/* list layout (Fidyah): SkyDonate joins the field to the list above (square top, no gap); the rows are separate cards here, so it is one too */
:is(.ght-ap-side, .ght-sdform) .donation-form.list-layout .donation-amount-groups .donation-custom { margin-top: 8px !important; border-radius: 10px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom:focus-within { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { color: var(--ght-ink); background-color: transparent; font-weight: 400; }
/* (the field's ring is an inset shadow: anything inside with a background would paint over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom input.custom-amount-input { background: transparent !important; box-shadow: none !important; color: var(--ght-ink); font-size: 22px; font-weight: 500; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .custom-placeholder { background: transparent !important; }
/* the currency switcher sits invisibly over the £ (its own label would print over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select { color: transparent; background: transparent; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select option { color: var(--ght-ink); }
/* the field's blue ring is the focus mark: SkyDonate's reset.css also draws a black outline on the input/select inside it */
:is(.ght-ap-side, .ght-sdform) .donation-custom :is(input.custom-amount-input, .skydonate-currency-select):is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; }
/* "Select donation type": its group draws the box */
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group { border: 0 !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ght-line); }
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group select { min-height: 48px; border: 0; background-color: transparent; box-shadow: none; font-size: 15px; color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .skydonate-currency-wrapper, :is(.ght-ap-side, .ght-sdform) .skydonate-currency-select { border: 0 !important; box-shadow: none !important; }
/* Donate */
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button { height: 54px !important; min-height: 54px !important; border-radius: 8px; background: var(--ght-blue); background-image: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); filter: none !important; }
:is(.ght-ap-side, .ght-sdform) .form-submit-button > span { font-family: var(--ght-f); font-weight: 600; text-transform: none; }
/* "This project is Zakat applicable.": a quiet line with a blue tick, not SkyDonate's lilac pill */
body .donation-form-wrapper .zakat-applicable { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ght-ink-2); font: 500 14px/1.4 var(--ght-f); text-align: center; }
body .donation-form-wrapper .zakat-applicable i { display: none; }
body .donation-form-wrapper .zakat-applicable::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--ght-blue-d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the header's Donate pop-up on an appeal page (header.js): the site's close button, not SkyDonate's red one */
.quick-modal.ght-qd .quick-modal-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; box-shadow: none; color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-close:hover { background: var(--ght-mist); }
.quick-modal.ght-qd .quick-modal-close:after { background-color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-body { border-radius: 20px; }

/* ght-appeal */
/* ==========================================================================
 * GHH appeal (product) page — styled on SkyDonate's donation checkout
 * (FundraiseUp style) with GoFundMe-style type: Onest (bold, tight headings,
 * plain text), white cards with a 16px radius and a 1px border (no shadows),
 * 8px controls with a fine ring, the chosen
 * option in light blue with a blue ring, one blue button.
 *
 * The appeal template (build/ght-build-appeal.php) is Elementor containers:
 *   .ght-ap-top    the grid
 *     .ght-ap-media  photos (+ film) and progress            left, row 1
 *     .ght-ap-rail   right column:
 *       .ght-ap-side   the giving card (heading + SkyDonate's Donation Form)
 *       .ght-ap-side2  recent donations, our promise
 *     .ght-ap-body   the story card, how it helps            left, row 2
 * Phones: photos → giving card → story → donations. Classes are set on the
 * containers (Advanced → CSS Classes), so the layout stays editable.
 * ======================================================================== */

/* ── the calm type and colours (this page only) ── */
.ght-appeal-page {
	--ght-f: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ap-ink: #1F2933;
	--ap-muted: #5F6B7A;
	--ap-line: #CDD5DE;
	--ap-soft: #E9F6FD;
	/* cards are drawn with a border only, no shadow (user: "keep it clean") */
	--ap-edge: #DDE3EA;
	font-family: var(--ght-f);
	color: var(--ap-ink);
}
body.single-product.ght-site { background: #F6F8FA; }
.ght-appeal-page .ght { font-family: var(--ght-f); }
.ght-appeal-page .ght .h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.ght-appeal-page .ght .lead { font-size: 16.5px; color: var(--ap-muted); }
.ght-appeal-page .ght-notices:empty { display: none; }
.ght-appeal-page .ght-notices { max-width: 1200px; margin: 16px auto 0; padding: 0 var(--ght-pad); }

/* title */
.ght-appeal-page .ght.aph { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 28px); }
.ght-appeal-page .ght.aph .wrap { max-width: 1200px; }
.ght-appeal-page .ght .aph__cat { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ght-appeal-page .ght .aph__h { max-width: 28ch; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--ap-ink); }
.ght-appeal-page .ght .aph__lead { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ap-muted); }

/* ── the grid ── */
.e-con.ght-ap-top { --padding-top: 0px; --padding-bottom: 0px; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); grid-template-areas: "media rail" "body rail"; grid-template-rows: auto 1fr; /* the tall right column's extra height goes to the story row, never between the photo and the story */ align-items: start; gap: 24px 32px; max-width: 1200px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(48px, 6vw, 80px); }
.e-con.ght-ap-media, .e-con.ght-ap-side, .e-con.ght-ap-side2, .e-con.ght-ap-rail, .e-con.ght-ap-body { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; min-width: 0; }
.e-con.ght-ap-top > .ght-ap-media { grid-area: media; display: flex; flex-direction: column; gap: 18px; }
.e-con.ght-ap-top > .ght-ap-rail { grid-area: rail; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-top > .ght-ap-body { grid-area: body; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-side2 { display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-body > .elementor-widget:not(:has(.ght)), .e-con.ght-ap-side2 > .elementor-widget:not(:has(.ght)) { display: none; }
/* an older template (giving card straight in the grid) still lays out */
.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: rail; }

/* cards */
.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
.e-con.ght-ap-side { display: flex; flex-direction: column; gap: 16px; }
.ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr { padding: clamp(22px, 2.6vw, 32px); }
.ght .apst__h2, .ght-appeal-page .ght .apst__h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ap-ink); }
.ght-appeal-page .ght.apst--parts .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted); }
.ght-appeal-page .ght .rich h3, .ght-appeal-page .ght .rich h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ap-ink); }
.ght-appeal-page .ght .rich strong, .ght-appeal-page .ght .rich b { font-weight: 600; color: var(--ap-ink); }

/* card heading: shield + "Secure donation" */
.ght-appeal-page .ght.apsec { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ap-ink); }

/* photos and progress */
.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__stage.is-playing { border-radius: 16px; }
.ght-appeal-page .ght .apg__thumb { border-radius: 10px; }
.ght-appeal-page .ght.apgo { padding: 18px 20px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
/* no shadows anywhere on the page: the gift cards and play button keep to borders too */
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apg__play { box-shadow: none; }
.ght-appeal-page .ght .apgo__line { font-size: 15px; color: var(--ap-muted); }
.ght-appeal-page .ght .apgo__line b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); }

/* how it helps, gifts, points: the checkout's controls */
.ght-appeal-page .ght .apim__list li, .ght-appeal-page .ght .apst__gift { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ap-line); }
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); transform: none; }
.ght-appeal-page .ght .apst__gift.is-on { background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apst__gift b, .ght-appeal-page .ght .apim__list b { font-weight: 600; }
.ght-appeal-page .ght .apst__price { font-weight: 700; letter-spacing: -.01em; }
.ght-appeal-page .ght .apst__pts li { border-radius: 10px; background: #F4F7FA; }
.ght-appeal-page .ght .apst__pts li b { font-weight: 600; }

/* donations and our promise in the right column (the donations panel styles itself: appealdonors.css) */
.ght-ap-side2 .ght.apdn .apst__h2 { font-size: 18px; }
.ght-ap-side2 .ght.aptr { display: grid; gap: 14px; margin: 0; list-style: none; }
.ght-appeal-page .ght.aptr b { font-weight: 600; }

/* SkyDonate's form itself: ght-appeal-sd.css (only while "Style SkyDonate widgets" is on) */

@media (max-width: 1024px) {
	.e-con.ght-ap-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "side" "body" "side2"; }
	/* the right column's two parts take their own places in the one column */
	.e-con.ght-ap-top > .ght-ap-rail { display: contents; }
	.e-con.ght-ap-rail > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-rail > .ght-ap-side2 { grid-area: side2; }
	.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-top { grid-template-rows: none; }
	/* One column of cards as a grid, not a flex column. As a flex column, Chrome gave the tabbed story
	   card (Appeal brief) a height far beyond its content (3,672px for 1,176px on the Palestine appeal,
	   most likely its hidden tabs): a 2,500px empty band on phones (user: "big gaps under some
	   sections on mobile"). As a grid it's its content's height. */
	.e-con.ght-ap-top > .ght-ap-body, .e-con.ght-ap-rail > .ght-ap-side2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; }
}
@media (max-width: 760px) {
	.e-con.ght-ap-top { gap: 16px; padding-left: 12px; padding-right: 12px; }
	.ght-appeal-page .ght.aph { padding-left: 0; padding-right: 0; }
	.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 18px; }
	/* the photos keep the page's 12px margins and the cards' rounded corners (user: not full width) */
	.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__view { margin: 0; border-radius: 14px; }
	/* TRIAL (user: "merge them, only on mobile"): the photos become the top of the donation card — no
	   gap, square corners where they meet, the card's own border carrying on under the photo */
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__view,
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__main { border-radius: 16px 16px 0 0; }
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .e-con.ght-ap-side { margin-top: -16px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ght-video */
/* GHH Video. (Root is .ght.gtv.) */
.ght.gtv { position: relative; aspect-ratio: var(--gtv-ratio, 16 / 9); overflow: hidden; border-radius: 22px; background: var(--ght-ink); }
.ght.gtv .gtv__play, .ght.gtv .gtv__play:hover, .ght.gtv .gtv__play:focus { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: #fff; cursor: pointer; }
.ght.gtv .gtv__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); }
.ght.gtv .gtv__play::after { content: ""; position: absolute; inset: 0; background: rgba(6, 20, 30, .25); transition: background-color .3s; }
.ght.gtv .gtv__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ght-ease), background-color .3s, color .3s; }
.ght.gtv .gtv__btn svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke: none; }
.ght.gtv .gtv__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; font-weight: 700; text-align: center; }
.ght.gtv .gtv__play:hover img { transform: scale(1.04); }
.ght.gtv .gtv__play:hover .gtv__btn { transform: scale(1.08); background: var(--ght-blue); color: #fff; }
.ght.gtv .gtv__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ght-story */
/* GHH Story — words beside a photo or film; without a picture, heading left and text right. */
.ght .story__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 96px); }
.ght.story--media .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ght.story--left .story__media { order: -1; }
.ght.story--text.story--plain .story__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: calc(68ch + 2 * var(--ght-pad)); }
.ght.story--only .story__grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.ght.story--only .story__text { display: none; }
.ght.story--text .story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.ght .story__text .h2 { margin-bottom: 24px; }
.ght.story--text .story__text .h2 { margin-bottom: 0; }
.ght .story__body { max-width: 64ch; }
.ght .story__btns { margin-top: 30px; }
.ght .story__media .pmedia { border-radius: 22px; }
.ght .story__media .pmedia img { aspect-ratio: 4 / 3.2; object-fit: cover; }
/* folded long text */
.ght .story__body.is-folded { position: relative; max-height: 15em; overflow: hidden; }
.ght .story__body.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.ght.t-mist .story__body.is-folded::after { background: linear-gradient(rgba(238, 244, 247, 0), var(--ght-mist)); }
.ght.t-night .story__body.is-folded::after { background: linear-gradient(rgba(6, 20, 30, 0), var(--ght-night)); }
.ght .story__more, .ght .story__more:hover, .ght .story__more:focus { display: inline-flex; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--ght-blue-d); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ght.t-night .story__more { color: var(--ght-gold); }
/* long words beside a picture: the picture starts at the top and stays in view while reading */
.ght.story--long .story__grid { align-items: start; }
.ght.story--long .story__media { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); }
.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 5; }

@media (max-width: 960px) {
	.ght.story--media .story__grid, .ght.story--text .story__grid { grid-template-columns: minmax(0, 1fr); }
	.ght.story--text .story__text .h2 { margin-bottom: 0; }
	.ght .story__media { order: -1; }
	.ght.story--long .story__media { position: static; }
	.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 3.2; }
}

/* ght-compat */
/* ==========================================================================
 * GHH Toolkit — what the old theme (WoodMart) gave the Sky plugins.
 * Loaded on every page. SkyDonate's stylesheets were written on top of
 * WoodMart, so without these its forms and pop-ups fall apart under Hello:
 *
 * 1. WoodMart made every button position:relative, inline-flex and centred.
 *    SkyDonate draws the chosen amount / Once-Monthly with an absolutely
 *    placed ::after/::before; without a positioned button it covers the
 *    whole pop-up.
 * 2. SkyDonate draws its close ✕ and video ▶ as glyphs of WoodMart's icon
 *    font ("woodmart-font", \f112 / \f101). Nothing of WoodMart is used: the
 *    same three marks are drawn here as icons in the text colour, 1em square.
 *
 * :where() keeps the button rule at zero specificity, so any real style wins.
 * ======================================================================== */

.donation-card .donation-image .play-button i:before,
button.lity-close:before,
.quick-modal-close:after {
	content: "" !important;
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	font-family: inherit !important;
	background-color: currentColor;
	-webkit-mask: var(--ght-ico) center / contain no-repeat;
	mask: var(--ght-ico) center / contain no-repeat;
}
.donation-card .donation-image .play-button i:before { --ght-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E"); }
button.lity-close:before { display: block; margin: auto; }
button.lity-close:before, .quick-modal-close:after { --ght-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* 3. WoodMart padded every page section; Elementor's default is 10px, so older sections ran to
      the screen edge. Top-level containers get the GHH side gutter by default (containers that set
      their own padding, like the toolkit's sections, keep theirs). */
body.ght-site .e-con.e-parent { --container-default-padding-left: var(--ght-pad, 16px); --container-default-padding-right: var(--ght-pad, 16px); }

:where(button, [type="submit"], [type="button"], .button) { position: relative; }
:where(.donation-form-wrapper, .quick-modal, .skydonate-quick-donation-widget, [class*="skydonate"], [class*="skd-"], .donation-card) :where(button, [type="submit"], [type="button"], .button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

/* While the basket is open SkyDonate stops the page scrolling with `body { overflow: hidden }`. That
   makes <body> a scroll box, and the sticky header then measures from it instead of the screen: it
   dropped 32px when signed in (the admin bar's margin counted twice) and left the screen when the page
   was scrolled (user: "header shows big when opening the mini basket"). Lock the page on <html>
   instead, which is the screen itself. (Moved from ght-minicart.css in 1.53.6.) */
body.ght-site.skd-mc-locked { overflow: visible; overflow-x: clip; }
html:has(body.ght-site.skd-mc-locked) { overflow: hidden; }

/* ght-reviews */
/* ==========================================================================
 * GHH Toolkit — Sky360's Google reviews (Elementor "SEO Reviews" widget,
 * .sky360-reviews-slider) in the GHH design system. Sky360 draws it; this
 * only restyles it. `body …` (and !important where Elementor's widget
 * settings print their own colours) so it wins whichever file loads last.
 * ======================================================================== */

/* cards: white, hairline, 16px corners, no shadow, no lift */
body .sky360-reviews-slider .sky-review-item,
body .sky360-reviews-grid .sky-review-item {
	padding: 22px 22px 18px !important;
	border: 1px solid var(--ght-line) !important;
	border-radius: var(--ght-r-l) !important;
	background: #fff !important;
	box-shadow: none !important;
	transform: none !important;
	color: var(--ght-ink);
	font-family: var(--ght-f);
}
body .sky360-reviews-slider .sky-review-item:hover { border-color: #c4d4de !important; box-shadow: none !important; transform: none !important; }

/* who and when */
body .sky360-reviews-slider .sky-author-photo,
body .sky360-reviews-slider .sky-author-photo-placeholder { width: 44px !important; height: 44px !important; }
body .sky360-reviews-slider .sky-review-author-name { color: var(--ght-ink) !important; font: 600 15px/1.3 var(--ght-f) !important; }
body .sky360-reviews-slider .sky-review-time { color: var(--ght-mute) !important; font: 400 13px/1.35 var(--ght-f) !important; }
body .sky360-reviews-slider .sky-google-icon { width: 18px; height: 18px; }

/* stars in the hope gold, the verified tick in GHH blue */
body .sky360-reviews-slider .sky-review-rating { color: var(--ght-gold) !important; font-size: 17px !important; letter-spacing: 2px; }
body .sky360-reviews-slider .sky-verified-review svg path { fill: var(--ght-blue) !important; }

/* the review */
body .sky360-reviews-slider .sky-review-text { color: var(--ght-ink-2) !important; font: 400 15px/1.6 var(--ght-f) !important; }
/* a shortened review ends after 4 whole lines with "…" (the plugin's pixel max-height cut a line in half) */
body .sky360-reviews-slider .sky-review-text.sky-truncated { display: -webkit-box !important; max-height: none !important; overflow: hidden !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

/* Read more: a quiet blue link in sentence case (the plugin prints "READ MORE") */
body .sky360-reviews-slider .sky-read-more-toggle {
	padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--ght-blue-d) !important; font: 600 14px/1.4 var(--ght-f) !important;
	letter-spacing: 0 !important; text-transform: lowercase !important;
}
body .sky360-reviews-slider .sky-read-more-toggle::first-letter { text-transform: uppercase; }
body .sky360-reviews-slider .sky-read-more-toggle:hover, body .sky360-reviews-slider .sky-read-more-toggle:focus { background: none !important; color: var(--ght-ink) !important; }

/* the like: a small outlined pill */
body .sky360-reviews-slider .sky-review-like-button {
	min-height: 34px; padding: 0 12px !important; border: 1px solid var(--ght-line) !important; border-radius: 999px !important;
	background: #fff !important; box-shadow: none !important; color: var(--ght-mute) !important; font: 600 13px var(--ght-f) !important;
}
body .sky360-reviews-slider .sky-review-like-button:hover, body .sky360-reviews-slider .sky-review-like-button:focus { background: var(--ght-mist) !important; color: var(--ght-ink) !important; }

/* Review Us: the outlined pill (one blue button per view), with Google's G drawn —
   the plugin's Font Awesome brand icon has no font since WoodMart was turned off */
body .sky-review-us-button {
	display: inline-flex !important; align-items: center; gap: 10px;
	min-height: 48px; padding: 0 22px !important; border: 1px solid var(--ght-line) !important; border-radius: 999px !important;
	background: #fff !important; box-shadow: none !important; color: var(--ght-ink) !important;
	font: 600 16px/1 var(--ght-f) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important;
}
body .sky-review-us-button:hover, body .sky-review-us-button:focus { background: var(--ght-mist) !important; color: var(--ght-ink) !important; }
body .sky-review-us-button .sky-button-icon { width: 20px; height: 20px; margin: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.62z' fill='%234285F4'/%3E%3Cpath d='M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.81.54-1.84.86-3.05.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z' fill='%2334A853'/%3E%3Cpath d='M3.96 10.71a5.4 5.4 0 0 1 0-3.42V4.96H.96a9 9 0 0 0 0 8.08l3-2.33z' fill='%23FBBC05'/%3E%3Cpath d='M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A8.64 8.64 0 0 0 9 0 9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z' fill='%23EA4335'/%3E%3C/svg%3E") center / 18px no-repeat !important; }
body .sky-review-us-button .sky-button-icon > * { display: none !important; }
body .sky-review-us-button .sky-button-text, body .sky-review-us-button:hover .sky-button-text { color: var(--ght-ink) !important; font: inherit !important; }

/* previous / next: 40px circles with a line border */
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev,
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next {
	width: 44px !important; height: 44px !important; border: 1px solid var(--ght-line) !important; border-radius: 50% !important;
	background: #fff !important; box-shadow: none !important; color: var(--ght-ink) !important;
}
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev:hover,
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next:hover { background: var(--ght-mist) !important; }
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-prev::after,
body .sky360-reviews-slider .sky-navigation-arrows .swiper-button-next::after { color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700; }

/* ght-minicart */
/* ==========================================================================
 * GHH Toolkit — the donation basket (SkyDonate Mini Cart) in the GHH design system
 * (DESIGN-SYSTEM.md → Basket). SkyDonate draws it (#skd-minicart-root, mini-cart.css);
 * this only restyles it. Rules are `body #skd-minicart-root …` so they win over
 * SkyDonate's `#skd-minicart-root …` whichever file loads last.
 * ======================================================================== */

/* (the basket's scroll lock on <html> is in ght-compat.css: it is a fix, not styling, and stays when
   "Style SkyDonate widgets" is off) */

/* SkyDonate's script sets the accent (its navy) on the root inline: the GHH blue wins */
body #skd-minicart-root { --mc-accent: var(--ght-blue) !important; --mc-radius: var(--ght-r-l) !important; --mc-sp: 1 !important; }

/* ── panel ── */
body #skd-minicart-root .skd-mc-backdrop { background: rgba(6, 20, 30, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
body #skd-minicart-root .skd-mc-panel { width: 420px; color: var(--ght-ink); font-family: var(--ght-ui); box-shadow: var(--ght-float); }
body #skd-minicart-root .skd-mc-header { gap: 10px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--ght-line); }
body #skd-minicart-root .skd-mc-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
body #skd-minicart-root .skd-mc-count { min-width: 22px; padding: 2px 8px; border-radius: 999px; background: var(--ght-blue); color: #fff; font-size: 13px; font-weight: 600; line-height: 18px; text-align: center; }
/* the round close, like every GHH pop-up; its ring only for the keyboard (the basket focuses it on open) */
body #skd-minicart-root .skd-mc-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; color: var(--ght-ink); transition: background-color .2s; }
body #skd-minicart-root .skd-mc-close:hover { background: var(--ght-mist); }
body #skd-minicart-root :is(button, a):focus { outline: none; }
body #skd-minicart-root :is(button, a):focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }

/* ── lines ── */
body #skd-minicart-root .skd-mc-body { padding: 0 24px 16px; }
body #skd-minicart-root .skd-mc-line { gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ght-line); }
body #skd-minicart-root .skd-mc-thumb { width: 56px; height: 56px; border-radius: var(--ght-r-m); }
/* no photo: a calm tile with the initials, not SkyDonate's navy block. (A photo is the tile's inline
   background-image; an initials tile's inline background is a gradient — only that one is replaced.) */
body #skd-minicart-root .skd-mc-thumb[style*="gradient"] { background: var(--ght-soft) !important; color: var(--ght-blue-d); font-size: 15px; font-weight: 700; letter-spacing: 0; }
body #skd-minicart-root .skd-mc-line-main { gap: 10px; }
body #skd-minicart-root .skd-mc-line-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ght-ink); }
body #skd-minicart-root .skd-mc-remove { width: 32px; height: 32px; border-radius: 50%; color: var(--ght-mute); transition: background-color .2s, color .2s; }
body #skd-minicart-root .skd-mc-remove:not(.is-disabled):hover { background: var(--ght-err-soft); color: var(--ght-err); }
/* a line still being added (SkyDonate waits for its server key) */
body #skd-minicart-root .skd-mc-remove.is-disabled { opacity: .4; cursor: default; }
body #skd-minicart-root .skd-mc-price-amt { font-size: 16px; font-weight: 700; font-variant-numeric: normal; color: var(--ght-ink); }
body #skd-minicart-root :is(.skd-mc-line-per, .skd-mc-price-sub) { font-size: 13px; font-weight: 400; color: var(--ght-mute); }
/* stepper: a quiet bordered pill */
body #skd-minicart-root .skd-mc-stepper { border: 1px solid var(--ght-line); border-radius: var(--ght-r-s); }
body #skd-minicart-root .skd-mc-step { width: 32px; height: 32px; border-radius: var(--ght-r-s); color: var(--ght-ink); font-size: 17px; font-weight: 500; }
body #skd-minicart-root .skd-mc-step:not(.is-disabled):hover { background: var(--ght-mist); }
body #skd-minicart-root .skd-mc-step.is-disabled { color: #B8C6D0; }
body #skd-minicart-root .skd-mc-qty { min-width: 24px; font-size: 15px; font-weight: 600; font-variant-numeric: normal; }

/* ── extras and monthly ── */
body #skd-minicart-root .skd-mc-pinned { padding: 0 24px 14px; border-top: 1px solid var(--ght-line); }
body #skd-minicart-root .skd-mc-addons { padding-top: 16px; }
/* sentence case, not tracked capitals */
body #skd-minicart-root .skd-mc-addons-label { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ght-ink); }
body #skd-minicart-root .skd-mc-addons-row { gap: 8px; }
body #skd-minicart-root .skd-mc-addon { min-height: 52px; gap: 2px; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: #fff; transition: border-color .2s, background-color .2s; }
body #skd-minicart-root .skd-mc-addon:hover { border-color: var(--ght-blue); background: var(--ght-soft); }
body #skd-minicart-root .skd-mc-addon-title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ght-ink); }
body #skd-minicart-root .skd-mc-addon-amt { font-size: 13px; font-weight: 600; color: var(--ght-blue-d); }
body #skd-minicart-root .skd-mc-monthly { margin-top: 12px; padding: 4px 0; }
body #skd-minicart-root .skd-mc-monthly-title { font-size: 15px; font-weight: 600; }
body #skd-minicart-root .skd-mc-monthly-sub { font-size: 13px; color: var(--ght-mute); }
/* the site's switch (account pages, Gift Aid): light track, grey knob turning blue */
body #skd-minicart-root .skd-mc-switch { width: 40px; height: 22px; border-radius: 999px; background: #E8E8E8; }
body #skd-minicart-root .skd-mc-switch.on { background: #BFE3F5; }
body #skd-minicart-root .skd-mc-switch-knob { top: 3px; left: 3px; width: 16px; height: 16px; background: #929292; box-shadow: none; transition: left .2s var(--ght-ease), background-color .2s; }
body #skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob { left: 21px; background: var(--ght-blue); }

/* ── footer ── */
body #skd-minicart-root .skd-mc-footer { padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ght-line); }
body #skd-minicart-root .skd-mc-pinned + .skd-mc-footer { border-top: 0; padding-top: 4px; }
body #skd-minicart-root .skd-mc-total { align-items: baseline; padding-bottom: 14px; }
body #skd-minicart-root .skd-mc-total-label { font-size: 15px; font-weight: 600; }
body #skd-minicart-root .skd-mc-total-amt { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: normal; }
body #skd-minicart-root .skd-mc-total-mo { font-size: 14px; font-weight: 500; color: var(--ght-mute); }
body #skd-minicart-root .skd-mc-donate { height: 52px; gap: 8px; border-radius: 999px; background: var(--ght-blue); box-shadow: none; font-size: 16px; font-weight: 600; transition: background-color .2s; }
body #skd-minicart-root .skd-mc-donate:not(:disabled):hover { background: var(--ght-blue-d); }
/* an empty basket has nothing to check out: no dead grey button (the suggestions carry the action) */
body #skd-minicart-root .skd-mc-footer.is-empty .skd-mc-donate:disabled { display: none; }
body #skd-minicart-root .skd-mc-addmore { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ght-blue-d); }
body #skd-minicart-root .skd-mc-addmore:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── empty ── */
body #skd-minicart-root .skd-mc-empty { gap: 20px; padding: 28px 0 8px; }
body #skd-minicart-root .skd-mc-empty-icon { width: 64px; height: 64px; background: var(--ght-mist); color: var(--ght-blue-d); }
body #skd-minicart-root .skd-mc-empty-title { font-size: 18px; font-weight: 700; color: var(--ght-ink); }
body #skd-minicart-root .skd-mc-empty-sub { max-width: 280px; font-size: 15px; color: var(--ght-mute); }
body #skd-minicart-root .skd-mc-empty-list { gap: 0; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); }
body #skd-minicart-root .skd-mc-empty-item { gap: 12px; padding: 12px 14px; border: 0; border-radius: 0; }
body #skd-minicart-root .skd-mc-empty-item + .skd-mc-empty-item { border-top: 1px solid var(--ght-line); }
body #skd-minicart-root .skd-mc-empty-item .skd-mc-thumb { width: 44px; height: 44px; border-radius: var(--ght-r-s); font-size: 13px; }
body #skd-minicart-root .skd-mc-empty-item-title { font-size: 15px; font-weight: 600; }
body #skd-minicart-root .skd-mc-empty-item-sub { font-size: 13px; color: var(--ght-mute); }
body #skd-minicart-root .skd-mc-empty-add { height: 36px; padding: 0 16px; border: 1px solid var(--ght-line); border-radius: 999px; background: #fff; color: var(--ght-ink); font-size: 14px; font-weight: 600; transition: background-color .2s, border-color .2s; }
body #skd-minicart-root .skd-mc-empty-add:hover { border-color: var(--ght-blue); background: var(--ght-soft); color: var(--ght-blue-d); }

/* ── loading and the failure note ── */
body #skd-minicart-root :is(.skd-mc-skel-box, .skd-mc-skel-bar) { background: linear-gradient(90deg, var(--ght-mist) 25%, #E2EBF0 37%, var(--ght-mist) 63%); background-size: 400% 100%; }
body #skd-minicart-root .skd-mc-toast { border-radius: var(--ght-r-m); background: var(--ght-ink); font-family: var(--ght-ui); font-size: 14px; font-weight: 500; }

/* ── phones: the whole screen, like the menu (user: "full width" — the bottom sheet left the page
   showing above it); the footer stays at the bottom and the list scrolls between ── */
@media (max-width: 640px) {
	/* exactly the menu's panel (header.css .mnav__panel): anchored right, min(420px, 100%) wide — the
	   whole screen on phones up to 420px. SkyDonate's own phone rule set left:0, which pinned the panel to
	   the left with the page showing on its right (user) */
	body #skd-minicart-root .skd-mc-panel { top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100%); max-width: none; height: 100%; max-height: none; border-radius: 0; padding-bottom: 0; box-shadow: -1px 0 0 var(--ght-line); transform: translateX(100%); }
	body #skd-minicart-root .skd-mc-panel.open { transform: none; }
	body #skd-minicart-root .skd-mc-grab { display: none; }
	body #skd-minicart-root .skd-mc-header { min-height: var(--ght-hdr); padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px; }
	body #skd-minicart-root .skd-mc-title { font-size: 18px; }
	body #skd-minicart-root .skd-mc-close { width: 40px; height: 40px; }
	body #skd-minicart-root .skd-mc-body { padding: 0 18px 16px; }
	body #skd-minicart-root .skd-mc-pinned { padding: 0 18px 12px; }
	body #skd-minicart-root .skd-mc-footer { padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
	body #skd-minicart-root .skd-mc-thumb { width: 56px; height: 56px; font-size: 15px; }
	body #skd-minicart-root .skd-mc-line-title { font-size: 15px; }
	body #skd-minicart-root .skd-mc-remove { width: 36px; height: 36px; }
	body #skd-minicart-root .skd-mc-step { width: 36px; height: 36px; font-size: 18px; }
	/* the site's switch, same size on phones */
	body #skd-minicart-root .skd-mc-switch { width: 40px; height: 22px; border-radius: 999px; }
	body #skd-minicart-root .skd-mc-switch-knob { width: 16px; height: 16px; }
	body #skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob { left: 21px; }
	body #skd-minicart-root .skd-mc-donate { height: 52px; }
	body #skd-minicart-root .skd-mc-empty-add { height: 40px; }
}

/* 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; }
}

/* ght-auth */
/* GHH — donor sign-in card (GHT_Auth) and its pop-up.
 *
 * The Shopify-style card built for DÉCAAR, in the GHH look: logo, one step at a
 * time, floating labels, 5px buttons in the GHH blue, Schibsted Grotesk.
 * Self-contained (it also appears on the checkout page, outside the toolkit's
 * widgets); every control rule is written `.ght-auth <el>.class` so theme
 * button/input resets never win. */

.ght-auth, .ght-auth-modal { --ga-ink: #0B2638; --ga-blue: #1B9DD9; --ga-blue-d: #137CB0; --ga-mute: #5B7182; --ga-line: #D3DDE3; --ga-mist: #EEF4F7; --ga-err: #b3261e; --ga-ok: #1d6b3a; --ga-r: 5px; --ga-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; }
.ght-auth, .ght-auth *, .ght-auth *::before, .ght-auth *::after { box-sizing: border-box; }
/* a site-wide rule capitalises button words ("Forgot Password?"): sentence case here */
.ght-auth button, .ght-auth a, .ght-auth label { text-transform: none; }
.ght-auth { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 38px 36px 30px; border-radius: 14px; background: #fff; color: var(--ga-ink); font: 400 16px/1.5 var(--ga-font); -webkit-font-smoothing: antialiased; text-align: left; }
.ght-auth--page { box-shadow: 0 30px 60px -40px rgba(11, 38, 56, .4), 0 0 0 1px var(--ga-line); }
.ght-auth .ght-auth__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }

.ght-auth .ght-auth__view[hidden] { display: none; }
.ght-auth .ght-auth__view { animation: ght-auth-in .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes ght-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ght-auth .ght-auth__h { margin: 0 0 6px; padding: 0; font: 800 28px/1.15 var(--ga-font); letter-spacing: -.025em; color: var(--ga-ink); text-transform: none; }
.ght-auth .ght-auth__h:focus { outline: none; }
.ght-auth .ght-auth__sub, .ght-auth .ght-auth__who { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ga-mute); overflow-wrap: anywhere; }
.ght-auth .ght-auth__sub strong, .ght-auth .ght-auth__who span { color: var(--ga-ink); font-weight: 600; }
.ght-auth .ght-auth__form { display: grid; gap: 12px; margin: 0; }

/* fields with floating labels */
.ght-auth .ght-auth__f { position: relative; margin: 0; }
.ght-auth .ght-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ght-auth input.ght-auth__in { display: block; width: 100%; height: 52px; margin: 0; padding: 15px 13px; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 400 16px/1.3 var(--ga-font); box-shadow: none; outline: none; transition: padding .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.ght-auth input.ght-auth__in::placeholder { color: #7d8a93; opacity: 1; }
.ght-auth input.ght-auth__in:not(:placeholder-shown) { padding: 23px 13px 7px; }
.ght-auth input.ght-auth__in:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); }
.ght-auth input.ght-auth__in[aria-invalid="true"] { border-color: var(--ga-err); box-shadow: 0 0 0 1px var(--ga-err); }
.ght-auth .ght-auth__f > label { position: absolute; top: 7px; left: 14px; right: 44px; margin: 0; overflow: hidden; font: 400 12px/1.3 var(--ga-font); color: var(--ga-mute); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.ght-auth .ght-auth__f:has(input:not(:placeholder-shown)) > label { opacity: 1; transform: none; }
.ght-auth .ght-auth__f--pass input.ght-auth__in { padding-right: 50px; }
.ght-auth button.ght-auth__eye { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-mute); box-shadow: none; cursor: pointer; }
.ght-auth button.ght-auth__eye:hover, .ght-auth button.ght-auth__eye:focus { background: var(--ga-mist); color: var(--ga-ink); border: 0; }
.ght-auth button.ght-auth__eye[aria-pressed="true"] { color: var(--ga-ink); }
.ght-auth svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* buttons */
.ght-auth button.ght-auth__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; min-height: 52px; margin: 4px 0 0; padding: 0 20px; border: 1px solid var(--ga-blue); border-radius: var(--ga-r); background: var(--ga-blue); color: #fff; font: 700 16px/1 var(--ga-font); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; white-space: normal; transition: background-color .2s, border-color .2s, color .2s; }
.ght-auth button.ght-auth__btn:hover, .ght-auth button.ght-auth__btn:focus { border-color: var(--ga-blue-d); background: var(--ga-blue-d); color: #fff; }
.ght-auth button.ght-auth__btn:focus-visible, .ght-auth button.ght-auth__link:focus-visible, .ght-auth button.ght-auth__eye:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; }
.ght-auth button.ght-auth__btn--line { border-color: var(--ga-line); background: #fff; color: var(--ga-ink); font-weight: 600; }
.ght-auth button.ght-auth__btn--line:hover, .ght-auth button.ght-auth__btn--line:focus { border-color: var(--ga-ink); background: #fff; color: var(--ga-ink); }
.ght-auth button.ght-auth__btn[disabled], .ght-auth button.ght-auth__btn.is-busy { opacity: .7; cursor: default; }
.ght-auth .ght-auth__spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ght-auth-spin .7s linear infinite; }
.ght-auth .is-busy .ght-auth__spin { display: inline-block; }
@keyframes ght-auth-spin { to { transform: rotate(360deg); } }

.ght-auth button.ght-auth__link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ga-ink); font-family: var(--ga-font); font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; box-shadow: none; cursor: pointer; }
.ght-auth button.ght-auth__link:hover, .ght-auth button.ght-auth__link:focus { border: 0; background: none; color: var(--ga-blue-d); text-decoration-thickness: 2px; }
.ght-auth button.ght-auth__link[disabled] { color: var(--ga-mute); text-decoration: none; cursor: default; }
.ght-auth .ght-auth__alt { margin: 18px 0 0; font-size: 14.5px; color: var(--ga-mute); text-align: center; }
.ght-auth .ght-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.ght-auth .ght-auth__check { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 400; color: var(--ga-ink); cursor: pointer; }
.ght-auth .ght-auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ga-ink); }
.ght-auth .ght-auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 13px; color: var(--ga-mute); }
.ght-auth .ght-auth__or::before, .ght-auth .ght-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ga-line); }
.ght-auth .ght-auth__small { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ga-mute); }
.ght-auth .ght-auth__small a { color: var(--ga-ink); }
.ght-auth .ght-auth__err { margin: 0; padding: 10px 12px; border-radius: var(--ga-r); background: #fbeceb; color: var(--ga-err); font-size: 14px; line-height: 1.45; }
.ght-auth .ght-auth__err[hidden] { display: none; }
.ght-auth .ght-auth__ok { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--ga-r); background: var(--ga-mist); color: var(--ga-ok); font-size: 14.5px; line-height: 1.5; }
.ght-auth .ght-auth__ok[hidden] { display: none; }
/* staging only (email is blocked there): the two-step code shown in the pop-up */
.ght-auth .ght-auth__stg { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed #C9C9C9; border-radius: var(--ga-r); font-size: 14px; line-height: 1.5; color: var(--ga-ink); }
.ght-auth .ght-auth__stg strong { font-size: 17px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.ght-auth .ght-auth__stg[hidden] { display: none; }
.ght-auth [data-ght-auth-form="twostep"] .ght-auth__check { margin-top: 2px; }
.ght-auth .ght-auth__ghost { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ght-auth .ght-auth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* password strength */
.ght-auth .ght-auth__meter { display: grid; gap: 6px; margin-top: -4px; font-size: 13px; color: var(--ga-mute); }
.ght-auth .ght-auth__bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ga-mist); }
.ght-auth .ght-auth__bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ga-err); transition: width .25s, background-color .25s; }
.ght-auth .ght-auth__meter[data-level="1"] i { width: 25%; }
.ght-auth .ght-auth__meter[data-level="2"] i { width: 55%; background: #b7791f; }
.ght-auth .ght-auth__meter[data-level="3"] i { width: 80%; background: var(--ga-blue); }
.ght-auth .ght-auth__meter[data-level="4"] i { width: 100%; background: var(--ga-ok); }

/* 6-digit code */
.ght-auth .ght-auth__code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ght-auth input.ght-auth__digit { width: 100%; height: 56px; margin: 0; padding: 0; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 700 22px/1 var(--ga-font); text-align: center; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; }
.ght-auth input.ght-auth__digit:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); }
.ght-auth .ght-auth__code[aria-invalid="true"] input.ght-auth__digit { border-color: var(--ga-err); }

/* done */
.ght-auth .ght-auth__view--done { padding: 12px 0 6px; text-align: center; }
.ght-auth .ght-auth__tick { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--ga-mist); color: var(--ga-ok); }
.ght-auth .ght-auth__tick svg { width: 26px; height: 26px; stroke-width: 2; }

/* the account page when signed out: the card centred on the mist ground */
.ght-auth-page { display: flex; justify-content: center; padding: clamp(32px, 6vw, 72px) 16px; background: var(--ga-mist, #EEF4F7); }
.woocommerce:has(> .ght-auth-page) { max-width: none; }

/* ---------------------------------------------------------------- pop-up */
.ght-auth-modal { position: fixed; inset: 0; z-index: 1000002; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ght-auth-modal[hidden] { display: none; }
.ght-auth-modal__scrim { position: absolute; inset: 0; background: rgba(6, 20, 30, .55); animation: ght-auth-fade .2s ease; }
.ght-auth-modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: #fff; box-shadow: 0 40px 80px -30px rgba(6, 20, 30, .6); animation: ght-auth-pop .28s cubic-bezier(.16, 1, .3, 1); }
.ght-auth-modal .ght-auth { box-shadow: none; }
.ght-auth-modal button.ght-auth-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-ink); box-shadow: none; cursor: pointer; }
.ght-auth-modal button.ght-auth-modal__x:hover, .ght-auth-modal button.ght-auth-modal__x:focus { border: 0; background: var(--ga-mist); color: var(--ga-ink); }
.ght-auth-modal button.ght-auth-modal__x:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; }
.ght-auth-modal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@keyframes ght-auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ght-auth-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ght-auth-up { from { transform: translateY(100%); } to { transform: none; } }
html.ght-auth-lock, html.ght-auth-lock body { overflow: hidden; }
html.ght-auth-lock .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* phones: a bottom sheet that can grow to full height */
@media (max-width: 600px) {
	.ght-auth { padding: 32px 22px 24px; }
	.ght-auth .ght-auth__h { font-size: 25px; }
	.ght-auth .ght-auth__code { gap: 6px; }
	.ght-auth input.ght-auth__digit { height: 52px; font-size: 20px; }
	.ght-auth-modal { align-items: flex-end; padding: 0; }
	.ght-auth-modal__card { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); animation: ght-auth-up .32s cubic-bezier(.16, 1, .3, 1); }
	.ght-auth-modal__card::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--ga-line); }
}
@media (max-width: 360px) {
	.ght-auth .ght-auth__two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ght-auth .ght-auth__view, .ght-auth-modal__scrim, .ght-auth-modal__card { animation: none; }
}