/**
 * Masjid profile + directory styling.
 *
 * Faithfully extends the Prayer Landing Widget Kit design language (see
 * assets/css/landing.css) to the masjid profile: same palette tokens, the
 * same gradient hero, card and rounded-table patterns, and pill buttons.
 * Self-contained (tokens + font are declared here) because landing.css and
 * the per-widget <style> blocks are NOT enqueued on a masjid page.
 *
 * The one profile-specific element is the Begins-vs-Jamaah dual-time card row
 * (.spt-masjid-times) — the thing a masjid page has that a city page does not.
 */

/* Self-host Plus Jakarta Sans (same face the .sptg pages use) so masjid pages
   get the kit typography without depending on landing/countries enqueues. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

.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: '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: '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)
 * ===================================================================== */
.spt-masjid-crumbs {
    border-bottom: 1px solid var(--spt-line-soft);
    background: var(--spt-bg-soft);
    font-size: 13px;
    color: var(--spt-muted);
}
.spt-masjid-crumbs .spt-masjid-inner {
    padding-top: 11px; padding-bottom: 11px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.spt-masjid-crumbs a { color: var(--spt-muted); }
.spt-masjid-crumbs .sep { opacity: 0.7; }
.spt-masjid-crumbs .is-current { color: var(--spt-primary-dark); font-weight: 600; }

.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; }
.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); }

/* Scholar Verified seal (mirrors .spt-faq__verified) */
.spt-masjid-verified { display: flex; align-items: center; gap: 18px; background: #f4f8ff; border: 1px solid #dce6f6; border-radius: 16px; padding: 22px 24px; }
.spt-masjid-verified-seal { flex: none; width: 56px; height: 56px; }
.spt-masjid-verified-seal svg { display: block; width: 56px; height: 56px; }
.spt-masjid-verified-label { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--spt-heading); }
.spt-masjid-verified-note { font-size: 14.5px; line-height: 1.6; color: #5b6b86; margin: 6px 0 0; }

/* "Never miss a prayer" app CTA + phone mockup (mirrors .spt-app / .spt-phone) */
.spt-masjid-app { 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-masjid-app::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-masjid-app-copy { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.spt-masjid-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-masjid-app-badge svg { width: 14px; height: 14px; }
.spt-masjid-app-h { font-size: 24px; font-weight: 800; color: var(--spt-heading); letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.2; }
.spt-masjid-app-text { font-size: 15.5px; line-height: 1.6; color: #5b6b86; margin: 0 0 20px; max-width: 420px; }
.spt-masjid-app-features { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; }
.spt-masjid-app-feature { display: flex; align-items: center; gap: 10px; }
.spt-masjid-app-feature svg { width: 20px; height: 20px; color: var(--spt-primary); }
.spt-masjid-app-feature span { font-size: 13.5px; font-weight: 600; color: var(--spt-body); }
.spt-masjid-app-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.spt-masjid-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-masjid-app-btn:hover { background: var(--spt-primary); color: #fff !important; }
.spt-masjid-app-btn svg { width: 22px; height: 22px; flex: none; }
.spt-masjid-app-btn-txt { text-align: left; line-height: 1.1; }
.spt-masjid-app-btn-sub { display: block; font-size: 10px; font-weight: 500; opacity: 0.8; }
.spt-masjid-app-btn-main { display: block; font-size: 15px; font-weight: 700; }
.spt-masjid-app-preview { flex: none; position: relative; z-index: 1; }
.spt-masjid-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-masjid-phone-screen { width: 100%; height: 100%; border-radius: 19px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.spt-masjid-phone-top { background: linear-gradient(160deg, var(--spt-primary-mid), var(--spt-primary)); padding: 16px 12px 14px; color: #fff; }
.spt-masjid-phone-loc { font-size: 8.5px; opacity: 0.8; font-weight: 600; }
.spt-masjid-phone-cdlabel { font-size: 9px; font-weight: 700; margin-top: 8px; opacity: 0.85; }
.spt-masjid-phone-cd { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.spt-masjid-phone-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.spt-masjid-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-masjid-phone-row span { color: var(--spt-muted); }
.spt-masjid-phone-row.is-next { color: #fff; background: var(--spt-primary); }
.spt-masjid-phone-row.is-next span { color: #fff; opacity: 0.85; }
@media (max-width: 600px) { .spt-masjid-app { justify-content: center; } .spt-masjid-app-preview { margin: 0 auto; } }

/* 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; }
.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 { 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; }
.spt-masjid-qibla-compass { flex: none; }
.spt-masjid-qibla-compass .ring { fill: #fff; stroke: #dfe4ee; stroke-width: 2; }
.spt-masjid-qibla-compass .center { fill: var(--spt-heading); }
.spt-masjid-qibla-compass .needle { stroke: var(--spt-accent); stroke-width: 4; stroke-linecap: round; }
.spt-masjid-qibla-compass .lab { text-anchor: middle; font-size: 12px; font-weight: 700; fill: var(--spt-muted); }
.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; }

/* FAQ accordion (mirrors .spt-faq) */
.spt-masjid-faq { display: flex; flex-direction: column; gap: 12px; }
.spt-masjid-faq-item { border: 1px solid var(--spt-line); border-radius: 14px; overflow: hidden; background: #fff; }
.spt-masjid-faq-q {
    width: 100% !important; display: flex !important; align-items: center !important;
    justify-content: space-between !important; gap: 14px !important; background: none !important;
    border: 0 !important; padding: 17px 20px !important; cursor: pointer !important;
    text-align: left !important; font: inherit !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: normal !important; margin: 0 !important;
}
.spt-masjid-faq-qt { font-size: 16px; font-weight: 700; color: var(--spt-primary); }
.spt-masjid-faq-sign { font-size: 22px; font-weight: 700; color: var(--spt-primary); line-height: 1; flex: none; }
.spt-masjid-faq-sign::before { content: "+"; }
.spt-masjid-faq-item.is-open .spt-masjid-faq-sign::before { content: "\2212"; }
.spt-masjid-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.spt-masjid-faq-item.is-open .spt-masjid-faq-a { max-height: 480px; }
.spt-masjid-faq-a p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: var(--spt-body); }

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

/* Directory landing (/masjid/) — matches the /prayer-times/ hub */
.spt-masjid-hero-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 560px; }
/* Centred hero variant */
.spt-masjid-hero--center .spt-masjid-inner { text-align: center; }
.spt-masjid-hero--center .spt-masjid-name { font-size: 42px; }
.spt-masjid-hero--center .spt-masjid-hero-sub { margin-left: auto; margin-right: auto; }
/* Centred white search pill (like the hub) */
.spt-masjid-dir-search { margin: 26px auto 0; max-width: 520px; 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-masjid-dir-search svg { width: 20px; height: 20px; flex: none; color: #9aa4b5; }
.spt-masjid-dir-input,
.spt-masjid-dir-search input.spt-masjid-dir-input {
    flex: 1 !important; min-width: 0 !important; border: 0 !important; outline: none !important;
    background: transparent !important; box-shadow: none !important; color: var(--spt-heading) !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important;
    height: auto !important; padding: 0 !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important;
}
.spt-masjid-dir-input::placeholder { color: #9aa4b5 !important; }

.spt-masjid-dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.spt-masjid-dir-head .spt-masjid-h { margin: 0; }
.spt-masjid-dir-total { font-size: 14px; font-weight: 600; color: var(--spt-muted); }
.spt-masjid-dir-noresults { color: var(--spt-muted); font-size: 15px; padding: 20px 0; }
.spt-masjid-dir-group { margin-bottom: 34px; }
.spt-masjid-dir-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.spt-masjid-dir-region { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--spt-primary); }
.spt-masjid-dir-count { font-size: 12px; font-weight: 600; color: var(--spt-muted); }

/* Compact directory cards (like the hub country cards) */
.spt-masjid-cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.spt-masjid-cc { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--spt-line); border-radius: 12px; padding: 14px 16px; color: var(--spt-heading) !important; text-decoration: none !important; transition: border-color 0.14s, background 0.14s, transform 0.14s; }
.spt-masjid-cc:hover { border-color: var(--spt-primary); background: #f4f8ff; transform: translateY(-1px); }
.spt-masjid-cc-body { min-width: 0; }
.spt-masjid-cc-name { display: block; font-size: 15px; font-weight: 700; color: var(--spt-heading); }
.spt-masjid-cc-area { display: block; font-size: 12.5px; color: var(--spt-muted); margin-top: 2px; }
.spt-masjid-cc-arrow { width: 18px; height: 18px; flex: none; color: var(--spt-primary); }

/* Donate CTA (matches the hub) */
.spt-masjid-donate { position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: 20px; padding: 42px 40px; background: linear-gradient(155deg, var(--spt-primary-dark), var(--spt-primary)); }
.spt-masjid-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-masjid-donate > * { position: relative; }
.spt-masjid-donate h2 { font-size: 27px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; color: #fff; }
.spt-masjid-donate p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 24px; line-height: 1.6; }
.spt-masjid-donate-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.spt-masjid-donate-btn { font-weight: 700; font-size: 15.5px; padding: 13px 30px; border-radius: 999px; text-decoration: none !important; }
.spt-masjid-donate-btn--primary { background: var(--spt-accent); color: #fff !important; }
.spt-masjid-donate-btn--ghost { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff !important; }
@media (max-width: 560px) { .spt-masjid-hero--center .spt-masjid-name { font-size: 32px; } }

/* City-page "Mosques in [City]" section wrapper */
.spt-masjid-city-section { margin-top: 40px; }
.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 template keeps 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 class, so other themes are
 *  unaffected) so the hero/crumbs go edge-to-edge and inner sections
 *  re-centre via .spt-masjid-inner.
 * ===================================================================== */
.single-prayer_masjid main#main-content.container,
.single-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; }

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