/* ghh-prayer-prompt */
/* GHH prayer page giving prompt (mu-plugin ghh-prayer-prompt.php) */
.ghh-pp {
	--ghh-pp-accent: #e0902a;
	--ghh-pp-accent-dark: #c9771a;
	--ghh-pp-accent-soft: #fdf1e1;
	--ghh-pp-ink: #16305c;
	--ghh-pp-muted: #44516a;
	margin: 20px 0 0;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	transition: opacity .25s ease;
}
.ghh-pp[data-variant="jumuah"] { --ghh-pp-accent: #1f8a5b; --ghh-pp-accent-dark: #17704a; --ghh-pp-accent-soft: #e5f4ec; }
.ghh-pp[data-variant="water"] { --ghh-pp-accent: #1b9dd9; --ghh-pp-accent-dark: #1581b3; --ghh-pp-accent-soft: #e3f3fb; }
.ghh-pp[data-variant="orphans"] { --ghh-pp-accent: #c2185b; --ghh-pp-accent-dark: #a0124a; --ghh-pp-accent-soft: #fbe6ee; }

/* Space is kept while the appeal is chosen, so nothing jumps. */
.ghh-pp--loading { opacity: 0; pointer-events: none; }

.ghh-pp--in-hero { margin: 28px 0 0; width: 100%; }
.ghh-pp--ds { max-width: 760px; margin: 28px auto 0; text-align: left; }
.ghh-pp--masjid { margin: 28px 0 4px; }

.ghh-pp__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 2px solid var(--ghh-pp-accent);
	border-radius: 18px;
	padding: 20px 22px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.ghh-pp--masjid .ghh-pp__box { box-shadow: 0 10px 26px rgba(22, 48, 92, .14); }
.ghh-pp__icon {
	flex: 0 0 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ghh-pp-accent-soft);
	color: var(--ghh-pp-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ghh-pp__icon svg { width: 26px; height: 26px; }
.ghh-pp__text { flex: 1 1 auto; min-width: 0; }
.ghh-pp__pill {
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ghh-pp-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ghh-pp__title { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--ghh-pp-ink); line-height: 1.25; }
.ghh-pp__sub { margin: 0; font-size: 14.5px; color: var(--ghh-pp-muted); line-height: 1.45; }
.ghh-pp__btn {
	flex: 0 0 auto;
	display: inline-block;
	background: var(--ghh-pp-accent);
	color: #fff !important;
	font-weight: 800;
	font-size: 15px;
	padding: 14px 22px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.ghh-pp__btn:hover,
.ghh-pp__btn:focus-visible { background: var(--ghh-pp-accent-dark); }
.ghh-pp__btn:focus-visible { outline: 3px solid var(--ghh-pp-ink); outline-offset: 2px; }

@media (max-width: 767px) {
	.ghh-pp--in-hero { margin: 20px 0 0; }
	.ghh-pp--phone { margin: 0 0 20px; width: 100%; }
	.ghh-pp--masjid { margin-top: 20px; }
}
@media (max-width: 600px) {
	.ghh-pp__box { flex-wrap: wrap; gap: 12px; padding: 18px; }
	.ghh-pp__title { font-size: 18px; }
	.ghh-pp__btn { width: 100%; text-align: center; }
}
/* Opening the pop-up checkout (first click loads it). */
.ghh-pp__btn--busy { opacity: .75; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
	.ghh-pp { transition: none; }
}

/* sky-prayer-city-search */
/**
 * Sky Prayer City Search and Settings Panel Styles
 *
 * @package Sky_Prayer_Timetable
 */

/* Container */
.sky-prayer-search-container {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.sky-prayer-search-container *,
.sky-prayer-search-container *::before,
.sky-prayer-search-container *::after {
    box-sizing: border-box;
}

/* Search Bar */
.sky-prayer-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0;
}

/* Search Input Wrapper - the main search field with border */
.sky-prayer-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sky-prayer-search-input-wrap:focus-within {
    /* Focus styles controlled via Elementor */
}

/* Search Icon - inline flex item inside the bordered area */
svg.sky-prayer-search-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #999;
    display: block;
    margin-right: 10px;
}

/* Search Input - override theme styles with high specificity */
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input,
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] {
    flex: 1;
    min-width: 0;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    padding: 12px 8px 12px 0 !important;
    font-size: 15px;
    background: transparent !important;
    background-color: transparent !important;
    color: #333;
    height: auto !important;
    max-width: none;
    width: auto;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input:focus,
.sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Selected state - when input has value, show it can be cleared on click */
.sky-prayer-search-input.has-value {
    cursor: pointer;
}

.sky-prayer-search-container .sky-prayer-search-input::placeholder {
    color: #999;
}

.sky-prayer-search-spinner {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #0073aa;
    animation: sky-prayer-spin 1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sky-prayer-search-spinner svg {
    width: 18px;
    height: 18px;
}

/* Geolocation button - inside the bordered search field */
.sky-prayer-search-input-wrap .sky-prayer-geo-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    color: #666;
    padding: 6px;
    margin: 0;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover {
    background: #f0f0f0;
    color: #0073aa;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn:active {
    transform: scale(0.95);
}

/* Icon inside geo button - allow free sizing via width/height attributes on SVG */
.sky-prayer-search-input-wrap .sky-prayer-geo-btn svg {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading {
    animation: sky-prayer-pulse 1s ease-in-out infinite;
}

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

/* Settings Button */
.sky-prayer-settings-btn {
    flex-shrink: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s, color 0.2s;
    color: #666;
    margin-left: 8px;
    padding: 12px;
}

.sky-prayer-settings-btn:hover {
    background: #e8e8e8;
    color: #0073aa;
}

.sky-prayer-settings-btn:active {
    transform: scale(0.95);
}

/* Icon inside settings button - allow free sizing via width/height attributes on SVG */
.sky-prayer-settings-btn svg {
    display: block;
    flex-shrink: 0;
}

@keyframes sky-prayer-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dropdown */
.sky-prayer-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}

.sky-prayer-search-results {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.sky-prayer-search-result {
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background-color 0.15s;
}

.sky-prayer-search-result:hover,
.sky-prayer-search-result.active {
    background: #f0f6fc;
}

.sky-prayer-result-location {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.sky-prayer-result-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #e7f3ff;
    color: #0073aa;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.sky-prayer-no-results {
    padding: 16px;
    text-align: center;
    color: #666;
}

/* Settings Overlay */
.sky-prayer-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

/* Settings Panel */
.sky-prayer-settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
}

.sky-prayer-settings-panel.open {
    right: 0;
}

/* Settings Header */
.sky-prayer-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.sky-prayer-settings-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.sky-prayer-settings-close {
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    color: #666;
    padding: 8px;
}

.sky-prayer-settings-close:hover {
    background: #eee;
    color: #333;
}

/* Icon inside close button - allow free sizing via width/height attributes on SVG */
.sky-prayer-settings-close svg {
    display: block;
    flex-shrink: 0;
}

/* Settings Body */
.sky-prayer-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── Muslim Pro-style settings popup ─────────────────────────────
   Radio method cards + madhab pills + note + single Apply button.
   Colors consume the parent design system vars with hard fallbacks so
   the popup still looks right on pages that don't load design-system.css. */

.sky-prayer-settings-section-label {
    margin: 4px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--spt-muted, #7a8699);
}

.sky-prayer-method-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.sky-prayer-method-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--spt-line, #e6e9f0);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sky-prayer-method-card:hover {
    border-color: var(--spt-primary, #204C93);
}

.sky-prayer-method-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom radio dot */
.sky-prayer-method-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--spt-line, #d5dbe6);
    border-radius: 50%;
    position: relative;
    transition: border-color 0.15s;
}

.sky-prayer-method-card input:checked + .sky-prayer-method-radio {
    border-color: var(--spt-primary-dark, #16305c);
}

.sky-prayer-method-card input:checked + .sky-prayer-method-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--spt-primary-dark, #16305c);
}

/* Whole-card selected state (progressive — browsers without :has still
   show the radio dot) */
.sky-prayer-method-card:has(input:checked) {
    border: 2px solid var(--spt-primary, #204C93);
    padding: 13px 15px;
    background: #f4f7fc;
}

.sky-prayer-method-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sky-prayer-method-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--spt-heading, #16305c);
    line-height: 1.3;
}

.sky-prayer-method-desc {
    font-size: 13px;
    color: var(--spt-muted, #7a8699);
    line-height: 1.45;
}

/* Madhab pills */
.sky-prayer-madhab-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.sky-prayer-madhab-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    padding: 14px 10px;
    border: 1px solid var(--spt-line, #e6e9f0);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.sky-prayer-madhab-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sky-prayer-madhab-pill:hover {
    border-color: var(--spt-primary, #204C93);
}

.sky-prayer-madhab-pill:has(input:checked) {
    border: 2px solid var(--spt-primary-dark, #16305c);
    padding: 13px 9px;
    background: #f4f7fc;
}

.sky-prayer-madhab-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--spt-primary, #204C93);
}

.sky-prayer-madhab-desc {
    font-size: 12px;
    color: var(--spt-muted, #7a8699);
    line-height: 1.35;
}

/* Note box */
.sky-prayer-settings-note {
    padding: 14px 16px;
    border-radius: 14px;
    background: #f0f4fb;
    border: 1px solid var(--spt-line-soft, #e3eaf5);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--spt-body, #3a465c);
}

/* Settings Footer */
.sky-prayer-settings-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--spt-line-soft, #eef1f6);
    background: #fff;
}

.sky-prayer-settings-save {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--spt-hero-end, #1a3f7d);
    color: #fff;
    transition: background-color 0.2s, transform 0.1s;
}

.sky-prayer-settings-save:hover {
    background: var(--spt-primary-dark, #16305c);
}

.sky-prayer-settings-save:active {
    transform: scale(0.99);
}

/* Toast Notification */
.sky-prayer-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sky-prayer-toast.success {
    background: #00a32a;
    color: #fff;
}

.sky-prayer-toast.error {
    background: #d63638;
    color: #fff;
}

/* Dark Theme */
.sky-prayer-search-dark .sky-prayer-search-bar {
    background: #2c2c2c;
}

.sky-prayer-search-dark .sky-prayer-search-input {
    color: #fff;
}

.sky-prayer-search-dark .sky-prayer-search-input::placeholder {
    color: #888;
}

.sky-prayer-search-dark .sky-prayer-search-icon {
    color: #888;
}

.sky-prayer-search-dark .sky-prayer-settings-btn {
    background: #3c3c3c;
    color: #aaa;
}

.sky-prayer-search-dark .sky-prayer-settings-btn:hover {
    background: #4c4c4c;
    color: #0073aa;
}

.sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn {
    color: #aaa;
}

.sky-prayer-search-dark .sky-prayer-search-input-wrap .sky-prayer-geo-btn:hover {
    background: #3c3c3c;
    color: #0073aa;
}

.sky-prayer-search-dark .sky-prayer-search-dropdown {
    background: #2c2c2c;
    border-color: #444;
}

.sky-prayer-search-dark .sky-prayer-search-result:hover,
.sky-prayer-search-dark .sky-prayer-search-result.active {
    background: #3c3c3c;
}

.sky-prayer-search-dark .sky-prayer-result-location {
    color: #eee;
}

.sky-prayer-search-dark .sky-prayer-no-results {
    color: #aaa;
}

/* Responsive */
@media (max-width: 480px) {
    .sky-prayer-settings-panel {
        width: 100%;
        right: -100%;
    }

    .sky-prayer-settings-panel.open {
        right: 0;
    }

    .sky-prayer-search-bar {
        padding: 2px;
    }

    .sky-prayer-settings-btn {
        padding: 10px;
    }

    .sky-prayer-search-input-wrap {
        padding-left: 10px;
    }

    .sky-prayer-search-input {
        padding: 10px 40px 10px 0;
        font-size: 14px;
    }

    .sky-prayer-search-input-wrap .sky-prayer-geo-btn {
        padding: 6px;
    }

    .sky-prayer-search-spinner {
        right: 38px;
    }
}

/* Body scroll lock when settings open */
body.sky-prayer-settings-open {
    overflow: hidden;
}

/* Scrollbar Styling */
.sky-prayer-search-dropdown::-webkit-scrollbar,
.sky-prayer-settings-body::-webkit-scrollbar {
    width: 6px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-track,
.sky-prayer-settings-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-thumb,
.sky-prayer-settings-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.sky-prayer-search-dropdown::-webkit-scrollbar-thumb:hover,
.sky-prayer-settings-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Animation for panel */
@media (prefers-reduced-motion: reduce) {
    .sky-prayer-settings-panel {
        transition: none;
    }

    .sky-prayer-search-input-wrap .sky-prayer-geo-btn.loading {
        animation: none;
    }

    .sky-prayer-search-spinner {
        animation: none;
    }
}

/* RTL support — flip the search field's directional chrome. */
[dir="rtl"] svg.sky-prayer-search-icon {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input,
[dir="rtl"] .sky-prayer-search-container .sky-prayer-search-input-wrap input.sky-prayer-search-input[type="text"] {
    padding: 12px 0 12px 8px !important;
}

[dir="rtl"] .sky-prayer-search-spinner {
    right: auto;
    left: 44px;
}

/* Settings panel slides in from the left on RTL. */
[dir="rtl"] .sky-prayer-settings-panel {
    right: auto;
    left: -400px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease;
}

[dir="rtl"] .sky-prayer-settings-panel.open {
    right: auto;
    left: 0;
}


/* sky-prayer-design-system */
/**
 * 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("https://ghh.org.uk/wp-content/plugins/sky-prayer-timetable/assets/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; }

/* sky-prayer-frontend */
/**
 * Sky Prayer Timetable - Frontend Styles
 *
 * @package Sky_Prayer_Timetable
 */

/* Reset and base styles */
.sky-prayer-table-container,
.sky-prayer-header {
    box-sizing: border-box;
    font-family: inherit;
}

.sky-prayer-table-container *,
.sky-prayer-header * {
    box-sizing: border-box;
}

/* Notice styles */
.sky-prayer-notice {
    padding: 20px;
    background: #f0f6fc;
    border-left: 4px solid #0073aa;
    margin: 10px 0;
}

.sky-prayer-notice.sky-prayer-error {
    background: #fcf0f0;
    border-left-color: #dc3232;
}

/* Prayer Times Table Container */
.sky-prayer-table-container {
    width: 100%;
}

/* Hijri Date */
.sky-prayer-hijri {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
}

/* Countdown */
.sky-prayer-countdown {
    display: inline-block;
    padding: 10px 20px;
    background: #f0f6fc;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 14px;
}

.sky-prayer-countdown-label {
    font-weight: 600;
}

.sky-prayer-countdown-prayer {
    color: #0073aa;
    font-weight: 600;
}

.sky-prayer-countdown-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Table Layout */
.sky-prayer-table {
    width: 100%;
    border-collapse: collapse;
}

.sky-prayer-table thead th {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #eee;
    font-weight: 600;
}

.sky-prayer-table thead th:last-child {
    text-align: right;
}

.sky-prayer-row {
    transition: background-color 0.2s ease;
}

.sky-prayer-table .sky-prayer-row td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.sky-prayer-table .sky-prayer-row:last-child td {
    border-bottom: none;
}

.sky-prayer-name {
    font-weight: 500;
}

.sky-prayer-time {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sky-prayer-iqamah {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #666;
}

/* Highlight next prayer */
.sky-prayer-row.is-next {
    background-color: #e7f3ff;
}

.sky-prayer-row.is-next .sky-prayer-name {
    color: #0073aa;
}

/* Cards Layout */
.sky-prayer-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.sky-prayer-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.sky-prayer-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sky-prayer-card.is-next {
    background: #e7f3ff;
    border-color: #0073aa;
}

.sky-prayer-card .sky-prayer-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.sky-prayer-card .sky-prayer-time {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

/* List Layout */
.sky-prayer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sky-prayer-list .sky-prayer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.sky-prayer-list .sky-prayer-row:last-child {
    border-bottom: none;
}

.sky-prayer-list .sky-prayer-name,
.sky-prayer-list .sky-prayer-time {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sky-prayer-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .sky-prayer-table thead {
        display: none;
    }

    .sky-prayer-table,
    .sky-prayer-table tbody,
    .sky-prayer-table .sky-prayer-row,
    .sky-prayer-table .sky-prayer-row td {
        display: block;
        width: 100%;
    }

    .sky-prayer-table .sky-prayer-row {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .sky-prayer-table .sky-prayer-row td {
        padding: 5px 0;
        border: none;
        display: flex;
        justify-content: space-between;
    }

    .sky-prayer-table .sky-prayer-row td:before {
        content: attr(data-label);
        font-weight: 600;
    }

    .sky-prayer-time {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .sky-prayer-cards {
        grid-template-columns: 1fr;
    }

    .sky-prayer-countdown {
        display: block;
        text-align: center;
    }
}

/* Header Widget Styles */
.sky-prayer-header {
    width: 100%;
}

.sky-prayer-header-stacked .sky-prayer-header-location,
.sky-prayer-header-stacked .sky-prayer-header-gregorian,
.sky-prayer-header-stacked .sky-prayer-header-hijri,
.sky-prayer-header-stacked .sky-prayer-header-countdown {
    display: block;
    margin-bottom: 10px;
}

.sky-prayer-header-stacked .sky-prayer-header-countdown {
    margin-bottom: 0;
}

.sky-prayer-header-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.sky-prayer-header-city {
    font-size: 24px;
    font-weight: 700;
}

.sky-prayer-header-country {
    color: #666;
}

.sky-prayer-header-gregorian {
    font-size: 16px;
}

.sky-prayer-header-hijri {
    font-size: 14px;
    color: #666;
}

.sky-prayer-header-countdown {
    display: inline-block;
    padding: 10px 20px;
    background: #f0f6fc;
    border-radius: 5px;
    font-size: 14px;
}

.sky-prayer-header-countdown-label {
    font-weight: 600;
}

.sky-prayer-header-countdown-prayer {
    color: #0073aa;
    font-weight: 600;
}

.sky-prayer-header-countdown-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Responsive header */
@media (max-width: 768px) {
    .sky-prayer-header-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .sky-prayer-header-city {
        font-size: 20px;
    }
}

/* Animation for countdown */
@keyframes sky-prayer-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

.sky-prayer-countdown-time.updating {
    animation: sky-prayer-pulse 0.5s ease;
}

/* Print styles */
@media print {
    .sky-prayer-countdown,
    .sky-prayer-header-countdown {
        display: none;
    }

    .sky-prayer-table-container,
    .sky-prayer-header {
        page-break-inside: avoid;
    }
}

/* RTL support — mirror the explicit horizontal alignment above. */
[dir="rtl"] .sky-prayer-table thead th {
    text-align: right;
}

[dir="rtl"] .sky-prayer-table thead th:last-child,
[dir="rtl"] .sky-prayer-time,
[dir="rtl"] .sky-prayer-iqamah {
    text-align: left;
}

@media (max-width: 768px) {
    [dir="rtl"] .sky-prayer-time {
        text-align: right;
    }
}

/* sky-prayer-masjid */
/**
 * Masjid profile styling — the page-specific pieces only.
 *
 * The shared landing components (breadcrumb band, centred hero, search pill,
 * prose column, directory cards, FAQ, Scholar Verified, app card + phone,
 * donate CTA) and the font/tokens live in the parent design system
 * (assets/css/design-system.css, enqueued before this file). This file keeps
 * what is unique to a masjid profile: the left-aligned hero with the live
 * countdown, today/Jamaah/fasting cards, the monthly table, facilities,
 * Qibla box, the contact form and the masjid card list.
 */

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

/* Force Plus Jakarta Sans on every element — the host theme (WoodMart) sets its
   own display font on h1/h2/h3 etc. with higher specificity, which otherwise
   makes masjid headings render in the wrong font and not match the city/hub
   pages. Mirrors how the .sptg hub CSS forces the font. */
.spt-masjid,
.spt-masjid h1, .spt-masjid h2, .spt-masjid h3, .spt-masjid h4,
.spt-masjid p, .spt-masjid a, .spt-masjid span, .spt-masjid div,
.spt-masjid button, .spt-masjid input, .spt-masjid select, .spt-masjid textarea, .spt-masjid li {
    font-family: var(--spt-font, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif) !important;
}

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

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

.spt-masjid-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.spt-masjid-inner--narrow { max-width: 900px; }

/* ===================================================================== *
 *  Hero (mirrors .spt-hdr) — the left-aligned profile hero with the live
 *  countdown card. The directory landing uses the design-system hero.
 * ===================================================================== */
.spt-masjid-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, var(--spt-primary-mid) 0%, var(--spt-primary) 55%, var(--spt-primary-dark) 100%);
}
.spt-masjid-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 12%, rgba(255,255,255,0.10), transparent 45%);
}
.spt-masjid-hero .spt-masjid-inner { position: relative; padding-top: 46px; padding-bottom: 52px; }
.spt-masjid-hero-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 28px;
}
.spt-masjid-hero-col { max-width: 620px; flex: 1 1 420px; }
.spt-masjid-badge {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.14); padding: 6px 14px; border-radius: 999px;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important;
    color: #fff !important; text-transform: none !important; letter-spacing: normal !important;
}
.spt-masjid-badge svg { width: 16px !important; height: 16px !important; flex: none !important; }
.spt-masjid-name {
    margin: 16px 0 10px; font-size: 40px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.06; color: #fff;
}
.spt-masjid-address {
    margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82);
    display: flex; align-items: flex-start; gap: 8px;
}
.spt-masjid-address svg { width: 18px; height: 18px; flex: none; margin-top: 3px; opacity: 0.8; }
.spt-masjid-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.spt-masjid-links .spt-masjid-btn,
.spt-masjid-links a.spt-masjid-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    height: 46px !important; padding: 0 20px !important; border-radius: 13px !important;
    font-size: 14.5px !important; font-weight: 800 !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: normal !important; cursor: pointer;
    text-decoration: none !important; transition: transform 0.15s, background 0.15s;
}
.spt-masjid-links .spt-masjid-btn svg { width: 18px !important; height: 18px !important; flex: none !important; }
.spt-masjid-links a.spt-masjid-btn--primary,
.spt-masjid-btn--primary { background: #fff !important; color: var(--spt-primary) !important; border: 0 !important; box-shadow: 0 6px 18px rgba(12,28,60,0.24) !important; }
.spt-masjid-btn--primary:hover { background: #eef3fc !important; transform: translateY(-1px); }
.spt-masjid-links a.spt-masjid-btn--ghost,
.spt-masjid-btn--ghost { background: rgba(255,255,255,0.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.26) !important; }
.spt-masjid-btn--ghost:hover { background: rgba(255,255,255,0.26) !important; }

/* Hero dateline (gregorian · hijri) */
.spt-masjid-dateline { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); }

/* Hero countdown card — exact match of the city header countdown */
@keyframes sptmpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.spt-masjid-cd {
    text-align: center; 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; flex: 0 1 320px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.spt-masjid-cd-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spt-masjid-cd-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: sptmpulse 1.6s infinite; }
.spt-masjid-cd-label { font-size: 12.5px; color: rgba(255,255,255,0.82); font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; }
.spt-masjid-cd-clocks { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.spt-masjid-cd-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-masjid-cd-num { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.spt-masjid-cd-clock--sec { border-color: rgba(242,193,78,0.35); }
.spt-masjid-cd-clock--sec .spt-masjid-cd-num { color: var(--spt-accent-light); }
.spt-masjid-cd-unit { font-size: 10.5px; color: rgba(255,255,255,0.65); margin-top: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
.spt-masjid-cd-colon { display: flex; align-items: center; font-size: 26px; font-weight: 800; color: rgba(255,255,255,0.4); padding-bottom: 14px; }
.spt-masjid-cd-progress { margin-top: 18px; }
.spt-masjid-cd-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.spt-masjid-cd-fill { height: 100%; background: linear-gradient(90deg, #f2c14e, #ffd97a); border-radius: 999px; transition: width 0.9s linear; }
.spt-masjid-cd-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.62); }

/* ===================================================================== *
 *  Sections
 * ===================================================================== */
.spt-masjid-section { padding: 40px 0; }
.spt-masjid-section + .spt-masjid-section { padding-top: 0; }
.spt-masjid-h {
    margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--spt-heading);
    letter-spacing: -0.01em;
}
.spt-masjid-sub { margin: 0 0 20px; font-size: 14px; color: var(--spt-muted); }
.spt-masjid-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.spt-masjid-sec-head .spt-masjid-h { margin: 0; }
.spt-masjid-date { font-size: 14px; font-weight: 600; color: var(--spt-muted); }

/* Today's begins times — full-width tinted band (exact match of .spt-today) */
.spt-masjid-today { background: var(--spt-bg-soft); border-bottom: 1px solid var(--spt-line-soft); }
.spt-masjid-today .spt-masjid-inner { padding: 34px 24px 40px; }
.spt-masjid-today-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.spt-masjid-today-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--spt-heading); }
.spt-masjid-today-date { font-size: 13.5px; font-weight: 600; color: var(--spt-muted); }
.spt-masjid-today-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.spt-masjid-today-card { flex: 1 1 110px; min-width: 100px; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 16px; padding: 18px 10px 15px; text-align: center; position: relative; }
.spt-masjid-today-card.is-next { background: #eef3fc; border-color: var(--spt-primary); }
.spt-masjid-today-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; white-space: nowrap; text-transform: uppercase; }
.spt-masjid-today-icon { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: #eef3fc; color: var(--spt-primary); display: flex; align-items: center; justify-content: center; }
.spt-masjid-today-card.is-next .spt-masjid-today-icon { background: #dfeafb; }
.spt-masjid-today-icon svg,
.spt-masjid-today-icon img { display: block; width: 26px; height: 26px; }
.spt-masjid-today-name { font-weight: 600; color: var(--spt-primary); margin-top: 8px; font-size: 14.5px; }
.spt-masjid-today-time { font-weight: 800; color: var(--spt-heading); font-size: 19px; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Jamaah (congregation) times row — the masjid-specific addition */
.spt-masjid-jamaah-row { display: flex; gap: 12px; flex-wrap: wrap; }
.spt-masjid-jcard { flex: 1 1 96px; min-width: 90px; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 14px; padding: 14px 10px; text-align: center; }
.spt-masjid-jcard-name { font-size: 12.5px; font-weight: 700; color: var(--spt-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.spt-masjid-jcard-time { margin-top: 5px; font-size: 20px; font-weight: 800; color: var(--spt-accent); font-variant-numeric: tabular-nums; line-height: 1; }
.spt-masjid-jcard-time.is-empty { color: var(--spt-line); }
.spt-masjid-jamaah-empty { color: var(--spt-muted); font-size: 15px; margin: 0; }

/* Jumu'ah panel (gold-accented) */
.spt-masjid-jumuah {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(135deg, #fff, #fffaf0);
    border: 1.5px solid #f2e2c0; border-radius: 16px; padding: 20px 24px;
}
.spt-masjid-jumuah-icon {
    width: 46px; height: 46px; flex: none; border-radius: 13px;
    background: rgba(224,144,42,0.12); color: var(--spt-accent);
    display: flex; align-items: center; justify-content: center;
}
.spt-masjid-jumuah-icon svg { width: 24px; height: 24px; }
.spt-masjid-jumuah-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--spt-muted); }
.spt-masjid-jumuah-times { margin-top: 3px; font-size: 22px; font-weight: 800; color: var(--spt-heading); font-variant-numeric: tabular-nums; }
.spt-masjid-jumuah-times span + span::before { content: "·"; margin: 0 10px; color: var(--spt-accent); }

/* Monthly table (mirrors monthly-v2) */
.spt-masjid-table-frame { border: 1.5px solid var(--spt-line); border-radius: 16px; overflow: hidden; }
.spt-masjid-monthly-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spt-masjid-monthly-table thead th {
    background: #f4f6fb; color: var(--spt-heading); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 10px; text-align: center;
}
.spt-masjid-monthly-table thead th:first-child { text-align: left; padding-left: 18px; }
.spt-masjid-monthly-table tbody td { padding: 10px; text-align: center; font-variant-numeric: tabular-nums; color: var(--spt-body); border-top: 1px solid var(--spt-line-soft); }
.spt-masjid-monthly-table tbody td:first-child { text-align: left; padding-left: 18px; font-weight: 600; color: var(--spt-heading); }
.spt-masjid-monthly-table tbody tr:nth-child(odd) td { background: #fbfcfe; }
.spt-masjid-monthly-table tbody tr.is-today td { background: #eef3fc; font-weight: 700; color: var(--spt-primary-dark); }

/* Facilities chips */
.spt-masjid-facilities-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.spt-masjid-facilities-list li {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--spt-bg-soft); border: 1px solid var(--spt-line);
    border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--spt-body);
}
.spt-masjid-facilities-list li::before {
    content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
    background: rgba(32,76,147,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204C93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* About (prose) */
.spt-masjid-about { color: var(--spt-body); font-size: 16px; line-height: 1.7; }
.spt-masjid-about h2, .spt-masjid-about h3 { color: var(--spt-heading); }

/* Intro paragraph (mirrors .spt-intro) */
.spt-masjid-intro-p { font-size: 17px; line-height: 1.7; color: var(--spt-body); margin: 0; max-width: 820px; }

/* Fasting cards (mirrors .spt-fast) */
.spt-masjid-fast-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.spt-masjid-fast-card { background: linear-gradient(155deg, var(--spt-primary-mid), var(--spt-primary)); color: #fff; border-radius: 16px; padding: 22px 24px; }
.spt-masjid-fast-lab { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin: 0 0 6px; }
.spt-masjid-fast-time { font-size: 34px; font-weight: 800; margin: 0; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.spt-masjid-fast-jumuah { font-size: 14.5px; line-height: 1.6; color: var(--spt-body); background: var(--spt-bg-soft); border: 1px solid var(--spt-line); border-radius: 12px; padding: 14px 18px; margin: 16px 0 0; }

/* Article (mirrors .spt-article) */
.spt-masjid-article-p { font-size: 16.5px; line-height: 1.72; color: var(--spt-body); margin: 0 0 16px; max-width: 820px; }
.spt-masjid-article-p:last-child { margin-bottom: 0; }
.spt-masjid-article-p a { font-weight: 700; color: var(--spt-primary); }
.spt-masjid-article-p a:hover { text-decoration: underline; }

/* Qibla box (mirrors .spt-qibla) */
.spt-masjid-qibla { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; background: var(--spt-bg-soft); border: 1px solid #eaedf3; border-radius: 18px; padding: 26px 30px; }
/* The compass is an <img> (colours are set inside it, in render_qibla()). */
.spt-masjid-qibla-compass { flex: none; display: block; width: 140px; height: 140px; }
.spt-masjid-qibla-content { flex: 1 1 320px; min-width: 240px; }
.spt-masjid-qibla-h { font-size: 22px; font-weight: 800; color: var(--spt-heading); margin: 0 0 6px; }
.spt-masjid-qibla-body { font-size: 16.5px; line-height: 1.65; color: var(--spt-body); margin: 0; }
.spt-masjid-qibla-body .deg { color: var(--spt-primary); font-weight: 800; }

/* Contact / claim — clean light card (a form reads better light than on the
   dark CTA gradient). All field rules carry !important to neutralise the host
   theme's global form styling, the same way the header widget does. */
.spt-masjid-contact {
    background: var(--spt-bg-soft);
    border: 1.5px solid var(--spt-line);
    border-radius: 20px;
    padding: 32px;
}
.spt-masjid-contact-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.spt-masjid-contact-icon {
    width: 48px; height: 48px; flex: none; border-radius: 14px;
    background: #eef3fc; color: var(--spt-primary);
    display: flex; align-items: center; justify-content: center;
}
.spt-masjid-contact-icon svg { width: 26px; height: 26px; }
.spt-masjid-contact h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--spt-heading); }
.spt-masjid-contact-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--spt-muted); max-width: 620px; }

.spt-masjid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spt-masjid-form label {
    display: flex !important; flex-direction: column !important; gap: 7px !important;
    margin: 0 !important; font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    color: var(--spt-muted) !important; text-align: left !important;
}
.spt-masjid-form label.spt-masjid-form-full { grid-column: 1 / -1; }
.spt-masjid-form label > span { display: block; }
.spt-masjid-form input,
.spt-masjid-form select,
.spt-masjid-form textarea {
    font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important;
    color: var(--spt-ink) !important; background: #fff !important;
    border: 1.5px solid var(--spt-line) !important; border-radius: 11px !important;
    padding: 12px 14px !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; box-shadow: none !important; margin: 0 !important;
    line-height: 1.3 !important; -webkit-appearance: none !important; appearance: none !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.spt-masjid-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important;
    background-size: 16px !important; padding-right: 40px !important;
}
.spt-masjid-form input:focus,
.spt-masjid-form select:focus,
.spt-masjid-form textarea:focus {
    border-color: var(--spt-primary) !important; outline: none !important;
    box-shadow: 0 0 0 3px rgba(32,76,147,0.12) !important;
}
.spt-masjid-form input::placeholder,
.spt-masjid-form textarea::placeholder { color: #9aa6ba !important; opacity: 1; }
.spt-masjid-form textarea { resize: vertical !important; min-height: 110px !important; }
.spt-masjid-form .spt-masjid-submit,
.spt-masjid-form button.spt-masjid-submit {
    grid-column: 1 / -1; justify-self: start; display: inline-flex !important;
    align-items: center !important; height: 50px !important; padding: 0 34px !important;
    background: var(--spt-accent) !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; font-family: inherit !important; font-size: 15px !important;
    font-weight: 700 !important; line-height: 1 !important; text-transform: none !important;
    letter-spacing: normal !important; box-shadow: 0 6px 16px rgba(224,144,42,0.28) !important;
    cursor: pointer !important; transition: background 0.15s, transform 0.15s;
}
.spt-masjid-form .spt-masjid-submit:hover { background: #cf8020 !important; transform: translateY(-1px); }
.spt-masjid-form .spt-masjid-submit:disabled { opacity: 0.6 !important; cursor: default !important; transform: none; }
.spt-masjid-form-status { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 600; color: var(--spt-primary-dark); }
.spt-masjid-hp { position: absolute; left: -9999px; }

/* ===================================================================== *
 *  "Mosques in [City]" card list (mirrors .spt-dir / .spt-nearby cards)
 * ===================================================================== */
.spt-masjid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.spt-masjid-card {
    display: block; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 16px;
    overflow: hidden; color: inherit; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    font-family: var(--spt-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.spt-masjid-card:hover { box-shadow: 0 12px 30px rgba(16,28,54,0.12); transform: translateY(-2px); border-color: #cdd8ec; }
.spt-masjid-card-img { height: 150px; background: #eef3fc; }
.spt-masjid-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spt-masjid-card-body { padding: 16px 18px; }
.spt-masjid-card-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--spt-heading); }
.spt-masjid-card-area { margin: 0; font-size: 13px; color: var(--spt-muted); }
.spt-masjid-card-jamaah {
    margin: 12px 0 0; display: inline-flex; align-items: center; gap: 6px;
    background: #eef3fc; color: var(--spt-primary); font-size: 12.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.spt-masjid-empty { color: var(--spt-muted); font-size: 15px; padding: 8px 0; }

/* OpenStreetMap ODbL attribution (imported masjids) */
.spt-masjid-credit { margin: 14px 0 0; font-size: 12px; color: var(--spt-muted); }
.spt-masjid-credit a { color: var(--spt-muted); text-decoration: underline; }

/* City-page "Mosques in [City]" section wrapper */
/* Appended after a city page's Elementor content, outside .spt-masjid: it gets the
   design tokens from design-system.css (without them the cards lost their border),
   and its own space above the site footer. */
.spt-masjid-city-section { margin-top: 40px; padding-bottom: 96px; font-family: var(--spt-font, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); }
.spt-masjid-section-title { font-size: 24px; font-weight: 800; color: var(--spt-heading); margin: 0 0 18px; }

/* ===================================================================== *
 *  Full-width host — let the profile span the page like the city pages.
 *  The plugin single/archive templates keep the theme header/footer but the
 *  theme still wraps content in a centred, padded `.container`. Neutralise
 *  it on masjid pages only (scoped to the body classes, so other themes are
 *  unaffected) so the hero/crumbs go edge-to-edge and inner sections
 *  re-centre via .spt-masjid-inner / the design-system containers.
 * ===================================================================== */
.single-prayer_masjid main#main-content.container,
.single-prayer_masjid #main-content.container,
.post-type-archive-prayer_masjid main#main-content.container,
.post-type-archive-prayer_masjid #main-content.container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.spt-masjid { overflow-x: hidden; }

/* ===================================================================== *
 *  Masjid directory promo card — the internal link into /masjid/ that the
 *  hub, country and UK landing pages carry. WoodMart styles bare <a> so the
 *  colour/decoration rules need !important, as everywhere else in this file.
 * ===================================================================== */
.spt-masjid-promo { margin: 8px auto 40px; }
.spt-masjid-promo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16, 28, 54, .08);
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.spt-masjid-promo-card:hover {
    border-color: #204C93;
    box-shadow: 0 16px 40px rgba(16, 28, 54, .16);
    transform: translateY(-2px);
}
.spt-masjid-promo-icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fc;
    border-radius: 12px;
    color: #204C93 !important;
}
.spt-masjid-promo-icon svg { width: 24px; height: 24px; }
.spt-masjid-promo-text { flex: 1; min-width: 0; display: block; }
.spt-masjid-promo-text strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #16305c !important;
    margin-bottom: 3px;
}
.spt-masjid-promo-text span {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5a6a85 !important;
}
.spt-masjid-promo-arrow {
    flex: none;
    font-size: 20px;
    font-weight: 700;
    color: #204C93 !important;
}

/* "Full monthly timetable" link under the 7-day table. */
.spt-masjid-monthly-more { margin: 16px 0 0; }
.spt-masjid-monthly-more a {
    font-size: 15px;
    font-weight: 700;
    color: #204C93 !important;
    text-decoration: none !important;
}
.spt-masjid-monthly-more a:hover { text-decoration: underline !important; }

/* City-page masjid block (auto-injected CPT list). */
.spt-masjid-city-intro {
    font-size: 15.5px;
    line-height: 1.65;
    color: #5a6a85;
    margin: 0 0 18px;
    max-width: 760px;
}
.spt-masjid-city-all { margin: 18px 0 0; }
.spt-masjid-city-all a {
    font-size: 15px;
    font-weight: 700;
    color: #204C93 !important;
    text-decoration: none !important;
}
.spt-masjid-city-all a:hover { text-decoration: underline !important; }

/* ===================================================================== *
 *  Responsive
 * ===================================================================== */
@media (max-width: 620px) {
    .spt-masjid-promo-card { padding: 16px 16px; gap: 12px; }
    .spt-masjid-promo-arrow { display: none; }
}
@media (max-width: 860px) {
    .spt-masjid-times-grid { grid-template-columns: repeat(2, 1fr); }
    .spt-masjid-name { font-size: 30px; }
    .spt-masjid-hero .spt-masjid-inner { padding-top: 34px; padding-bottom: 38px; }
    .spt-masjid-form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .spt-masjid-times-grid { grid-template-columns: 1fr; }
}