/* ==========================================================================
   Ramzan Special — "The living sky"
   The top of every page is the sky over the visitor right now, driven by
   their actual prayer times. Content sits on warm ivory with gold accents.
   ========================================================================== */

:root {
	--ink: #0b1730;
	--ink-2: #14254b;
	--ink-3: #1f3566;
	--gold: #d9b25f;
	--gold-2: #b98a35;
	--gold-soft: #f4e7c3;
	--gold-pale: #f4e7c3;
	/* always light — for text on dark surfaces */
	--clay: #be7c68;
	--clay-2: #9c5a48;
	--green: #1d7a58;
	--green-soft: #dff1e8;
	--red: #c2413b;

	--bg: #fbf7ef;
	--bg-2: #f4eee1;
	--card: #fffdf8;
	--line: #e7dcc6;
	--text: #1b2233;
	--muted: #5d6576;
	--link: #8a5a1d;

	--radius: 18px;
	--radius-sm: 12px;
	--shadow: 0 1px 2px rgb(24 28 40 / .05), 0 8px 24px -8px rgb(24 28 40 / .12);
	--shadow-lg: 0 30px 60px -20px rgb(5 10 30 / .55);

	--f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-ar: "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif;
	--f-ur: "Gulzar", "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Amiri", serif;

	--wrap: 1200px;
	--gutter: 20px;
	--head-h: 64px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0a1222;
		--bg-2: #0e182d;
		--card: #111d35;
		--line: #23324f;
		--text: #ebe5d6;
		--muted: #a2abbd;
		--clay-2: #e3a58f;
		--link: #e6c26e;
		--gold-soft: #3a3220;
		--green-soft: #12352a;
		--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -10px rgb(0 0 0 / .5);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0a1222;
	--bg-2: #0e182d;
	--card: #111d35;
	--line: #23324f;
	--text: #ebe5d6;
	--muted: #a2abbd;
	--clay-2: #e3a58f;
	--link: #e6c26e;
	--gold-soft: #3a3220;
	--green-soft: #12352a;
	color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 130px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.65 var(--f-ui);
	font-feature-settings: "tnum" 1, "lnum" 1;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--link);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 6px;
}

[hidden] {
	display: none !important;
}

[lang="ar"] {
	font-family: var(--f-ar);
}

[lang="ur"] {
	font-family: var(--f-ur);
	line-height: 2.1;
}

[lang="hi"] {
	font-family: "Noto Sans Devanagari", var(--f-ui);
}

[lang="te"] {
	font-family: "Noto Sans Telugu", var(--f-ui);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	background: var(--gold);
	color: var(--ink);
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 700;
}

.skip:focus {
	top: 12px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.center {
	text-align: center;
}

.ic {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: -.25em;
}

.ic.flip {
	transform: scaleX(-1);
}

/* ---------- Buttons & small parts ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s;
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--ink);
	color: #fff;
}

.btn--primary:hover {
	background: var(--ink-3);
}

.btn--gold {
	background: linear-gradient(180deg, #ecc977, var(--gold-2));
	color: #1c1506;
	box-shadow: 0 6px 20px -8px rgb(217 178 95 / .8);
}

.btn--gold:hover {
	box-shadow: 0 10px 26px -8px rgb(217 178 95 / .95);
}

.btn--line {
	border-color: var(--line);
	background: var(--card);
	color: var(--text);
}

.btn--line:hover {
	border-color: var(--gold-2);
}

.btn--ghost-light {
	border-color: rgb(255 255 255 / .35);
	color: #fff;
}

.btn--ghost-light:hover {
	background: rgb(255 255 255 / .1);
}

.btn--block {
	width: 100%;
}

.linkbtn {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
	font-weight: 700;
}

.linkbtn__hint {
	font-weight: 500;
	opacity: .65;
	font-size: .85em;
	text-decoration: none;
}

.kicker {
	font: 700 .74rem/1.2 var(--f-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--clay-2);
	margin: 0 0 .7em;
	display: flex;
	align-items: center;
	gap: .5em;
	flex-wrap: wrap;
}

.kicker--light {
	color: rgb(255 255 255 / .82);
}

.kicker--gold {
	color: var(--gold);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .kicker:not(.kicker--light) {
		color: var(--gold);
	}
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .18);
	color: #fff;
	font-size: .9rem;
	backdrop-filter: blur(6px);
}

.chip b {
	font-weight: 800;
}

.chip--link {
	text-decoration: none;
}

.chip--link:hover {
	background: rgb(255 255 255 / .18);
}

.field {
	display: grid;
	gap: 6px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--muted);
}

.field input,
.field select,
.wazaif__pick select,
.locdlg select {
	font: 500 1rem var(--f-ui);
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	min-height: 46px;
	padding: 0 14px;
	width: 100%;
}

.field input:focus,
.field select:focus {
	outline: 2px solid var(--gold);
	outline-offset: 0;
	border-color: transparent;
}

/* ---------- Header ---------- */
.site-head {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgb(7 14 32 / .86);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	color: #fff;
}

.site-head__in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--head-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	flex: none;
}

.brand__mark {
	width: 34px;
	height: 34px;
}

.brand__word {
	font: 600 1.28rem/1 var(--f-display);
	letter-spacing: -.01em;
}

.brand__word em {
	font-style: italic;
	font-weight: 500;
	color: var(--gold);
	margin-left: .15em;
}

.nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.nav__list {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__list a {
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 999px;
	color: rgb(255 255 255 / .82);
	text-decoration: none;
	font-size: .92rem;
	font-weight: 600;
	transition: background .2s, color .2s;
}

.nav__list a .ic {
	opacity: .7;
}

.nav__list a:hover,
.nav__list a[aria-current] {
	background: rgb(255 255 255 / .1);
	color: #fff;
}

.nav__list a[aria-current] .ic {
	color: var(--gold);
	opacity: 1;
}

.nav__siren {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgb(217 178 95 / .55);
	color: var(--gold);
	font-weight: 700;
	font-size: .88rem;
	text-decoration: none;
}

.nav__siren:hover {
	background: rgb(217 178 95 / .12);
}

.nav__siren-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 0 0 rgb(194 65 59 / .7);
	animation: ping 2s infinite;
}

@keyframes ping {
	70% {
		box-shadow: 0 0 0 9px rgb(194 65 59 / 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgb(194 65 59 / 0);
	}
}

.menu-btn {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: rgb(255 255 255 / .08);
	color: #fff;
	cursor: pointer;
}

.menu-btn .ic {
	width: 22px;
	height: 22px;
}

.dateline {
	background: linear-gradient(90deg, rgb(217 178 95 / .16), rgb(190 124 104 / .16));
	border-top: 1px solid rgb(217 178 95 / .18);
	color: #f5ead2;
	font-size: .88rem;
}

.dateline__in {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
}

.dateline__moon {
	display: inline-flex;
}

.dateline__date {
	font-weight: 600;
}

.dateline__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .7;
}

.dateline__next {
	color: var(--gold);
	font-weight: 700;
}

.dateline__loc {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	color: rgb(255 255 255 / .8);
	cursor: pointer;
	font-size: .85rem;
	font-weight: 600;
	padding: 6px 0;
}

.dateline__loc:hover {
	color: #fff;
}

.admin-bar .site-head {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-head {
		top: 0;
	}
}

/* Drawer (mobile menu) */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgb(3 7 18 / .6);
}

.drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(360px, 88vw);
	background: var(--ink);
	color: #fff;
	padding: 72px 20px 28px;
	overflow-y: auto;
	animation: slidein .25s ease;
}

@keyframes slidein {
	from {
		transform: translateX(30px);
		opacity: 0;
	}
}

.drawer ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.drawer li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 8px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgb(255 255 255 / .08);
}

.drawer li a .ic {
	color: var(--gold);
}

.drawer__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: rgb(255 255 255 / .08);
	cursor: pointer;
}

.drawer__siren {
	width: 100%;
}

/* Mobile: the dial lives in the menu, centred below the links, once its place in the page scrolls away. */
.drawer__orb {
	display: grid;
	justify-items: center;
}

.drawer__orb:not(:empty) {
	margin: 6px 0 26px;
}

.orb.in-drawer {
	--orb: 196px;
	animation: none;
}

.drawer__orb:not(:empty)~* {
	margin-top: 0;
}

.orb.in-drawer .orb__shadow {
	display: none;
}

/* ---------- The living sky ---------- */
.sky {
	position: relative;
	isolation: isolate;
	color: #fff;
	overflow: hidden;
	--skyline: #060c1e;
	--skyline-far: #0d1838;
}

.sky__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: var(--sky);
	transition: background 1.5s ease;
}

.sky::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgb(4 8 22 / var(--veil, 0)) 0%, transparent 70%);
	pointer-events: none;
}

.sky__stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	fill: #fff;
	opacity: var(--stars, 0);
	will-change: opacity;
}

.sky__stars--0 {
	animation: twinkle 4.5s ease-in-out infinite alternate;
}

.sky__stars--1 {
	animation: twinkle 6.5s ease-in-out 1.5s infinite alternate;
}

.sky__stars--2 {
	animation: twinkle 8s ease-in-out 3s infinite alternate;
}

@keyframes twinkle {
	from {
		opacity: calc(var(--stars, 0) * .35);
	}

	to {
		opacity: var(--stars, 0);
	}
}

.sky__pattern {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: .07;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M60 10l14 36 36 14-36 14-14 36-14-36-36-14 36-14z'/%3E%3Cpath d='M60 30l9 21 21 9-21 9-9 21-9-21-21-9 21-9z'/%3E%3Crect x='42' y='42' width='36' height='36' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
	mask-image: linear-gradient(180deg, #000, transparent 85%);
}

.sky__moon {
	position: absolute;
	z-index: -1;
	top: var(--my, 70px);
	right: var(--mx, 8%);
	width: 120px;
	opacity: var(--moon, 0);
	transition: opacity 2s, top 2s, right 2s;
	filter: drop-shadow(0 0 30px rgb(255 240 200 / .45));
}

.sky__sun {
	position: absolute;
	z-index: -1;
	left: var(--sx, 78%);
	top: var(--sy, 30%);
	width: 130px;
	height: 130px;
	margin: -65px 0 0 -65px;
	border-radius: 50%;
	opacity: var(--sun, 0);
	transition: opacity 2s, left 2s, top 2s;
	background: radial-gradient(circle, #fff9e6 0 22%, rgb(255 226 150 / .85) 30%, rgb(255 200 110 / .25) 52%, transparent 70%);
}

.moon__dark {
	fill: rgb(255 255 255 / .06);
}

.moon__lit {
	fill: #fff3d1;
}

.dateline .moon__dark {
	fill: rgb(255 255 255 / .18);
}

.dateline .moon__lit {
	fill: var(--gold);
}

.sky__skyline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 110px;
	z-index: -1;
	display: block;
}

.skyline__far {
	fill: var(--skyline-far);
	opacity: .9;
	transition: fill 1.5s;
}

.skyline__near {
	fill: var(--skyline);
	transition: fill 1.5s;
}

.skyline__crescent {
	fill: var(--gold);
}

.skyline__finial {
	stroke: var(--skyline);
	stroke-width: 2.4;
}

.skyline__rings path {
	fill: none;
	stroke: var(--gold);
	stroke-width: 2.5;
	stroke-linecap: round;
	opacity: 0;
}

.sky.is-siren .skyline__rings path {
	animation: siren 1.6s ease-out infinite;
}

.sky.is-siren .skyline__rings path:nth-child(2n) {
	animation-delay: .4s;
}

@keyframes siren {
	0% {
		opacity: 0;
	}

	30% {
		opacity: .95;
	}

	100% {
		opacity: 0;
	}
}

.sky[data-sky="night"] {
	--sky: radial-gradient(1200px 500px at 85% 0%, #1b2d5c 0%, transparent 60%), linear-gradient(180deg, #040918 0%, #0a1634 55%, #15264f 100%);
	--stars: 1;
	--moon: 1;
	--veil: 0;
}

.sky[data-sky="dawn"] {
	--sky: linear-gradient(180deg, #0c1638 0%, #2c2f68 40%, #8d5577 72%, #e79a72 100%);
	--stars: .55;
	--moon: .55;
	--skyline: #0a1029;
	--skyline-far: #2a2350;
}

.sky[data-sky="morning"] {
	--sky: linear-gradient(180deg, #2a5ea6 0%, #5f95cf 45%, #cfd8d6 80%, #f4d6a6 100%);
	--sun: 1;
	--veil: .28;
	--skyline: #13213f;
	--skyline-far: #3e5680;
}

.sky[data-sky="day"] {
	--sky: linear-gradient(180deg, #1d5aa8 0%, #3f86cf 45%, #8fc1e9 85%, #cfe5f4 100%);
	--sun: 1;
	--veil: .3;
	--skyline: #13213f;
	--skyline-far: #3b5b8c;
}

.sky[data-sky="asr"] {
	--sky: linear-gradient(180deg, #2a4f8c 0%, #5f78a6 40%, #d19d5f 82%, #f2c886 100%);
	--sun: 1;
	--veil: .3;
	--skyline: #1a1a33;
	--skyline-far: #5a4a63;
}

.sky[data-sky="sunset"] {
	--sky: linear-gradient(180deg, #1d1d4a 0%, #5a2f61 35%, #b24b56 65%, #ef8b4c 88%, #f7c27a 100%);
	--sun: 1;
	--veil: .1;
	--skyline: #170d23;
	--skyline-far: #4a2440;
}

.sky[data-sky="dusk"] {
	--sky: linear-gradient(180deg, #070d27 0%, #1d1f4d 45%, #4c2f62 80%, #8a4a6e 100%);
	--stars: .7;
	--moon: .9;
	--skyline: #070a1c;
	--skyline-far: #231a40;
}

.sky__in {
	position: relative;
	padding-top: 48px;
	padding-bottom: 124px;
}

/* Hero (home) */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 40px;
	align-items: center;
	min-height: 440px;
}

.hero__t {
	margin: 0 0 .25em;
	font-weight: 500;
	text-shadow: 0 2px 30px rgb(0 0 0 / .25);
}

.hero__pre {
	display: block;
	font: 700 .8rem/1 var(--f-ui);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

.hero__name {
	display: block;
	font-size: clamp(3.2rem, 8vw, 6.2rem);
	line-height: .95;
	letter-spacing: -.03em;
}

.hero__at {
	display: block;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-style: italic;
	font-weight: 400;
	opacity: .92;
	margin-top: .25em;
}

.hero__count {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 10px 0 24px;
}

.hero__count-label {
	font-size: .95rem;
	opacity: .8;
}

.hero__count strong {
	font: 600 clamp(1.8rem, 4vw, 2.5rem)/1 var(--f-ui);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.hero__fast {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 6px 28px;
	margin: 0 0 26px;
	padding: 14px 20px;
	border-radius: 16px;
	background: rgb(255 255 255 / .08);
	border: 1px solid rgb(255 255 255 / .14);
	backdrop-filter: blur(8px);
	width: max-content;
	max-width: 100%;
}

.hero__fast span {
	display: block;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	opacity: .75;
	font-weight: 700;
}

.hero__fast strong {
	font-size: 1.15rem;
	font-weight: 700;
}

.hero__orb {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.orb-hint {
	font-size: .82rem;
	opacity: .7;
	margin: 0;
}

.orb-hint__touch {
	display: none;
}

@media (hover: none) {
	.orb-hint__pc {
		display: none;
	}

	.orb-hint__touch {
		display: inline;
	}
}

/* Page hero (inner pages) */
.sky--page .sky__in {
	padding-top: 34px;
	padding-bottom: 112px;
}

.pagehero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
}

.pagehero--solo {
	grid-template-columns: minmax(0, 820px);
}

.pagehero__t {
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	font-weight: 500;
	margin: .2em 0 .35em;
	text-shadow: 0 2px 24px rgb(0 0 0 / .2);
}

.pagehero__lead {
	font-size: 1.08rem;
	max-width: 640px;
	opacity: .92;
}

.pagehero__lead strong {
	color: var(--gold-pale);
}

.pagehero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.pagehero .citysearch {
	margin-top: 22px;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
}

.crumbs li {
	opacity: .8;
}

.crumbs li+li::before {
	content: "/";
	margin-right: 6px;
	opacity: .5;
}

.crumbs a {
	color: inherit;
	text-decoration: none;
}

.crumbs a:hover {
	text-decoration: underline;
}

.bigdate {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.2;
	margin-bottom: 4px;
}

.bigdate__d {
	font-size: 1.6em;
	color: var(--gold);
	font-weight: 600;
}

.bigdate__ar {
	display: block;
	text-align: left;
	font-size: 1.8rem;
	margin: 2px 0 6px;
	opacity: .9;
}

/* ---------- Day arc ---------- */
.dayarc {
	margin: 26px 0 -40px;
}

.dayarc svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.dayarc__day {
	fill: none;
	stroke: rgb(255 255 255 / .45);
	stroke-width: 2;
	stroke-dasharray: 2 8;
	stroke-linecap: round;
}

.dayarc__night {
	fill: none;
	stroke: rgb(255 255 255 / .2);
	stroke-width: 2;
	stroke-dasharray: 2 8;
	stroke-linecap: round;
}

.dayarc__horizon {
	stroke: rgb(255 255 255 / .22);
	stroke-width: 1;
}

.dayarc__pt circle {
	fill: var(--ink);
	stroke: var(--gold);
	stroke-width: 2.5;
}

.dayarc__pt.is-next circle {
	fill: var(--gold);
}

.dayarc__pt text {
	fill: #fff;
	text-anchor: middle;
	font-family: var(--f-ui);
}

.dayarc__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
}

.dayarc__time {
	font-size: 14px;
	opacity: .75;
}

.dayarc__glow {
	fill: rgb(255 214 120 / .25);
}

.dayarc__body {
	fill: #ffd98a;
	stroke: #fff4d8;
	stroke-width: 2;
}

.dayarc__now.is-moon .dayarc__glow {
	fill: rgb(220 230 255 / .18);
}

.dayarc__now.is-moon .dayarc__body {
	fill: #eef1ff;
}

.dayarc__now {
	transition: transform 1s ease;
}

/* ---------- The prayer widget (orb) ---------- */
.orb {
	position: relative;
	width: var(--orb);
	height: var(--orb);
	perspective: 1200px;
	animation: zoomInUp 1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes zoomInUp {
	from {
		opacity: 0;
		transform: scale(.3) translateY(120px);
	}

	60% {
		opacity: 1;
		transform: scale(1.04) translateY(-6px);
	}

	to {
		transform: none;
	}
}

.orb__track,
.orb__tilt {
	width: 100%;
	height: 100%;
	transition: transform .25s ease-out;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Slot keeps the dial's space in the layout while the dial itself floats. */
.orb-slot {
	width: var(--orb);
	height: var(--orb);
	--orb: 280px;
}

.orb-slot--md {
	--orb: 232px;
}

.orb-slot--sm {
	--orb: 200px;
}

.orb-slot--dock {
	width: 0;
	height: 0;
}

.orb.is-floating {
	--orb: 150px;
	position: fixed;
	z-index: 35;
	top: var(--float-top, 120px);
	right: max(16px, calc((100vw - var(--wrap)) / 2 + 4px));
	animation: orbIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

.orb.is-floating .message-window,
.orb.is-floating .prayer-name-text {
	display: none;
}

.orb.is-floating #circular-countdown {
	font-size: calc(var(--orb) * .075);
}

.orb.is-floating #pray-times-table {
	font-size: calc(var(--orb) * .066);
}

.orb.is-floating .small-table {
	width: 78%;
}

.orb.is-floating .small-table td {
	padding: .1em .25em;
}

.orb.is-floating #currentHijriDateContainer {
	display: none;
}

.orb.is-floating .prayer-name {
	top: 16%;
}

.orb.is-floating .prayer-time {
	top: 26%;
}

.orb.is-floating .countdown-digits {
	top: 53%;
}

.orb.is-floating .cd-prayer-name {
	top: 72%;
}

.orb.is-floating .orb__shadow {
	display: none;
}

.orb.is-floating .card__side {
	box-shadow: 0 14px 34px -8px rgb(5 10 30 / .6), 0 0 0 1px rgb(217 178 95 / .45);
}

.orb.is-floating .small-table th,
.orb.is-floating .small-table__d {
	display: none;
}

.orb.was-floated:not(.is-floating) {
	animation: none;
}

@keyframes orbIn {
	from {
		opacity: 0;
		transform: scale(.6) translateY(-12px);
	}
}

.orb__shadow {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -26px;
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(0 0 0 / .45), transparent);
	filter: blur(4px);
	z-index: -1;
}

.card {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 200rem;
	cursor: pointer;
	outline: none;
	border-radius: 50%;
}

.card__side {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .8s ease;
	box-shadow: var(--shadow-lg), 0 0 0 1px rgb(217 178 95 / .35);
}

.card__side--back {
	transform: rotateY(180deg);
	background: radial-gradient(circle at 50% 30%, #23386b, #0a142c 75%);
	border: 4px solid #0a142c;
}

/* Flip is driven by JS on the (non-rotating) .orb wrapper, so hover can't be lost mid-rotation. */
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 5;
}

.card.flip .card__side--back,
.card:focus-visible .card__side--back {
	transform: rotateY(0);
}

.card.flip .card__side--front,
.card:focus-visible .card__side--front {
	transform: rotateY(-180deg);
}

#circular-countdown {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	background: #0a142c;
	font-size: calc(var(--orb) * .0571);
	--rw: calc(var(--orb) * .0225);
}

.cd-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(var(--ring, #00e08a) calc(var(--p) * 1%), rgb(255 255 255 / .1) 0);
	transition: --p 1s;
}

.cd-ticks {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(from -1deg, rgb(217 178 95 / .9) 0 2deg, transparent 2deg 6deg);
	-webkit-mask: radial-gradient(circle, transparent 0 calc(50% - var(--rw)), #000 calc(50% - var(--rw)) 50%, transparent 50%);
	mask: radial-gradient(circle, transparent 0 calc(50% - var(--rw)), #000 calc(50% - var(--rw)) 50%, transparent 50%);
	opacity: .3;
}

#circular-countdown::before {
	content: "";
	position: absolute;
	inset: var(--rw);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 28%, #2a4277 0%, #13234a 45%, #070f24 100%);
	box-shadow: inset 0 0 0 1px rgb(217 178 95 / .25), inset 0 -20px 40px rgb(0 0 0 / .35);
	z-index: 1;
}

.prayer-name,
.cd-prayer-name,
.prayer-time,
.message-window,
.prayer-name-text,
.countdown-digits {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	white-space: nowrap;
	text-shadow: 0 3px 10px rgb(0 0 0 / .45);
}

.prayer-name {
	top: 11%;
	font: 500 1.6em/1 var(--f-display);
	color: var(--gold);
	transition: opacity 1.5s;
}

.prayer-time {
	top: 20%;
	font-size: 1.9em;
	font-weight: 300;
	transition: opacity 1.5s;
}

.message-window {
	top: 38%;
    width: 75%;
    white-space: normal;
    padding: .35em .3em;
    border-top: 1px solid rgb(255 255 255 / .35);
    border-bottom: 1px solid rgb(255 255 255 / .35);
    border-radius: 12px;
    font-size: .74em;
    line-height: 1.5;
    color: rgb(255 255 255 / .88);
    font-weight: normal;
    font-size: .85em;
}

.countdown-digits {
	top: 59%;
	font: 300 2.7em/1 var(--f-ui);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.cd-prayer-name {
	top: 75%;
	font-size: 1.2em;
	font-weight: lighter;
	color: var(--gold-pale);
}

.prayer-name-text {
	top: 84%;
	font-size: .7em;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
	line-height: 2.5;
}

.orb.is-urgent .cd-ring {
	--ring: #ff2e3f;
}

.orb.is-urgent .countdown-digits {
	color: #ffb4a8;
}

#pray-times-table {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: calc(var(--orb) * .0536);
}

.small-table {
	width: 74%;
	border-collapse: collapse;
}

.small-table caption {
	padding: 0 0 .1em;
}

.small-table th,
.small-table__d {
	display: block;
	font: 600 1em/1.2 var(--f-display);
	color: var(--gold);
	padding: 0 0 .25em;
}

.small-table__h {
	display: block;
	padding: .18em .3em;
	font-size: .9em;
	border-bottom: 1px solid rgb(217 178 95 / .18);
}

.small-table td {
	padding: .18em .3em;
	font-size: .9em;
	border-bottom: 1px solid rgb(217 178 95 / .18);
}

.small-table td:first-child {
	text-align: right;
	opacity: .78;
}

.small-table td:last-child {
	text-align: left;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.small-table tr.is-next td {
	color: var(--gold);
}

#currentHijriDateContainer {
	text-align: center !important;
	opacity: 1 !important;
	font-size: .78em;
	color: var(--gold-pale);
	border: 0;
	padding-bottom: .4em;
}

/* ---------- City search ---------- */
.citysearch {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 520px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45);
	color: var(--text);
}

.citysearch__ic {
	position: absolute;
	left: 18px;
	color: var(--muted);
	pointer-events: none;
}

.citysearch input {
	flex: 1;
	min-width: 0;
	height: 54px;
	border: 0;
	background: none;
	padding: 0 12px 0 50px;
	font: 500 1rem var(--f-ui);
	color: #1b2233;
	border-radius: 999px;
}

.citysearch input:focus {
	outline: none;
}

.citysearch:focus-within {
	box-shadow: 0 0 0 3px rgb(217 178 95 / .7), 0 10px 30px -12px rgb(0 0 0 / .45);
}

.citysearch__geo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 5px;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: .88rem;
	cursor: pointer;
	white-space: nowrap;
}

.citysearch__geo:hover {
	background: var(--ink-3);
}

.citysearch__geo.is-busy .ic {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.citysearch__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: #fff;
	color: #1b2233;
	border-radius: 16px;
	box-shadow: 0 20px 50px -15px rgb(0 0 0 / .45);
	max-height: 320px;
	overflow-y: auto;
}

.citysearch__list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
}

.citysearch__list li small {
	color: #6b7280;
}

.citysearch__list li[aria-selected="true"],
.citysearch__list li:hover {
	background: #f6efe0;
}

.citysearch__list .is-empty {
	color: #6b7280;
	cursor: default;
}

/* ---------- Sections ---------- */
.section {
	padding: 76px 0;
}

.section--tint {
	background: var(--bg-2);
}

.section--narrow .wrap {
	max-width: 860px;
}

.sechead {
	margin-bottom: 30px;
	max-width: 760px;
}

.sechead__t {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	margin-bottom: .3em;
}

.sechead__lead {
	color: var(--muted);
	font-size: 1.05rem;
	margin: 0;
}

.split-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.split-head .sechead {
	margin-bottom: 0;
}

.method-note {
	color: var(--muted);
	font-size: .9rem;
	margin: 18px 0 0;
}

/* Times grid */
.times {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.times__item {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 20px 18px 18px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	transition: transform .2s, border-color .2s;
}

.times__ic {
	color: var(--clay);
	margin-bottom: 8px;
}

.times__ic .ic {
	width: 26px;
	height: 26px;
}

.times__name {
	font: 600 1.15rem/1.2 var(--f-display);
}

.times__t {
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.times__sub {
	font-size: .8rem;
	color: var(--muted);
}

.times__item.is-next {
	border-color: var(--gold-2);
	background: linear-gradient(180deg, var(--gold-soft), var(--card) 70%);
	box-shadow: 0 0 0 1px var(--gold-2), var(--shadow);
}

.times__item.is-next::after {
	content: "Next";
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--gold);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.times__item.is-now {
	border-color: var(--green);
}

.times__item.is-now::after {
	content: "Now";
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--green);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.times__item.is-past {
	opacity: .8;
}

.times--compact {
	grid-template-columns: repeat(3, 1fr);
}

.nextpill {
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: .95rem;
}

.nextpill b {
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

/* Facts (city page) */
.facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.fact {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.fact__k {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--clay-2);
}

.fact__v {
	font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.2 var(--f-display);
	white-space: nowrap;
}

.fact__v i {
	font-style: normal;
	color: var(--muted);
	font-size: .7em;
}

.fact__d {
	color: var(--muted);
	font-size: .9rem;
}

.mini-compass {
	float: right;
	position: relative;
	width: 52px;
	height: 52px;
	margin: 0 0 6px 10px;
	border-radius: 50%;
	border: 2px solid var(--line);
	background: radial-gradient(circle, var(--card) 55%, var(--bg-2));
}

.mini-compass span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2px;
	height: 22px;
	margin-left: -1px;
	background: linear-gradient(var(--clay), var(--clay) 60%, transparent 60%);
	transform-origin: 50% 0;
	transform: rotate(calc(var(--q) + 180deg));
}

.mini-compass::before {
	content: "N";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	font-size: .6rem;
	font-weight: 800;
	color: var(--muted);
}

/* Tables */
.table-scroll {
	overflow-x: auto;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--card);
	-webkit-overflow-scrolling: touch;
}

.tt {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
	font-variant-numeric: tabular-nums;
}

.tt th,
.tt td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.tt thead th {
	position: sticky;
	top: 0;
	background: var(--ink);
	color: #fff;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}

.tt tbody th {
	font-weight: 700;
}

.tt tbody tr:last-child>* {
	border-bottom: 0;
}

.tt tbody tr:hover {
	background: var(--bg-2);
}

.tt .tt__em {
	font-weight: 800;
}

.tt thead .tt__em {
	color: var(--gold);
}

.tt__h {
	color: var(--muted);
}

.tt tr.is-today {
	background: var(--gold-soft) !important;
	box-shadow: inset 4px 0 0 var(--gold-2);
}

.tt tr.is-friday>* {
	background: rgb(29 122 88 / .06);
}

.tt--ramadan tr.is-ashra3>* {
	background: rgb(190 124 104 / .07);
}

.tt--ramadan tr.is-odd-night th::after {
	content: " ★";
	color: var(--gold-2);
}

.tt--rakat td,
.tt--rakat th {
	text-align: center;
}

.tt--rakat tbody th,
.tt--rakat thead th:first-child {
	text-align: left;
}

.tt--compact {
	font-size: .95rem;
}

/* Ramadan band */
.ramadan-band {
	position: relative;
	overflow: hidden;
	background: radial-gradient(800px 300px at 90% 0%, rgb(217 178 95 / .22), transparent 70%), linear-gradient(120deg, #0b1730, #1d1f4d 60%, #4a2440);
	color: #fff;
	padding: 64px 0;
}

.ramadan-band::before {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	box-shadow: -34px 26px 0 0 rgb(244 231 195 / .14);
}

.ramadan-band__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.ramadan-band__in> :first-child {
	flex: 1 1 420px;
	min-width: 0;
}

.ramadan-band__in>.countdown,
.ramadan-band__in>.bigcount {
	flex: none;
}

.ramadan-band__t {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	font-weight: 500;
}

.ramadan-band p {
	opacity: .88;
	max-width: 560px;
}

.ramadan-band--flat {
	padding: 40px 0;
}

.countdown {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.countdown li {
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: rgb(255 255 255 / .06);
	border: 1px solid rgb(217 178 95 / .45);
	box-shadow: inset 0 0 30px rgb(217 178 95 / .12);
}

.countdown b {
	font: 300 2.6rem/1 var(--f-ui);
	font-variant-numeric: tabular-nums;
	margin-top: 18px;
}

.countdown span {
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	opacity: .7;
	margin-bottom: 20px;
}

.keydates {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: 12px 32px;
}

.keydates span {
	display: block;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	opacity: .7;
	font-weight: 700;
}

.keydates b {
	font: 500 1.25rem var(--f-display);
}

.bigcount {
	display: grid;
	text-align: center;
	margin: 0;
}

.bigcount b {
	font: 300 4.4rem/1 var(--f-ui);
	color: var(--gold);
}

.bigcount span {
	opacity: .75;
}

/* Tools */
.tools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.tool a {
	position: relative;
	display: grid;
	gap: 6px;
	height: 100%;
	padding: 26px 26px 54px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	overflow: hidden;
}

.tool a::before {
	content: "";
	position: absolute;
	right: -30px;
	top: -30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--gold-soft), transparent 70%);
	opacity: .8;
}

.tool a:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: var(--gold-2);
}

.tool__ic {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--ink);
	color: var(--gold);
	margin-bottom: 10px;
}

.tool__ic .ic {
	width: 24px;
	height: 24px;
}

.tool__t {
	font: 600 1.25rem/1.2 var(--f-display);
}

.tool__d {
	color: var(--muted);
	font-size: .94rem;
}

.tool__go {
	position: absolute;
	left: 26px;
	bottom: 20px;
	color: var(--clay);
	transition: transform .2s;
}

.tool a:hover .tool__go {
	transform: translateX(5px);
}

/* City grid & pills */
.citygrid {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.citygrid a {
	display: grid;
	gap: 2px;
	padding: 18px 20px;
	border-radius: var(--radius-sm);
	background: var(--card);
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--text);
	transition: border-color .2s, transform .2s;
}

.citygrid a:hover {
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.citygrid__n {
	font: 600 1.15rem var(--f-display);
}

.citygrid__c {
	font-size: .78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
}

.citygrid__t {
	font-size: .85rem;
	color: var(--muted);
	margin-top: 6px;
}

.citygrid__t b {
	color: var(--text);
}

.pills {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pills a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	font-size: .92rem;
	font-weight: 600;
}

.pills a:hover {
	border-color: var(--gold-2);
	color: var(--link);
}

.pills__all {
	background: var(--ink) !important;
	color: #fff !important;
	border-color: var(--ink) !important;
}

.pills-h {
	font-size: 1rem;
	font-family: var(--f-ui);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 22px 0 10px;
}

/* Carousels: hadith & ayat */
.hadith,
.ayat {
	padding: 70px 0;
	background: linear-gradient(180deg, var(--bg), var(--bg-2));
	text-align: center;
}

.hadith__track,
.ayat__track {
	display: grid;
}

.hadith__slide,
.ayat__slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .8s, transform .8s, visibility .8s;
}

.hadith__slide.is-active,
.ayat__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hadith__src {
	font-size: 1.15rem;
	color: var(--clay-2);
}

.hadith__q {
	margin: 8px auto 10px;
	max-width: 900px;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.9;
	color: var(--text);
}

.hadith__note {
	font-size: 1.05rem;
	color: var(--muted);
	max-width: 820px;
	margin: 0 auto;
}

.hadith__dots {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-top: 22px;
}

/* 24px tap targets; the visible dot is drawn inside. */
.hadith__dots button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width .3s;
}

.hadith__dots button::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line);
	transition: width .3s, background .3s;
}

.hadith__dots button[aria-selected="true"] {
	width: 36px;
}

.hadith__dots button[aria-selected="true"]::before {
	width: 30px;
	border-radius: 6px;
	background: var(--gold-2);
}

.ayat__ar {
	margin: 0 auto 16px;
	max-width: 980px;
	font-size: clamp(1.8rem, 4vw, 2.9rem);
	line-height: 1.9;
	color: var(--text);
}

.ayat__roman {
	display: block;
	max-width: 760px;
	margin: 0 auto 8px;
	font-size: 1.1rem;
	font-style: italic;
	color: var(--muted);
}

.ayat cite {
	font-style: normal;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--clay-2);
}

/* e-Siren */
.esiren {
	position: relative;
	overflow: hidden;
	padding: 84px 0;
	color: #fff;
	background: radial-gradient(700px 400px at 80% 60%, rgb(194 65 59 / .28), transparent 70%), linear-gradient(135deg, #070f24, #13244b 70%);
}

.esiren__in {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 40px;
	align-items: center;
}

.esiren__t {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	font-weight: 500;
}

.esiren__t span {
	color: var(--gold);
	font-style: italic;
}

.esiren__lead {
	font-size: 1.08rem;
	opacity: .88;
	max-width: 620px;
}

.esiren__facts {
	list-style: none;
	margin: 26px 0 30px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
}

.esiren__facts b {
	display: block;
	font: 600 1.6rem var(--f-display);
	color: var(--gold);
}

.esiren__facts span {
	font-size: .86rem;
	opacity: .75;
}

.esiren__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.esiren__art {
	position: relative;
	height: 340px;
}

.esiren__minar {
	position: absolute;
	left: 22%;
	bottom: 0;
	width: 120px;
	height: 300px;
	color: #0b1730;
}

.esiren__minar svg {
	width: 100%;
	height: 100%;
	fill: #22396d;
	color: #fff;
}

.esiren__minar .ring {
	position: absolute;
	left: 50%;
	top: 18%;
	width: 60px;
	height: 60px;
	margin: -30px;
	border-radius: 50%;
	border: 2px solid var(--gold);
	opacity: 0;
	animation: ring 2.4s ease-out infinite;
}

.esiren__minar .r2 {
	animation-delay: .8s;
}

.esiren__minar .r3 {
	animation-delay: 1.6s;
}

@keyframes ring {
	0% {
		transform: scale(.4);
		opacity: .9;
	}

	100% {
		transform: scale(4.2);
		opacity: 0;
	}
}

.esiren__device {
	position: absolute;
	right: 6%;
	bottom: 20px;
	display: grid;
	justify-items: center;
	gap: 8px;
	width: 150px;
	padding: 22px 0 16px;
	border-radius: 18px;
	background: linear-gradient(180deg, #2b2f38, #15171c);
	box-shadow: 0 20px 40px -10px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .1);
}

.esiren__btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #ff7b6e, #c2413b 60%, #7d1f1a);
	box-shadow: 0 0 0 6px #0d0e12, 0 0 24px rgb(229 72 77 / .55);
}

.esiren__device small {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
}

.esiren-inline {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 26px;
	padding: 18px 22px;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
}

.esiren-inline p {
	margin: 0;
}

.esiren-inline a {
	color: var(--gold);
	font-weight: 700;
}

.esiren-inline__ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--red);
}

/* Guides & posts */
.guides,
.posts {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.guide-card a {
	position: relative;
	display: grid;
	gap: 8px;
	height: 100%;
	padding: 30px 28px;
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	background: linear-gradient(160deg, var(--g1), var(--g2));
	transition: transform .2s;
}

.guide-card a::after {
	content: "";
	position: absolute;
	inset: auto -40px -60px auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 30px solid rgb(255 255 255 / .06);
}

.guide-card a:hover {
	transform: translateY(-3px);
}

.guide-card--namaz {
	--g1: #13244b;
	--g2: #2f3f7a;
}

.guide-card--wudu {
	--g1: #0e4a4f;
	--g2: #1d7a6f;
}

.guide-card--ghusl {
	--g1: #6b3a30;
	--g2: #be7c68;
}

.guide-card__k {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-pale);
	opacity: .85;
}

.guide-card__t {
	font: 500 1.6rem/1.15 var(--f-display);
}

.guide-card__d {
	opacity: .85;
	font-size: .95rem;
}

.guide-card__langs {
	margin-top: 10px;
	font-size: .9rem;
	opacity: .75;
}

.post-card>a {
	display: grid;
	gap: 8px;
	height: 100%;
	padding: 26px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}

.post-card>a:hover {
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.post-card__k {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--clay-2);
}

.post-card__t {
	font: 600 1.3rem/1.25 var(--f-display);
}

.post-card__d {
	color: var(--muted);
	font-size: .94rem;
}

.posts--hub {
	margin-top: 30px;
}

/* FAQ */
.faq__t {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 20px;
}

.faq__i {
	border-bottom: 1px solid var(--line);
}

.faq__i summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 40px 20px 0;
	position: relative;
	font: 600 1.15rem/1.35 var(--f-display);
}

.faq__i summary::-webkit-details-marker {
	display: none;
}

.faq__i summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -8px;
	border-right: 2px solid var(--clay);
	border-bottom: 2px solid var(--clay);
	transform: rotate(45deg);
	transition: transform .25s;
}

.faq__i[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.faq__a {
	color: var(--muted);
	padding-bottom: 18px;
}

/* Story (Kis Nabi) */
.story {
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	padding: 8px 28px;
}

.story summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 0;
}

.story summary::-webkit-details-marker {
	display: none;
}

.story summary h2 {
	display: inline;
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
}

.story__hint {
	display: block;
	color: var(--muted);
	font-size: .92rem;
	margin-top: 4px;
}

.story__body {
	padding-bottom: 18px;
}

/* Prose */
.prose {
	font-size: 1.06rem;
	line-height: 1.75;
}

.prose--center {
	max-width: 780px;
	margin: 0 auto;
}

.prose--page {
	max-width: 820px;
}

.prose h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: 1.6em;
}

.prose h3 {
	font-size: 1.35rem;
	margin-top: 1.4em;
}

.prose h4 {
	font-size: 1.15rem;
	margin-top: 1.3em;
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
	margin-top: 0;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li {
	margin-bottom: .45em;
}

.prose img {
	border-radius: var(--radius-sm);
	margin: 10px 0;
}

.prose blockquote {
	margin: 1.5em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--gold-2);
	background: var(--card);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: .95rem;
}

.prose th,
.prose td {
	border: 1px solid var(--line);
	padding: 8px 12px;
	text-align: left;
}

.prose th {
	background: var(--bg-2);
}

.prose .callout {
	padding: 18px 22px;
	border-radius: var(--radius-sm);
	background: var(--gold-soft);
	border: 1px solid rgb(185 138 53 / .3);
}

.prose [lang="ar"] {
	font-size: 1.5em;
	line-height: 1.9;
}

.prose p[lang="ar"],
.prose .ar {
	display: block;
	text-align: right;
	direction: rtl;
	font-family: var(--f-ar);
	font-size: 1.6rem;
	line-height: 2;
}

/* Guide pages */
.guide__wrap {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.guide__side {
	position: sticky;
	top: 130px;
	display: grid;
	gap: 24px;
}

.langtabs {
	display: grid;
	gap: 6px;
	padding: 6px;
	border-radius: 16px;
	background: var(--card);
	border: 1px solid var(--line);
}

.langtabs button {
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	text-align: left;
	font-weight: 700;
	font-size: 1.05rem;
}

.langtabs button[aria-selected="true"] {
	background: var(--ink);
	color: #fff;
}

.guide__others {
	display: grid;
	gap: 4px;
}

.guide__others a {
	padding: 8px 0;
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--line);
}

.guide__others a[aria-current] {
	color: var(--link);
}

.guide__panel[dir="rtl"] {
	text-align: right;
	font-size: 1.4rem;
}

.guide__panel[dir="rtl"] img {
	margin-left: auto;
}

.langtabs button[lang="ur"] {
	font-family: var(--f-ur);
	font-size: 1.35rem;
	line-height: 1.3;
}

.guide__panel[dir="rtl"] ol,
.guide__panel[dir="rtl"] ul {
	padding: 0 1.3em 0 0;
}

.guide__panel img {
	display: block;
	max-width: min(100%, 420px);
	background: #fff;
	padding: 8px;
	border: 1px solid var(--line);
}

.guide__panel--ur h2,
.guide__panel--ur h3,
.guide__panel--ur h4 {
	font-family: var(--f-ur);
	font-weight: 400;
	line-height: 1.8;
}

/* Tasbeeh */
.section--tasbeeh {
	background: radial-gradient(900px 500px at 20% 0%, rgb(217 178 95 / .14), transparent 70%), var(--bg-2);
}

.tasbeeh {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.tasbeeh__dialwrap {
	display: grid;
	justify-items: center;
	gap: 22px;
}

.tasbeeh__dial {
	position: relative;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: radial-gradient(circle at 50% 35%, #2a4277, #0b1730 70%);
	box-shadow: var(--shadow-lg), inset 0 0 0 1px rgb(217 178 95 / .35);
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	touch-action: manipulation;
	transition: transform .08s;
}

.tasbeeh__dial:active {
	transform: scale(.98);
}

.tasbeeh__dial.is-done {
	box-shadow: var(--shadow-lg), 0 0 0 6px rgb(47 174 125 / .5);
}

.tasbeeh__beads i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #6d7894, #2a3352);
	transform: rotate(calc(var(--i) * 10.909deg - 90deg)) translate(138px);
	transition: background .25s, box-shadow .25s;
}

.tasbeeh__beads i.on {
	background: radial-gradient(circle at 35% 30%, #fff3c9, var(--gold) 55%, var(--gold-2));
	box-shadow: 0 0 10px rgb(217 178 95 / .8);
}

.tasbeeh__face {
	position: absolute;
	inset: 40px;
	display: grid;
	place-content: center;
	gap: 4px;
	text-align: center;
	border-radius: 50%;
}

.tasbeeh__zikr {
	font-size: 1.9rem;
	line-height: 1.4;
	color: var(--gold-pale);
	max-width: 220px;
}

.tasbeeh__count {
	font: 300 4.4rem/1 var(--f-ui);
	font-variant-numeric: tabular-nums;
}

.tasbeeh__goal {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .65;
}

.tasbeeh__ctrl {
	display: flex;
	gap: 10px;
}

.tasbeeh__ctrl button {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 86px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--card);
	cursor: pointer;
	font-size: .8rem;
	font-weight: 700;
	color: var(--text);
}

.tasbeeh__ctrl button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--gold);
	border-color: var(--ink);
}

.wazaif {
	padding: 28px;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.wazaif__head {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.wazaif__pick {
	flex: 1;
	min-width: 0;
}

.wazaif__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.wazaif__nav button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--card);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.wazifa {
	text-align: center;
	animation: fade .35s ease;
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.wazifa__t {
	font-size: 1.4rem;
}

.wazifa__ar {
	font-size: 3rem;
	line-height: 1.6;
	margin: 6px 0 10px;
	color: var(--clay-2);
}

.wazifa__d {
	color: var(--muted);
	max-width: 520px;
	margin: 0 auto 10px;
}

.wazifa__isha {
	font-size: 1.4rem;
	color: var(--muted);
}

.wazaif__note {
	margin-top: 20px;
	font-size: .92rem;
	color: var(--muted);
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.wazaif__note summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--text);
}

/* Hijri calendar & converter */
.hcal-wrap {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
	align-items: start;
}

.hcal,
.converter {
	padding: 26px;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.hcal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.hcal__head h2 {
	margin: 0;
	text-align: center;
	font-size: 1.5rem;
}

.hcal__head small {
	display: block;
	font: 500 .85rem var(--f-ui);
	color: var(--muted);
	margin-top: 4px;
}

.hcal__head button {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--card);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.hcal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.hcal__dow {
	text-align: center;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 4px;
}

.hcal__day {
	display: grid;
	place-items: center;
	gap: 0;
	aspect-ratio: 1;
	border-radius: 12px;
	background: var(--bg-2);
	line-height: 1.1;
}

.hcal__day b {
	font: 600 1.25rem var(--f-display);
}

.hcal__day small {
	font-size: .66rem;
	color: var(--muted);
}

.hcal__day.is-fri {
	background: var(--green-soft);
}

.hcal__day.is-today {
	background: var(--ink);
	color: #fff;
	box-shadow: 0 0 0 2px var(--gold);
}

.hcal__day.is-today small {
	color: var(--gold);
}

.converter h2 {
	font-size: 1.5rem;
}

.converter__row {
	padding: 16px 0;
	border-top: 1px solid var(--line);
}

.converter__row h3 {
	font: 800 .78rem var(--f-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--clay-2);
}

.converter__h {
	display: grid;
	grid-template-columns: .7fr 1.5fr 1fr;
	gap: 10px;
}

.converter__out {
	margin: 12px 0 0;
	font: 600 1.4rem var(--f-display);
	color: var(--text);
}

.months {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.month {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2px 14px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.month.is-now {
	border-color: var(--gold-2);
	box-shadow: 0 0 0 1px var(--gold-2);
}

.month__n {
	grid-row: span 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--gold);
	font-weight: 800;
}

.month__ar {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: 1.5rem;
	color: var(--clay-2);
}

.month__t {
	font: 600 1.15rem var(--f-display);
}

.month__m {
	font-size: .85rem;
	color: var(--muted);
	font-style: italic;
}

.month__d {
	grid-column: 2 / -1;
	font-size: .9rem;
	color: var(--muted);
	margin-top: 6px;
}

/* Events */
.events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.event {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 18px 24px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.event__date {
	display: grid;
	justify-items: center;
	padding: 10px;
	border-radius: 14px;
	background: var(--ink);
	color: #fff;
	line-height: 1.1;
}

.event__date b {
	font: 600 2rem var(--f-display);
	color: var(--gold);
}

.event__date span {
	font-size: .8rem;
	font-weight: 700;
}

.event__date small {
	font-size: .7rem;
	opacity: .7;
}

.event__body h3 {
	margin: 0 0 2px;
	font-size: 1.3rem;
}

.event__body p {
	margin: 0;
	color: var(--muted);
	font-size: .94rem;
}

.event__h {
	color: var(--clay-2) !important;
	font-weight: 700;
	font-size: .85rem !important;
	margin-bottom: 4px !important;
}

.event__in {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--gold-soft);
	font-weight: 800;
	font-size: .85rem;
	white-space: nowrap;
}

/* Qibla */
.qibla {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.qibla__dial {
	position: relative;
	width: 340px;
	height: 340px;
}

.qibla__rose {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, var(--card) 0 56%, var(--bg-2) 57% 100%);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	transition: transform .3s ease-out;
}

.qibla__rose i {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 50%;
	transform-origin: 50% 100%;
	transform: rotate(var(--a));
}

.qibla__rose i::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 1px;
	height: 8px;
	background: var(--muted);
	opacity: .5;
}

.qibla__rose i:nth-child(18n + 5)::before {
	height: 14px;
	width: 2px;
	opacity: 1;
	background: var(--text);
}

.qibla__rose>span {
	position: absolute;
	font-weight: 800;
	font-size: .95rem;
	color: var(--muted);
}

.qibla__n {
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--red) !important;
}

.qibla__s {
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
}

.qibla__e {
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
}

.qibla__w {
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
}

.qibla__needle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 46%;
	margin-left: -3px;
	transform-origin: 50% 0;
	transform: rotate(calc(var(--q) + 180deg));
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.qibla__needle::before {
	content: "";
	position: absolute;
	inset: 0 0 18% 0;
	border-radius: 3px;
	background: linear-gradient(var(--gold-2), var(--gold));
}

.qibla__kaaba {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%) rotate(180deg);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--gold);
	box-shadow: 0 6px 16px -4px rgb(0 0 0 / .5);
}

.qibla__dial::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px;
	border-radius: 50%;
	background: var(--ink);
	border: 3px solid var(--gold);
}

.qibla__phone {
	position: absolute;
	left: 50%;
	top: -14px;
	width: 0;
	height: 0;
	margin-left: -10px;
	border: 10px solid transparent;
	border-bottom: 16px solid var(--clay);
	border-top: 0;
}

.qibla.is-aligned .qibla__rose {
	box-shadow: 0 0 0 6px rgb(47 174 125 / .45), var(--shadow);
}

.qibla__deg {
	font: 500 3.4rem/1 var(--f-display);
	margin-bottom: 6px;
}

.qibla__deg span {
	font-size: 1.5rem;
	color: var(--muted);
}

.qibla__from {
	color: var(--muted);
}

.qibla__status {
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--bg-2);
	font-weight: 600;
}

.qibla__btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0;
}

.qibla__tips {
	color: var(--muted);
	font-size: .92rem;
	padding-left: 1.2em;
}

/* Zakat */
.zakat {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.zakat fieldset {
	margin: 0 0 18px;
	padding: 22px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--card);
}

.zakat legend {
	padding: 0 8px;
	font: 600 1.15rem var(--f-display);
}

.zakat legend small {
	font: 500 .8rem var(--f-ui);
	color: var(--muted);
}

.zakat__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.zakat__result {
	position: sticky;
	top: 130px;
	padding: 30px;
	border-radius: 24px;
	background: linear-gradient(160deg, #0b1730, #1f3566);
	color: #fff;
	box-shadow: var(--shadow-lg);
}

.zakat__k {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--gold);
	margin: 0;
}

.zakat__due {
	font: 500 3rem/1.1 var(--f-display);
	margin: 6px 0 18px;
	word-break: break-word;
}

.zakat__result dl {
	margin: 0 0 16px;
	display: grid;
	gap: 8px;
}

.zakat__result dl div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid rgb(255 255 255 / .12);
	padding-bottom: 8px;
}

.zakat__result dt {
	opacity: .75;
}

.zakat__result dd {
	margin: 0;
	font-weight: 700;
}

.zakat__msg {
	margin: 0 0 16px;
	opacity: .9;
	font-size: .95rem;
}

.zakat__hint {
	color: var(--muted);
	font-size: .9rem;
	margin: 0 0 12px;
}

/* Ramadan table extras & duas */
.ramtable__actions {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.field--inline input {
	min-width: 240px;
}

.print-head,
.print-foot {
	display: none;
}

.duas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.dua {
	padding: 24px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.dua h3 {
	font-size: 1.15rem;
}

.dua__ar {
	font-size: 1.6rem;
	line-height: 1.9;
	color: var(--clay-2);
	margin-bottom: 6px;
}

.dua__tr {
	color: var(--muted);
}

.dua p:last-child {
	margin: 0;
	font-size: .93rem;
}

/* Cities directory */
.country {
	margin-bottom: 44px;
}

.country__t {
	font-size: 1.9rem;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--line);
}

.country__regions {
	columns: 4 220px;
	column-gap: 28px;
}

.region {
	break-inside: avoid;
	margin-bottom: 22px;
}

.region h3 {
	font: 800 .78rem var(--f-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--clay-2);
	margin-bottom: 8px;
}

.region ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.region li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px dashed var(--line);
}

.region a {
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
}

.region a:hover {
	color: var(--link);
}

.region__ram {
	font-size: .75rem;
	color: var(--muted) !important;
	font-weight: 700 !important;
}

/* Contact */
.contact__cards {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.contact__cards a {
	display: grid;
	gap: 4px;
	padding: 26px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--text);
}

.contact__cards a:hover {
	border-color: var(--gold-2);
}

.contact__cards .ic {
	width: 28px;
	height: 28px;
	color: var(--clay);
	margin-bottom: 8px;
}

.contact__cards span {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 800;
	color: var(--muted);
}

.contact__cards b {
	font: 600 1.15rem var(--f-display);
	word-break: break-word;
}

/* Articles */
.article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
}

.prose--article {
	max-width: 760px;
}

.article-meta {
	font-size: .9rem;
	opacity: .85;
}

.article__aside {
	position: sticky;
	top: 130px;
	display: grid;
	gap: 20px;
}

.article__card {
	display: grid;
	justify-items: center;
	gap: 18px;
	padding: 24px;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--line);
}

.article__rel {
	display: grid;
	gap: 2px;
}

.article__rel a {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
}

.article__rel a:hover {
	color: var(--link);
}

.pager {
	margin-top: 30px;
	text-align: center;
}

.pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--text);
	margin: 2px;
}

.pager .current {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.sc-times {
	margin: 1.5em 0;
}

.sc-times__t {
	font-weight: 700;
}

/* Pricing shortcode */
.pricing {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.pricing__card {
	padding: 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.pricing__fields {
	display: grid;
	gap: 12px;
}

.pricing__out {
	margin: 16px 0 0;
	font-size: 1.1rem;
}

.pricing__out b {
	font-size: 1.6rem;
	color: var(--green);
}

.pricing__out s {
	color: var(--red);
}

/* Location dialog */
.locdlg {
	width: min(480px, calc(100vw - 24px));
	border: 0;
	border-radius: 24px;
	padding: 0;
	background: var(--card);
	color: var(--text);
	box-shadow: 0 40px 80px -20px rgb(0 0 0 / .5);
	overflow: visible;
}

.locdlg::backdrop {
	background: rgb(4 8 22 / .6);
	backdrop-filter: blur(4px);
}

.locdlg__in {
	display: grid;
	gap: 14px;
	padding: 26px;
}

.locdlg__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.locdlg__head h2 {
	margin: 0;
	font-size: 1.5rem;
}

.locdlg__x {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--bg-2);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.locdlg__now {
	margin: 0;
	color: var(--muted);
}

.locdlg__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--muted);
	font-size: .85rem;
}

.locdlg__or::before,
.locdlg__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.locdlg .citysearch {
	max-width: none;
	box-shadow: none;
	border: 1px solid var(--line);
}

.locdlg .citysearch__geo {
	display: none;
}

.locdlg__adv summary {
	cursor: pointer;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.locdlg__adv label {
	display: grid;
	gap: 6px;
	margin-top: 12px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--muted);
}

.locdlg__note {
	font-size: .8rem;
	color: var(--muted);
	margin: 10px 0 0;
}

/* Share */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}

.share__label {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-right: 4px;
	opacity: .8;
}

.share__btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}

.share__btn .ic {
	width: 19px;
	height: 19px;
}

.share__btn:hover {
	transform: translateY(-2px);
	color: #fff !important;
}

.share__btn--whatsapp:hover {
	background: #25d366;
	border-color: #25d366;
}

.share__btn--facebook:hover {
	background: #1877f2;
	border-color: #1877f2;
}

.share__btn--xlogo:hover {
	background: #000;
	border-color: #000;
}

.share__btn--telegram:hover {
	background: #229ed9;
	border-color: #229ed9;
}

.share__btn--copy:hover,
.share__btn--native:hover {
	background: var(--clay);
	border-color: var(--clay);
}

.share--sky {
	color: #fff;
}

.share--sky .share__btn {
	color: #fff;
	border-color: rgb(255 255 255 / .28);
	background: rgb(255 255 255 / .08);
	backdrop-filter: blur(6px);
}

.share--card .share__btn,
.share--mini .share__btn {
	color: var(--text);
	border-color: var(--line);
	background: var(--card);
}

.share--card .share__btn--whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}

.share--mini {
	margin-top: 0;
	padding: 12px 18px 16px;
	gap: 6px;
}

.share--mini .share__btn {
	width: 34px;
	height: 34px;
}

.share--mini .share__btn .ic {
	width: 16px;
	height: 16px;
}

.share__btn.is-copied {
	background: var(--green) !important;
	border-color: var(--green) !important;
	color: #fff !important;
}

.article-share {
	margin-top: 40px;
	padding: 22px 24px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.article-share p {
	margin: 0;
	font-weight: 600;
}

.post-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	transition: border-color .2s, transform .2s;
}

.post-card:hover {
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.post-card>a {
	flex: 1;
	border: 0 !important;
	background: none !important;
	transform: none !important;
}

/* Toast */
.toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	z-index: 80;
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-weight: 600;
	box-shadow: var(--shadow-lg);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
	max-width: calc(100vw - 32px);
}

.toast.is-on {
	opacity: 1;
	transform: translateX(-50%);
}


/* ==========================================================================
   Islamic resources: Qur'an, duas, kalimas, niyyat, names, greetings, masjids
   ========================================================================== */
.surah-ar {
	display: block;
	font-family: var(--f-ar);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.6;
	color: var(--gold);
	text-align: left;
}

.surah-meta {
	display: block;
	font-size: .95rem;
	opacity: .85;
}

.quran-wrap {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.quran-bar {
	position: sticky;
	top: 130px;
	display: grid;
	gap: 8px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.quran-bar .kicker {
	margin: 8px 0 2px;
}

.quran-bar__note {
	font-size: .78rem;
	color: var(--muted);
	margin: 0;
}

.tgl {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
}

.tgl input {
	width: 18px;
	height: 18px;
	accent-color: var(--ink-3);
}

.qsize {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.qsize button {
	flex: 1;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--bg-2);
	cursor: pointer;
	font-weight: 800;
	color: var(--text);
}

.surah-virtue {
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	background: var(--gold-soft);
	border: 1px solid rgb(185 138 53 / .3);
	margin-bottom: 26px;
}

.quran {
	--qsize: 0;
}

.quran__bism {
	font-family: var(--f-ar);
	font-size: calc(2rem + var(--qsize) * .25rem);
	text-align: center;
	color: var(--clay-2);
	margin: 0 0 18px;
}

.ayahs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ayah {
	position: relative;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
	scroll-margin-top: 160px;
	transition: background .3s;
	content-visibility: auto;
	contain-intrinsic-size: auto 260px;
}

.ayah.is-playing {
	background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.ayah__ar {
	font-family: var(--f-ar);
	font-size: calc(1.9rem + var(--qsize) * .25rem);
	line-height: 2.25;
	text-align: right;
	margin: 0 0 10px;
	color: var(--text);
}

.ayah__n {
	display: inline-block;
	font-size: .8em;
	color: var(--gold-2);
	cursor: pointer;
	padding: 0 .15em;
	border-radius: 8px;
}

.ayah__n:hover,
.ayah__n:focus-visible {
	background: var(--gold-soft);
}

.ayah__tr {
	font-style: italic;
	color: var(--clay-2);
	margin: 0 0 8px;
}

.ayah__ur {
	font-family: var(--f-ur);
	font-size: 1.25rem;
	line-height: 2.1;
	text-align: right;
	margin: 0 0 8px;
}

.ayah__hi {
	margin: 0 0 8px;
}

.ayah__en {
	margin: 0;
	color: var(--muted);
}

.ayah__ref {
	position: absolute;
	left: 0;
	top: 24px;
	font-size: .72rem;
	font-weight: 800;
	color: var(--muted);
	letter-spacing: .06em;
}

.quran.hide-tr .ayah__tr,
.quran.hide-ur .ayah__ur,
.quran.hide-hi .ayah__hi,
.quran.hide-en .ayah__en {
	display: none;
}

.surahs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.surahs a {
	display: grid;
	gap: 4px;
	height: 100%;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}

.surahs a:hover {
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.surahs__ar {
	font-family: var(--f-ar);
	font-size: 1.9rem;
	color: var(--clay-2);
	text-align: right;
	line-height: 1.5;
}

.surahs__t {
	font: 600 1.3rem var(--f-display);
}

.surahs__m {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.surahs__d {
	font-size: .92rem;
	color: var(--muted);
}

.duas-wrap {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.duas-toc {
	position: sticky;
	top: 130px;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	padding-right: 8px;
}

.duas-toc ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.duas-toc a {
	display: block;
	padding: 6px 0;
	color: var(--text);
	text-decoration: none;
	font-size: .92rem;
	border-bottom: 1px dashed var(--line);
}

.duas-toc a:hover {
	color: var(--link);
}

.duas-cat {
	font-size: 1.6rem;
	margin: 30px 0 14px;
}

.duas-cat:first-child {
	margin-top: 0;
}

.dua-card,
.kalima {
	padding: 26px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	margin-bottom: 16px;
	scroll-margin-top: 140px;
}

.dua-card:target {
	box-shadow: 0 0 0 2px var(--gold-2);
}

.dua-card h3 {
	font-size: 1.25rem;
}

.dua-card__ar,
.kalima__ar {
	font-family: var(--f-ar);
	font-size: 1.9rem;
	line-height: 2.1;
	text-align: right;
	color: var(--clay-2);
	margin: 0 0 10px;
}

.dua-card__tr,
.kalima__tr {
	font-style: italic;
	color: var(--text);
}

.dua-card__en,
.kalima__en {
	color: var(--muted);
}

.dua-card__note {
	font-size: .92rem;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bg-2);
}

.dua-card__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 6px 0 0;
	font-size: .85rem;
}

.dua-card__ref {
	margin-right: auto;
	font-weight: 700;
	color: var(--clay-2);
}

.kalimas {
	max-width: 920px;
}

.kalima {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
}

.kalima__n {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--gold);
	font: 600 1.5rem var(--f-display);
}

.kalima h2 {
	font-size: 1.4rem;
}

.kalima h2 small {
	display: block;
	font: 600 .85rem var(--f-ui);
	color: var(--muted);
	margin-top: 4px;
}

.langtabs--row {
	display: inline-flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.tt--niyat td.niyat-text {
	white-space: normal;
	min-width: 280px;
	line-height: 1.7;
}

.tt--niyat td[lang="ur"] {
	font-family: var(--f-ur);
	font-size: 1.15rem;
	line-height: 2.1;
}

.namesearch {
	margin-top: 22px;
}

.names-filters {
	display: grid;
	gap: 14px;
	margin-bottom: 18px;
}

.seg,
.letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seg button,
.letters button {
	min-width: 40px;
	height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card);
	cursor: pointer;
	font-weight: 700;
	color: var(--text);
}

.seg button[aria-pressed="true"],
.letters button[aria-pressed="true"] {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.names-count {
	color: var(--muted);
	font-weight: 700;
	font-size: .9rem;
}

.names {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.names a {
	display: grid;
	gap: 2px;
	height: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
}

.names a:hover {
	border-color: var(--gold-2);
}

.names__n {
	font: 600 1.12rem var(--f-display);
	display: flex;
	justify-content: space-between;
	gap: 8px;
	align-items: center;
}

.names__g {
	font: 800 .62rem var(--f-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	font-style: normal;
}

.names__g--m {
	background: rgb(31 53 102 / .1);
	color: var(--ink-3);
}

.names__g--f {
	background: rgb(190 124 104 / .15);
	color: var(--clay-2);
}

.names__m {
	font-size: .86rem;
	color: var(--muted);
}

.name-meaning {
	display: block;
	font: italic 500 clamp(1.4rem, 3vw, 2rem) var(--f-display);
	color: var(--gold-pale);
	margin-bottom: 6px;
}

.name-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 30px;
}

.name-facts div {
	padding: 18px;
	border-radius: var(--radius-sm);
	background: var(--card);
	border: 1px solid var(--line);
}

.name-facts span {
	display: block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.name-facts b {
	font: 600 1.15rem var(--f-display);
}

.greet {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 40px;
	align-items: start;
}

.greet__preview canvas {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 22px;
	box-shadow: var(--shadow-lg);
	display: block;
}

.greet__form {
	display: grid;
	gap: 14px;
	padding: 26px;
	border-radius: 22px;
	background: var(--card);
	border: 1px solid var(--line);
}

.greet__form h2 {
	margin: 0;
	font-size: 1.6rem;
}

.greet__designs {
	display: flex;
	gap: 10px;
}

.greet__designs button {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	border: 3px solid transparent;
	cursor: pointer;
}

.greet__designs button[aria-checked="true"] {
	border-color: var(--gold-2);
	box-shadow: 0 0 0 2px var(--card) inset;
}

.greet__designs [data-design="night"] {
	background: linear-gradient(#040918, #1b2d5c);
}

.greet__designs [data-design="emerald"] {
	background: linear-gradient(#06281f, #1d7a58);
}

.greet__designs [data-design="gold"] {
	background: linear-gradient(#fffaf0, #efd9a6);
}

.greet__designs [data-design="dusk"] {
	background: linear-gradient(#1d1d4a, #c45a4f);
}

.greet__btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.wishes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.wish {
	padding: 20px 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
	display: grid;
	gap: 10px;
}

.wish p {
	margin: 0;
	font-size: 1.05rem;
}

.wish[lang="ur"] p {
	font-family: var(--f-ur);
	font-size: 1.25rem;
	line-height: 2.1;
}

.wish__act {
	display: flex;
	gap: 16px;
	font-size: .88rem;
}

.greet-hub {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.greet-hub a {
	position: relative;
	display: grid;
	gap: 6px;
	padding: 28px;
	min-height: 220px;
	align-content: end;
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	background: radial-gradient(400px 200px at 90% 0%, rgb(217 178 95 / .35), transparent 70%), linear-gradient(150deg, #0b1730, #1f3566 60%, #4a2440);
	transition: transform .2s;
}

.greet-hub a:hover {
	transform: translateY(-3px);
}

.greet-hub__ar {
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--f-ar);
	font-size: 2rem;
	color: var(--gold);
}

.greet-hub__k {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-pale);
	opacity: .85;
}

.greet-hub__t {
	font: 500 1.6rem var(--f-display);
}

.greet-hub__go {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--gold);
}

.masjid-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 20px;
}

.masjid-filter .field {
	flex: 1 1 220px;
	max-width: 320px;
}

.masjid-list__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 99px;
	font-size: .72rem;
	font-weight: 700;
	background: var(--gold-soft);
	color: var(--text);
}

.masjid-form__times--two {
	grid-template-columns: 1fr 1fr;
}

.masjid-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.masjid-list a {
	display: grid;
	gap: 2px;
	padding: 18px;
	border-radius: var(--radius-sm);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
}

.masjid-list a:hover {
	border-color: var(--gold-2);
}

.masjid-list__n {
	font: 600 1.15rem var(--f-display);
}

.masjid-list__a {
	font-size: .85rem;
	color: var(--muted);
}

.masjid-list__t {
	font-size: .85rem;
	color: var(--muted);
	margin-top: 6px;
}

.masjid-list__t b {
	color: var(--text);
}

.pills-h a {
	font: 700 .8rem var(--f-ui);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 8px;
}

.empty-note {
	padding: 22px;
	border-radius: var(--radius);
	background: var(--gold-soft);
	font-weight: 600;
}

.masjid-form-wrap {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 40px;
	align-items: start;
}

.masjid-form {
	display: grid;
	gap: 14px;
	padding: 26px;
	border-radius: 22px;
	background: var(--card);
	border: 1px solid var(--line);
}

.masjid-form textarea {
	font: 500 1rem var(--f-ui);
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	width: 100%;
}

.masjid-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.masjid-form__times {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px;
	margin: 0;
}

.masjid-form__times legend {
	font-weight: 800;
	padding: 0 6px;
}

.hp {
	position: absolute !important;
	left: -9999px;
}

.form-msg {
	padding: 14px 18px;
	border-radius: 12px;
	font-weight: 600;
}

.form-msg--ok {
	background: var(--green-soft);
	color: var(--green);
}

.form-msg--err {
	background: rgb(194 65 59 / .1);
	color: var(--red);
}

.masjid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
	margin-bottom: 26px;
}

.masjid__card {
	display: grid;
	gap: 12px;
	padding: 22px;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--line);
}

.masjid__card p {
	margin: 0;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.masjid__card .ic {
	color: var(--clay);
	flex: none;
	margin-top: 3px;
}

.resources {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.resources a {
	display: grid;
	gap: 4px;
	height: 100%;
	padding: 20px;
	border-radius: var(--radius-sm);
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}

.resources a:hover {
	border-color: var(--gold-2);
	transform: translateY(-2px);
}

.resources__ar {
	font-family: var(--f-ar);
	font-size: 1.5rem;
	color: var(--clay-2);
	line-height: 1.4;
}

.resources__t {
	font: 600 1.12rem var(--f-display);
}

.resources__d {
	font-size: .86rem;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.names {
		grid-template-columns: repeat(3, 1fr);
	}

	.resources {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 880px) {

	.quran-wrap,
	.duas-wrap,
	.greet,
	.masjid-form-wrap,
	.masjid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.quran-bar {
		position: static;
		grid-template-columns: 1fr 1fr;
	}

	.quran-bar .kicker,
	.quran-bar .btn,
	.quran-bar__note,
	.qsize {
		grid-column: 1 / -1;
	}

	.duas-toc {
		display: none;
	}

	.surahs,
	.greet-hub,
	.masjid-list,
	.wishes {
		grid-template-columns: 1fr;
	}

	.names {
		grid-template-columns: repeat(2, 1fr);
	}

	.name-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.ayah__ref {
		position: static;
		display: block;
		margin-top: 6px;
	}
}

@media (max-width: 560px) {
	.masjid-form__times {
		grid-template-columns: 1fr 1fr;
	}

	.resources {
		grid-template-columns: 1fr 1fr;
	}

	.ayah__ar {
		font-size: calc(1.6rem + var(--qsize) * .25rem);
	}
}


/* Sponsor + add-masjid page */
.sponsor {
	display: inline-grid;
	gap: 2px;
	margin: 4px 0 18px;
	padding: 10px 16px;
	border-radius: 14px;
	border: 1px solid rgb(217 178 95 / .4);
	text-decoration: none;
}

.sponsor:hover {
	background: rgb(217 178 95 / .08);
}

.sponsor__k {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .6);
}

.sponsor__n {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 1.1rem var(--f-display);
	color: var(--gold);
}

.masjid-form-wrap--solo {
	grid-template-columns: 1fr;
	max-width: 760px;
	gap: 24px;
}

.add-steps {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding-left: 1.2em;
}

.invite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--gold-soft);
	border: 1px solid rgb(185 138 53 / .3);
	margin: 0 0 18px;
}

.invite p {
	flex: 1 1 100%;
	margin: 0 0 4px;
	font-size: .98rem;
}

.prose .masjid-form .field span {
	font-size: .85rem;
}

/* ---------- Footer ---------- */
.site-foot {
	background: #060c1d;
	color: rgb(255 255 255 / .75);
	padding: 70px 0 30px;
	font-size: .94rem;
}

.site-foot a {
	color: rgb(255 255 255 / .82);
	text-decoration: none;
}

.site-foot a:hover {
	color: var(--gold);
}

.site-foot p a {
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / .35);
	text-underline-offset: 3px;
}

.site-foot__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgb(255 255 255 / .08);
}

.site-foot__brand p {
	margin: 16px 0;
	max-width: 340px;
}

.site-foot__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.site-foot__contact li {
	display: flex;
	gap: 10px;
	align-items: center;
}

.site-foot__contact .ic {
	color: var(--gold);
}

.site-foot__col h2 {
	font: 800 .76rem var(--f-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

.site-foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.site-foot__bottom {
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: .85rem;
}

.site-foot__bottom p {
	margin: 0;
}

.site-foot__credit {
	max-width: 560px;
	color: rgb(255 255 255 / .72);
}

.tabbar {
	display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
	.nav__list span {
		display: none;
	}

	.nav__list a {
		padding: 10px;
	}
}

@media (max-width: 1100px) {
	.times {
		grid-template-columns: repeat(3, 1fr);
	}

	.facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.citygrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.months {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 880px) {
	:root {
		--gutter: 16px;
		--head-h: 58px;
	}

	.nav {
		display: none;
	}

	.menu-btn {
		display: grid;
		place-items: center;
	}

	.dateline {
		font-size: .8rem;
	}

	.dateline__in {
		flex-wrap: wrap;
		gap: 4px 10px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.dateline__sep {
		display: none;
	}

	.dateline__loc {
		margin-left: 0;
	}

	.dateline__moon {
		display: none;
	}

	.dateline__date {
		flex-basis: 100%;
	}

	.hero,
	.pagehero {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hero {
		min-height: 0;
	}

	.hero__orb {
		order: 2;
	}

	.pagehero__orb {
		justify-self: center;
	}

	.sky__in {
		padding-top: 28px;
		padding-bottom: 96px;
	}

	.sky__moon {
		width: 64px;
		--mx: 5%;
		--my: 64px;
		opacity: calc(var(--moon, 0) * .8);
	}

	.sky__skyline {
		height: 76px;
	}

	.dayarc {
		margin: 10px -8px -36px;
	}

	.dayarc__name {
		font-size: 22px;
	}

	.dayarc__time {
		font-size: 20px;
	}

	.hero__fast {
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		gap: 6px 14px;
		padding: 12px 14px;
	}

	.hero__fast strong {
		font-size: 1rem;
	}

	.section {
		padding: 56px 0;
	}

	.tools,
	.guides,
	.posts,
	.duas,
	.contact__cards {
		grid-template-columns: 1fr;
	}

	.citygrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.esiren__in {
		grid-template-columns: 1fr;
	}

	.esiren__art {
		height: 240px;
	}

	.tasbeeh,
	.qibla,
	.zakat,
	.hcal-wrap,
	.article,
	.guide__wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tasbeeh__dialwrap,
	.qibla__dial {
		justify-self: center;
	}

	.guide__side,
	.zakat__result,
	.article__aside {
		position: static;
	}

	.langtabs {
		grid-template-columns: repeat(4, 1fr);
	}

	.langtabs button {
		text-align: center;
		padding: 10px 6px;
	}

	.guide__others {
		display: none;
	}

	.event {
		grid-template-columns: 84px 1fr;
		gap: 16px;
		padding: 16px;
	}

	.event__in {
		grid-column: 2;
		justify-self: start;
	}

	.site-foot__top {
		grid-template-columns: 1fr 1fr;
	}

	.site-foot__brand {
		grid-column: 1 / -1;
	}

	.pricing {
		grid-template-columns: 1fr;
	}

	.tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		background: rgb(7 14 32 / .94);
		backdrop-filter: blur(14px);
		border-top: 1px solid rgb(255 255 255 / .08);
	}

	.tabbar a {
		display: grid;
		justify-items: center;
		gap: 2px;
		padding: 6px 0;
		color: rgb(255 255 255 / .7);
		text-decoration: none;
		font-size: .7rem;
		font-weight: 700;
		border-radius: 12px;
	}

	.tabbar a .ic {
		width: 22px;
		height: 22px;
	}

	.tabbar a[aria-current] {
		color: var(--gold);
		background: rgb(255 255 255 / .06);
	}

	body {
		padding-bottom: calc(66px + env(safe-area-inset-bottom));
	}

	.toast {
		bottom: 96px;
	}
}

@media (max-width: 560px) {
	.times {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.times__item {
		padding: 16px 14px;
	}

	.times__t {
		font-size: 1.25rem;
	}

	.facts,
	.months,
	.zakat__grid,
	.keydates {
		grid-template-columns: 1fr;
	}

	.citygrid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.citygrid a {
		padding: 14px;
	}

	.citygrid__t {
		display: none;
	}

	.countdown li {
		width: 86px;
		height: 86px;
	}

	.countdown b {
		font-size: 2rem;
		margin-top: 12px;
	}

	.countdown span {
		margin-bottom: 14px;
	}

	.orb-slot--lg {
		--orb: 260px;
	}

	.tasbeeh__dial {
		width: 290px;
		height: 290px;
	}

	.tasbeeh__beads i {
		transform: rotate(calc(var(--i) * 10.909deg - 90deg)) translate(124px);
		width: 14px;
		height: 14px;
		margin: -7px;
	}

	.qibla__dial {
		width: 290px;
		height: 290px;
	}

	.citysearch__geo span {
		display: none;
	}

	.citysearch__geo {
		width: 44px;
		padding: 0;
	}

	.wazaif {
		padding: 20px;
	}

	.converter__h {
		grid-template-columns: 1fr 1fr;
	}

	.converter__h label:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.split-head {
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- Print (timetables) ---------- */
@media print {
	@page {
		margin: 12mm;
	}

	body {
		background: #fff;
		color: #000;
		padding: 0;
		font-size: 11pt;
	}

	.share,
	.article-share,
	.orb.is-floating,
	.site-head,
	.site-foot,
	.tabbar,
	.sky,
	.esiren,
	.esiren-inline,
	.noprint,
	.split-head,
	.section--tint,
	.faq,
	.duas,
	.method-note,
	.hadith,
	.ayat,
	.ramadan-band,
	.drawer,
	.locdlg,
	.toast,
	.section:not(.ramtable):not(:has(.tt)) {
		display: none !important;
	}

	.section {
		padding: 0;
	}

	.print-head,
	.print-foot {
		display: block !important;
		text-align: center;
	}

	.print-head h2 {
		font-size: 18pt;
		margin: 0;
	}

	.print-head__masjid {
		font: 600 22pt var(--f-display);
		margin: 0 0 4pt;
	}

	.table-scroll {
		border: 0;
		overflow: visible;
	}

	.tt {
		font-size: 10pt;
	}

	.tt th,
	.tt td {
		padding: 4pt 6pt;
		border: 1px solid #999;
	}

	.tt thead th {
		background: #eee !important;
		color: #000;
		position: static;
	}

	.tt tr.is-today {
		box-shadow: none;
	}

	.print-foot {
		margin-top: 10pt;
		font-size: 9pt;
	}
}