.header-logo img,
.about-logo img {
	width: 120px;
}

.discount-wrapp .logo img {
	width: 50px;
}
/* Footer newsletter */
.footer-newsletter .widget_title {
	font-size: 18px;
	margin-bottom: 15px;
}

.footer-newsletter .form-control {
	height: 50px;
	border-radius: 6px;
	margin-bottom: 12px;
}

/* Tag-style month switcher on the memorization plan page */
.month-tabs .tagcloud a {
	display: inline-block;
	margin: 0 6px 8px 0;
}

/* Surah cards */
.surah-list .box-icon {
	position: relative;
}

.surah-list .surah-number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
}

/* ---------- Tafseer ---------- */

.tafseer-card {
	background: var(--smoke-color, #f7f5ef);
	border-radius: 12px;
	padding: 35px 30px;
	height: 100%;
	transition: .4s ease;
}

.tafseer-card:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
	transform: translateY(-5px);
}

.tafseer-card .box-icon {
	width: 70px;
	margin-bottom: 20px;
}

.tafseer-card .box-icon img {
	width: 100%;
}

.tafseer-card .box-title {
	font-size: 22px;
	margin-bottom: 12px;
}

.tafseer-card .box-author,
.tafseer-card .box-text {
	font-size: 15px;
	margin-bottom: 8px;
}

.tafseer-card .box-author i,
.tafseer-card .box-text i {
	margin-inline-end: 8px;
	color: var(--theme-color);
}

.tafseer-card .simple-btn {
	margin-top: 15px;
	display: inline-block;
}

.tafseer-search .form-control {
	height: 56px;
}

.ayah-result {
	background: var(--smoke-color, #f7f5ef);
	border-radius: 10px;
	padding: 25px 28px;
	margin-bottom: 22px;
}

.ayah-result-head {
	margin-bottom: 12px;
	font-weight: 600;
}

.results-count {
	display: inline-block;
	min-width: 30px;
	padding: 0 8px;
	line-height: 26px;
	text-align: center;
	border-radius: 13px;
	background: var(--theme-color);
	color: #fff;
	font-size: 14px;
	margin-inline-start: 8px;
}

.page-img.style1 img {
	height: 500px;
    width: auto;
}

.scroll-top {
	right: 30px;
	left: initial;
}

.service-box2 .box-info .box-icon {
	display: none !important;
}
/* =====================================================
   Image sizing
   -----------------------------------------------------
   Uploads arrive at whatever size the editor had to hand - the blog images
   alone run 454x254, 650x362 and 368x318 - so anything that lets the file
   decide its own box gives ragged grids and stretched pictures. Every image
   slot below is given a fixed aspect ratio and cover-cropped, so the layout
   holds no matter what is uploaded.
   ===================================================== */

:root {
	--ratio-hero: 16 / 9;      /* detail page headers */
	--ratio-card: 3 / 2;       /* listing cards */
	--ratio-tile: 4 / 3;       /* service and plan tiles */
	--ratio-thumb: 1 / 1;      /* sidebar thumbnails */
}

.blog-img img,
.page-img img,
.blog-block .blog-img img,
.service-box2 .box-img img,
.service-block .box-img img,
.recent-post .media-img img,
.contact-image img,
.feature-image img,
.img-box5 .img1 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- detail page headers --- */

.blog-details .blog-img,
.page-img.style1 {
	aspect-ratio: var(--ratio-hero);
	overflow: hidden;
	border-radius: 10px;
}

/* --- listing cards --- */

.th-blog .blog-img,
.blog-block .blog-img {
	aspect-ratio: var(--ratio-card);
	overflow: hidden;
	border-radius: 10px;
}

.blog-block.style2 .blog-img {
	aspect-ratio: var(--ratio-tile);
}

/* --- service and plan tiles --- */

.service-box2 .box-img {
	aspect-ratio: var(--ratio-tile);
	overflow: hidden;
}

.service-block .box-img {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

/* the home slider used to pin this to a fixed 550px regardless of the frame */
.service-block .box-img img {
	height: 100% !important;
}

/* --- sidebar thumbnails --- */

.recent-post .media-img {
	/* the theme pins these to 113x103 in one sidebar and leaves them loose in the
	   other, so the size is stated outright rather than derived */
	width: 90px;
	height: 90px;
	min-width: 90px;
	flex: 0 0 90px;
	overflow: hidden;
	border-radius: 8px;
}

/* --- odds and ends --- */

.contact-image {
	aspect-ratio: var(--ratio-card);
	overflow: hidden;
	border-radius: 10px;
}

.testi-block .box-author img,
.comment-avater img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
}

/* Logos must never be cropped - they are set, not photographic */
.header-logo img,
.mobile-logo img,
.about-logo img,
.discount-wrapp .logo img {
	object-fit: contain;
	height: auto;
}

/* Small uploads stretched across a wide hero look soft; letting them sit on a
   tinted plate is kinder than scaling them past their own resolution. */
.blog-details .blog-img,
.page-img.style1 {
	background: var(--smoke-color, #f2f0ea);
}


.blog-details .blog-img, .page-img.style1 {
	background: transparent !important;
}
/* ---------------------------------------------------------------- accounts */

/* Country dial-code picker. The control is one bordered box holding a flag
   button and the number input, so it reads as a single field rather than two. */
.phone-field {
	position: relative;
	display: flex;
	align-items: stretch;
	border: 1px solid #e0dbd0;
	border-radius: 8px;
	background: #fff;
	overflow: visible;
}

.phone-field input[name="phone"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font: inherit;
	/* the number is dialled left to right whatever the page direction */
	direction: ltr;
	text-align: start;
}

.phone-field input[name="phone"]:focus {
	outline: none;
}

.phone-flag {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: #f7f5ef;
	padding: 0 12px;
	cursor: pointer;
	font: inherit;
	color: #26302c;
	border-inline-end: 1px solid #e0dbd0;
	border-start-start-radius: 8px;
	border-end-start-radius: 8px;
}

.phone-flag-glyph {
	font-size: 18px;
	line-height: 1;
}

.phone-flag-dial {
	direction: ltr;
	font-size: 14px;
	color: #4e4e4e;
}

.phone-menu {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	inset-inline-start: 0;
	width: min(320px, 100%);
	background: #fff;
	border: 1px solid #e0dbd0;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.phone-search {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #eee8db;
	padding: 11px 14px;
	font: inherit;
	border-radius: 8px 8px 0 0;
}

.phone-search:focus {
	outline: none;
}

.phone-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	max-height: 260px;
	overflow-y: auto;
}

.phone-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	cursor: pointer;
}

.phone-list li:hover {
	background: #f3f7f5;
}

.phone-list-flag {
	font-size: 17px;
	line-height: 1;
}

.phone-list-name {
	flex: 1 1 auto;
}

.phone-list-dial {
	direction: ltr;
	color: #8a8578;
	font-size: 14px;
}

/* Account pages */
.account-card {
	background: #fff;
	border: 1px solid #eee8db;
	border-radius: 12px;
	padding: 28px;
}

.account-stat {
	background: #f7f5ef;
	border-radius: 10px;
	padding: 18px 20px;
}

.account-stat strong {
	display: block;
	font-size: 26px;
	color: var(--theme-color, #004D40);
}

/* the unverified banner has to be impossible to miss - it is the reason the
   rest of the account is out of reach */
.verify-notice {
	background: #fff8e6;
	border: 1px solid #f0dfae;
	border-radius: 10px;
	padding: 20px 24px;
}

/* ------------------------------------------------------------- plan pages */

.rest-days {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rest-day input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.rest-day span {
	display: block;
	padding: 9px 16px;
	border: 1px solid #e0dbd0;
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
}

/* checked state is drawn on the label, since the box itself is hidden */
.rest-day input:checked + span {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.rest-day input:focus-visible + span {
	outline: 2px solid var(--theme-color2, #FFD54F);
	outline-offset: 2px;
}

.plan-bar {
	height: 12px;
	border-radius: 999px;
	background: #eee8db;
	overflow: hidden;
}

.plan-bar span {
	display: block;
	height: 100%;
	background: var(--theme-color, #004D40);
	border-radius: 999px;
	transition: width .4s ease;
}

.account-stat.is-late strong {
	color: #b4432f;
}

.plan-late {
	background: #fdf1ee;
	border: 1px solid #f0c9bf;
	border-radius: 10px;
	padding: 18px 22px;
}

.plan-ontrack {
	background: #f0f7f3;
	border: 1px solid #c6e2d3;
	border-radius: 10px;
	padding: 18px 22px;
}

.plan-days {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plan-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	padding: 10px 6px;
	border-radius: 8px;
	border: 1px solid #e0dbd0;
	text-align: center;
	line-height: 1.3;
}

.plan-day small {
	color: #8a8578;
	direction: ltr;
}

.plan-day.is-done {
	background: #f0f7f3;
	border-color: #c6e2d3;
}

/* the one day that is actually open reads loudest */
.plan-day.is-open {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.plan-day.is-open small {
	color: rgba(255, 255, 255, .75);
}

.plan-day.is-locked {
	background: #f7f5ef;
	color: #b0aa9d;
	cursor: not-allowed;
}

.th-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* --------------------------------------------------------- daily portion */

.portion.is-done {
	border-color: #c6e2d3;
	background: #fbfdfc;
}

.portion-tick {
	white-space: nowrap;
}

.portion-tick .tick-mark:not(:empty) {
	margin-inline-end: 6px;
}

.portion-audio audio {
	display: block;
}

.ayah-block {
	padding: 16px 0;
	border-bottom: 1px solid #f1ece1;
}

.ayah-block:last-child {
	border-bottom: 0;
}

.ayah-text {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 2.2;
	color: #26302c;
	/* verses are always right to left whatever the interface language */
	direction: rtl;
	text-align: right;
}

/* the verse number sits in a roundel the way it does in a printed mushaf */
.ayah-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	margin-inline-start: 6px;
	padding: 0 6px;
	border-radius: 50%;
	border: 1px solid var(--theme-color2, #FFD54F);
	color: var(--theme-color, #004D40);
	font-size: 14px;
	vertical-align: middle;
}

.ayah-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: #8a8578;
	font-size: 14px;
}

.ayah-play,
.ayah-tafseer-toggle {
	border: 1px solid #e0dbd0;
	background: #fff;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	color: #4e4e4e;
	cursor: pointer;
}

.ayah-play:hover,
.ayah-tafseer-toggle:hover,
.ayah-tafseer-toggle.is-open {
	border-color: var(--theme-color, #004D40);
	color: var(--theme-color, #004D40);
}

.ayah-tafseer {
	margin-top: 10px;
	padding: 14px 16px;
	background: #f7f5ef;
	border-radius: 8px;
	line-height: 2;
	direction: rtl;
	text-align: right;
}

.plan-paused {
	background: #fff8e6;
	border: 1px solid #f0dfae;
	border-radius: 10px;
	padding: 18px 22px;
}

/* the streak is the one number meant to be felt rather than read */
.account-stat.is-streak strong {
	color: #c8761f;
}

/* ------------------------------------------------------------- join button */

/* The header's call to action. Built on logical properties throughout so the
   single rule works in both directions - the icon leads the label in Arabic and
   in English without a mirrored copy of the stylesheet. */
.join-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, #00695C 0%, #004D40 100%);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid rgba(255, 213, 79, .35);
	box-shadow: 0 6px 18px rgba(0, 77, 64, .28);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.join-btn:hover,
.join-btn:focus {
	color: #fff;
	background: linear-gradient(135deg, #00796B 0%, #005A4B 100%);
	box-shadow: 0 10px 24px rgba(0, 77, 64, .36);
	transform: translateY(-2px);
}

.join-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 77, 64, .3);
}

.join-btn:focus-visible {
	outline: 2px solid var(--theme-color2, #FFD54F);
	outline-offset: 3px;
}

/* the icon sits in its own disc so the button reads as a control, not a link */
.join-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 213, 79, .18);
	color: var(--theme-color2, #FFD54F);
	font-size: 13px;
}

.join-btn-block {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 14px;
}

/* inside the slide-out menu the surrounding li styling would fight it */
.join-btn-li,
.join-btn-li:hover {
	background: none !important;
	border: 0 !important;
	padding-inline: 0 !important;
}

@media (max-width: 1399px) {
	.join-btn {
		padding: 10px 18px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.join-btn {
		transition: none;
	}
	.join-btn:hover,
	.join-btn:focus {
		transform: none;
	}
}

/* The slide-out menu styles its links with `.th-mobile-menu ul li a`, which
   outweighs a lone `.join-btn` and repaints the label in the body colour. Match
   its shape to win, rather than reaching for !important. */
.th-mobile-menu ul li a.join-btn,
.th-mobile-menu ul li a.join-btn:hover,
.th-mobile-menu ul li a.join-btn:focus {
	color: #fff;
}

.th-mobile-menu ul li a.join-btn .join-btn-icon {
	color: var(--theme-color2, #FFD54F);
}

/* ------------------------------------------------- daily portion, tabbed */

.portion-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

/* Without javascript there are no tabs to press, so the strip is not shown and
   every panel renders in turn. The flag is set by the script on load. */
.portion-tabs:not([data-enhanced]) .portion-tablist {
	display: none;
}

.portion-tabs:not([data-enhanced]) .portion-panel {
	margin-bottom: 28px;
}

.portion-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e0dbd0;
	background: #fff;
	border-radius: 999px;
	padding: 11px 22px;
	font-weight: 600;
	color: #4e4e4e;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.portion-tab small {
	color: #a9a396;
	font-weight: 400;
}

.portion-tab:hover {
	border-color: var(--theme-color, #004D40);
	color: var(--theme-color, #004D40);
}

.portion-tab.is-active {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.portion-tab.is-active small {
	color: rgba(255, 255, 255, .7);
}

.portion-tab-check:not(:empty) {
	color: #2e9e6b;
	font-weight: 700;
}

.portion-tab.is-active .portion-tab-check:not(:empty) {
	color: var(--theme-color2, #FFD54F);
}

.portion-panel {
	background: #fff;
	border: 1px solid #eee8db;
	border-radius: 12px;
	padding: 26px;
}

.portion-tabs[data-enhanced] .portion-panel {
	display: none;
}

.portion-tabs[data-enhanced] .portion-panel.is-active {
	display: block;
}

.portion-panel.is-done {
	border-color: #c6e2d3;
}

.portion-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

/* ----------------------------------------------------------- the toolbar */

.portion-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #f7f5ef;
	border-radius: 10px;
	margin-bottom: 16px;
}

.portion-range,
.portion-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.portion-range label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #6b6558;
	margin: 0;
}

.portion-range select {
	border: 1px solid #e0dbd0;
	border-radius: 6px;
	padding: 6px 10px;
	background: #fff;
	font: inherit;
	direction: ltr;
}

.portion-chip {
	border: 1px solid #e0dbd0;
	background: #fff;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 14px;
	color: #4e4e4e;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease;
}

.portion-chip:hover {
	border-color: var(--theme-color, #004D40);
	color: var(--theme-color, #004D40);
}

.portion-chip.is-primary {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.portion-chip.is-primary:hover {
	color: #fff;
	opacity: .92;
}

.portion-count {
	font-size: 14px;
	color: var(--theme-color, #004D40);
	font-weight: 600;
}

.portion-audio {
	margin-bottom: 16px;
}

.portion-audio audio {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------- the verse flow */

/* The verses run on as one body of text, the way a page of the mushaf reads,
   rather than each sitting in its own row. */
.ayah-flow {
	direction: rtl;
	text-align: justify;
	font-size: 26px;
	line-height: 2.4;
	color: #26302c;
	padding: 22px 24px;
	background: #fdfcf8;
	border: 1px solid #efe9dc;
	border-radius: 10px;
}

.ayah-flow .ayah {
	cursor: pointer;
	border-radius: 6px;
	padding: 2px 1px;
	transition: background .14s ease;
}

.ayah-flow .ayah:hover {
	background: #f0f7f3;
}

.ayah-flow .ayah.is-selected {
	background: #dff0e7;
	box-shadow: inset 0 -2px 0 var(--theme-color, #004D40);
}

.ayah-flow .ayah.is-playing {
	background: #fff3cd;
	box-shadow: inset 0 -2px 0 #c8761f;
}

.ayah-flow .ayah:focus-visible {
	outline: 2px solid var(--theme-color2, #FFD54F);
	outline-offset: 2px;
}

.ayah-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	margin: 0 4px;
	padding: 0 5px;
	border-radius: 50%;
	border: 1px solid var(--theme-color2, #FFD54F);
	color: var(--theme-color, #004D40);
	font-size: 13px;
	line-height: 1;
	vertical-align: middle;
}

/* ---------------------------------------------------- the tafseer panel */

.tafseer-panel {
	margin-top: 18px;
	padding: 20px 22px;
	background: #f7f5ef;
	border-radius: 10px;
}

/* enhanced, it opens on demand; unenhanced it is simply always there */
.portion-tabs[data-enhanced] .tafseer-panel {
	display: none;
}

.portion-tabs[data-enhanced] .tafseer-panel.is-open {
	display: block;
}

.tafseer-panel-title {
	margin-bottom: 14px;
	color: var(--theme-color, #004D40);
}

.tafseer-panel-title small {
	color: #8a8578;
	font-weight: 400;
}

.tafseer-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eae4d6;
	direction: rtl;
	text-align: right;
}

.tafseer-item:last-child {
	border-bottom: 0;
}

.tafseer-item p {
	margin: 0;
	line-height: 2;
}

.tafseer-item-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--theme-color, #004D40);
	color: #fff;
	font-size: 13px;
}

@media (max-width: 767px) {
	.ayah-flow {
		font-size: 22px;
		line-height: 2.2;
		padding: 16px;
	}

	.portion-toolbar {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------- plan hero */

.plan-hero {
	background: linear-gradient(135deg, #00695C 0%, #003B31 100%);
	border-radius: 16px;
	padding: 28px 30px;
	color: #fff;
	margin-bottom: 24px;
}

.plan-hero.is-late { background: linear-gradient(135deg, #8c4a3b 0%, #5c2c22 100%); }
.plan-hero.is-paused { background: linear-gradient(135deg, #8a7434 0%, #5c4c1f 100%); }

.plan-hero h4 { color: #fff; }

.plan-hero-kicker {
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--theme-color2, #FFD54F);
	margin-bottom: 4px;
}

.plan-hero-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.plan-hero-sub { color: rgba(255, 255, 255, .78); }

/* The percentage as a ring. conic-gradient means no svg and no script - the
   number on --pct is the whole of it. */
.plan-ring {
	flex: 0 0 auto;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--theme-color2, #FFD54F) calc(var(--pct) * 1%), rgba(255, 255, 255, .18) 0);
}

.plan-ring span {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	display: grid;
	place-items: center;
	font-size: 21px;
	font-weight: 700;
}

.plan-ring small { font-size: 12px; }

.plan-cheer {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .92);
	font-size: 16px;
	line-height: 1.9;
}

/* the single action, unmistakable */
.plan-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 14px 26px;
	border-radius: 12px;
	background: var(--theme-color2, #FFD54F);
	color: #26302c;
	font-size: 15px;
	transition: transform .18s ease, box-shadow .18s ease;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.plan-cta:hover {
	color: #26302c;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.plan-cta strong { display: block; }
.plan-cta small { color: #5c5648; }

.plan-cta-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .12);
	font-size: 15px;
}

.plan-hero-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 14px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.plan-hero-facts strong { display: block; font-size: 19px; }
.plan-hero-facts span { color: rgba(255, 255, 255, .7); font-size: 13px; }
.plan-hero-facts .is-late strong { color: #ffb4a2; }

.plan-hero-link {
	display: inline-block;
	margin-top: 18px;
	color: var(--theme-color2, #FFD54F);
}

.plan-hero-link:hover { color: #fff; }

/* ---------------------------------------------------------- the timeline */

.plan-timeline {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.plan-date { flex: 0 0 auto; }
.plan-date.is-end { text-align: end; }

.plan-date-label {
	display: block;
	font-size: 13px;
	color: #8a8578;
	margin-bottom: 2px;
}

.plan-date strong { display: block; font-size: 17px; color: #26302c; }
.plan-date small { color: #8a8578; font-size: 12px; }

.plan-date-line {
	flex: 1 1 120px;
	height: 6px;
	border-radius: 999px;
	background: #eee8db;
	overflow: hidden;
	min-width: 80px;
}

.plan-date-fill {
	display: block;
	height: 100%;
	background: var(--theme-color, #004D40);
	border-radius: 999px;
}

/* ------------------------------------------------------------- the months */

.plan-months {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.plan-month {
	min-width: 96px;
	border: 1px solid #e0dbd0;
	background: #fff;
	border-radius: 10px;
	padding: 10px 14px;
	text-align: center;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}

.plan-month:hover { border-color: var(--theme-color, #004D40); }

.plan-month.is-active {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.plan-month.is-active small { color: rgba(255, 255, 255, .75); }

/* the month holding today keeps a marker even when another one is open */
.plan-month.is-current:not(.is-active) {
	border-color: var(--theme-color2, #FFD54F);
	box-shadow: 0 0 0 2px rgba(255, 213, 79, .28);
}

.plan-month.is-locked { opacity: .55; }

.plan-month-name { display: block; font-weight: 600; margin-bottom: 6px; }
.plan-month small { font-size: 12px; color: #8a8578; }

.plan-month-bar {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: #eee8db;
	overflow: hidden;
	margin-bottom: 5px;
}

.plan-month-bar span {
	display: block;
	height: 100%;
	background: var(--theme-color2, #FFD54F);
}

#plan-days-wrap.is-loading { opacity: .45; }

/* --------------------------------------------------------------- the days */

.plan-days {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
	gap: 10px;
}

.plan-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 8px;
	border-radius: 10px;
	border: 1px solid #e0dbd0;
	text-align: center;
	line-height: 1.35;
}

.plan-day-num { font-size: 19px; font-weight: 700; }
.plan-day-date { font-size: 12px; color: #8a8578; direction: ltr; }
.plan-day-state { font-size: 12px; }

.plan-day.is-done {
	background: #f0f7f3;
	border-color: #c6e2d3;
	color: #2e6a52;
}

.plan-day.is-done:hover { border-color: #2e9e6b; }

/* The one open day is the button on this page, so it is coloured, lifted and
   labelled with what pressing it does - a bare number teaches nobody. */
.plan-day.is-current {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 77, 64, .3);
	transform: translateY(-2px);
}

.plan-day.is-current .plan-day-date { color: rgba(255, 255, 255, .72); }

.plan-day.is-current .plan-day-state {
	background: var(--theme-color2, #FFD54F);
	color: #26302c;
	border-radius: 999px;
	padding: 2px 10px;
	margin-top: 3px;
	font-weight: 600;
}

.plan-day.is-current:hover {
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 77, 64, .36);
}

/* today's portion is done and the next one is not a punishment - amber, not grey */
.plan-day.is-waiting {
	background: #fff8e6;
	border-color: #f0dfae;
	color: #8a7434;
	cursor: default;
}

.plan-day.is-locked {
	background: #f7f5ef;
	color: #b0aa9d;
	cursor: not-allowed;
}

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

.plan-history li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f1ece1;
}

.plan-history li:last-child { border-bottom: 0; }
.plan-history li span:first-child { flex: 1 1 auto; }

/* ----------------------------------------------------- dialogs and toasts */

.ui-dialog {
	border: 0;
	border-radius: 14px;
	padding: 0;
	max-width: 420px;
	width: calc(100% - 32px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.ui-dialog::backdrop {
	background: rgba(18, 24, 22, .55);
	backdrop-filter: blur(2px);
}

.ui-dialog-inner { padding: 30px 28px 24px; text-align: center; }

.ui-dialog-icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 26px;
	background: #f0f7f3;
	color: var(--theme-color, #004D40);
}

.ui-dialog.is-danger .ui-dialog-icon { background: #fdf1ee; color: #b4432f; }

.ui-dialog-title { margin-bottom: 8px; color: #26302c; }
.ui-dialog-text { color: #6b6558; margin-bottom: 22px; }
.ui-dialog-text:empty { display: none; }

.ui-dialog-actions { display: flex; gap: 10px; justify-content: center; }

.ui-dialog-btn {
	border: 1px solid #e0dbd0;
	background: #fff;
	border-radius: 999px;
	padding: 10px 24px;
	font: inherit;
	color: #4e4e4e;
	cursor: pointer;
}

.ui-dialog-btn.is-primary {
	background: var(--theme-color, #004D40);
	border-color: var(--theme-color, #004D40);
	color: #fff;
}

.ui-dialog.is-danger .ui-dialog-btn.is-primary {
	background: #b4432f;
	border-color: #b4432f;
}

.ui-toasts {
	position: fixed;
	z-index: 9999;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.ui-toast {
	background: #26302c;
	color: #fff;
	border-radius: 10px;
	padding: 13px 20px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease;
}

.ui-toast.is-in { opacity: 1; transform: translateY(0); }
.ui-toast.is-success { background: #1f6f52; }
.ui-toast.is-info { background: #33526b; }

@media (prefers-reduced-motion: reduce) {
	.plan-cta, .plan-day.is-current, .ui-toast { transition: none; transform: none; }
}

/* A part that is done is a statement, not a control - so it stops looking like
   something to press. */
.portion-done {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	background: #f0f7f3;
	border: 1px solid #c6e2d3;
	color: #2e6a52;
	font-weight: 600;
	white-space: nowrap;
}

.portion-done-mark {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #2e9e6b;
	color: #fff;
	font-size: 13px;
}

/* ------------------------------------------------- consolidation (recall)

   The portion covered up, recited back from memory. A word is a grey block
   until it is said correctly; then it appears. That is the whole idea, so the
   covering has to read as "hidden on purpose" rather than as broken text -
   hence a solid slab the width of the word rather than blur or transparency. */

.portion-tab.is-recite {
    border-inline-start: 3px solid var(--theme-color, #12694b);
}

.recite-hint {
    color: #6a7280;
    margin-bottom: 18px;
    line-height: 1.9;
}

.recite-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.recite-bar .th-btn.is-stop {
    background: #b3261e;
}

.recite-score {
    margin-inline-start: auto;
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-color, #12694b);
}

.recite-status {
    min-height: 24px;
    margin-bottom: 12px;
    font-size: 15px;
}

.recite-status.is-live   { color: var(--theme-color, #12694b); }
.recite-status.is-done   { color: #1a7f37; font-weight: 700; }
.recite-status.is-warn   { color: #b3261e; }

/* the pulse only runs while the recognizer is actually listening, so it is a
   real indicator rather than decoration */
.recite-panel.is-listening .recite-status.is-live::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: #b3261e;
    animation: recitePulse 1.1s ease-in-out infinite;
}

@keyframes recitePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}


.recite-heard {
    min-height: 26px;
    margin: 14px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f5f6f8;
    color: #6a7280;
    font-size: 15px;
    direction: rtl;
}

.recite-heard:empty { display: none; }

.recite-save { margin-top: 18px; }

.recite-save .th-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ------------------------------------------- switching between two plans

   Only ever shown to somebody running a memorization plan and a revision plan
   at the same time. With one plan there is nothing to switch to and the strip
   is not rendered at all. */

.plan-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.plan-switch-tab {
    flex: 1 1 220px;
    display: block;
    padding: 12px 16px;
    border: 1px solid #e6e3da;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

.plan-switch-tab:hover {
    border-color: var(--theme-color, #12694b);
}

.plan-switch-tab.is-active {
    border-color: var(--theme-color, #12694b);
    background: rgba(18, 105, 75, .06);
    box-shadow: inset 0 -3px 0 var(--theme-color, #12694b);
}

.plan-switch-kind {
    display: block;
    font-weight: 700;
    color: var(--theme-color, #12694b);
    margin-bottom: 2px;
}

.plan-switch-name {
    display: block;
    font-size: 14px;
    color: #6a7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the unit beside the counted number - "60 days" reads as one figure, and the
   counter script must only ever see the digits it animates */
.counter-card .counter-unit {
    font-size: .42em;
    font-weight: 600;
    margin-inline-start: 6px;
    opacity: .75;
}

a.counter-card {
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

a.counter-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}

/* =========================================================== account shell

   The subscriber's own pages. They are opened daily and read quickly, so the
   whole design is built round one question - where am I, and what is today's
   work - answered before anything is clicked. */

.account-side {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    overflow: hidden;
}

.account-side-head {
    padding: 26px 18px 20px;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(18, 105, 75, .13), transparent 70%),
        #fbfcfb;
    border-bottom: 1px solid #f1f3f4;
}

.account-avatar {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin-bottom: 14px;
}

.account-avatar img,
.account-avatar .avatar-initial {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

/* No photo: the member's initial, not the site's landscape placeholder. A
   circle with a picture-frame glyph in it reads as broken, not as empty. */
.avatar-initial {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #17795c, #0b4436);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.account-verified {
    position: absolute;
    inset-block-end: 3px;
    inset-inline-end: 3px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1a7f37;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border: 2px solid #fff;
}

.account-side-name {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.4;
}

.account-side-mail {
    display: block;
    color: #8a8578;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-all;
}

/* ------------------------------------------------------------ the items */

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    margin: 0;
    list-style: none;
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #3c4a44;
    font: inherit;
    font-size: 15px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.account-nav-item:hover {
    background: #f4f7f5;
    color: var(--theme-color, #12694b);
}

.account-nav-item.is-active {
    background: rgba(18, 105, 75, .09);
    border-color: rgba(18, 105, 75, .18);
    color: var(--theme-color, #12694b);
    font-weight: 600;
}

.account-nav-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: #f1f4f2;
    color: #5c6b64;
    font-size: 15px;
    line-height: 1;
}

.account-nav-item:hover .account-nav-icon {
    background: #e4ede8;
    color: var(--theme-color, #12694b);
}

.account-nav-item.is-active .account-nav-icon {
    background: var(--theme-color, #12694b);
    color: #fff;
}

.account-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------- the plan entries

   Two rows rather than one. On a single line the name, the day count, the
   percentage and the bar all competed for the same 200 pixels and none of
   them could be read. */

.account-nav-item.is-plan {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
}

.account-nav-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.account-nav-pct {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-color, #12694b);
}

.account-nav-bar {
    display: block;
    height: 5px;
    border-radius: 5px;
    background: #edeff0;
    overflow: hidden;
}

.account-nav-bar > span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #17795c, #2fa87f);
    transition: width .3s ease;
}

.account-nav-sub {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: #8a8578;
}

/* ----------------------------------------------------------- signing out */

.account-nav-logout {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f4;
}

.account-nav-item.is-logout {
    color: #b3261e;
}

.account-nav-item.is-logout:hover {
    background: rgba(179, 38, 30, .07);
    color: #b3261e;
}

.account-nav-item.is-logout .account-nav-icon {
    background: rgba(179, 38, 30, .09);
    color: #b3261e;
}

.account-nav-item.is-logout:hover .account-nav-icon {
    background: rgba(179, 38, 30, .16);
    color: #b3261e;
}

@media (max-width: 991px) {
    .account-side {
        position: static;
    }
}

/* ------------------------------------------------------ the account header */

.account-greet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    margin-bottom: 22px;
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(255, 213, 79, .22), transparent 60%),
        linear-gradient(135deg, #10604a 0%, #08382d 100%);
}

.account-greet h3 {
    color: #fff;
}

.account-greet p {
    color: rgba(255, 255, 255, .74);
}

.account-greet-stats {
    display: flex;
    gap: 10px;
    text-align: center;
}

.account-greet-stats > div {
    min-width: 84px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
}

.account-greet-stats strong {
    display: block;
    font-size: 24px;
    line-height: 1.25;
    color: #fff;
}

.account-greet-stats span {
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
}

.account-greet-stats .is-late strong {
    color: #ffb4ad;
}


/* ============================================================ the profile

   Three sections rather than two long forms: who you are, how you like things,
   and the password. Each one says what it is for, because "Email" alone does
   not tell anybody that changing it costs them their verified status. */

.profile-head {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 26px;
    margin-bottom: 18px;
    border-radius: 14px;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(255, 213, 79, .2), transparent 60%),
        linear-gradient(135deg, #10604a 0%, #08382d 100%);
    color: #fff;
}

.profile-avatar {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
    line-height: 0;
}

.profile-avatar img,
.profile-avatar .avatar-initial {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, .8);
}

/* on the dark banner the plate is lightened rather than deepened, or the
   initial disappears into the background behind it */
.profile-avatar .avatar-initial {
    background: rgba(255, 255, 255, .16);
}

.profile-avatar-edit {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #10604a;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    transition: transform .16s ease;
}

.profile-avatar:hover .profile-avatar-edit {
    transform: scale(1.1);
}

.profile-head-body {
    min-width: 0;
}

.profile-head h4 {
    color: #fff;
}

.profile-head-mail {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    word-break: break-all;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
}

.profile-badge.is-ok    { background: rgba(26, 127, 55, .35); border-color: rgba(126, 217, 87, .45); }
.profile-badge.is-warn  { background: rgba(201, 120, 20, .4); border-color: rgba(255, 196, 87, .5); }
.profile-badge.is-plan  { background: rgba(255, 255, 255, .18); }

/* An address that was never confirmed cannot receive the daily reminder, which
   is most of what the account is for. Said here rather than left to be found. */
.profile-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #fff8e6;
    border: 1px solid #f3ddab;
}

.profile-notice p {
    color: #7a6320;
    font-size: 14px;
}

.profile-section {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 18px;
}

.profile-section-head {
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f3f4;
}

.profile-section-head p {
    color: #8a8578;
    font-size: 14px;
}

.profile-section.is-security {
    border-color: #e8e2d6;
    background: #fdfcf9;
}

.form-hint {
    display: block;
    margin-top: 5px;
    color: #8a8578;
    font-size: 13px;
}

.form-hint.is-level-1 { color: #b3261e; }
.form-hint.is-level-2 { color: #b7791f; }
.form-hint.is-level-3 { color: #1a7f37; }

/* The save bar belongs to the card above it, so it sits inside a card of
   its own rather than floating between two panels with nothing to hold it. */
.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 26px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
}

/* inside a section it is the section's own footer, not a separate card */
.profile-section .profile-actions {
    padding: 18px 0 0;
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid #f1f3f4;
    border-radius: 0;
}

/* ---------------------------------------------------------- password fields */

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-inline-end: 44px;
}

.password-peek {
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 1px;
    width: 40px;
    border: 0;
    border-radius: 0 7px 7px 0;
    background: transparent;
    cursor: pointer;
    opacity: .45;
    font-size: 15px;
    transition: opacity .16s ease;
}

.password-peek:hover,
.password-peek.is-on {
    opacity: 1;
}

.password-meter {
    height: 4px;
    margin-top: 8px;
    border-radius: 4px;
    background: #eceef1;
    overflow: hidden;
}

.password-meter > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .2s ease, background .2s ease;
}

.password-meter.is-1 > span { width: 33%;  background: #b3261e; }
.password-meter.is-2 > span { width: 66%;  background: #d9a441; }
.password-meter.is-3 > span { width: 100%; background: #1a7f37; }

@media (max-width: 575px) {
    .profile-head {
        flex-direction: column;
        text-align: center;
    }

    .profile-badges {
        justify-content: center;
    }
}


/* ------------------------------------------------- the Madinah typeface

   The face the Madinah mushaf is actually set in is KFGQPC Uthmanic Script
   HAFS, published free by the King Fahd Complex. It is not on any web font
   service, so it is not fetched - it is looked for, in this order:

     1. installed on the reader's own machine
     2. dropped into public/assets/fonts/quran/ (see the readme there)
     3. Amiri Quran, which is the closest face that can be served from a CDN

   Nothing breaks at any step: a missing file simply falls through to the next
   source, so the page is always set in the best face available to it.

   Even with the exact font the line breaks will not match the printed page.
   The mushaf gets its fifteen lines a page from a separate font per page, in
   which the glyphs are pre-shaped to fill the measure - 604 fonts. That is a
   different thing from the typeface, and out of reach without them. */

@font-face {
    font-family: 'KFGQPC Uthmanic Script HAFS';
    font-display: swap;
    src:
        local('KFGQPC HAFS Uthmanic Script'),
        local('KFGQPC Uthmanic Script HAFS'),
        local('UthmanicHafs1 Ver18'),
        url('../fonts/quran/UthmanicHafs1Ver18.woff2') format('woff2'),
        url('../fonts/quran/UthmanicHafs1Ver18.ttf') format('truetype'),
        url('../fonts/quran/UthmanicHafs.otf') format('opentype');
}

/* ========================================================= the open mushaf

   Two leaves at the size the Madinah mushaf is printed: 14cm by 20cm each,
   set side by side with the gutter between them. The pair is 28cm wide, which
   no browser column is, so the whole spread is scaled down to whatever room
   there is - the proportions and the relative type size hold exactly, and at
   full size, or on paper, it is the real thing.

   What cannot be matched: the Madinah mushaf breaks every page onto exactly
   fifteen lines, and it does that with a separate font per page where the
   glyphs are pre-shaped to fill the measure. Without those fonts the text is
   justified by the browser, so the line count drifts by one or two. Everything
   else - the page, the frame, the headings, the rosettes, the folio - is set
   the way the printed page sets it. */

.mushaf {
    --leaf-w: 14cm;
    --leaf-h: 20cm;
    --leaf-gap: 0.9cm;

    --mushaf-ink: #1a1a17;
    --mushaf-paper: #fdfaf0;
    --mushaf-rule: #b99e5e;
    --mushaf-rule-soft: #dfd0a6;

    /* set by the script from the room actually available */
    --mushaf-scale: 1;

    padding: 0;
    background: none;
    border: 0;
}

.mushaf-stage {
    overflow: hidden;
}

.mushaf-spread {
    display: flex;
    flex-direction: row;
    gap: var(--leaf-gap);
    align-items: stretch;
    justify-content: center;

    width: calc(var(--leaf-w) * 2 + var(--leaf-gap));

    transform: scale(var(--mushaf-scale));
    transform-origin: top center;
    margin-inline: auto;
}

/* The gutter: two hairlines with a breath between them, the way the binding
   falls between two facing pages. */
.mushaf.is-two-up .mushaf-spread {
    background-image:
        linear-gradient(180deg, transparent, var(--mushaf-rule-soft) 8%, var(--mushaf-rule-soft) 92%, transparent);
    background-size: 1px 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* one leaf left over at the end of a portion fills the measure on its own */
.mushaf:not(.is-two-up) .mushaf-spread {
    width: var(--leaf-w);
}

.mushaf-leaf {
    flex: 0 0 var(--leaf-w);
    width: var(--leaf-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* -------------------------------------------------------------- the page */

.mushaf-page {
    flex: 1 1 auto;
    height: var(--leaf-h);
    box-sizing: border-box;

    /* the printed page carries a wide margin and a narrow text block */
    padding: 1.35cm 1.15cm 1.1cm;

    background: var(--mushaf-paper);

    /* the double rule: a firm inner line and a lighter outer one, gold-brown */
    border: 1px solid var(--mushaf-rule-soft);
    box-shadow:
        inset 0 0 0 0.10cm var(--mushaf-paper),
        inset 0 0 0 0.115cm var(--mushaf-rule),
        0 2px 10px rgba(60, 45, 10, .10);
    border-radius: 2px;

    direction: rtl;
    text-align: justify;
    text-align-last: center;

    font-family: 'KFGQPC Uthmanic Script HAFS', 'Amiri Quran', 'Amiri', serif;
    font-size: 21px;
    line-height: 2.05;
    color: var(--mushaf-ink);

    /* the printed page has no scrollbar; a page that runs long is let out
       rather than clipped, which is the lesser of the two wrongs */
    overflow: visible;
}

/* --------------------------------------------------------- surah headings */

/* The printed heading is a framed band with the surah's name inside it and a
   fine repeating ornament along the ground. */
.mushaf-surah {
    display: block;
    margin: 0.35cm auto 0.3cm;
    padding: 0.16cm 0.5cm;
    text-align: center;

    background:
        repeating-linear-gradient(45deg,
            rgba(185, 158, 94, .10) 0 3px, transparent 3px 7px),
        #f7efd9;

    border: 1px solid var(--mushaf-rule);
    box-shadow: inset 0 0 0 2px var(--mushaf-paper), inset 0 0 0 3px var(--mushaf-rule-soft);
    border-radius: 3px;

    font-family: var(--body-font, 'IBM Plex Sans Arabic'), sans-serif;
    line-height: 1.45;
}

.mushaf-page > .mushaf-surah:first-child {
    margin-top: 0;
}

.mushaf-surah-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #7a5f1c;
}

.mushaf-surah-meta {
    display: block;
    font-size: 11px;
    color: #a08b4f;
}

.mushaf-basmala {
    margin: 0.1cm auto 0.28cm;
    text-align: center;
    font-family: 'KFGQPC Uthmanic Script HAFS', 'Amiri Quran', 'Amiri', serif;
    font-size: 19px;
    line-height: 1.9;
    color: #4a3a12;
}

/* -------------------------------------------------------------- the verses */

.mushaf .ayah {
    cursor: pointer;
    border-radius: 3px;
    transition: background .14s ease;
}

.mushaf .ayah:hover {
    background: rgba(185, 158, 94, .16);
}

.mushaf .ayah.is-selected {
    background: rgba(18, 105, 75, .14);
    box-shadow: inset 0 -2px 0 #12694b;
}

.mushaf .ayah.is-playing {
    background: rgba(201, 150, 31, .22);
    box-shadow: inset 0 -2px 0 #b07d16;
}

.mushaf .ayah:focus-visible {
    outline: 2px solid var(--mushaf-rule);
    outline-offset: 1px;
}

/* The verse mark. The printed mushaf sets the number inside an eight-pointed
   rosette; the ring plus the notches a conic gradient gives is as near as web
   type gets without shipping an image per verse. */
.mushaf .ayah-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;
    margin: 0 2px;

    border-radius: 50%;
    border: 1px solid var(--mushaf-rule);
    background:
        radial-gradient(circle at center, var(--mushaf-paper) 62%, transparent 63%),
        conic-gradient(from 22.5deg,
            var(--mushaf-rule) 0 6deg, transparent 6deg 45deg,
            var(--mushaf-rule) 45deg 51deg, transparent 51deg 90deg,
            var(--mushaf-rule) 90deg 96deg, transparent 96deg 135deg,
            var(--mushaf-rule) 135deg 141deg, transparent 141deg 180deg,
            var(--mushaf-rule) 180deg 186deg, transparent 186deg 225deg,
            var(--mushaf-rule) 225deg 231deg, transparent 231deg 270deg,
            var(--mushaf-rule) 270deg 276deg, transparent 276deg 315deg,
            var(--mushaf-rule) 315deg 321deg, transparent 321deg 360deg);

    font-family: var(--body-font, 'IBM Plex Sans Arabic'), sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: #7a5f1c;
    vertical-align: middle;
}

/* ------------------------------------------------------------- the folio */

.mushaf-folio {
    margin-top: 0.28cm;
    text-align: center;
    font-family: var(--body-font, 'IBM Plex Sans Arabic'), sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #a08b4f;
}

.mushaf-folio::before,
.mushaf-folio::after {
    content: '\2014';
    margin: 0 7px;
    opacity: .45;
}

/* ------------------------------------------------------------- the pager */

.mushaf-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

.mushaf-turn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #ddd0ab;
    background: #fdfaf1;
    color: #8a6d2a;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.mushaf-turn:hover {
    background: #f6edd8;
    border-color: var(--mushaf-rule);
    color: #7a5f1c;
}

.mushaf-turn.is-off {
    opacity: .3;
    cursor: default;
}

.mushaf-pager-label {
    min-width: 170px;
    text-align: center;
    font-family: var(--body-font, 'IBM Plex Sans Arabic'), sans-serif;
    font-size: 14px;
    color: #6a7280;
}

/* while a spread is being fetched, the page it is replacing steps back */
.mushaf.is-turning .mushaf-stage {
    opacity: .45;
    transition: opacity .12s ease;
}

/* ------------------------------------------------------------- one page up

   Below the width of a single leaf there is nothing to gain from two, and the
   script asks the server for one page at a time instead. */
@media (max-width: 767px) {

    .mushaf {
        --leaf-gap: 0.4cm;
    }

}

/* ---------------------------------------------------------------- on paper

   Printed, the scale comes off and the leaves are the size they claim to be. */
@media print {

    .mushaf {
        --mushaf-scale: 1;
    }

    .mushaf-pager {
        display: none;
    }

    .mushaf-page {
        box-shadow: inset 0 0 0 0.10cm var(--mushaf-paper), inset 0 0 0 0.115cm var(--mushaf-rule);
    }

}

/* --------------------------------------------------------------- recall tab

   The same page as the other tabs, covered. It keeps the frame, the paper and
   the type, because the reader is meant to be looking at the page they
   memorized - not at a different object with the words hidden. */

.mushaf.is-recall .ayah {
    cursor: default;
}

.mushaf.is-recall .ayah:hover {
    background: none;
}

.mushaf.is-recall .rw {
    position: relative;
    display: inline-block;
    border-radius: 3px;
    transition: color .2s ease;
}

/* Covered is simply blank.

   This was a grey slab per word, and a page of them read as a keyboard rather
   than as a page - the covering shouted louder than the text it was hiding.
   Now the page is empty and the recitation writes itself onto it. The word
   keeps its own width so nothing shifts when it appears. */
.mushaf.is-recall:not(.is-revealed) .rw:not(.is-open):not(.is-wrong) {
    color: transparent;
}

/* uncovered in the ordinary ink, so a finished page looks like a page of the
   mushaf and not like a report of what went right */
.mushaf.is-recall .rw.is-open {
    color: inherit;
}

/* the one thing that is marked, because knowing which word was missed is the
   whole point of marking anything at all */
.mushaf.is-recall .rw.is-wrong {
    color: #b3261e;
    text-decoration: underline wavy #b3261e;
    text-underline-offset: 7px;
}

/* the word due next: a thin rule under the blank, the way a line to fill in
   looks on paper - the only mark on the covered part of the page */
.mushaf.is-recall:not(.is-revealed) .rw.is-next::after {
    content: '';
    position: absolute;
    inset-inline: 1px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-color, #12694b);
    animation: reciteNext 1.4s ease-in-out infinite;
}

@keyframes reciteNext {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}
/* ------------------------------------------------------------------ phones

   30px Uthmani on a 360px screen gives four words to a line and a page of
   ragged holes, so the type comes down and the frame's padding with it. */

@media (max-width: 575px) {

    .mushaf {
        padding: 8px;
    }

    .mushaf-surah {
        margin: 18px auto 14px;
        padding: 8px 14px;
    }

    .mushaf-surah-name {
        font-size: 17px;
    }

    .mushaf-basmala {
        font-size: 21px;
    }

}

/* ================================================ the account dashboard

   Three plans can run at once now - memorizing, revising and reading - and the
   page that showed one banner per plan stopped answering the question it exists
   for. Whether there is work waiting today is asked first and answered in one
   block; how far along each plan is comes after it, in cards small enough to be
   compared side by side. */

.account-section-title {
    margin: 26px 0 14px;
    font-size: 18px;
}

/* ------------------------------------------------------------------ today */

.today-card {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 6px;
}

.today-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    background: #fbfcfb;
    border-bottom: 1px solid #f1f3f4;
}

.today-head span {
    font-size: 13px;
    color: #8a8578;
}

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

.today-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid #f4f6f7;
}

.today-item:last-child {
    border-bottom: 0;
}

/* A plan with nothing waiting steps back rather than disappearing: knowing
   that today's portion is already done is worth a line of its own. */
.today-item.is-quiet {
    background: #fbfcfc;
    color: #8a8578;
}

.today-mark {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f1f4f2;
    font-size: 18px;
    line-height: 1;
}

.today-item.is-open .today-mark {
    background: rgba(18, 105, 75, .1);
}

.today-body {
    flex: 1 1 auto;
    min-width: 0;
}

.today-body strong {
    display: block;
    font-size: 15.5px;
    line-height: 1.5;
}

.today-body small {
    display: block;
    font-size: 13px;
    color: #8a8578;
}

.today-item.is-quiet .today-body strong {
    font-weight: 500;
}

.today-action {
    flex: 0 0 auto;
}

.today-action .th-btn {
    padding: 9px 20px;
    font-size: 14px;
}

.today-link {
    font-size: 14px;
    color: var(--theme-color, #12694b);
}

/* ------------------------------------------------------------- plan cards */

.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 18px 16px;
    background: #fff;
    border: 1px solid #eceef1;
    border-top: 3px solid var(--theme-color, #12694b);
    border-radius: 12px;
}

.plan-card.is-late   { border-top-color: #c0392b; }
.plan-card.is-paused { border-top-color: #b7791f; }

.plan-card-head {
    margin-bottom: 14px;
}

.plan-card-kind {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--theme-color, #12694b);
    margin-bottom: 3px;
}

.plan-card-head h6 {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #3c4a44;

    /* plan names run long; two lines is the most a card of this size can give
       one without pushing the ring and the facts out of line with its neighbours */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* the ring carries the percentage as a shape, which reads before the number */
.plan-card-ring {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--theme-color, #12694b) calc(var(--pct) * 1%), #edeff0 0);
    margin-bottom: 12px;
}

.plan-card.is-late .plan-card-ring   { background: conic-gradient(#c0392b calc(var(--pct) * 1%), #edeff0 0); }
.plan-card.is-paused .plan-card-ring { background: conic-gradient(#b7791f calc(var(--pct) * 1%), #edeff0 0); }

.plan-card-ring > span {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    font-weight: 700;
    color: #26302c;
}

.plan-card-ring small {
    font-size: 12px;
    font-weight: 500;
    color: #8a8578;
}

.plan-card-progress {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #6a7280;
}

.plan-card-facts {
    width: 100%;
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f3f4;
    display: grid;
    gap: 7px;
}

.plan-card-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.plan-card-facts dt {
    font-size: 12.5px;
    font-weight: 400;
    color: #8a8578;
}

.plan-card-facts dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #3c4a44;
}

.plan-card-facts .is-late dd {
    color: #c0392b;
}

.plan-card-link {
    margin-top: auto;
    font-size: 13.5px;
    color: var(--theme-color, #12694b);
}

/* ------------------------------------------------------ what is on offer */

.offer-tile {
    display: block;
    color: inherit;
    text-decoration: none;
}

.offer-tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: transform .18s ease;
}

.offer-tile:hover img {
    transform: translateY(-3px);
}

.offer-tile-kind {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-color, #12694b);
}

.offer-tile-name {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: #3c4a44;
}

@media (max-width: 575px) {

    .today-item {
        flex-wrap: wrap;
    }

    .today-action {
        flex: 1 1 100%;
        padding-inline-start: 54px;
    }

    .today-action .th-btn {
        width: 100%;
        text-align: center;
    }

}

/* ------------------------------------------------- the books of tafseer

   The cards used to open with a 70px shape, the same one on every card. They
   open with the book's own plate now, so the card is a book on a shelf: cover
   first, then who wrote it. */

.tafseer-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.tafseer-cover {
    display: block;
    margin: 0 0 20px;
    overflow: hidden;
}

.tafseer-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 749 / 645;
    object-fit: cover;
    transition: transform .35s ease;
}

.tafseer-card:hover .tafseer-cover img {
    transform: scale(1.03);
}

/* the plate carries the margin now, so the text needs its own */
.tafseer-card .box-title,
.tafseer-card .box-author,
.tafseer-card .box-text,
.tafseer-card .simple-btn {
    padding-inline: 28px;
}

.tafseer-card .simple-btn {
    margin-bottom: 26px;
}

/* pushes the button to the bottom so a row of cards lines its buttons up
   however long the authors' names run */
.tafseer-card .simple-btn {
    margin-top: auto;
}

.accordion-card.style2 .accordion-button,
.accordion-collapse,
.accordion-card.style2 {
	background-color: #004d40;
}

.accordion-card.style2 p {
	color: #fff;
}

.accordion-card.style2 .accordion-button {
 	color: #FFD54F;
 }
/* ------------------------------------------------- the install offer

   Android's own install bar is a grey strip most people dismiss without
   reading. This replaces it: the site's own colours, its own language, and
   the app's own icon, so the offer is recognisable as coming from the site
   the reader is already using. */

.install-bar {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 60;

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;

    background: #fff;
    border: 1px solid #e2e6e4;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .16);

    /* starts below the fold and slides up once it is in the document, so it
       arrives rather than appearing under the reader's thumb */
    transform: translateY(140%);
    transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}

.install-bar.is-up {
    transform: translateY(0);
}

.install-bar-icon img {
    display: block;
    border-radius: 10px;
}

.install-bar-text {
    flex: 1 1 auto;
    min-width: 0;
}

.install-bar-text strong {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}

.install-bar-text small {
    display: block;
    font-size: 12.5px;
    color: #8a8578;
    line-height: 1.5;
}

.install-bar .th-btn {
    padding: 9px 20px;
    font-size: 14px;
    flex: 0 0 auto;
}

.install-bar-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f2;
    color: #6a7280;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.install-bar-close:hover {
    background: #e6eae8;
}

@media (min-width: 576px) {
    .install-bar {
        inset-inline: auto 20px;
        width: 420px;
    }
}

/* --------------------------------------------------------- offline page */

.offline-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 44px 32px;
    text-align: center;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 14px;
}

.offline-mark {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #f1f4f2;
    font-size: 30px;
}

.offline-note {
    margin-top: 20px;
    font-size: 13.5px;
    color: #8a8578;
}