/**
 * Prayer Landing Widget Kit
 *
 * Shared, brand-neutral base styling for the landing-page widget kit
 * (Header, Today's Times, Article, Qibla, Monthly, Nearby Cities, FAQ, CTA,
 * City Directory). Defaults reproduce the approved design; every meaningful
 * value is overridable per-widget via Elementor controls ({{WRAPPER}} selectors).
 *
 * Palette tokens are scoped so a customer can retheme the whole kit from one
 * place without touching individual widgets. No third-party font is loaded —
 * typography defaults to a neutral system stack and is set via Elementor.
 */

.spt-l {
    --spt-primary: #204C93;
    --spt-primary-dark: #16305c;
    --spt-primary-mid: #265aad;
    --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;

    font-family: var(--spt-font, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    color: var(--spt-ink);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.spt-l *,
.spt-l *::before,
.spt-l *::after {
    box-sizing: border-box;
}

.spt-l a {
    color: var(--spt-primary);
    text-decoration: none;
}

/* The header and today-strip bands paint their own background edge to edge and
   centre their content at 1120. Elementor's boxed container (the kit width, e.g.
   1440) cut the bands short on wide screens, leaving white gutters either side
   while the masjid pages ran full width — lift the cap on the container holding them. */
.e-con.e-parent > .e-con-inner:has(> .elementor-widget-sky-prayer-header, > .e-con > .elementor-widget-sky-prayer-header, > .elementor-widget-sky-prayer-today-cards) {
    max-width: none;
}

/* The sections carry their own 24px side padding; Elementor's container padding
   on top of it stepped them 16px in from the header on phones. */
.e-con.e-parent:has(> .e-con-inner > .elementor-widget-sky-prayer-intro, > .e-con-inner > .elementor-widget-sky-prayer-city-directory) {
    --padding-left: 0px;
    --padding-right: 0px;
}

/* The last section on the page (usually the city directory) ran straight into
   the site footer with ~10px between them. */
.elementor > .e-con.e-parent:last-child .elementor-widget:last-child > .elementor-widget-container > .spt-l {
    padding-bottom: 96px;
}
/* …unless the masjid list is appended after it (cities with masjids): that list
   carries the bottom space, and sits a normal section gap below the directory. */
.elementor:has(+ .spt-masjid-city-section) > .e-con.e-parent:last-child .elementor-widget:last-child > .elementor-widget-container > .spt-l {
    padding-bottom: 0;
}
.elementor + .spt-masjid-city-section { margin-top: 56px; }

/* Shared inner width wrapper (design uses 1120 for full-bleed, 900 for prose).
   City-page sections share the 1120 column with the header (as the masjid
   pages do); paragraphs keep a ~820px reading width inside it. */
.spt-l-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.spt-l-inner--narrow {
    max-width: 900px;
}

/* ===================================================================== *
 *  HEADER widget
 * ===================================================================== */

.spt-hdr__crumbs {
    border-bottom: 1px solid var(--spt-line-soft);
    background: var(--spt-bg-soft);
    font-size: 13px;
    color: var(--spt-muted);
}

.spt-hdr__crumbs .spt-l-inner {
    padding-top: 11px;
    padding-bottom: 11px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.spt-hdr__crumbs a {
    color: var(--spt-muted);
}

.spt-hdr__crumbs .spt-hdr__crumb-sep {
    color: var(--spt-muted);
    opacity: 0.7;
}

.spt-hdr__crumbs .is-current {
    color: var(--spt-primary-dark);
    font-weight: 600;
}

.spt-hdr__hero {
    position: relative;
    overflow: visible; /* let the city-search results dropdown escape the hero */
    color: #fff;
    background: linear-gradient(160deg, var(--spt-primary-mid) 0%, var(--spt-primary) 55%, var(--spt-primary-dark) 100%);
}

.spt-hdr__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.10), transparent 45%);
    pointer-events: none;
}

.spt-hdr__hero .spt-l-inner {
    position: relative;
    padding-top: 46px;
    padding-bottom: 52px;
}

.spt-hdr__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.spt-hdr__col {
    max-width: 560px;
}

.spt-hdr__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;
}

.spt-hdr__title {
    margin: 16px 0 8px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.spt-hdr__intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.spt-hdr__dateline {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.spt-hdr__dateline .spt-hdr__dot {
    margin: 0 8px;
    opacity: 0.6;
}

/* Countdown card */
.spt-hdr__countdown {
    text-align: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 22px 26px;
}

.spt-hdr__countdown-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.spt-hdr__countdown-clocks {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    justify-content: center;
}

.spt-hdr__clock {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 11px 15px;
    min-width: 62px;
}

.spt-hdr__clock-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.spt-hdr__clock--sec .spt-hdr__clock-num {
    color: var(--spt-accent-light);
}

.spt-hdr__clock-unit {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    letter-spacing: 0.08em;
}

@media (max-width: 640px) {
    .spt-hdr__title {
        font-size: 30px;
    }
    .spt-hdr__hero .spt-l-inner {
        padding-top: 34px;
        padding-bottom: 38px;
    }
    .spt-hdr__countdown {
        width: 100%;
    }
}

/* ===================================================================== *
 *  HEADER — merged location controls, redesigned countdown, drawer
 * ===================================================================== */

@keyframes dvpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Location control row (inside the hero left column) */
.spt-hdr__loc { margin-top: 24px; }
.spt-hdr__loc-label {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: rgba(255,255,255,0.6); margin-bottom: 9px;
}
.spt-hdr__loc-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.spt-hdr__search {
    flex: 1; min-width: 240px; position: relative; display: flex; align-items: center;
    gap: 11px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26);
    border-radius: 13px; padding: 0 8px 0 15px; height: 48px;
}
.spt-hdr__search:focus-within { border-color: #fff; background: rgba(255,255,255,0.22); }
.spt-hdr__search > svg { width: 19px; height: 19px; flex: none; color: rgba(255,255,255,0.85); }
.spt-hdr__search-input {
    flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit;
    font-size: 15.5px; font-weight: 700; color: #fff; background: transparent;
}
.spt-hdr__search-input::placeholder { color: rgba(255,255,255,0.6); font-weight: 600; }
.spt-hdr__search-results {
    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: 40;
    max-height: 340px; overflow-y: auto; padding: 7px; text-align: left;
}
.spt-hdr .spt-hdr__result,
.spt-hdr button.spt-hdr__result {
    display: flex !important; align-items: center !important; gap: 12px !important;
    width: 100% !important; text-align: left !important; border: 0 !important;
    background: none !important; padding: 9px 11px !important; border-radius: 11px !important;
    cursor: pointer !important; font-family: inherit !important; color: #16305c !important;
    box-shadow: none !important; transition: background 0.12s;
}
.spt-hdr__result-pin {
    width: 36px !important; height: 36px !important; flex: none !important;
    padding: 9px; border-radius: 10px; background: #eef4ff; color: #2f5bb7;
    box-sizing: border-box; transition: background 0.12s, color 0.12s;
}
.spt-hdr__result-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.spt-hdr__result-name { font-size: 14.5px; font-weight: 700; color: #16305c; }
.spt-hdr__result-sub {
    font-size: 12.5px; font-weight: 500; color: #8a94a8; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spt-hdr .spt-hdr__result:hover, .spt-hdr .spt-hdr__result.is-active { background: #f2f7ff !important; }
.spt-hdr__result:hover .spt-hdr__result-pin, .spt-hdr__result.is-active .spt-hdr__result-pin { background: #2f5bb7; color: #fff; }
.spt-hdr__result-empty { padding: 14px 12px; font-size: 13.5px; color: #8a94a8; text-align: center; }
.spt-hdr__locate {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px;
    flex: none; background: #fff; border: 0; border-radius: 13px; cursor: pointer;
    color: #204C93; font-family: inherit; font-size: 14.5px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(12,28,60,0.24); transition: background 0.15s, transform 0.15s;
}
.spt-hdr__locate:hover { background: #eef3fc; transform: translateY(-1px); }
.spt-hdr__locate svg { width: 19px; height: 19px; flex: none; }
.spt-hdr__settings-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px;
    flex: none; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26);
    border-radius: 13px; cursor: pointer; color: #fff; font-family: inherit;
    font-size: 14.5px; font-weight: 700; transition: background 0.15s;
}
.spt-hdr__settings-btn:hover { background: rgba(255,255,255,0.26); }
.spt-hdr__settings-btn svg { width: 20px; height: 20px; flex: none; }

/* Redesigned countdown card */
.spt-hdr__countdown {
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px; padding: 22px 26px 24px; min-width: 290px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.spt-hdr__cd-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spt-hdr__cd-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: dvpulse 1.6s infinite;
}
.spt-hdr__countdown-label {
    font-size: 12.5px; color: rgba(255,255,255,0.82); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.11em;
}
.spt-hdr__countdown-clocks { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.spt-hdr__clock {
    background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px; padding: 12px 16px; min-width: 66px;
}
.spt-hdr__clock-num { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.spt-hdr__clock--sec { border-color: rgba(242,193,78,0.35); }
.spt-hdr__clock--sec .spt-hdr__clock-num { color: #f2c14e; }
.spt-hdr__clock-unit { font-size: 10.5px; color: rgba(255,255,255,0.65); margin-top: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
.spt-hdr__cd-colon {
    display: flex; align-items: center; font-size: 26px; font-weight: 800;
    color: rgba(255,255,255,0.4); padding-bottom: 14px;
}
.spt-hdr__cd-progress { margin-top: 18px; }
.spt-hdr__cd-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.spt-hdr__cd-fill { height: 100%; background: linear-gradient(90deg,#f2c14e,#ffd97a); border-radius: 999px; transition: width 0.9s linear; }
.spt-hdr__cd-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.62); }

/* Settings drawer */
.spt-hdr__drawer[hidden] { display: none; }
.spt-hdr__drawer { position: fixed; inset: 0; z-index: 99999; }
.spt-hdr__drawer-overlay { position: fixed; inset: 0; background: rgba(16,28,54,0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.spt-hdr__drawer-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 88vw;
    background: #fff; box-shadow: -12px 0 40px rgba(16,28,54,0.22);
    display: flex; flex-direction: column; overflow-y: auto;
}
.spt-hdr__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #eef1f6; }
.spt-hdr__drawer-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: #16305c; }
.spt-hdr__drawer-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; }
.spt-hdr__drawer-body { padding: 22px; }
.spt-hdr__drawer-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8fa0c4; margin-bottom: 12px; }
.spt-hdr__drawer-heading + .spt-hdr__madhabs, .spt-hdr__methods + .spt-hdr__drawer-heading { margin-top: 26px; }
.spt-hdr__methods { display: flex; flex-direction: column; gap: 9px; }
.spt-hdr__method { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 13px 15px; border: 1.5px solid #e6e9f0; background: #fff; border-radius: 12px; cursor: pointer; font-family: inherit; }
.spt-hdr__method.is-active { border-color: #204C93; background: #f4f8ff; }
.spt-hdr__method-dot { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid #cbd5e6; background: #fff; }
.spt-hdr__method.is-active .spt-hdr__method-dot { border-color: #204C93; background: #204C93; box-shadow: inset 0 0 0 3px #fff; }
.spt-hdr__method-name { display: block; font-size: 14.5px; font-weight: 700; color: #16305c; }
.spt-hdr__method-desc { display: block; font-size: 12.5px; color: #7a8699; margin-top: 2px; line-height: 1.4; }
.spt-hdr__madhabs { display: flex; gap: 10px; }
.spt-hdr__madhab { flex: 1; padding: 13px 10px; border: 1.5px solid #e6e9f0; background: #fff; border-radius: 12px; cursor: pointer; font-family: inherit; text-align: center; }
.spt-hdr__madhab.is-active { border-color: #204C93; background: #f4f8ff; }
.spt-hdr__madhab-name { display: block; font-size: 14.5px; font-weight: 700; color: #16305c; }
.spt-hdr__madhab.is-active .spt-hdr__madhab-name { color: #204C93; }
.spt-hdr__madhab-desc { display: block; font-size: 12px; color: #7a8699; margin-top: 2px; }
.spt-hdr__drawer-note { margin-top: 26px; padding: 14px 16px; background: #f4f8ff; border: 1px solid #dce6f6; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #4a5f85; }
.spt-hdr__drawer-apply { width: 100%; margin-top: 22px; padding: 14px; background: #204C93; color: #fff; border: 0; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

/* Neutralise theme input styling so the search field is transparent inside the
   translucent pill (themes like WoodMart force a white bg / border / radius). */
.spt-hdr .spt-hdr__search-input,
.spt-hdr input.spt-hdr__search-input {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
}
.spt-hdr .spt-hdr__search-input:focus { background: transparent !important; box-shadow: none !important; outline: none !important; }
.spt-hdr .spt-hdr__search-input::placeholder { color: rgba(255, 255, 255, 0.6) !important; opacity: 1; }

/* Neutralise theme <button> styling across the header controls + drawer. */
.spt-hdr button {
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    min-height: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.spt-hdr .spt-hdr__locate,
.spt-hdr button.spt-hdr__locate {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    height: 48px !important; padding: 0 20px !important; background: #fff !important;
    color: #204C93 !important; border: 0 !important; border-radius: 13px !important;
    font-family: inherit !important; font-size: 14.5px !important; font-weight: 800 !important;
    line-height: 1 !important; box-shadow: 0 6px 18px rgba(12, 28, 60, 0.24) !important;
}
.spt-hdr .spt-hdr__locate:hover { background: #eef3fc !important; color: #204C93 !important; transform: translateY(-1px); }
.spt-hdr .spt-hdr__settings-btn,
.spt-hdr button.spt-hdr__settings-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    height: 48px !important; padding: 0 16px !important; background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 13px !important; font-family: inherit !important; font-size: 14.5px !important;
    font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important;
}
.spt-hdr .spt-hdr__settings-btn:hover { background: rgba(255, 255, 255, 0.26) !important; color: #fff !important; }
.spt-hdr .spt-hdr__locate svg, .spt-hdr .spt-hdr__settings-btn svg { flex: none !important; }

/* Drawer buttons — force layout too (theme centres button text by default) */
.spt-hdr .spt-hdr__method {
    display: flex !important; align-items: flex-start !important; gap: 12px !important;
    text-align: left !important; padding: 13px 15px !important; width: 100% !important;
    background: #fff !important; border: 1.5px solid #e6e9f0 !important; color: #16305c !important;
}
.spt-hdr .spt-hdr__method.is-active { border-color: #204C93 !important; background: #f4f8ff !important; }
.spt-hdr .spt-hdr__method-dot { flex: none !important; margin-top: 1px !important; }
.spt-hdr .spt-hdr__method-txt { display: block !important; text-align: left !important; flex: 1 1 auto !important; }
.spt-hdr .spt-hdr__method-name { display: block !important; text-align: left !important; }
.spt-hdr .spt-hdr__method-desc { display: block !important; text-align: left !important; }
.spt-hdr .spt-hdr__madhab {
    display: block !important; text-align: center !important; padding: 13px 10px !important;
    background: #fff !important; border: 1.5px solid #e6e9f0 !important;
}
.spt-hdr .spt-hdr__madhab.is-active { border-color: #204C93 !important; background: #f4f8ff !important; }
.spt-hdr .spt-hdr__madhab-name { display: block !important; }
.spt-hdr .spt-hdr__madhab-desc { display: block !important; }
.spt-hdr .spt-hdr__drawer-apply { display: block !important; width: 100% !important; text-align: center !important; background: #204C93 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; font-weight: 700 !important; }
.spt-hdr .spt-hdr__drawer-x { background: #f2f5fa !important; color: #5b6b86 !important; border: 0 !important; box-shadow: none !important; }