/*
 * RAF Prayer Timings — "Brand Soft Grid" (reference implementation).
 *
 * Light warm ivory widget, white prayer cards, a dark-filled current card, and
 * RAF brown accents. Everything keys off two variables set inline on the root
 * by PHP: --rpt-primary (the admin Primary Color) and --rpt-fill (a dark shade
 * of it for filled surfaces). Static fallbacks are baked into each var() call,
 * so the widget still renders if the inline variables are missing.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap');

.rpt-widget {
	/* Brand (primary + derived fill come from inline style; fallbacks here) */
	--p: var(--rpt-primary, #7A6653);
	--fill: var(--rpt-fill, #4a3c2f);
	--on-fill: #F5EEE2;
	/* Fixed warm light neutrals */
	--bg: #F4F0E7;
	--card: #FCFAF3;
	--surface-2: #ECE6D8;
	--line: #E7E0D0;
	--ink: #3A3226;
	--body: #5D5347;
	--muted: #8C8072;
	--field: #FBF8F1;
	/* Shape */
	--r-lg: 28px; --r-card: 18px; --r-now: 20px; --r-ctrl: 12px; --r-seg: 14px;
	/* Type */
	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--arabic: 'Amiri', 'Scheherazade New', serif;

	container-type: inline-size;
	box-sizing: border-box;
	/* Full width — fill the container/column edge to edge (no max-width cap). */
	width: 100%;
	margin: 1.75rem 0;
	padding: clamp(22px, 3vw, 36px);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: 0 4px 14px rgba(74, 58, 42, .05), 0 26px 60px -22px rgba(74, 58, 42, .24);
	color: var(--body);
	font-family: var(--sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.rpt-widget *, .rpt-widget *::before, .rpt-widget *::after { box-sizing: border-box; }
.rpt-widget a { text-decoration: none; }
.rpt-widget :focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: 8px; }

/* ---------------- Header ---------------- */
.rpt-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 26px; }
.rpt-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rpt-mark { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--p); }
.rpt-mark svg { width: 28px; height: 28px; }
.rpt-brand__text { min-width: 0; }
.rpt-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 5cqw, 46px); line-height: 1.0; letter-spacing: -.012em; color: var(--ink); }
.rpt-meta { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 20px; font-size: 14.5px; color: var(--body); }
.rpt-meta__item, .rpt-meta__loc { display: inline-flex; align-items: center; gap: 7px; }
.rpt-meta svg { width: 15px; height: 15px; color: var(--p); flex: 0 0 auto; }
.rpt-meta__loc { display: none; }
.rpt-widget[data-mode="zip"] .rpt-meta__loc { display: inline-flex; }
.rpt-widget[data-mode="zip"] .rpt-meta__hijri { display: none; }

.rpt-aside { align-self: center; }
.rpt-search { display: flex; gap: 10px; align-items: stretch; }
.rpt-search__field { display: flex; align-items: center; gap: 9px; padding: 0 14px; min-width: 262px; height: 47px; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.rpt-search__field svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.rpt-search__field:focus-within { border-color: var(--p); }
.rpt-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; color: var(--ink); font-family: var(--sans); font-size: 14.5px; }
.rpt-search input:focus, .rpt-search input:focus-visible { outline: none; box-shadow: none; }
.rpt-search input::placeholder { color: var(--muted); }
.rpt-search button { display: inline-flex; align-items: center; gap: 7px; height: 47px; padding: 0 24px; background: var(--fill); color: var(--on-fill); font-family: var(--sans); font-weight: 600; font-size: 14px; border: 0; border-radius: var(--r-ctrl); cursor: pointer; box-shadow: 0 2px 6px rgba(40, 30, 20, .18), 0 12px 22px -10px rgba(40, 30, 20, .3); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.rpt-search button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(40, 30, 20, .2), 0 16px 26px -10px rgba(40, 30, 20, .34); }
/* Defensive resets so a host theme's input/button styles can't add borders */
.rpt-search input[type="text"] { border: 0 !important; box-shadow: none !important; background-color: transparent !important; }
.rpt-search button[type="submit"] { border: 0 !important; outline: 0; }
.rpt-spin { width: 14px; height: 14px; display: none; border: 2px solid rgba(245, 238, 226, .4); border-top-color: var(--on-fill); border-radius: 50%; animation: rpt-spin .7s linear infinite; }
.rpt-widget[data-busy="1"] .rpt-spin { display: inline-block; }
.rpt-widget[data-busy="1"] .rpt-search button { opacity: .8; pointer-events: none; }
@keyframes rpt-spin { to { transform: rotate(360deg); } }

/* ---------------- Controls (toggle + back) ---------------- */
.rpt-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 28px); }
.rpt-seg { display: inline-flex; padding: 5px; gap: 4px; background: var(--surface-2); border-radius: var(--r-seg); }
.rpt-seg button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; background: transparent; color: var(--body); font-family: var(--sans); font-weight: 600; font-size: 14.5px; border-radius: 10px; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.rpt-seg__ico { display: inline-grid; place-items: center; }
.rpt-seg__ico svg { width: 17px; height: 17px; }
.rpt-seg button:hover { color: var(--ink); }
.rpt-seg button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); box-shadow: 0 2px 6px rgba(40, 30, 20, .16), 0 10px 20px -8px rgba(40, 30, 20, .28); }
.rpt-backbtn { display: none; align-items: center; gap: 6px; padding: 10px 18px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-seg); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.rpt-backbtn svg { width: 16px; height: 16px; }
.rpt-backbtn:hover { background: var(--card); border-color: var(--p); }
.rpt-widget[data-mode="zip"] .rpt-seg { display: none; }
.rpt-widget[data-mode="zip"] .rpt-backbtn { display: inline-flex; }
.rpt-widget[data-zip-only="1"] .rpt-backbtn { display: none; }

/* ---------------- Status ---------------- */
.rpt-status { margin-top: 12px; }
.rpt-status__inner:empty { display: none; }
.rpt-status__inner { padding: 11px 15px; font-size: 13.5px; color: var(--ink); background: var(--surface-2); border-radius: var(--r-ctrl); }
.rpt-status__inner.is-error { color: #7A3B2A; background: #F3E3DA; }
.rpt-status__inner a { color: var(--ink); text-decoration: underline; cursor: pointer; }

/* ---------------- Prayer grid ---------------- */
.rpt-snap__head { display: none; }
.rpt-grid { margin-top: clamp(18px, 2.2vw, 24px); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.rpt-card { display: flex; flex-direction: column; padding: clamp(15px, 1.6vw, 18px) clamp(18px, 1.9vw, 22px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 2px 4px rgba(74, 58, 42, .05), 0 12px 26px -10px rgba(74, 58, 42, .16); transition: transform .18s ease, box-shadow .18s ease; }
.rpt-card:not(.rpt-card--now):hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(74, 58, 42, .06), 0 18px 34px -12px rgba(74, 58, 42, .22); }
.rpt-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.rpt-card__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--p); }
.rpt-card__ico svg { width: 24px; height: 24px; }
.rpt-card__now { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--on-fill); color: var(--fill); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.rpt-card__now .rpt-card__dot, .rpt-jummah__now .rpt-card__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rpt-pulse 1.6s ease-in-out infinite; }
@keyframes rpt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.55); } }
.rpt-card__name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 16px; }
.rpt-card__en { font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.rpt-card__ar { font-family: var(--arabic); font-size: 16px; color: var(--muted); }
.rpt-card__rule { height: 1px; background: var(--line); margin: 14px 0 13px; }
.rpt-card__rows { display: grid; gap: 11px; }
.rpt-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rpt-card__lab { font-size: 13px; color: var(--muted); }
.rpt-card__val { font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rpt-card__val small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* current prayer — dark filled card, light text, cream NOW pill */
.rpt-card--now {
	background: var(--fill);
	border-color: transparent;
	border-radius: var(--r-now);
	color: var(--on-fill);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(40, 30, 20, .14), 0 22px 46px -14px rgba(40, 30, 20, .36);
}
.rpt-card--now .rpt-card__ico { background: rgba(245, 238, 226, .14); color: var(--on-fill); }
.rpt-card--now .rpt-card__en { color: var(--on-fill); }
.rpt-card--now .rpt-card__ar { color: rgba(245, 238, 226, .70); }
.rpt-card--now .rpt-card__rule { background: rgba(245, 238, 226, .18); }
.rpt-card--now .rpt-card__lab { color: rgba(245, 238, 226, .72); }
.rpt-card--now .rpt-card__val { color: var(--on-fill); }
.rpt-card--now .rpt-card__val small { color: rgba(245, 238, 226, .66); }

/* ---------------- Band: Jummah (wide) + Sunrise ---------------- */
.rpt-band { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 16px; }
.rpt-jummah { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 1.9vw, 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 2px 4px rgba(74, 58, 42, .05), 0 14px 30px -12px rgba(74, 58, 42, .15); }
.rpt-jummah__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--fill); color: var(--on-fill); }
.rpt-jummah__ico svg { width: 26px; height: 26px; }
.rpt-jummah__id { flex: 1; min-width: 0; }
.rpt-jummah__kicker { margin: 0 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rpt-jummah__title { margin: 0; font-family: var(--sans); font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rpt-jummah__ar { font-family: var(--arabic); font-size: 16px; color: var(--muted); font-weight: 400; }
.rpt-jummah__times { display: flex; gap: 40px; flex: 0 0 auto; flex-wrap: wrap; }
.rpt-jummah__stat { text-align: center; }
.rpt-jummah__lab { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.rpt-jummah__val { font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rpt-jummah__val small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Jummah active on Friday — same NOW treatment already used by the current prayer card */
.rpt-jummah__now { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 11px; border-radius: 999px; background: var(--on-fill); color: var(--fill); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.rpt-jummah--now { background: var(--fill); border-color: transparent; color: var(--on-fill); box-shadow: 0 4px 12px rgba(40, 30, 20, .14), 0 22px 46px -14px rgba(40, 30, 20, .36); }
.rpt-jummah--now .rpt-jummah__ico { background: rgba(245, 238, 226, .14); color: var(--on-fill); }
.rpt-jummah--now .rpt-jummah__kicker { color: rgba(245, 238, 226, .72); }
.rpt-jummah--now .rpt-jummah__title { color: var(--on-fill); }
.rpt-jummah--now .rpt-jummah__ar { color: rgba(245, 238, 226, .70); }
.rpt-jummah--now .rpt-jummah__lab { color: rgba(245, 238, 226, .72); }
.rpt-jummah--now .rpt-jummah__val { color: var(--on-fill); }
.rpt-jummah--now .rpt-jummah__val small { color: rgba(245, 238, 226, .66); }

.rpt-sunrise { display: flex; align-items: center; gap: 15px; padding: clamp(18px, 1.9vw, 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 2px 4px rgba(74, 58, 42, .045), 0 12px 26px -12px rgba(74, 58, 42, .14); }
.rpt-sunrise__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--p); }
.rpt-sunrise__ico svg { width: 24px; height: 24px; }
.rpt-sunrise__body { min-width: 0; }
.rpt-sunrise__kicker { margin: 0; font-size: 13.5px; color: var(--body); display: flex; align-items: baseline; gap: 7px; }
.rpt-sunrise__ar { font-family: var(--arabic); font-size: 14.5px; color: var(--muted); }
.rpt-sunrise__val { margin: 3px 0 0; font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rpt-sunrise__val small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* ---------------- Monthly CTA (centered, light, bordered) ---------------- */
.rpt-foot { margin-top: 18px; display: flex; justify-content: center; }
.rpt-cta { display: inline-flex; align-items: center; gap: 10px; min-width: 320px; padding: 14px 22px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctrl); font-family: var(--sans); font-weight: 600; font-size: 14.5px; cursor: pointer; box-shadow: 0 1px 3px rgba(74, 58, 42, .05), 0 8px 20px -10px rgba(74, 58, 42, .14); transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.rpt-cta:hover { background: var(--bg); border-color: var(--p); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(74, 58, 42, .07), 0 14px 28px -12px rgba(74, 58, 42, .2); }
.rpt-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.rpt-cta svg:first-child { color: var(--p); }
.rpt-cta svg:last-child { color: var(--muted); margin-left: auto; }

/* ---------------- ZIP note + notice ---------------- */
.rpt-zipnote { margin: 12px 4px 0; font-size: 13px; color: var(--muted); display: none; }
/* ZIP results: the five prayer cards + the ZIP note; Jummah and Monthly CTA hidden. */
.rpt-widget[data-mode="zip"] .rpt-band,
.rpt-widget[data-mode="zip"] .rpt-foot { display: none; }
.rpt-widget[data-mode="zip"] .rpt-zipnote { display: block; }
.rpt-notice { grid-column: 1 / -1; margin: 0; padding: 30px 18px; text-align: center; color: var(--muted); font-size: 14.5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }

/* ---------------- a11y ---------------- */
.rpt-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* =========================================================================
   Interactive-state color lock (theme-proofing).
   Keeps hover / focus / active in the RAF primary system so a host theme's
   global button, link, or focus styles (e.g. a blue accent) can never bleed
   in. Colors and outlines only — layout, shadows, and design are unchanged.
   ========================================================================= */

/* Search button — always the dark fill with light text, in every state */
.rpt-widget .rpt-search button,
.rpt-widget .rpt-search button:hover,
.rpt-widget .rpt-search button:focus,
.rpt-widget .rpt-search button:focus-visible,
.rpt-widget .rpt-search button:active {
	background-color: var(--fill) !important;
	background-image: none !important;
	color: var(--on-fill) !important;
	border-color: transparent !important;
}
.rpt-widget .rpt-search button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rpt-widget .rpt-search button:active { filter: brightness(0.95); transform: translateY(0); }
.rpt-widget .rpt-search button:focus { outline: none !important; box-shadow: 0 2px 6px rgba(40, 30, 20, .18), 0 12px 22px -10px rgba(40, 30, 20, .3) !important; }
.rpt-widget .rpt-search button:focus-visible { outline: 2px solid var(--p) !important; outline-offset: 3px; }

/* ZIP input — brown focus on the field container, never a ring on the input */
.rpt-widget .rpt-search__field:focus-within { border-color: var(--p) !important; }
.rpt-widget .rpt-search input:focus,
.rpt-widget .rpt-search input:focus-visible { outline: none !important; box-shadow: none !important; }

/* Building tabs — active = dark fill, inactive = transparent (no blue on hover) */
.rpt-widget .rpt-seg button[aria-pressed="true"],
.rpt-widget .rpt-seg button[aria-pressed="true"]:hover,
.rpt-widget .rpt-seg button[aria-pressed="true"]:focus,
.rpt-widget .rpt-seg button[aria-pressed="true"]:active {
	background-color: var(--fill) !important;
	background-image: none !important;
	color: var(--on-fill) !important;
	border-color: transparent !important;
}
.rpt-widget .rpt-seg button:not([aria-pressed="true"]),
.rpt-widget .rpt-seg button:not([aria-pressed="true"]):hover,
.rpt-widget .rpt-seg button:not([aria-pressed="true"]):focus,
.rpt-widget .rpt-seg button:not([aria-pressed="true"]):active {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--body) !important;
	border-color: transparent !important;
}
.rpt-widget .rpt-seg button:focus { outline: none !important; }
.rpt-widget .rpt-seg button:focus-visible { outline: 2px solid var(--p) !important; outline-offset: 2px; }

/* Back to buildings — transparent with brown border/text */
.rpt-widget .rpt-backbtn,
.rpt-widget .rpt-backbtn:focus,
.rpt-widget .rpt-backbtn:focus-visible,
.rpt-widget .rpt-backbtn:active {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--ink) !important;
}
.rpt-widget .rpt-backbtn:hover { background-color: var(--card) !important; color: var(--ink) !important; border-color: var(--p) !important; }
.rpt-widget .rpt-backbtn:focus { outline: none !important; }
.rpt-widget .rpt-backbtn:focus-visible { outline: 2px solid var(--p) !important; outline-offset: 3px; }

/* Monthly CTA — light card with ink text; hover stays neutral/brown */
.rpt-widget .rpt-cta,
.rpt-widget .rpt-cta:focus,
.rpt-widget .rpt-cta:focus-visible,
.rpt-widget .rpt-cta:active {
	background-color: var(--card) !important;
	background-image: none !important;
	color: var(--ink) !important;
}
.rpt-widget .rpt-cta:hover { background-color: var(--bg) !important; border-color: var(--p) !important; color: var(--ink) !important; }
.rpt-widget .rpt-cta:focus { outline: none !important; }
.rpt-widget .rpt-cta:focus-visible { outline: 2px solid var(--p) !important; outline-offset: 3px; }
.rpt-widget .rpt-cta svg:first-child { color: var(--p) !important; }
.rpt-widget .rpt-cta svg:last-child { color: var(--muted) !important; }

/* ---------------- Responsive ---------------- */
@container (max-width: 900px) {
	.rpt-band { grid-template-columns: 1fr; }
}
@container (max-width: 680px) {
	.rpt-hero { flex-direction: column; align-items: stretch; }
	.rpt-aside { align-self: stretch; }
	.rpt-search { width: 100%; }
	.rpt-search__field { flex: 1; min-width: 0; }
	.rpt-seg { display: flex; }
	.rpt-seg button { flex: 1; justify-content: center; }
	.rpt-jummah { flex-wrap: wrap; }
	.rpt-jummah__times { width: 100%; justify-content: flex-start; gap: 34px; margin-top: 4px; }
	.rpt-jummah__stat { text-align: left; }
	.rpt-cta { min-width: 0; width: 100%; }
}
@container (max-width: 540px) {
	/* --- Tighter mobile header --- */
	.rpt-hero { gap: 14px 20px; }
	.rpt-mark { width: 44px; height: 44px; border-radius: 12px; }
	.rpt-mark svg { width: 22px; height: 22px; }
	.rpt-title { font-size: 26px; }
	.rpt-meta { margin-top: 7px; gap: 6px 14px; font-size: 13px; }
	.rpt-controls { margin-top: 16px; }

	/* --- Compact search (field stacked over button) --- */
	.rpt-search { flex-direction: column; gap: 8px; }
	.rpt-search__field { width: 100%; height: 44px; }
	.rpt-search button { width: 100%; justify-content: center; height: 44px; }

	/* --- Full-width building toggle --- */
	.rpt-seg { display: flex; width: 100%; align-items: stretch; }
	.rpt-seg button { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 10px 7px; gap: 5px; font-size: 12px; line-height: 1.25; }
	.rpt-seg__ico { flex: 0 0 auto; }
	.rpt-seg__ico svg { width: 14px; height: 14px; }

	/* ================= Mobile Prayer Snapshot =================
	   The five prayer cards become one compact panel of rows: a single premium
	   schedule card with a Prayer / Starts / Iqamah header, soft-divided rows,
	   and no repeated per-row labels (kept for screen readers). Same ivory/white
	   surface, shadow, and rounded corners. Shadow lives on the panel. */
	.rpt-snap {
		margin-top: 16px;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: var(--r-card);
		box-shadow: 0 2px 4px rgba(74, 58, 42, .05), 0 12px 26px -10px rgba(74, 58, 42, .16);
		overflow: hidden;
	}
	.rpt-snap__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 9px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
	.rpt-snap__h-name { flex: 1; min-width: 0; }
	.rpt-snap__h-col { width: 66px; text-align: right; flex: 0 0 auto; }

	.rpt-grid { display: block; margin-top: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
	.rpt-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none !important;
		transform: none !important;
	}
	.rpt-card + .rpt-card { border-top: 1px solid var(--line); }
	.rpt-card__top { display: flex; align-items: center; min-height: 0; flex: 0 0 auto; }
	.rpt-card__ico { width: 32px; height: 32px; border-radius: 50%; }
	.rpt-card__ico svg { width: 16px; height: 16px; }
	.rpt-card__name { flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; margin: 0; min-width: 0; }
	.rpt-card__en { font-size: 14.5px; line-height: 1.2; }
	.rpt-card__ar { font-size: 12px; }
	.rpt-card__rule { display: none; }
	.rpt-card__rows { display: flex; flex-direction: row; gap: 10px; margin: 0; flex: 0 0 auto; }
	.rpt-card__row { display: block; width: 66px; text-align: right; }
	/* Per-row Starts/Iqamah labels: visually hidden, kept for screen readers (header shows them) */
	.rpt-card__lab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.rpt-card__val { font-size: 14.5px; font-variant-numeric: tabular-nums; }
	.rpt-card__val small { font-size: 10px; margin-left: 2px; }

	/* Active row: dark treatment only — the dark row alone marks the current prayer
	   on mobile, so the NOW badge is hidden here (desktop keeps its badge) */
	.rpt-card--now { background: var(--fill); border-radius: 0; box-shadow: none !important; transform: none !important; }
	.rpt-card--now + .rpt-card, .rpt-card--now { border-top-color: transparent; }
	.rpt-card__now { display: none; }

	/* --- Compact Jummah + Sunrise (data unchanged) --- */
	.rpt-jummah { gap: 12px; padding: 14px; }
	.rpt-jummah__ico { width: 44px; height: 44px; border-radius: 12px; }
	.rpt-jummah__ico svg { width: 21px; height: 21px; }
	.rpt-jummah__title { font-size: 18px; }
	.rpt-jummah__times { gap: 24px; }
	.rpt-jummah__val { font-size: 16px; }
	.rpt-sunrise { gap: 12px; padding: 14px; }
	.rpt-sunrise__ico { width: 42px; height: 42px; }
	.rpt-sunrise__ico svg { width: 21px; height: 21px; }
	.rpt-sunrise__val { font-size: 18px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.rpt-widget *, .rpt-widget *::before, .rpt-widget *::after { transition: none !important; animation: none !important; }
	.rpt-card--now { transform: none; }
	.rpt-widget .rpt-card:hover,
	.rpt-widget .rpt-cta:hover,
	.rpt-widget .rpt-search button:hover { transform: none !important; }
}