/**
 * Sky Prayer Timetable — parent design system.
 *
 * The single source of truth for the landing-page design language, extracted
 * pixel-for-pixel from the /prayer-times/ hub (the canonical reference, built
 * from the "Prayer Times.dc.html" Claude Design handoff). Every prayer landing
 * surface — the worldwide hub, the UK city hub, the masjid directory, masjid
 * profiles and the city CTA widget — consumes these components instead of
 * carrying its own copy.
 *
 * Components:
 *   .spt-ds-bleed        full-viewport-width breakout
 *   .spt-ds-crumbs       breadcrumb band
 *   .spt-ds-hero         gradient hero (badge, title, sub)
 *   .spt-ds-searchpill   white hero search pill
 *   .spt-ds-narrow/-wide 840px / 1120px content columns
 *   .spt-ds-prose        long-form copy
 *   .spt-ds-group/-grid  directory group + compact link cards
 *   .spt-ds-faq          FAQ accordion (toggled by design-system.js)
 *   .spt-ds-verified     Scholar Verified seal
 *   .spt-app/.spt-phone  "Never miss a prayer" app card + phone mockup
 *   .spt-ds-donate       donate CTA banner
 *
 * Markup for the composed blocks comes from Sky_Prayer_Design_System.
 */

/* Self-hosted Plus Jakarta Sans (variable, latin) — no external font request. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Design tokens, shared by every design-system root. */
.sptg, .spt-masjid, .spt-l, .spt-cta-wrap, .spt-ds, .spt-masjid-city-section {
    --spt-primary: #204C93;
    --spt-primary-dark: #16305c;
    --spt-primary-mid: #265aad;
    --spt-hero-end: #1a3f7d;
    --spt-accent: #e0902a;
    --spt-accent-light: #f2c14e;
    --spt-ink: #1c2431;
    --spt-heading: #16305c;
    --spt-body: #3a465c;
    --spt-muted: #7a8699;
    --spt-line: #e6e9f0;
    --spt-line-soft: #eef1f6;
    --spt-bg-soft: #fafbfd;
    /* Theming hooks (1.25.0): a host theme can retheme every prayer page by
       overriding these on the roots above. */
    --spt-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --spt-label: #8fa0c4;   /* small caps-style labels */
    --spt-faint: #9aa4b5;   /* placeholder, "soon", helper text */
    --spt-tint: #eef3fc;    /* icon tiles, selected/next fills */
    --spt-tint-2: #f4f8ff;  /* hover and note fills */
    --spt-tint-line: #dce6f6;
}

/* Break out of any centred theme container to span the full viewport. */
.spt-ds-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Content columns. "Narrow" sections share the 1120 column so their left edge
   lines up with the hero and the wide sections (they sat centred at 840 and
   stepped in); prose inside keeps an 820px reading width. */
.spt-ds-narrow { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.spt-ds-wide { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.spt-ds-gap { margin-top: 44px; }
.spt-ds-gap-sm { margin-top: 34px; }

/* ===================================================================== *
 *  Breadcrumb band
 * ===================================================================== */
.spt-ds-crumbs {
    border-bottom: 1px solid #f0f2f6;
    background: var(--spt-bg-soft);
    font-size: 13px;
    color: var(--spt-muted);
}
.spt-ds-crumbs-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* Doubled selectors: consumer roots (.sptg/.spt-masjid) print their own
   generic `a { color }` rules later in the cascade — these must outrank them. */
.spt-ds-crumbs a,
.spt-ds-crumbs .spt-ds-crumbs-inner a { color: var(--spt-muted); text-decoration: none !important; }
.spt-ds-crumbs a:hover,
.spt-ds-crumbs .spt-ds-crumbs-inner a:hover { color: var(--spt-primary); }
.spt-ds-crumbs .sep { opacity: 0.7; }
.spt-ds-crumbs .is-current { color: var(--spt-primary-dark); font-weight: 600; }

/* ===================================================================== *
 *  Hero
 * ===================================================================== */
.spt-ds-hero {
    position: relative;
    overflow: visible; /* the hub search autocomplete overflows the hero */
    color: #fff;
    background: linear-gradient(160deg, var(--spt-primary-mid) 0%, var(--spt-primary) 55%, var(--spt-hero-end) 100%);
}
.spt-ds-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 10%, rgba(255,255,255,0.10), transparent 45%);
}
.spt-ds-hero-inner {
    max-width: 840px;
    margin: 0 auto;
    padding: 52px 24px 56px;
    position: relative;
    text-align: center;
}
.spt-ds-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.14);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.spt-ds-hero-badge svg { width: 16px; height: 16px; flex: none; }
.spt-ds-hero-title {
    margin: 16px 0 10px;
    font-size: 41px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.06;
    color: #fff;
}
.spt-ds-hero-sub {
    margin: 0 auto 26px;
    font-size: 16.5px;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    max-width: 580px;
}
@media (max-width: 600px) { .spt-ds-hero-title { font-size: 32px; } }

/* Hero search pill. */
.spt-ds-searchwrap { position: relative; max-width: 520px; margin: 0 auto; }
.spt-ds-searchpill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 10px 30px rgba(16,28,54,0.22);
}
.spt-ds-searchpill > svg { width: 20px; height: 20px; flex: none; color: #9aa4b5; }
.spt-ds-searchpill input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--spt-heading) !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.spt-ds-searchpill input::placeholder { color: #9aa4b5 !important; opacity: 1; }
.spt-ds-searchpill-btn {
    background: var(--spt-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 11px 20px !important;
    border-radius: 10px !important;
    border: 0 !important;
    cursor: pointer;
    font-family: inherit !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    flex: none;
}

/* ===================================================================== *
 *  Hub and country directory pages (class-prayer-countries.php)
 *  Was inline style="" until 1.25.0; same look, now themeable.
 * ===================================================================== */
.sptg-sec { max-width: 1120px; margin: 0 auto; padding: 34px 24px 8px; }
.sptg-sec--popular { padding-top: 40px; }
.sptg-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--spt-label);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 16px;
}
.sptg-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.sptg .sptg__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--spt-tint-2);
    border: 1px solid var(--spt-tint-line);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--spt-primary);
}
.sptg .sptg__pill.is-soon { background: #f7f9fc; border-color: var(--spt-line-soft); color: var(--spt-faint); }
.sptg .sptg__pill:not(.is-soon):hover { background: var(--spt-primary); color: #fff; }
.sptg-flag { font-size: 17px; }
.sptg-flag--item { font-size: 18px; }
.sptg-flag.is-soon { opacity: 0.7; }
.sptg .spt-ds-item-main.has-dot { gap: 10px; }
.sptg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spt-primary); flex: none; }
.sptg-dot.is-soon { background: #c3cbd9; }
.sptg-letter {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--spt-primary);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    border-radius: 9px;
}
.sptg-noresults { display: none; text-align: center; padding: 50px 20px; color: var(--spt-muted); }
.sptg-noresults__title { font-size: 17px; font-weight: 700; color: var(--spt-heading); margin-bottom: 6px; }
.sptg-noresults__hint { font-size: 14.5px; }

/* Hero search autocomplete. */
.sptg-ac {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eaeef5;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(16,28,54,0.20);
    z-index: 100050;
    max-height: 340px;
    overflow-y: auto;
    padding: 7px;
    text-align: left;
}
.sptg .sptg-ac__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 9px 11px;
    border-radius: 11px;
    cursor: pointer;
    font-family: inherit;
    color: var(--spt-heading);
}
.sptg .sptg-ac__item:hover { background: #f2f7ff; }
.sptg-ac__pin {
    width: 36px;
    height: 36px;
    flex: none;
    padding: 9px;
    border-radius: 10px;
    background: #eef4ff;
    color: #2f5bb7;
    box-sizing: border-box;
}
.sptg-ac__label { font-size: 14.5px; font-weight: 700; color: var(--spt-heading); }
.sptg-ac__empty { padding: 14px 12px; font-size: 13.5px; color: #8a94a8; text-align: center; }

/* Live "times now" panel. */
.sptg-panel-sec { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 5; }
.sptg-panel {
    margin-top: -34px;
    background: #fff;
    border: 1px solid var(--spt-line);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(16,28,54,0.14);
    overflow: hidden;
}
.sptg__locbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--spt-line-soft);
    background: var(--spt-bg-soft);
}
.sptg-locicon {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--spt-tint);
    border-radius: 10px;
    color: var(--spt-primary);
}
.sptg-locicon svg { width: 20px; height: 20px; }
.sptg__locinfo { flex: 1; min-width: 0; }
.sptg-loclabel { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--spt-label); }
.sptg-locname { font-size: 16px; font-weight: 800; color: var(--spt-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sptg .sptg-locate {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--spt-line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--spt-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
}
.sptg .sptg-gear {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f5fa;
    border: 1px solid var(--spt-line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--spt-body);
}
.sptg-panel-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 22px 6px; }
.sptg-greg { font-size: 13.5px; color: var(--spt-muted); font-weight: 600; }
.sptg-hijri { font-size: 13px; color: #a9b4c6; font-weight: 600; margin-top: 2px; }
.sptg-nextwrap { display: flex; align-items: center; gap: 12px; }
.sptg-next { font-size: 13px; color: var(--spt-muted); font-weight: 700; }
.sptg-cd { font-family: var(--spt-font); font-size: 24px; font-weight: 800; color: var(--spt-primary); letter-spacing: 0.02em; }
.sptg-panel-body { padding: 12px 22px 22px; }
/* The tiles arrive by script after the visitor's location is found: their final height is kept
   free from the first paint so the page below doesn't jump (Lighthouse layout shift 0.15–0.2).
   One row of six from 814px, two rows of three from 448px, three rows of two below. */
.sptg-prayers { display: flex; gap: 12px; flex-wrap: wrap; min-height: 84px; align-content: flex-start; }
@media (max-width: 813px) { .sptg-prayers { min-height: 179px; } }
@media (max-width: 447px) { .sptg-prayers { min-height: 275px; } }
.sptg-help { font-size: 12.5px; color: var(--spt-faint); margin: 14px 0 0; }
.sptg-pt {
    flex: 1 1 110px;
    min-width: 100px;
    background: var(--spt-bg-soft);
    border: 1.5px solid var(--spt-line);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
}
.sptg-pt.is-next { background: var(--spt-tint); border-color: var(--spt-primary); }
.sptg-pt__badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spt-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}
.sptg-pt__name { font-size: 13.5px; font-weight: 600; color: var(--spt-primary); }
.sptg-pt__time { font-size: 18px; font-weight: 800; color: var(--spt-heading); margin-top: 3px; }
.sptg-err { flex: 1 1 100%; background: #fff7f5; border: 1.5px solid #f0cfc6; border-radius: 14px; padding: 16px; text-align: center; }
.sptg-err__msg { font-size: 13.5px; font-weight: 600; color: #8a4b3a; }
.sptg .sptg-err__btn { margin-top: 10px; padding: 9px 18px; background: var(--spt-primary); color: #fff; border: 0; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Settings drawer. */
.sptg-overlay { display: none; position: fixed; inset: 0; background: rgba(16,28,54,0.45); z-index: 100060; backdrop-filter: blur(2px); }
.sptg-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 88vw;
    background: #fff;
    z-index: 100061;
    box-shadow: -12px 0 40px rgba(16,28,54,0.22);
    flex-direction: column;
    overflow-y: auto;
}
.sptg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--spt-line-soft); }
.sptg .sptg-drawer__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--spt-heading); }
.sptg .sptg-close--x {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f5fa;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    color: #5b6b86;
    font-size: 20px;
    line-height: 1;
}
.sptg-drawer__body { padding: 22px; }
.sptg-drawer__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--spt-label); margin-bottom: 12px; }
.sptg-drawer__label--gap { margin: 26px 0 12px; }
.sptg-methods { display: flex; flex-direction: column; gap: 9px; }
.sptg .sptg-method {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
    text-align: left;
    padding: 13px 15px;
    border: 1.5px solid var(--spt-line);
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
}
.sptg-method .dot { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid #c3cbd9; background: #fff; }
.sptg-method__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--spt-heading); }
.sptg-method__desc { display: block; font-size: 12.5px; color: var(--spt-muted); margin-top: 2px; line-height: 1.4; }
.sptg-madhabs { display: flex; gap: 10px; }
.sptg .sptg-madhab {
    flex: 1;
    padding: 13px 10px;
    border: 1.5px solid var(--spt-line);
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.sptg-madhab .nm { display: block; font-size: 14.5px; font-weight: 700; color: var(--spt-heading); }
.sptg-madhab__desc { display: block; font-size: 12px; color: var(--spt-muted); margin-top: 2px; }
.sptg .sptg-method.is-selected,
.sptg .sptg-madhab.is-selected { border-color: var(--spt-primary); background: var(--spt-tint-2); }
.sptg-method.is-selected .dot { border-color: var(--spt-primary); background: var(--spt-primary); box-shadow: inset 0 0 0 3px #fff; }
.sptg-madhab.is-selected .nm { color: var(--spt-primary); }
.sptg-drawer__note {
    margin-top: 26px;
    padding: 14px 16px;
    background: var(--spt-tint-2);
    border: 1px solid var(--spt-tint-line);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #4a5f85;
}
.sptg .sptg-apply {
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    background: var(--spt-primary);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ===================================================================== *
 *  Long-form copy
 * ===================================================================== */
.spt-ds-prose h2 {
    font-size: 23px;
    font-weight: 800;
    color: var(--spt-heading);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.spt-ds-prose p {
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--spt-body);
    margin: 0 0 16px;
    max-width: 820px;
}
.spt-ds-prose p:last-child { margin-bottom: 0; }
.spt-ds-prose a { font-weight: 700; color: var(--spt-primary); }
.spt-ds-prose a:hover { text-decoration: underline; }

/* ===================================================================== *
 *  Directory — section head, groups and compact link cards
 * ===================================================================== */
.spt-ds-dirhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.spt-ds-dirhead h2 { font-size: 24px; font-weight: 800; color: var(--spt-heading); margin: 0; letter-spacing: -0.01em; }
.spt-ds-dirtotal { font-size: 14px; color: var(--spt-muted); font-weight: 600; }
.spt-ds-groups { display: flex; flex-direction: column; gap: 30px; }
.spt-ds-grouphead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.spt-ds-grouplabel {
    font-size: 13px;
    font-weight: 800;
    color: var(--spt-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.spt-ds-grouprule { flex: 1; height: 1px; background: var(--spt-line-soft); }
.spt-ds-groupcount { font-size: 12.5px; color: #9aa4b5; font-weight: 600; }
.spt-ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.spt-ds-grid--lg { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.spt-ds-item,
.spt-ds-grid .spt-ds-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--spt-line);
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--spt-heading);
    text-decoration: none !important;
    transition: border-color 0.14s, background 0.14s;
}
a.spt-ds-item:hover,
.spt-ds-grid a.spt-ds-item:hover { border-color: var(--spt-primary); background: #f4f8ff; color: var(--spt-primary); }
.spt-ds-item-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.spt-ds-item-name { display: block; font-size: 14.5px; font-weight: 700; color: inherit; }
.spt-ds-item-area { display: block; font-size: 12.5px; font-weight: 600; color: var(--spt-muted); margin-top: 2px; }
.spt-ds-item-arrow { color: #a9b4c6; font-weight: 600; flex: none; }
svg.spt-ds-item-arrow { width: 18px; height: 18px; color: var(--spt-primary); }
.spt-ds-noresults { color: var(--spt-muted); font-size: 15px; padding: 20px 0; }

/* ===================================================================== *
 *  FAQ accordion (behaviour in design-system.js)
 * ===================================================================== */
.spt-ds-faq-h { font-size: 23px; font-weight: 800; color: var(--spt-heading); margin: 0 0 18px; letter-spacing: -0.01em; }
.spt-ds-faq-item { border: 1px solid var(--spt-line); border-radius: 14px; margin: 0 0 10px; overflow: hidden; background: #fff; }
.spt-ds-faq-q {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    text-align: left !important;
    background: #fff !important;
    border: 0 !important;
    cursor: pointer;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--spt-heading) !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.spt-ds-faq-q:hover { color: var(--spt-primary) !important; }
.spt-ds-faq-sign { flex: none; width: 20px; height: 20px; position: relative; }
.spt-ds-faq-sign::before,
.spt-ds-faq-sign::after {
    content: "";
    position: absolute;
    background: var(--spt-primary);
    border-radius: 2px;
    transition: transform 0.2s;
}
.spt-ds-faq-sign::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.spt-ds-faq-sign::after { left: 9px; top: 2px; bottom: 2px; width: 2px; }
.spt-ds-faq-item.is-open .spt-ds-faq-sign::after { transform: scaleY(0); }
.spt-ds-faq-a { display: none; padding: 0 20px 18px; font-size: 15.5px; line-height: 1.7; color: var(--spt-body); }
.spt-ds-faq-item.is-open .spt-ds-faq-a { display: block; }

/* Scholar Verified seal. */
.spt-ds-verified {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 18px;
    background: #f2fbf8;
    border: 1px solid #cdeee3;
    border-radius: 14px;
}
.spt-ds-verified svg { flex: none; width: 34px; height: 34px; }
.spt-ds-verified-label { display: block; font-size: 14.5px; font-weight: 800; color: var(--spt-heading); }
.spt-ds-verified-note { margin: 2px 0 0; font-size: 13px; color: #5a6577; line-height: 1.5; }

/* ===================================================================== *
 *  "Never miss a prayer" app card + phone mockup
 *  (width comes from the wrapper — .spt-ds-wide here, .spt-cta widgets
 *  keep their own 900px wrapper)
 * ===================================================================== */
.spt-app__box {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--spt-line);
    border-radius: 20px;
    padding: 34px 38px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(20,40,90,0.05);
}
.spt-app__box::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,76,147,0.06), transparent 70%);
    pointer-events: none;
}
.spt-app__copy { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.spt-app__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eef3fc;
    color: var(--spt-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
}
.spt-app__badge svg { width: 14px; height: 14px; }
.spt-app__heading { font-size: 24px; font-weight: 800; color: var(--spt-heading); margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.02em; }
.spt-app__text { font-size: 15.5px; color: #5b6b86; margin: 0 0 20px; line-height: 1.6; max-width: 420px; }
.spt-app__features { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.spt-app__feature { display: flex; align-items: center; gap: 10px; }
.spt-app__feature svg { width: 20px; height: 20px; color: var(--spt-primary); }
.spt-app__feature span { font-size: 13.5px; font-weight: 600; color: var(--spt-body); }
.spt-app__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.spt-app__btn {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--spt-primary-dark);
    color: #fff !important;
    padding: 11px 20px;
    border-radius: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s;
}
.spt-app__btn:hover { background: var(--spt-primary); color: #fff !important; }
.spt-app__btn svg { width: 22px; height: 22px; flex: none; }
.spt-app__btn-txt { text-align: left; line-height: 1.1; color: #fff !important; }
.spt-app__btn-sub { display: block; font-size: 10px; font-weight: 500; opacity: 0.8; color: #fff !important; }
.spt-app__btn-main { display: block; font-size: 15px; font-weight: 700; color: #fff !important; }
.spt-app__preview { flex: none; position: relative; z-index: 1; }
.spt-phone {
    width: 132px;
    height: 266px;
    border-radius: 26px;
    background: linear-gradient(160deg, var(--spt-primary-mid), var(--spt-primary-dark));
    padding: 9px;
    box-shadow: 0 14px 34px rgba(20,40,90,0.28);
}
.spt-phone__screen { width: 100%; height: 100%; border-radius: 19px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.spt-phone__top { background: linear-gradient(160deg, var(--spt-primary-mid), var(--spt-primary)); padding: 16px 12px 14px; color: #fff; }
.spt-phone__loc { font-size: 8.5px; opacity: 0.8; font-weight: 600; }
.spt-phone__cdlabel { font-size: 9px; font-weight: 700; margin-top: 8px; opacity: 0.85; }
.spt-phone__cd { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.spt-phone__list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.spt-phone__row {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 600;
    color: var(--spt-heading);
    background: #f4f8ff;
    border-radius: 7px;
    padding: 6px 9px;
}
.spt-phone__row span { color: var(--spt-muted); }
.spt-phone__row.is-next { color: #fff; background: var(--spt-primary); }
.spt-phone__row.is-next span { color: #fff; opacity: 0.85; }
@media (max-width: 600px) {
    .spt-app__box { justify-content: center; }
    .spt-app__preview { margin: 0 auto; }
    .spt-app__buttons { flex-wrap: nowrap; }
    .spt-app__btn { flex: 1; justify-content: center; padding: 11px 12px; }
}

/* ===================================================================== *
 *  Donate CTA banner
 * ===================================================================== */
.spt-ds-donate-sec { margin-top: 48px; padding-bottom: 56px; }
.spt-ds-donate {
    background: linear-gradient(155deg, var(--spt-primary-dark), var(--spt-primary));
    border-radius: 20px;
    padding: 42px 40px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.spt-ds-donate::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 0%, rgba(255,255,255,0.10), transparent 40%);
}
.spt-ds-donate-in { position: relative; }
.spt-ds-donate h2 { font-size: 27px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; color: #fff; }
.spt-ds-donate p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 24px; line-height: 1.6; }
.spt-ds-donate-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.spt-ds-donate-btn {
    display: inline-block;
    font-weight: 700;
    font-size: 15.5px;
    padding: 13px 30px;
    border-radius: 999px;
    text-decoration: none !important;
    line-height: 1.2;
}
.spt-ds-donate-btn--primary { background: var(--spt-accent); color: #fff !important; }
.spt-ds-donate-btn--primary:hover { background: #cf8020; color: #fff !important; }
.spt-ds-donate-btn--ghost { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff !important; }
.spt-ds-donate-btn--ghost:hover { background: rgba(255,255,255,0.24); color: #fff !important; }