/* ==========================================================================
 * 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-btn) !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-btn) !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-btn); 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-btn);
	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-btn) !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-btn) !important; border-color: var(--ght-btn) !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-btn); 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-btn) !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-btn) !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); }