/* sky-prayer-fonts */
/* Self-hosted Google Font (Share Tech Mono) — bundled to avoid third-party
   requests to fonts.googleapis.com/gstatic.com (GDPR + performance). */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://ghh.org.uk/wp-content/plugins/sky-prayer-timetable/assets/fonts/share-tech-mono-v16-latin.woff2") format('woff2');
}

/* sky-prayer-split-design */
/**
 * Sky Prayer Timetable - Split Design Styles
 *
 * Modern split-layout design with blue header/footer and white content.
 * Features a 2x3 grid of prayer boxes with full Elementor styling support.
 *
 * @package Sky_Prayer_Timetable
 */

/* Note: Share Tech Mono font is loaded via PHP wp_enqueue_style for better performance */

/* ========================================
   CSS Variables for Split Design
   ======================================== */
:root {
    --sky-split-primary-color: #204c93;
    --sky-split-header-bg: #204c93;
    --sky-split-content-bg: #ffffff;
    --sky-split-content-header-bg: #f8f9fa;
    --sky-split-footer-bg: #204c93;
    --sky-split-text-light: #ffffff;
    --sky-split-text-dark: #204c93;
    --sky-split-text-muted: #666666;
    --sky-split-border-color: #e0e0e0;
    --sky-split-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sky-split-font-family: 'Roboto Condensed', sans-serif;
    --sky-split-active-bg: #204c93;
}

/* ========================================
   Main Widget Container
   ======================================== */
.sky-split-timetable-widget {
    font-family: var(--sky-split-font-family);
    position: relative;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.sky-split-timetable-widget *,
.sky-split-timetable-widget *::before,
.sky-split-timetable-widget *::after {
    box-sizing: border-box;
}

/* ========================================
   Header Section
   ======================================== */
.sky-split-header {
    background-color: #204c93;
    background-image: url("https://ghh.org.uk/wp-content/plugins/sky-prayer-timetable/assets/img/arabesque-bg.svg");
    background-repeat: repeat;
    background-size: auto;
    color: #ffffff;
    padding: 20px 30px 30px;
    text-align: center;
    position: relative;
}

.sky-split-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* Header overlay for background images */
.sky-split-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.sky-split-english-date {
    font-weight: 500;
}

.sky-split-current-time {
    font-size: 18px;
    font-weight: 600;
}

.sky-split-arabic-date {
    direction: rtl;
    font-size: 14px;
}

/* ========================================
   Countdown Section - Labels Under Numbers
   ======================================== */
.sky-split-countdown-section {
    margin-top: 15px;
    position: relative;
    z-index: 1;
}

.sky-split-countdown-text {
    font-size: 20px;
    margin-bottom: 15px;
}

.sky-split-next-prayer-name {
    font-weight: 700;
    text-transform: uppercase;
}

.sky-split-countdown-timer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}

.sky-split-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sky-split-countdown-number {
    font-family: "Share Tech Mono", monospace;
    font-size: 72px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.sky-split-countdown-separator {
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    margin: 0 5px;
    opacity: 0.8;
    height: 72px; /* Match the number font-size to align vertically */
    display: flex;
    align-items: center;
}

.sky-split-countdown-label {
    display: inline-block;
    background-color: #204c938a;
    color: #fff;
    border-radius: 7px;
    padding: 3px 10px 3px 10px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 10px;
}

/* ========================================
   Content Section
   ======================================== */
.sky-split-content {
    background-color: var(--sky-split-content-bg);
    color: var(--sky-split-text-dark);
    padding: 0px 0px 0px 0px;
}

.sky-split-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    background-color: var(--sky-split-content-header-bg);
    border-bottom: 1px solid var(--sky-split-border-color);
}

.sky-split-content-date {
    flex: 1;
    text-align: center;
}

.sky-split-content-english-date {
    font-size: 18px;
    font-weight: 600;
    color: var(--sky-split-primary-color);
    margin-bottom: 5px;
}

.sky-split-content-hijri-date {
    font-size: 14px;
    color: var(--sky-split-primary-color);
    opacity: 0.8;
}

/* Navigation Buttons */
.sky-split-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(32, 76, 147, 0.1);
    border: 2px solid #204c93;
    color: #204c93;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
}

.sky-split-nav-btn:hover {
    background-color: #204c93;
    color: #ffffff;
}

.sky-split-nav-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 76, 147, 0.3);
}

.sky-split-nav-btn svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sky-split-nav-btn svg path {
    fill: none;
    stroke: currentColor;
}

/* ========================================
   Prayer Grid
   ======================================== */
.sky-split-prayer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 0px 20px 0px;
}

.sky-split-prayer-box {
    background-color: #f8f9fa;
    border: 1px solid var(--sky-split-border-color);
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: var(--sky-split-box-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.sky-split-prayer-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.sky-split-prayer-box.active {
    background-color: #204c93;
    border-color: #204c93;
}

.sky-split-prayer-box.active .sky-split-prayer-name,
.sky-split-prayer-box.active .sky-split-prayer-time {
    color: #ffffff;
}

/* Iqamah in active state - all text white */
.sky-split-prayer-box.active .sky-split-iqamah,
.sky-split-prayer-box.active .sky-split-iqamah-time {
    color: #ffffff !important;
}

/* Name row - icon beside prayer name */
.sky-split-name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
}

/* Icon styles */
.sky-split-prayer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sky-split-prayer-icon img,
.sky-split-prayer-icon svg,
.sky-split-prayer-icon lottie-player {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sky-split-prayer-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    color: #204c93;
}

.sky-split-prayer-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Icon color in active state - controlled by Elementor settings */
/* Default fallback: invert to white for visibility on blue background */
.sky-split-prayer-box.active .sky-split-prayer-icon img,
.sky-split-prayer-box.active .sky-split-prayer-icon svg {
    filter: brightness(0) invert(1);
}

.sky-split-prayer-time {
    font-family: "Share Tech Mono", monospace;
    font-size: 32px;
    font-weight: 400;
    color: #204c93;
    line-height: 1.2;
    margin-bottom: 8px;
}

.sky-split-iqamah {
    font-size: 11px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    /* Visibility controlled by PHP inline style or JS */
}

.sky-split-iqamah-time {
    font-family: "Share Tech Mono", monospace;
    font-weight: 500;
    font-size: 13px;
    color: #555555;
    margin-left: 6px;
}

/* ========================================
   Islamic Midnight
   ======================================== */
.sky-split-islamic-midnight {
    text-align: center;
    padding: 10px 20px 16px;
    border-top: 1px dashed rgba(32, 76, 147, 0.15);
}

.sky-split-midnight-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(32, 76, 147, 0.06) 0%, rgba(32, 76, 147, 0.12) 100%);
    border-radius: 20px;
    padding: 6px 16px;
}

.sky-split-midnight-icon {
    width: 16px;
    height: 16px;
    color: #204c93;
    flex-shrink: 0;
}

.sky-split-midnight-label {
    font-size: 12px;
    font-weight: 600;
    color: #204c93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sky-split-midnight-time {
    font-family: "Share Tech Mono", monospace;
    font-size: 15px;
    font-weight: 700;
    color: #204c93;
    letter-spacing: 1px;
}

.sky-split-midnight-note {
    font-size: 10px;
    color: #888888;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* ========================================
   Footer Section (Location)
   ======================================== */
.sky-split-footer {
    background-color: #204c93;
    color: #ffffff;
    padding: 12px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sky-split-location-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sky-split-location-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sky-split-location-icon path,
.sky-split-location-icon circle {
    stroke: currentColor;
}

.sky-split-location-name {
    font-size: 14px;
    font-weight: 500;
}

/* ========================================
   Loading Overlay
   ======================================== */
.sky-split-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.sky-split-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(32, 76, 147, 0.2);
    border-top-color: var(--sky-split-primary-color);
    border-radius: 50%;
    animation: sky-split-spin 0.8s linear infinite;
}

@keyframes sky-split-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Responsive Styles
   ======================================== */
@media (max-width: 768px) {
    .sky-split-header {
        padding: 15px 20px 25px;
    }

    .sky-split-header-top {
        flex-direction: column;
        gap: 8px;
    }

    .sky-split-countdown-number {
        font-size: 48px;
    }

    .sky-split-countdown-separator {
        font-size: 40px;
        height: 48px; /* Match number font-size */
    }

    .sky-split-countdown-label {
        padding: 3px 8px;
        font-size: 11px;
        margin-top: 8px;
    }

    .sky-split-prayer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 20px 15px;
    }

    .sky-split-prayer-box {
        padding: 15px 10px;
    }

    .sky-split-prayer-name {
        font-size: 12px;
        gap: 4px;
    }

    .sky-split-prayer-icon {
        width: 16px;
        height: 16px;
    }

    .sky-split-prayer-time {
        font-size: 24px;
    }

    .sky-split-iqamah {
        font-size: 10px;
    }

    .sky-split-footer {
        padding: 12px 20px;
    }

    .sky-split-jumuah-label {
        font-size: 12px;
    }

    .sky-split-jumuah-time {
        font-size: 18px;
    }

    .sky-split-content-header {
        padding: 15px 10px;
    }

    .sky-split-nav-btn {
        width: 36px;
        height: 36px;
    }

    .sky-split-nav-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .sky-split-countdown-number {
        font-size: 36px;
    }

    .sky-split-countdown-separator {
        font-size: 30px;
        height: 36px; /* Match number font-size */
    }

    .sky-split-countdown-text {
        font-size: 16px;
    }

    .sky-split-countdown-label {
        padding: 2px 8px;
        font-size: 10px;
    }

    .sky-split-prayer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sky-split-prayer-time {
        font-size: 28px;
    }

    .sky-split-content-english-date {
        font-size: 16px;
    }

    .sky-split-content-hijri-date {
        font-size: 12px;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .sky-split-loading-overlay,
    .sky-split-nav-btn {
        display: none !important;
    }

    .sky-split-timetable-widget {
        box-shadow: none;
    }

    .sky-split-prayer-box {
        break-inside: avoid;
    }
}

/* ========================================
   RTL Support
   ======================================== */
[dir="rtl"] .sky-split-header-top {
    flex-direction: row-reverse;
}

[dir="rtl"] .sky-split-content-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .sky-split-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .sky-split-jumuah-left,
[dir="rtl"] .sky-split-jumuah-right {
    flex-direction: row-reverse;
}

[dir="rtl"] .sky-split-iqamah-time {
    margin-left: 0;
    margin-right: 5px;
}

/* ========================================
   Elementor Editor Styles
   ======================================== */
.elementor-editor-active .sky-split-timetable-widget {
    min-height: 400px;
}

/* Ensure proper styling in Elementor preview */
.elementor-widget-sky-prayer-timetable-split .elementor-widget-container {
    width: 100%;
}

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

/* elementor-post-156236 */
.elementor-156236 .elementor-element.elementor-element-6c2e466{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-156236 .elementor-element.elementor-element-ea1f9f6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__title{color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__intro{color:rgba(255,255,255,0.82);}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__dateline{color:rgba(255,255,255,0.7);}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__badge{background:rgba(255,255,255,0.14);color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__countdown{background:rgba(255,255,255,0.10);}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__countdown-label{color:rgba(255,255,255,0.78);}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__clock-num{color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-5573c35 .spt-hdr__clock--sec .spt-hdr__clock-num{color:#f2c14e;}.elementor-156236 .elementor-element.elementor-element-72ee1a0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__card{border-color:#e6e9f0;border-radius:16px;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__cards{gap:14px;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__card.is-next{background:#eef3fc;border-color:#204C93;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__badge{background:#204C93;color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__name{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-ca2bfc3 .spt-today__time{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-0c46869{--display:flex;--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-156236 .elementor-element.elementor-element-1cd8bfe .spt-intro__p{color:#3a465c;}.elementor-156236 .elementor-element.elementor-element-3480495 .spt-fast__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-3480495 .spt-fast__card--muted .spt-fast__time{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-f190685 .spt-article__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-f190685 .spt-article__p{color:#3a465c;}.elementor-156236 .elementor-element.elementor-element-f190685 .spt-article__link{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-f190685 .spt-article__quote-text{color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-f190685 .spt-article__quote-cite{color:#f2c14e;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__box{background:#fafbfd;border-color:#eaedf3;border-radius:18px;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__body{color:#3a465c;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__deg{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__needle{stroke:#e0902a;}.elementor-156236 .elementor-element.elementor-element-4ca7c85 .spt-qibla__ring{stroke:#dfe4ee;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__title{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__sub{color:#7a8699;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__note{color:#9aa4b5;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__pill--greg{background:#204C93;color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__pill--hijri{background:#eef1f6;color:#5b6b86;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table thead tr{background:#204C93;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table thead th{color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table tbody td{color:#3a465c;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table tbody tr:nth-child(odd){background:#fafbfd;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table tbody tr.is-today{background:#fef6ea;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__badge{background:#e0902a;color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-68f34f3 .spt-monthly__table-frame{border-color:#e6e9f0;border-radius:16px;}.elementor-156236 .elementor-element.elementor-element-44aab59 .spt-tools__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-44aab59 .spt-tools__btn--primary{background:#204C93;}.elementor-156236 .elementor-element.elementor-element-107aca0 .spt-mosques__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-107aca0 .spt-mosques__name{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-107aca0 .spt-mosques__pin svg{fill:#204C93;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__title{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__sub{color:#7a8699;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__table{border-color:#e6e9f0;border-radius:16px;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__row{border-top-color:#e6e9f0;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__head{background:#f4f6fb;color:#5b6b86;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__cell{color:#3a4a63;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__row.is-current{background:#f4f8ff;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__badge{background:#eef3fc;color:#204C93;}.elementor-156236 .elementor-element.elementor-element-b54b72b .spt-nearby__link{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__item{background:#ffffff;border-color:#e6e9f0;border-radius:14px;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__q-text{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__sign{color:#204C93;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__a{color:#3a465c;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__verified{background:#f4f8ff;border-color:#dce6f6;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__seal-fill{fill:#45c9a5;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__verified-label{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-05985dd .spt-faq__verified-note{color:#5b6b86;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-cta__heading{color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-cta__text{color:rgba(255,255,255,0.85);}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-cta__btn--primary{background:#e0902a;color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-cta__btn--secondary{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.3);color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-cta__btn{border-radius:999px;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-app__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-app__text{color:#5b6b86;}.elementor-156236 .elementor-element.elementor-element-f094cb7 .spt-app__btn{background:#16305c;color:#ffffff;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__heading{color:#16305c;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__subtext{color:#7a8699;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__grid{gap:12px;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__item{background:#ffffff;border-color:#e6e9f0;color:#16305c;border-radius:12px;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__dot{background:#204C93;}.elementor-156236 .elementor-element.elementor-element-6b218ad .spt-dir__item:hover{background:#f4f8ff;border-color:#204C93;color:#204C93;}
/* base-desktop */
.elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-list-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-list-item-base{display:flex;flex-direction:row;gap:8px;}.elementor .e-list-item-marker-base{width:auto;height:1lh;display:flex;align-items:center;}.elementor .e-list-item-content-base{flex:1 1 auto;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-icon-open-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-carousel-base{position:relative;padding:0px;display:grid;grid-template-columns:repeat(1, 1fr);}.elementor .e-carousel-viewport-base{overflow:hidden;padding:0px;display:block;grid-column:1;grid-row:1;}.elementor .e-carousel-container-base{padding:0px;display:flex;}.elementor .e-carousel-slide-base{min-width:0px;position:relative;display:block;}.elementor .e-carousel-arrow-prev-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:0px;margin-inline-end:auto;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-prev-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:hover,.elementor .e-carousel-arrow-prev-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-prev-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-prev-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-arrow-next-base{width:auto;z-index:1;color:rgba(238, 238, 238, 0.9);cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-inline-start:auto;margin-inline-end:0px;border-style:none;background-color:transparent;display:flex;grid-column:1 / 2;grid-row:1 / 2;justify-content:center;align-items:center;align-self:center;}.elementor .e-carousel-arrow-next-base:focus{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:hover,.elementor .e-carousel-arrow-next-base:focus-visible{color:rgba(238, 238, 238, 0.9);background-color:transparent;}.elementor .e-carousel-arrow-next-base:focus-visible{outline-width:2px;outline-color:rgba(238, 238, 238, 0.9);outline-style:solid;outline-offset:2px;}.elementor .e-carousel-arrow-next-base.e--disabled{cursor:default;opacity:30%;}.elementor .e-carousel-pagination-base{padding-block-start:16px;padding-block-end:16px;padding-inline-start:0px;padding-inline-end:0px;display:flex;gap:12px;grid-column:1;grid-row:2;justify-content:center;align-items:center;}.elementor .e-carousel-dot-base{width:6px;height:6px;min-width:6px;min-height:6px;cursor:pointer;padding-block-start:0px;padding-block-end:0px;padding-inline-start:0px;padding-inline-end:0px;border-radius:50%;border-width:0px;border-style:none;background-color:rgba(0, 0, 0, 0.2);display:inline-flex;appearance:none;}.elementor .e-carousel-dot-base:focus{background-color:rgba(0, 0, 0, 0.2);}.elementor .e-carousel-dot-base:hover,.elementor .e-carousel-dot-base:focus-visible{background-color:#000;}.elementor .e-carousel-dot-base.e--selected{background-color:#000;}.elementor .e-carousel-dot-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-controls-base{width:auto;margin-inline-start:auto;margin-inline-end:auto;display:flex;grid-column:1;grid-row:3;align-items:center;}.elementor .e-carousel-autoplay-play-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-play-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:hover,.elementor .e-carousel-autoplay-play-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-play-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-carousel-autoplay-pause-base{width:auto;color:#000;cursor:pointer;padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;border-style:none;background-color:transparent;display:flex;justify-content:center;align-items:center;}.elementor .e-carousel-autoplay-pause-base:focus{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:hover,.elementor .e-carousel-autoplay-pause-base:focus-visible{color:#000;background-color:transparent;}.elementor .e-carousel-autoplay-pause-base:focus-visible{outline-width:2px;outline-color:#000;outline-style:solid;outline-offset:2px;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{width:auto;font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;}.elementor .e-google-maps-base{width:100%;border-style:none;display:block;}
/* base-mobile */
@media (max-width:767px) {
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}
}
/* ght-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; }