/* ght-prayer */
/* ==========================================================================
 * GHH Toolkit — Sky Prayer pages in the GHH design system (DESIGN-SYSTEM.md → "Prayer pages").
 *
 * The prayer hub, country, city and masjid pages are drawn by the Sky Prayer Timetable plugin in its
 * own look (Plus Jakarta Sans, navy gradients, shadows, spaced capitals). This file dresses them in
 * the GHH look without touching the plugin, so other sites keep theirs:
 *   1. the plugin's colour/font tokens (--spt-*) are pointed at GHH's (--ght-*) on every plugin root;
 *   2. heroes become the calm "night" band (no gradients), titles Schibsted Grotesk like other GHH
 *      heroes, everything else Onest;
 *   3. cards are white with a hairline and no shadow, buttons are pills, labels are sentence case,
 *      the questions are the GHH accordion;
 *   4. the giving card (mu-plugin ghh-prayer-prompt) follows the same rules.
 * Selectors start body.ght-site so they outrank the widgets' own <style> blocks printed in the page.
 * Loaded only on prayer pages (GHT_Toolkit::enqueue_prayer), after the plugin's stylesheets.
 * ======================================================================== */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
body.ght-site :is(.sptg, .spt-masjid, .spt-l, .spt-cta-wrap, .spt-ds, .spt-masjid-city-section, .spt-hdr,
	.spt-today, .spt-intro, .spt-fast, .spt-article, .spt-qibla, .spt-monthly, .spt-tools, .spt-mosques,
	.spt-nearby, .spt-faq-wrap, .spt-dir) {
	--spt-font: var(--ght-ui);
	--spt-primary: var(--ght-blue-d);
	--spt-primary-dark: var(--ght-ink);
	--spt-primary-mid: var(--ght-blue);
	--spt-hero-end: var(--ght-night);
	--spt-accent: var(--ght-blue);
	--spt-accent-light: var(--ght-gold);
	--spt-ink: var(--ght-ink);
	--spt-heading: var(--ght-ink);
	--spt-body: var(--ght-ink-2);
	--spt-muted: var(--ght-mute);
	--spt-line: var(--ght-line);
	--spt-line-soft: var(--ght-line);
	--spt-bg-soft: var(--ght-page);
	--spt-label: var(--ght-mute);
	--spt-faint: var(--ght-mute);
	--spt-tint: var(--ght-soft);
	--spt-tint-2: var(--ght-mist);
	--spt-tint-line: var(--ght-line);
	font-family: var(--ght-ui);
	font-variant-numeric: normal;
}
/* sentence case everywhere: the plugin spaces out capitals on labels, badges and table heads */
body.ght-site :is(.sptg, .spt-masjid, .spt-l, .spt-cta-wrap, .spt-masjid-city-section, .ghh-pp) :is(*, *::before, *::after) { text-transform: none !important; }
body.ght-site :is(.sptg, .spt-masjid, .spt-l, .spt-cta-wrap, .spt-masjid-city-section) :focus-visible { outline: 2px solid var(--ght-blue) !important; outline-offset: 2px; }

/* ── 2. breadcrumb + heroes: the night band ────────────────────────────── */
body.ght-site :is(.spt-ds-crumbs, .spt-hdr__crumbs) { background: var(--ght-night); border-bottom: 0; color: rgba(255, 255, 255, .62); font-size: 14px; }
body.ght-site :is(.spt-ds-crumbs, .spt-hdr__crumbs) a,
body.ght-site .spt-ds-crumbs .spt-ds-crumbs-inner a { color: rgba(255, 255, 255, .62) !important; }
body.ght-site :is(.spt-ds-crumbs, .spt-hdr__crumbs) a:hover,
body.ght-site .spt-ds-crumbs .spt-ds-crumbs-inner a:hover { color: #fff !important; }
body.ght-site :is(.spt-ds-crumbs, .spt-hdr__crumbs) :is(.sep, .spt-hdr__crumb-sep) { color: rgba(255, 255, 255, .4); opacity: 1; }
body.ght-site :is(.spt-ds-crumbs, .spt-hdr__crumbs) .is-current { color: #fff; font-weight: 500; }

body.ght-site :is(.spt-ds-hero, .spt-hdr__hero, .spt-masjid-hero) { background: var(--ght-night) !important; }
body.ght-site :is(.spt-ds-hero, .spt-hdr__hero, .spt-masjid-hero)::before { display: none; }
body.ght-site :is(.spt-ds-hero-title, .spt-hdr__title, .spt-masjid-name) {
	font-family: var(--ght-f) !important;
	font-size: clamp(36px, 4.6vw, 60px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: #fff;
	text-wrap: balance;
}
/* city and masjid titles share their row with the countdown: a step smaller, so "Prayer Times in York" holds one line */
body.ght-site :is(.spt-hdr__title, .spt-masjid-name) { font-size: clamp(34px, 3.6vw, 52px); }
body.ght-site :is(.spt-ds-hero-sub, .spt-hdr__intro) { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
body.ght-site :is(.spt-hdr__dateline, .spt-masjid-dateline) { font-size: 14px; color: rgba(255, 255, 255, .6); }
body.ght-site .spt-masjid-address { font-size: 17px; color: rgba(255, 255, 255, .72); }
body.ght-site :is(.spt-ds-hero-badge, .spt-hdr__badge, .spt-masjid-badge) {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .14);
	padding: 6px 14px;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #fff !important;
}

/* hub search: a white pill with the blue button */
body.ght-site .spt-ds-searchpill { border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: none; }
body.ght-site .spt-ds-searchpill > svg { color: var(--ght-mute); }
body.ght-site .spt-ds-searchpill input { font-weight: 500 !important; color: var(--ght-ink) !important; }
/* the focus ring goes round the whole pill, not the bare field inside it */
body.ght-site .spt-ds-searchpill input:focus-visible { outline: none !important; }
body.ght-site .spt-ds-searchpill:focus-within { box-shadow: 0 0 0 2px var(--ght-blue); }
body.ght-site .spt-ds-searchpill input::placeholder { color: var(--ght-mute) !important; }
body.ght-site .spt-ds-searchpill-btn { background: var(--ght-blue) !important; border-radius: 999px !important; padding: 0 22px !important; height: 44px; font-size: 15px !important; font-weight: 600 !important; }
body.ght-site .spt-ds-searchpill-btn:hover { background: var(--ght-blue-d) !important; }

/* city hero: place field, Locate me, Settings — quiet controls on the dark band */
body.ght-site .spt-hdr__loc-label { font-size: 14px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .62); }
body.ght-site .spt-hdr__search { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 0 8px 0 18px; }
body.ght-site .spt-hdr__search:focus-within { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
body.ght-site .spt-hdr .spt-hdr__search-input { font-size: 16px !important; font-weight: 500 !important; }
body.ght-site .spt-hdr .spt-hdr__locate,
body.ght-site .spt-hdr button.spt-hdr__locate {
	background: #fff !important;
	color: var(--ght-ink) !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	transform: none !important;
}
body.ght-site .spt-hdr .spt-hdr__locate:hover { background: var(--ght-mist) !important; color: var(--ght-ink) !important; }
body.ght-site .spt-hdr .spt-hdr__settings-btn,
body.ght-site .spt-hdr button.spt-hdr__settings-btn {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
body.ght-site .spt-hdr .spt-hdr__settings-btn:hover { background: rgba(255, 255, 255, .08) !important; }

/* masjid hero: "Get directions" is the one blue button */
body.ght-site .spt-masjid-links a.spt-masjid-btn,
body.ght-site .spt-masjid-links .spt-masjid-btn { height: 48px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 600 !important; transform: none !important; }
body.ght-site .spt-masjid-links a.spt-masjid-btn--primary,
body.ght-site .spt-masjid-btn--primary { background: var(--ght-blue) !important; color: #fff !important; box-shadow: none !important; }
body.ght-site .spt-masjid-links a.spt-masjid-btn--primary:hover,
body.ght-site .spt-masjid-btn--primary:hover { background: var(--ght-blue-d) !important; }
body.ght-site .spt-masjid-links a.spt-masjid-btn--ghost,
body.ght-site .spt-masjid-btn--ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, .3) !important; }
body.ght-site .spt-masjid-btn--ghost:hover { background: rgba(255, 255, 255, .08) !important; }

/* countdown card on the dark band: the theme's dark-section card, gold for the seconds */
body.ght-site :is(.spt-hdr__countdown, .spt-masjid-cd) {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--ght-r-xl);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.ght-site :is(.spt-hdr__countdown-label, .spt-masjid-cd-label) { font-size: 14px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
body.ght-site :is(.spt-hdr__clock, .spt-masjid-cd-clock) { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--ght-r-m); }
body.ght-site :is(.spt-hdr__clock--sec, .spt-masjid-cd-clock--sec) { border-color: rgba(244, 165, 30, .4); }
/* proportional figures (DESIGN-SYSTEM.md): each number sits centred in a fixed-width tile, so nothing moves */
body.ght-site :is(.spt-hdr__clock-num, .spt-masjid-cd-num) { font-weight: 700; font-variant-numeric: normal; }
body.ght-site :is(.spt-hdr__clock--sec .spt-hdr__clock-num, .spt-masjid-cd-clock--sec .spt-masjid-cd-num) { color: var(--ght-gold); }
body.ght-site :is(.spt-hdr__clock-unit, .spt-masjid-cd-unit) { font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, .62); }
body.ght-site :is(.spt-hdr__cd-colon, .spt-masjid-cd-colon) { color: rgba(255, 255, 255, .3); font-weight: 600; }
body.ght-site :is(.spt-hdr__cd-fill, .spt-masjid-cd-fill) { background: var(--ght-gold); }
body.ght-site :is(.spt-hdr__cd-ends, .spt-masjid-cd-ends) { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .6); }

/* ── 3. the giving card (mu-plugin ghh-prayer-prompt) ──────────────────── */
body.ght-site .ghh-pp,
body.ght-site .ghh-pp[data-variant] {
	--ghh-pp-accent: var(--ght-blue);
	--ghh-pp-accent-dark: var(--ght-blue-d);
	--ghh-pp-accent-soft: var(--ght-soft);
	--ghh-pp-ink: var(--ght-ink);
	--ghh-pp-muted: var(--ght-ink-2);
	font-family: var(--ght-ui);
}
body.ght-site .ghh-pp .ghh-pp__box,
body.ght-site .ghh-pp--masjid .ghh-pp__box { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; padding: 20px 24px; }
body.ght-site .ghh-pp__icon { background: var(--ght-soft); color: var(--ght-blue-d); }
body.ght-site .ghh-pp__pill { background: var(--ght-soft); color: var(--ght-blue-d); font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 3px 10px; }
body.ght-site .ghh-pp__title { font-family: var(--ght-ui); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ght-ink); }
body.ght-site .ghh-pp__sub { font-size: 15px; line-height: 1.5; color: var(--ght-ink-2); }
body.ght-site .ghh-pp .ghh-pp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; background: var(--ght-blue); font-size: 16px; font-weight: 600; box-shadow: none; }
body.ght-site .ghh-pp .ghh-pp__btn:hover,
body.ght-site .ghh-pp .ghh-pp__btn:focus-visible { background: var(--ght-blue-d); }
body.ght-site .ghh-pp .ghh-pp__btn:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }

/* Its space is kept free until the script moves it in (body.ght-pp-on, GHT_Prayer::body_class): the
   card arrived after the first paint and pushed everything down (layout shift up to 0.17 on phones).
   The card is one fixed height per layout, so the reserved space matches it exactly. */
body.ght-site .ghh-pp .ghh-pp__box { min-height: 151px; }
/* until placed, the card waits where it was printed (the footer, or right after the city header widget,
   where it took its own 171px as well as the reserved space); the script adds a placement class */
body.ght-site.ght-pp-on .ghh-pp:not(.ghh-pp--in-hero):not(.ghh-pp--ds):not(.ghh-pp--masjid) { display: none; }
body.ght-site.ght-pp-on .spt-ds-hero-inner:not(:has(.ghh-pp))::after { content: ""; display: block; height: 179px; }
body.ght-site.ght-pp-on .spt-masjid:not(:has(.ghh-pp)) .spt-masjid-today { margin-top: 183px; }
@media (min-width: 768px) {
	body.ght-site.ght-pp-on .spt-hdr__hero .spt-l-inner:not(:has(.ghh-pp))::after { content: ""; display: block; height: 179px; }
}
@media (max-width: 767px) {
	body.ght-site .ghh-pp .ghh-pp__box { min-height: 321px; align-content: center; }
	body.ght-site.ght-pp-on .spt-ds-hero-inner:not(:has(.ghh-pp))::after { height: 349px; }
	body.ght-site.ght-pp-on .spt-masjid:not(:has(.ghh-pp)) .spt-masjid-today { margin-top: 345px; }
	/* phones: the card goes between the place controls and the countdown */
	body.ght-site.ght-pp-on .spt-hdr__row:not(:has(.ghh-pp))::after { content: ""; order: 1; flex: 0 0 100%; height: 341px; }
	body.ght-site.ght-pp-on .spt-hdr__row:not(:has(.ghh-pp)) .spt-hdr__countdown { order: 2; }
}

/* ── 4. today's times: white cards, the next prayer soft with a blue ring ── */
body.ght-site :is(.spt-today, .spt-masjid-today) { background: var(--ght-page); border-bottom: 0; }
body.ght-site :is(.spt-today__card, .spt-masjid-today-card, .sptg-pt) {
	background: #fff;
	border: 1px solid var(--ght-line);
	border-radius: var(--ght-r-l);
}
body.ght-site :is(.spt-today__card.is-next, .spt-masjid-today-card.is-next, .sptg-pt.is-next) {
	background: var(--ght-soft);
	border-color: var(--ght-blue);
	box-shadow: inset 0 0 0 .5px var(--ght-blue);
}
body.ght-site :is(.spt-today__badge, .spt-masjid-today-badge, .sptg-pt__badge) {
	background: var(--ght-blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 2px 10px;
	line-height: 1.4;
}
body.ght-site :is(.spt-today__icon, .spt-masjid-today-icon) { background: var(--ght-mist); }
body.ght-site :is(.spt-today__card.is-next .spt-today__icon, .spt-masjid-today-card.is-next .spt-masjid-today-icon) { background: #fff; }
body.ght-site :is(.spt-today__name, .spt-masjid-today-name, .sptg-pt__name) { font-size: 15px; font-weight: 500; color: var(--ght-ink-2); }
body.ght-site :is(.spt-today__time, .spt-masjid-today-time, .sptg-pt__time) { font-size: 20px; font-weight: 700; color: var(--ght-ink); font-variant-numeric: normal; }
body.ght-site :is(.spt-today__date, .spt-masjid-today-date) { font-size: 14px; font-weight: 500; color: var(--ght-mute); }

/* hub/country "your location" panel */
body.ght-site .sptg-panel { border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site .sptg__locbar { background: var(--ght-page); border-bottom-color: var(--ght-line); }
body.ght-site .sptg-locicon { background: var(--ght-soft); color: var(--ght-blue-d); border-radius: var(--ght-r-m); }
body.ght-site .sptg-loclabel { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ght-mute); }
body.ght-site .sptg-locname { font-size: 17px; font-weight: 600; color: var(--ght-ink); }
body.ght-site .sptg .sptg-locate { height: 40px; padding: 0 16px; border-radius: 999px; color: var(--ght-ink); font-size: 14px; font-weight: 600; }
body.ght-site .sptg .sptg-locate:hover { background: var(--ght-mist); }
body.ght-site .sptg .sptg-gear { background: #fff; border-radius: 50%; color: var(--ght-ink); }
body.ght-site .sptg .sptg-gear:hover { background: var(--ght-mist); }
body.ght-site .sptg-greg { font-size: 14px; font-weight: 500; color: var(--ght-ink-2); }
body.ght-site .sptg-hijri { font-size: 13px; font-weight: 400; color: var(--ght-mute); }
body.ght-site .sptg-next { font-size: 14px; font-weight: 500; color: var(--ght-mute); }
/* proportional figures; a fixed width keeps "Fajr in" still while the seconds change */
body.ght-site .sptg-cd { display: inline-block; min-width: 5.2em; text-align: right; font-size: 24px; font-weight: 700; letter-spacing: 0; color: var(--ght-blue-d); font-variant-numeric: normal; }
body.ght-site .sptg-help { font-size: 13px; color: var(--ght-mute); }

/* ── 5. section headings, copy ─────────────────────────────────────────── */
body.ght-site :is(.spt-ds-prose h2, .spt-ds-faq-h, .spt-ds-dirhead h2, .spt-dir__heading, .spt-fast__heading,
	.spt-article__heading, .spt-monthly__title, .spt-tools__heading, .spt-mosques__heading, .spt-nearby__title,
	.spt-faq__heading, .spt-today__heading, .spt-masjid-h, .spt-masjid-today-heading, .spt-masjid-section-title) {
	font-family: var(--ght-ui) !important;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ght-ink);
}
body.ght-site :is(.spt-qibla__heading, .spt-masjid-qibla-h, .spt-app__heading, .spt-masjid-contact h2) {
	font-family: var(--ght-ui) !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--ght-ink);
}
body.ght-site :is(.spt-ds-prose p, .spt-intro__p, .spt-article__p, .spt-masjid-intro-p, .spt-masjid-article-p, .spt-masjid-about) { font-size: 17px; line-height: 1.6; color: var(--ght-ink-2); }
body.ght-site :is(.spt-dir__subtext, .spt-fast__sub, .spt-monthly__sub, .spt-tools__sub, .spt-mosques__sub, .spt-nearby__sub, .spt-masjid-sub, .spt-masjid-city-intro, .spt-masjid-contact-lead) { font-size: 16px; line-height: 1.6; color: var(--ght-mute); }
body.ght-site :is(.spt-ds-prose a, .spt-article__link, .spt-masjid-article-p a, .spt-masjid-city-all a, .spt-masjid-monthly-more a, .spt-nearby__link, .spt-mosques__link) { color: var(--ght-blue-d) !important; font-weight: 600; }

/* ── 6. directory: chips, groups, link cards ───────────────────────────── */
body.ght-site .sptg-label { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ght-mute); }
body.ght-site .sptg .sptg__pill { background: #fff; border: 1px solid var(--ght-line); padding: 9px 18px; font-size: 15px; font-weight: 500; color: var(--ght-ink); }
body.ght-site .sptg .sptg__pill:not(.is-soon):hover { background: var(--ght-mist); color: var(--ght-ink); }
body.ght-site .sptg .sptg__pill.is-soon { background: var(--ght-page); color: var(--ght-mute); }
body.ght-site .spt-ds-dirtotal { font-size: 14px; font-weight: 500; color: var(--ght-mute); }
body.ght-site .spt-ds-grouplabel { font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ght-ink); }
body.ght-site .spt-ds-grouprule { background: var(--ght-line); }
body.ght-site .spt-ds-groupcount { font-size: 13px; font-weight: 500; color: var(--ght-mute); }
body.ght-site .sptg-letter { width: 32px; height: 32px; background: var(--ght-soft); color: var(--ght-blue-d); font-size: 15px; font-weight: 700; border-radius: var(--ght-r-s); }
body.ght-site .sptg-dot,
body.ght-site .spt-dir__dot { background: var(--ght-blue); }
body.ght-site :is(.spt-ds-item, .spt-ds-grid .spt-ds-item, .spt-dir__item) {
	background: #fff;
	border: 1px solid var(--ght-line);
	border-radius: var(--ght-r-m);
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ght-ink);
}
body.ght-site :is(a.spt-ds-item, .spt-ds-grid a.spt-ds-item, a.spt-dir__item, .spt-dir__item):hover { background: var(--ght-mist); border-color: var(--ght-line); color: var(--ght-ink); }
body.ght-site :is(.spt-ds-item-arrow, .spt-dir__arrow) { color: var(--ght-mute); }
body.ght-site .sptg__soon { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ght-mute); background: var(--ght-page); border-color: var(--ght-line); }
body.ght-site .sptg-noresults__title { font-size: 18px; font-weight: 700; color: var(--ght-ink); }

/* ── 7. questions: the GHH accordion (one card, hairline rows, round chevron) ── */
body.ght-site .spt-ds-faq-item {
	margin: 0;
	border: 1px solid var(--ght-line);
	border-bottom-width: 0;
	border-radius: 0;
	background: #fff;
}
body.ght-site .spt-ds-faq-h + .spt-ds-faq-item { border-radius: var(--ght-r-l) var(--ght-r-l) 0 0; }
body.ght-site .spt-ds-faq-item:not(:has(+ .spt-ds-faq-item)) { border-bottom-width: 1px; border-radius: 0 0 var(--ght-r-l) var(--ght-r-l); }
body.ght-site .spt-ds-faq-h + .spt-ds-faq-item:not(:has(+ .spt-ds-faq-item)) { border-radius: var(--ght-r-l); }
body.ght-site :is(.spt-ds-faq-q, .spt-faq__q) {
	min-height: 56px !important;
	padding: 16px 20px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--ght-ink) !important;
	background: #fff !important;
	transition: background .2s var(--ght-ease);
}
@media (min-width: 961px) { body.ght-site :is(.spt-ds-faq-q, .spt-faq__q) { font-size: 17px !important; } }
/* long questions wrap (a site button rule keeps button text on one line: it ran out of the card on phones) */
body.ght-site :is(.spt-ds-faq-q, .spt-faq__q) { white-space: normal !important; text-align: left !important; justify-content: space-between !important; }
body.ght-site :is(.spt-ds-faq-q > span:first-child, .spt-faq__q-text) { flex: 1 1 auto; min-width: 0; }
body.ght-site :is(.spt-ds-faq-q, .spt-faq__q):hover { background: var(--ght-page) !important; color: var(--ght-ink) !important; }
body.ght-site :is(.spt-ds-faq-item.is-open .spt-ds-faq-q, .spt-faq__item.is-open .spt-faq__q, .spt-faq__q[aria-expanded="true"]) { color: var(--ght-blue-d) !important; }
body.ght-site :is(.spt-ds-faq-sign, .spt-faq__sign) {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ght-line);
	border-radius: 50%;
	background: #fff;
	transition: transform .2s var(--ght-ease);
}
body.ght-site :is(.spt-ds-faq-sign, .spt-faq__sign)::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 11px;
	right: auto;
	bottom: auto;
	width: 8px;
	height: 8px;
	background: none;
	border-right: 1.8px solid var(--ght-ink);
	border-bottom: 1.8px solid var(--ght-ink);
	border-radius: 0;
	transform: rotate(45deg);
}
body.ght-site :is(.spt-ds-faq-sign, .spt-faq__sign)::after { display: none; }
body.ght-site :is(.spt-ds-faq-item.is-open .spt-ds-faq-sign, .spt-faq__item.is-open .spt-faq__sign, .spt-faq__q[aria-expanded="true"] .spt-faq__sign) { transform: rotate(180deg); }
body.ght-site :is(.spt-ds-faq-a, .spt-faq__a) { padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ght-ink-2); }

/* scholar-verified note: a success alert */
body.ght-site :is(.spt-ds-verified, .spt-faq__verified) { background: var(--ght-ok-soft); border: 1px solid #CBE6D6; border-radius: var(--ght-r-m); }
body.ght-site :is(.spt-ds-verified-label, .spt-faq__verified-label) { font-size: 15px; font-weight: 600; color: var(--ght-ink); }
body.ght-site :is(.spt-ds-verified-note, .spt-faq__verified-note) { font-size: 14px; color: var(--ght-ink-2); }

/* ── 8. app card ───────────────────────────────────────────────────────── */
body.ght-site .spt-app__box { border-radius: var(--ght-r-l); box-shadow: none; padding: 32px; }
body.ght-site .spt-app__box::before { display: none; }
body.ght-site .spt-app__badge { background: var(--ght-soft); color: var(--ght-blue-d); font-size: 13px; font-weight: 600; letter-spacing: 0; }
body.ght-site .spt-app__text { font-size: 16px; color: var(--ght-ink-2); }
body.ght-site .spt-app__feature svg { color: var(--ght-blue-d); }
body.ght-site .spt-app__feature span { font-size: 14px; font-weight: 500; color: var(--ght-ink-2); }
body.ght-site .spt-app__btn { background: var(--ght-ink); border-radius: 999px; padding: 10px 22px; }
body.ght-site .spt-app__btn:hover { background: var(--ght-night); }
body.ght-site .spt-phone { background: var(--ght-ink); box-shadow: none; }
body.ght-site .spt-phone__top { background: var(--ght-night); }
body.ght-site .spt-phone__row { background: var(--ght-mist); color: var(--ght-ink); }
body.ght-site .spt-phone__row.is-next { background: var(--ght-blue); }

/* ── 9. "Turn your prayer into action": a night panel, blue pill + outline pill ── */
body.ght-site :is(.spt-ds-donate, .spt-cta__box) { background: var(--ght-night); border-radius: var(--ght-r-xl); }
body.ght-site :is(.spt-ds-donate, .spt-cta__box)::before { display: none; }
body.ght-site :is(.spt-ds-donate h2, .spt-cta__heading) { font-family: var(--ght-ui) !important; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
body.ght-site :is(.spt-ds-donate p, .spt-cta__text) { font-size: 17px; color: rgba(255, 255, 255, .72); }
body.ght-site :is(.spt-ds-donate-btn, .spt-cta__btn) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; font-size: 16px; font-weight: 600; border-radius: 999px; }
body.ght-site :is(.spt-ds-donate-btn--primary, .spt-cta__btn--primary) { background: var(--ght-blue) !important; border: 0; color: #fff !important; }
body.ght-site :is(.spt-ds-donate-btn--primary, .spt-cta__btn--primary):hover { background: var(--ght-blue-d) !important; opacity: 1; }
body.ght-site :is(.spt-ds-donate-btn--ghost, .spt-cta__btn--secondary) { background: transparent !important; border: 1px solid rgba(255, 255, 255, .3) !important; color: #fff !important; }
body.ght-site :is(.spt-ds-donate-btn--ghost, .spt-cta__btn--secondary):hover { background: rgba(255, 255, 255, .08) !important; opacity: 1; }

/* ── 10. city-page widgets ─────────────────────────────────────────────── */
/* Suhoor & Iftar: white cards with the figure in ink */
body.ght-site :is(.spt-fast__card, .spt-masjid-fast-card) { background: #fff; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); color: var(--ght-ink); }
body.ght-site :is(.spt-fast__lab, .spt-masjid-fast-lab) { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ght-mute); opacity: 1; }
body.ght-site :is(.spt-fast__time, .spt-masjid-fast-time) { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ght-ink); font-variant-numeric: normal; }
body.ght-site .spt-fast__card--muted .spt-fast__time { color: var(--ght-blue-d); }
body.ght-site :is(.spt-fast__jummah, .spt-masjid-fast-jumuah) { background: var(--ght-page); border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); font-size: 15px; color: var(--ght-ink-2); }

/* the Qur'an verse: a night card, the reference in gold */
body.ght-site .spt-article__quote-inner { background: var(--ght-night); border-radius: var(--ght-r-xl); }
body.ght-site .spt-article__quote-mark { color: rgba(255, 255, 255, .25); }
body.ght-site .spt-article__quote-text { font-size: 22px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
body.ght-site .spt-article__quote-cite { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ght-gold); }

/* Qibla box */
body.ght-site :is(.spt-qibla__box, .spt-masjid-qibla) { background: #fff; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site :is(.spt-qibla__body, .spt-masjid-qibla-body) { font-size: 16px; color: var(--ght-ink-2); }
body.ght-site :is(.spt-qibla__deg, .spt-masjid-qibla-body .deg) { color: var(--ght-blue-d); font-weight: 700; }

/* monthly timetables (proportional figures: Onest's even-width "1" spreads "11:48" apart; the times
   sit left in their columns, so they still read down cleanly) */
body.ght-site :is(.spt-monthly__table-frame, .spt-masjid-table-frame) { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site :is(.spt-monthly__table, .spt-masjid-monthly-table, .spt-monthly__table td, .spt-masjid-monthly-table td) { font-variant-numeric: normal; }
body.ght-site :is(.spt-monthly__table thead th, .spt-masjid-monthly-table thead th) {
	background: var(--ght-page) !important;
	color: var(--ght-mute) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	border-color: var(--ght-line) !important;
}
body.ght-site :is(.spt-monthly__table td, .spt-masjid-monthly-table tbody td) { color: var(--ght-ink-2); border-color: var(--ght-line); }
/* one line per time ("5:19 AM" broke in two on phones); the table scrolls sideways in its own frame */
body.ght-site :is(.spt-monthly__table, .spt-masjid-monthly-table) :is(td, th) { white-space: nowrap; }
body.ght-site .spt-masjid-table-frame { overflow-x: auto; }
body.ght-site .spt-masjid-monthly-table tbody tr:nth-child(odd) td { background: #fff; }
body.ght-site :is(.spt-monthly__table tr.is-today td, .spt-monthly__table tr.is-today th, .spt-masjid-monthly-table tbody tr.is-today td) { background: var(--ght-soft) !important; color: var(--ght-ink) !important; }
body.ght-site :is(.spt-monthly__pill, .spt-monthly__badge) { border-radius: 999px; font-weight: 600; letter-spacing: 0; box-shadow: none; }
body.ght-site .spt-monthly__note { font-size: 13px; color: var(--ght-mute); }

/* "Take … with you": blue pill + outline pill */
body.ght-site :is(.spt-tools__btn) { border-radius: 999px !important; min-height: 48px; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; }
body.ght-site .spt-tools__btn--primary { background: var(--ght-blue) !important; border-color: var(--ght-blue) !important; color: #fff !important; }
body.ght-site .spt-tools__btn--primary:hover { background: var(--ght-blue-d) !important; }
body.ght-site .spt-tools__btn--ghost { background: #fff !important; border: 1px solid var(--ght-line) !important; color: var(--ght-ink) !important; }
body.ght-site .spt-tools__btn--ghost:hover { background: var(--ght-mist) !important; }

/* nearby cities table */
body.ght-site .spt-nearby__table { border-color: var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site .spt-nearby__head { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ght-mute); background: var(--ght-page); }
body.ght-site .spt-nearby__row { border-color: var(--ght-line); }
body.ght-site .spt-nearby__row.is-current { background: var(--ght-soft); }
body.ght-site .spt-nearby__badge { background: var(--ght-soft); color: var(--ght-blue-d); font-size: 12px; font-weight: 600; letter-spacing: 0; }
body.ght-site .spt-nearby__city { font-weight: 600; color: var(--ght-ink); }

/* mosques near the city */
body.ght-site .spt-mosques__card { background: #fff; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site .spt-mosques__name { font-weight: 700; color: var(--ght-ink); }
body.ght-site :is(.spt-mosques__addr, .spt-mosques__dist, .spt-mosques__credit, .spt-mosques__count) { color: var(--ght-mute); }
body.ght-site .spt-mosques__pin { background: var(--ght-soft); color: var(--ght-blue-d); }

/* ── 10b. city pages: the widgets' saved Elementor style controls ──────────
 * Every city page is an Elementor copy whose widgets carry the plugin's colours as saved control
 * values, printed in that page's post CSS as `.elementor-NNN .elementor-element.elementor-element-x .y`
 * (0,4,0). The `.elementor .elementor-element` prefix below (0,5,1) outranks them on all 355 cities
 * without !important and without editing the pages. */
body.ght-site .elementor .elementor-element :is(.spt-hdr__title, .spt-hdr__badge, .spt-hdr__clock-num, .spt-cta__heading) { color: #fff; }
body.ght-site .elementor .elementor-element .spt-hdr__intro { color: rgba(255, 255, 255, .72); }
body.ght-site .elementor .elementor-element .spt-hdr__dateline { color: rgba(255, 255, 255, .6); }
body.ght-site .elementor .elementor-element .spt-hdr__badge { background: rgba(255, 255, 255, .06); }
body.ght-site .elementor .elementor-element .spt-hdr__countdown { background: rgba(255, 255, 255, .04); }
body.ght-site .elementor .elementor-element .spt-hdr__countdown-label { color: rgba(255, 255, 255, .72); }
body.ght-site .elementor .elementor-element .spt-hdr__clock--sec .spt-hdr__clock-num { color: var(--ght-gold); }
body.ght-site .elementor .elementor-element :is(.spt-today__heading, .spt-fast__heading, .spt-article__heading, .spt-qibla__heading,
	.spt-monthly__title, .spt-tools__heading, .spt-mosques__heading, .spt-nearby__title, .spt-faq__heading, .spt-app__heading,
	.spt-dir__heading, .spt-faq__verified-label, .spt-today__time) { color: var(--ght-ink); }
body.ght-site .elementor .elementor-element :is(.spt-intro__p, .spt-article__p, .spt-qibla__body, .spt-monthly__table tbody td,
	.spt-nearby__cell, .spt-faq__a, .spt-faq__verified-note, .spt-app__text) { color: var(--ght-ink-2); }
body.ght-site .elementor .elementor-element :is(.spt-monthly__sub, .spt-monthly__note, .spt-nearby__sub, .spt-dir__subtext) { color: var(--ght-mute); }
body.ght-site .elementor .elementor-element :is(.spt-article__link, .spt-qibla__deg, .spt-nearby__link, .spt-fast__card--muted .spt-fast__time) { color: var(--ght-blue-d); }
body.ght-site .elementor .elementor-element .spt-article__quote-cite { color: var(--ght-gold); }
body.ght-site .elementor .elementor-element .spt-today__name { color: var(--ght-ink-2); }
body.ght-site .elementor .elementor-element .spt-today__card { border-color: var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .elementor .elementor-element .spt-today__card.is-next { background: var(--ght-soft); border-color: var(--ght-blue); }
body.ght-site .elementor .elementor-element :is(.spt-today__badge, .spt-tools__btn--primary, .spt-cta__btn--primary) { background: var(--ght-blue); color: #fff; }
body.ght-site .elementor .elementor-element .spt-qibla__box { background: #fff; border-color: var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .elementor .elementor-element .spt-qibla__needle { stroke: var(--ght-blue); }
body.ght-site .elementor .elementor-element .spt-qibla__ring { stroke: var(--ght-line); }
body.ght-site .elementor .elementor-element .spt-monthly__pill--greg { background: var(--ght-ink); color: #fff; }
body.ght-site .elementor .elementor-element .spt-monthly__pill--hijri { background: var(--ght-mist); color: var(--ght-ink-2); }
body.ght-site .elementor .elementor-element .spt-monthly__table thead tr { background: var(--ght-page); }
body.ght-site .elementor .elementor-element .spt-monthly__table thead th { color: var(--ght-mute); }
body.ght-site .elementor .elementor-element .spt-monthly__table tbody tr:nth-child(odd) { background: #fff; }
body.ght-site .elementor .elementor-element .spt-monthly__table tbody tr.is-today { background: var(--ght-soft); }
body.ght-site .elementor .elementor-element .spt-monthly__badge { background: var(--ght-blue); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; }
body.ght-site .elementor .elementor-element :is(.spt-monthly__table-frame, .spt-nearby__table) { border-color: var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .elementor .elementor-element .spt-mosques__name { color: var(--ght-ink); }
body.ght-site .elementor .elementor-element .spt-mosques__pin svg { fill: var(--ght-blue-d); }
body.ght-site .elementor .elementor-element .spt-nearby__row { border-top-color: var(--ght-line); }
body.ght-site .elementor .elementor-element .spt-nearby__head { background: var(--ght-page); color: var(--ght-mute); }
body.ght-site .elementor .elementor-element .spt-nearby__row.is-current { background: var(--ght-soft); }
body.ght-site .elementor .elementor-element .spt-nearby__badge { background: var(--ght-soft); color: var(--ght-blue-d); }
body.ght-site .elementor .elementor-element .spt-cta__text { color: rgba(255, 255, 255, .72); }
body.ght-site .elementor .elementor-element .spt-cta__btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
body.ght-site .elementor .elementor-element .spt-app__btn { background: var(--ght-ink); color: #fff; }
body.ght-site .elementor .elementor-element .spt-dir__item { background: #fff; border-color: var(--ght-line); color: var(--ght-ink); border-radius: var(--ght-r-m); }
body.ght-site .elementor .elementor-element .spt-dir__item:hover { background: var(--ght-mist); border-color: var(--ght-line); color: var(--ght-ink); }
body.ght-site .elementor .elementor-element .spt-dir__dot { background: var(--ght-blue); }
/* the city questions: one card, hairline rows (the widget prints separate boxes) */
body.ght-site .elementor .elementor-element .spt-faq { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); overflow: hidden; background: #fff; }
body.ght-site .elementor .elementor-element .spt-faq__item { margin: 0; border: 0; border-top: 1px solid var(--ght-line); border-radius: 0; background: #fff; box-shadow: none; }
body.ght-site .elementor .elementor-element .spt-faq__item:first-child { border-top: 0; }
body.ght-site .elementor .elementor-element .spt-faq__q-text { color: inherit; font: inherit; }
body.ght-site .elementor .elementor-element .spt-faq__sign { color: var(--ght-ink); font-size: 0; }
body.ght-site :is(.spt-ds-faq-sign, .spt-faq__sign)::before { content: "" !important; }
body.ght-site .elementor .elementor-element .spt-faq__verified { background: var(--ght-ok-soft); border-color: #CBE6D6; }
body.ght-site .elementor .elementor-element .spt-faq__seal-fill { fill: var(--ght-ok); }

/* ── 11. masjid profile ────────────────────────────────────────────────── */
body.ght-site .spt-masjid-jcard { border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); }
body.ght-site .spt-masjid-jcard-name { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ght-ink-2); }
body.ght-site .spt-masjid-jcard-time { font-weight: 700; color: var(--ght-ink); font-variant-numeric: normal; }
body.ght-site .spt-masjid-jumuah { background: #fff; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .spt-masjid-jumuah-icon { background: var(--ght-gold-soft); color: #A86A06; border-radius: var(--ght-r-m); }
body.ght-site .spt-masjid-jumuah-label { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ght-mute); }
body.ght-site .spt-masjid-jumuah-times { font-weight: 700; color: var(--ght-ink); font-variant-numeric: normal; }
body.ght-site .spt-masjid-jumuah-times span + span::before { color: var(--ght-mute); }
body.ght-site .spt-masjid-facilities-list li { background: #fff; border-color: var(--ght-line); font-size: 15px; font-weight: 500; color: var(--ght-ink-2); }
body.ght-site .spt-masjid-facilities-list li::before {
	background: var(--ght-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137CB0' 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;
}
/* "Manage this masjid": the GHH form */
body.ght-site .spt-masjid-contact { background: var(--ght-page); border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .spt-masjid-contact-icon { background: var(--ght-soft); color: var(--ght-blue-d); border-radius: var(--ght-r-m); }
body.ght-site .spt-masjid-form label { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--ght-ink-2) !important; }
body.ght-site .spt-masjid-form :is(input, select, textarea) { min-height: 48px !important; font-size: 16px !important; font-weight: 400 !important; border: 1px solid var(--ght-line) !important; border-radius: var(--ght-r-s) !important; color: var(--ght-ink) !important; }
body.ght-site .spt-masjid-form :is(input, select, textarea):focus { border-color: var(--ght-blue) !important; box-shadow: none !important; }
body.ght-site .spt-masjid-form :is(input, textarea)::placeholder { color: var(--ght-mute) !important; }
body.ght-site .spt-masjid-form .spt-masjid-submit,
body.ght-site .spt-masjid-form button.spt-masjid-submit { height: 48px !important; padding: 0 28px !important; background: var(--ght-blue) !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; }
body.ght-site .spt-masjid-form .spt-masjid-submit:hover { background: var(--ght-blue-d) !important; }
/* masjid cards (city pages, directory, "other masjids nearby") */
body.ght-site .spt-masjid-card { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); }
body.ght-site .spt-masjid-card:hover { background: var(--ght-mist); border-color: var(--ght-line); box-shadow: none; transform: none; }
body.ght-site .spt-masjid-card-body h3 { font-size: 17px; font-weight: 700; color: var(--ght-ink); }
body.ght-site .spt-masjid-card-area { font-size: 14px; color: var(--ght-mute); }
body.ght-site .spt-masjid-card-jamaah { background: var(--ght-soft); color: var(--ght-blue-d); font-size: 13px; font-weight: 600; font-variant-numeric: normal; }
/* the masjid directory link card (hub, country pages) */
body.ght-site .spt-masjid-promo-card { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: none; }
body.ght-site .spt-masjid-promo-card:hover { background: var(--ght-mist); border-color: var(--ght-line); box-shadow: none; }
body.ght-site .spt-masjid-promo-icon { background: var(--ght-soft); color: var(--ght-blue-d) !important; }
body.ght-site .spt-masjid-promo-text strong { font-size: 17px; font-weight: 700; color: var(--ght-ink) !important; }
body.ght-site .spt-masjid-promo-arrow { color: var(--ght-blue-d) !important; }

/* ── 12. settings drawers (hub + city): the GHH side panel ─────────────── */
body.ght-site :is(.sptg-overlay, .spt-hdr__drawer-overlay) { background: rgba(6, 20, 30, .45); }
body.ght-site :is(.sptg-drawer, .spt-hdr__drawer-panel) { width: 420px; max-width: 100vw; box-shadow: var(--ght-float); }
body.ght-site :is(.sptg-drawer__head, .spt-hdr__drawer-head) { border-bottom-color: var(--ght-line); padding: 20px 24px; }
body.ght-site :is(.sptg .sptg-drawer__title, .spt-hdr__drawer-head h2) { font-family: var(--ght-ui) !important; font-size: 20px; font-weight: 700; color: var(--ght-ink); }
body.ght-site :is(.sptg .sptg-close--x, .spt-hdr .spt-hdr__drawer-x) {
	width: 40px;
	height: 40px;
	background: #fff !important;
	border: 1px solid var(--ght-line) !important;
	border-radius: 50%;
	color: var(--ght-ink) !important;
	font-size: 22px;
}
body.ght-site :is(.sptg .sptg-close--x, .spt-hdr .spt-hdr__drawer-x):hover { background: var(--ght-mist) !important; }
body.ght-site :is(.sptg-drawer__body, .spt-hdr__drawer-body) { padding: 24px; }
body.ght-site :is(.sptg-drawer__label, .spt-hdr__drawer-heading) { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ght-ink-2); }
body.ght-site :is(.sptg .sptg-method, .sptg .sptg-madhab, .spt-hdr .spt-hdr__method, .spt-hdr .spt-hdr__madhab) {
	background: #fff !important;
	border: 1px solid var(--ght-line) !important;
	border-radius: var(--ght-r-m);
}
body.ght-site :is(.sptg .sptg-method, .sptg .sptg-madhab, .spt-hdr .spt-hdr__method, .spt-hdr .spt-hdr__madhab):hover { background: var(--ght-page) !important; }
body.ght-site :is(.sptg .sptg-method.is-selected, .sptg .sptg-madhab.is-selected, .spt-hdr .spt-hdr__method.is-active, .spt-hdr .spt-hdr__madhab.is-active) {
	background: var(--ght-soft) !important;
	border-color: var(--ght-blue) !important;
	box-shadow: inset 0 0 0 .5px var(--ght-blue) !important;
}
/* long method names wrap inside their row (a site button rule keeps button text on one line) */
body.ght-site :is(.sptg .sptg-method, .sptg .sptg-madhab, .spt-hdr .spt-hdr__method, .spt-hdr .spt-hdr__madhab) { white-space: normal !important; min-width: 0; }
body.ght-site :is(.sptg-method > span:last-child, .spt-hdr .spt-hdr__method-txt) { flex: 1 1 auto; min-width: 0; }
body.ght-site :is(.sptg-method .dot, .spt-hdr__method-dot) { border: 1.5px solid var(--ght-line); }
body.ght-site :is(.sptg-method.is-selected .dot, .spt-hdr__method.is-active .spt-hdr__method-dot) { border-color: var(--ght-blue); background: var(--ght-blue); box-shadow: inset 0 0 0 3px #fff; }
body.ght-site :is(.sptg-method__name, .sptg-madhab .nm, .spt-hdr__method-name, .spt-hdr__madhab-name) { font-size: 15px; font-weight: 600; color: var(--ght-ink); }
body.ght-site :is(.sptg-madhab.is-selected .nm, .spt-hdr__madhab.is-active .spt-hdr__madhab-name) { color: var(--ght-blue-d); }
body.ght-site :is(.sptg-method__desc, .sptg-madhab__desc, .spt-hdr__method-desc, .spt-hdr__madhab-desc) { font-size: 13px; color: var(--ght-mute); }
body.ght-site :is(.sptg-drawer__note, .spt-hdr__drawer-note) { background: var(--ght-mist); border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); font-size: 14px; color: var(--ght-ink-2); }
body.ght-site :is(.sptg .sptg-apply, .spt-hdr .spt-hdr__drawer-apply) {
	height: 52px;
	padding: 0 24px !important;
	background: var(--ght-blue) !important;
	border-radius: 999px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
body.ght-site :is(.sptg .sptg-apply, .spt-hdr .spt-hdr__drawer-apply):hover { background: var(--ght-blue-d) !important; }
@media (max-width: 600px) {
	body.ght-site :is(.sptg-drawer, .spt-hdr__drawer-panel) { width: 100vw; }
}

/* ── 13. search results (hub autocomplete, city place search): a floating card ── */
body.ght-site :is(.sptg-ac, .spt-hdr__search-results) { border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); box-shadow: var(--ght-float); padding: 8px; }
body.ght-site :is(.sptg .sptg-ac__item, .spt-hdr .spt-hdr__result) { border-radius: var(--ght-r-m) !important; color: var(--ght-ink) !important; }
body.ght-site :is(.sptg .sptg-ac__item:hover, .spt-hdr .spt-hdr__result:hover, .spt-hdr .spt-hdr__result.is-active) { background: var(--ght-mist) !important; }
body.ght-site :is(.sptg-ac__pin, .spt-hdr__result-pin) { background: var(--ght-soft) !important; color: var(--ght-blue-d) !important; border-radius: var(--ght-r-s) !important; }
body.ght-site :is(.spt-hdr__result:hover .spt-hdr__result-pin, .spt-hdr__result.is-active .spt-hdr__result-pin) { background: var(--ght-blue) !important; color: #fff !important; }
body.ght-site :is(.sptg-ac__label, .spt-hdr__result-name) { font-size: 15px; font-weight: 600; color: var(--ght-ink); }
body.ght-site :is(.sptg-ac__empty, .spt-hdr__result-empty, .spt-hdr__result-sub) { color: var(--ght-mute); }

/* ght-auth */
/* GHH — donor sign-in card (GHT_Auth) and its pop-up.
 *
 * The Shopify-style card built for DÉCAAR, in the GHH look: logo, one step at a
 * time, floating labels, 5px buttons in the GHH blue, Schibsted Grotesk.
 * Self-contained (it also appears on the checkout page, outside the toolkit's
 * widgets); every control rule is written `.ght-auth <el>.class` so theme
 * button/input resets never win. */

.ght-auth, .ght-auth-modal { --ga-ink: #0B2638; --ga-blue: #1B9DD9; --ga-blue-d: #137CB0; --ga-mute: #5B7182; --ga-line: #D3DDE3; --ga-mist: #EEF4F7; --ga-err: #b3261e; --ga-ok: #1d6b3a; --ga-r: 5px; --ga-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; }
.ght-auth, .ght-auth *, .ght-auth *::before, .ght-auth *::after { box-sizing: border-box; }
/* a site-wide rule capitalises button words ("Forgot Password?"): sentence case here */
.ght-auth button, .ght-auth a, .ght-auth label { text-transform: none; }
.ght-auth { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 38px 36px 30px; border-radius: 14px; background: #fff; color: var(--ga-ink); font: 400 16px/1.5 var(--ga-font); -webkit-font-smoothing: antialiased; text-align: left; }
.ght-auth--page { box-shadow: 0 30px 60px -40px rgba(11, 38, 56, .4), 0 0 0 1px var(--ga-line); }
.ght-auth .ght-auth__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }

.ght-auth .ght-auth__view[hidden] { display: none; }
.ght-auth .ght-auth__view { animation: ght-auth-in .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes ght-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ght-auth .ght-auth__h { margin: 0 0 6px; padding: 0; font: 800 28px/1.15 var(--ga-font); letter-spacing: -.025em; color: var(--ga-ink); text-transform: none; }
.ght-auth .ght-auth__h:focus { outline: none; }
.ght-auth .ght-auth__sub, .ght-auth .ght-auth__who { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ga-mute); overflow-wrap: anywhere; }
.ght-auth .ght-auth__sub strong, .ght-auth .ght-auth__who span { color: var(--ga-ink); font-weight: 600; }
.ght-auth .ght-auth__form { display: grid; gap: 12px; margin: 0; }

/* fields with floating labels */
.ght-auth .ght-auth__f { position: relative; margin: 0; }
.ght-auth .ght-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ght-auth input.ght-auth__in { display: block; width: 100%; height: 52px; margin: 0; padding: 15px 13px; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 400 16px/1.3 var(--ga-font); box-shadow: none; outline: none; transition: padding .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.ght-auth input.ght-auth__in::placeholder { color: #7d8a93; opacity: 1; }
.ght-auth input.ght-auth__in:not(:placeholder-shown) { padding: 23px 13px 7px; }
.ght-auth input.ght-auth__in:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); }
.ght-auth input.ght-auth__in[aria-invalid="true"] { border-color: var(--ga-err); box-shadow: 0 0 0 1px var(--ga-err); }
.ght-auth .ght-auth__f > label { position: absolute; top: 7px; left: 14px; right: 44px; margin: 0; overflow: hidden; font: 400 12px/1.3 var(--ga-font); color: var(--ga-mute); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.ght-auth .ght-auth__f:has(input:not(:placeholder-shown)) > label { opacity: 1; transform: none; }
.ght-auth .ght-auth__f--pass input.ght-auth__in { padding-right: 50px; }
.ght-auth button.ght-auth__eye { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-mute); box-shadow: none; cursor: pointer; }
.ght-auth button.ght-auth__eye:hover, .ght-auth button.ght-auth__eye:focus { background: var(--ga-mist); color: var(--ga-ink); border: 0; }
.ght-auth button.ght-auth__eye[aria-pressed="true"] { color: var(--ga-ink); }
.ght-auth svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* buttons */
.ght-auth button.ght-auth__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; min-height: 52px; margin: 4px 0 0; padding: 0 20px; border: 1px solid var(--ga-blue); border-radius: var(--ga-r); background: var(--ga-blue); color: #fff; font: 700 16px/1 var(--ga-font); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; cursor: pointer; white-space: normal; transition: background-color .2s, border-color .2s, color .2s; }
.ght-auth button.ght-auth__btn:hover, .ght-auth button.ght-auth__btn:focus { border-color: var(--ga-blue-d); background: var(--ga-blue-d); color: #fff; }
.ght-auth button.ght-auth__btn:focus-visible, .ght-auth button.ght-auth__link:focus-visible, .ght-auth button.ght-auth__eye:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; }
.ght-auth button.ght-auth__btn--line { border-color: var(--ga-line); background: #fff; color: var(--ga-ink); font-weight: 600; }
.ght-auth button.ght-auth__btn--line:hover, .ght-auth button.ght-auth__btn--line:focus { border-color: var(--ga-ink); background: #fff; color: var(--ga-ink); }
.ght-auth button.ght-auth__btn[disabled], .ght-auth button.ght-auth__btn.is-busy { opacity: .7; cursor: default; }
.ght-auth .ght-auth__spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ght-auth-spin .7s linear infinite; }
.ght-auth .is-busy .ght-auth__spin { display: inline-block; }
@keyframes ght-auth-spin { to { transform: rotate(360deg); } }

.ght-auth button.ght-auth__link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ga-ink); font-family: var(--ga-font); font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; box-shadow: none; cursor: pointer; }
.ght-auth button.ght-auth__link:hover, .ght-auth button.ght-auth__link:focus { border: 0; background: none; color: var(--ga-blue-d); text-decoration-thickness: 2px; }
.ght-auth button.ght-auth__link[disabled] { color: var(--ga-mute); text-decoration: none; cursor: default; }
.ght-auth .ght-auth__alt { margin: 18px 0 0; font-size: 14.5px; color: var(--ga-mute); text-align: center; }
.ght-auth .ght-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.ght-auth .ght-auth__check { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 400; color: var(--ga-ink); cursor: pointer; }
.ght-auth .ght-auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ga-ink); }
.ght-auth .ght-auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 13px; color: var(--ga-mute); }
.ght-auth .ght-auth__or::before, .ght-auth .ght-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ga-line); }
.ght-auth .ght-auth__small { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ga-mute); }
.ght-auth .ght-auth__small a { color: var(--ga-ink); }
.ght-auth .ght-auth__err { margin: 0; padding: 10px 12px; border-radius: var(--ga-r); background: #fbeceb; color: var(--ga-err); font-size: 14px; line-height: 1.45; }
.ght-auth .ght-auth__err[hidden] { display: none; }
.ght-auth .ght-auth__ok { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--ga-r); background: var(--ga-mist); color: var(--ga-ok); font-size: 14.5px; line-height: 1.5; }
.ght-auth .ght-auth__ok[hidden] { display: none; }
/* staging only (email is blocked there): the two-step code shown in the pop-up */
.ght-auth .ght-auth__stg { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed #C9C9C9; border-radius: var(--ga-r); font-size: 14px; line-height: 1.5; color: var(--ga-ink); }
.ght-auth .ght-auth__stg strong { font-size: 17px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.ght-auth .ght-auth__stg[hidden] { display: none; }
.ght-auth [data-ght-auth-form="twostep"] .ght-auth__check { margin-top: 2px; }
.ght-auth .ght-auth__ghost { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ght-auth .ght-auth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* password strength */
.ght-auth .ght-auth__meter { display: grid; gap: 6px; margin-top: -4px; font-size: 13px; color: var(--ga-mute); }
.ght-auth .ght-auth__bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ga-mist); }
.ght-auth .ght-auth__bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--ga-err); transition: width .25s, background-color .25s; }
.ght-auth .ght-auth__meter[data-level="1"] i { width: 25%; }
.ght-auth .ght-auth__meter[data-level="2"] i { width: 55%; background: #b7791f; }
.ght-auth .ght-auth__meter[data-level="3"] i { width: 80%; background: var(--ga-blue); }
.ght-auth .ght-auth__meter[data-level="4"] i { width: 100%; background: var(--ga-ok); }

/* 6-digit code */
.ght-auth .ght-auth__code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ght-auth input.ght-auth__digit { width: 100%; height: 56px; margin: 0; padding: 0; border: 1px solid var(--ga-line); border-radius: var(--ga-r); background: #fff; color: var(--ga-ink); font: 700 22px/1 var(--ga-font); text-align: center; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; }
.ght-auth input.ght-auth__digit:focus { border-color: var(--ga-ink); box-shadow: 0 0 0 1px var(--ga-ink); }
.ght-auth .ght-auth__code[aria-invalid="true"] input.ght-auth__digit { border-color: var(--ga-err); }

/* done */
.ght-auth .ght-auth__view--done { padding: 12px 0 6px; text-align: center; }
.ght-auth .ght-auth__tick { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--ga-mist); color: var(--ga-ok); }
.ght-auth .ght-auth__tick svg { width: 26px; height: 26px; stroke-width: 2; }

/* the account page when signed out: the card centred on the mist ground */
.ght-auth-page { display: flex; justify-content: center; padding: clamp(32px, 6vw, 72px) 16px; background: var(--ga-mist, #EEF4F7); }
.woocommerce:has(> .ght-auth-page) { max-width: none; }

/* ---------------------------------------------------------------- pop-up */
.ght-auth-modal { position: fixed; inset: 0; z-index: 1000002; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ght-auth-modal[hidden] { display: none; }
.ght-auth-modal__scrim { position: absolute; inset: 0; background: rgba(6, 20, 30, .55); animation: ght-auth-fade .2s ease; }
.ght-auth-modal__card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: #fff; box-shadow: 0 40px 80px -30px rgba(6, 20, 30, .6); animation: ght-auth-pop .28s cubic-bezier(.16, 1, .3, 1); }
.ght-auth-modal .ght-auth { box-shadow: none; }
.ght-auth-modal button.ght-auth-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-ink); box-shadow: none; cursor: pointer; }
.ght-auth-modal button.ght-auth-modal__x:hover, .ght-auth-modal button.ght-auth-modal__x:focus { border: 0; background: var(--ga-mist); color: var(--ga-ink); }
.ght-auth-modal button.ght-auth-modal__x:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 2px; }
.ght-auth-modal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@keyframes ght-auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ght-auth-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ght-auth-up { from { transform: translateY(100%); } to { transform: none; } }
html.ght-auth-lock, html.ght-auth-lock body { overflow: hidden; }
html.ght-auth-lock .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* phones: a bottom sheet that can grow to full height */
@media (max-width: 600px) {
	.ght-auth { padding: 32px 22px 24px; }
	.ght-auth .ght-auth__h { font-size: 25px; }
	.ght-auth .ght-auth__code { gap: 6px; }
	.ght-auth input.ght-auth__digit { height: 52px; font-size: 20px; }
	.ght-auth-modal { align-items: flex-end; padding: 0; }
	.ght-auth-modal__card { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); animation: ght-auth-up .32s cubic-bezier(.16, 1, .3, 1); }
	.ght-auth-modal__card::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--ga-line); }
}
@media (max-width: 360px) {
	.ght-auth .ght-auth__two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ght-auth .ght-auth__view, .ght-auth-modal__scrim, .ght-auth-modal__card { animation: none; }
}