/**
 * As Sunnah Ruqyah Library — front-end styles.
 * Palette (master brief §2): Deep Emerald Green, White, Soft Gold, Sage Green.
 * Typography: Hind Siliguri / Noto Sans Bengali.
 */

:root {
	--asrl-emerald: #0b3d24;
	--asrl-emerald-2: #14532d;
	--asrl-gold: #c9a84c;
	--asrl-gold-soft: #e9dcc0;
	--asrl-sage: #dcebe0;
	--asrl-sage-dark: #3f6d52;
	--asrl-cream: #f7f5ec;
	--asrl-ink: #1c2420;
	--asrl-muted: #5c6a62;
	--asrl-border: #e3ddcc;
	--asrl-radius: 14px;
}

.asrl {
	font-family: "Hind Siliguri", "Noto Sans Bengali", sans-serif;
	color: var(--asrl-ink);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px 48px;
	line-height: 1.65;
}

.asrl a { color: var(--asrl-emerald-2); }

/* ---------- Hero ---------- */
.asrl-hero {
	background: linear-gradient(160deg, var(--asrl-emerald) 0%, var(--asrl-emerald-2) 100%);
	border-radius: 0 0 22px 22px;
	color: #fff;
	text-align: center;
	padding: 44px 20px 36px;
	margin: 0 -16px 22px;
}
.asrl-hero-brand {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--asrl-gold-soft);
	margin: 0 0 8px;
}
.asrl-hero-title {
	color: #fff;
	font-size: clamp(26px, 4.5vw, 42px);
	line-height: 1.3;
	margin: 0 0 10px;
}
.asrl-hero-sub {
	color: #e7efe9;
	max-width: 760px;
	margin: 0 auto 22px;
	font-size: clamp(15px, 2vw, 17px);
}
.asrl-search {
	display: flex;
	gap: 8px;
	background: #fff;
	border-radius: 999px;
	padding: 6px;
	max-width: 720px;
	margin: 0 auto 18px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.asrl-search-input {
	flex: 1;
	border: 0;
	outline: 0;
	padding: 10px 18px;
	font: inherit;
	background: transparent;
	min-width: 0;
}
.asrl-search-btn {
	background: var(--asrl-gold);
	color: #231a04;
	border: 0;
	border-radius: 999px;
	padding: 10px 28px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.asrl-hero-stats {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.asrl-stat {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	padding: 4px 16px;
	font-size: 14px;
	color: #fff;
}
.asrl-stat strong { color: var(--asrl-gold-soft); }

/* ---------- Controls ---------- */
.asrl-controls {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.asrl-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex: 1;
	align-items: center;
}
/* Compact pills (v1.0.9): small type, snug padding — several chips
   share a row on phones instead of one giant pill per line. */
.asrl-chip {
	border: 1px solid var(--asrl-border);
	background: #fff;
	border-radius: 999px;
	padding: 4px 11px;
	font: inherit;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
	color: var(--asrl-ink);
	white-space: nowrap;
}
.asrl-chip:hover { border-color: var(--asrl-sage-dark); }
.asrl-chip.is-active {
	background: var(--asrl-emerald-2);
	border-color: var(--asrl-emerald-2);
	color: #fff;
}
.asrl-chip-count { opacity: 0.7; font-size: 11px; margin-left: 2px; }
/* Phones: exactly two categories side by side per row (v1.0.11,
   owner request) — labels may wrap to a second line inside a chip. */
@media (max-width: 700px) {
	.asrl-chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 7px;
		width: 100%;
	}
	.asrl-chip {
		white-space: normal;
		text-align: center;
		font-size: 12.5px;
		line-height: 1.4;
		padding: 6px 8px;
	}
}
.asrl-sort { white-space: nowrap; font-size: 13.5px; color: var(--asrl-muted); }
.asrl-sort select {
	font: inherit;
	padding: 5px 8px;
	border: 1px solid var(--asrl-border);
	border-radius: 10px;
	background: #fff;
}
.asrl-result-count { color: var(--asrl-muted); font-size: 14px; margin: 8px 0 14px; }
.asrl-empty { text-align: center; color: var(--asrl-muted); padding: 32px 0; }

/* ---------- Card grid ---------- */
.asrl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	/* Breathing room when the খুঁজুন button scrolls results into view. */
	scroll-margin-top: 90px;
}
@media (max-width: 980px) {
	.asrl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.asrl-grid { grid-template-columns: 1fr; }
	.asrl-search { border-radius: 18px; }
}
.asrl-card {
	background: #fff;
	border: 1px solid var(--asrl-border);
	border-radius: var(--asrl-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.asrl-card-cover {
	position: relative;
	display: block;
	background: var(--asrl-cream);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
/* Earned popularity badge (real reads/downloads/share clicks). */
.asrl-badge-popular {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: linear-gradient(135deg, #f3c969, #dfa92e);
	color: #231a04;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
	pointer-events: none;
}
.asrl-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.asrl-card-cover-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 34px;
	font-weight: 700;
	color: var(--asrl-sage-dark);
	letter-spacing: 0.2em;
}
.asrl-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.asrl-card-cat {
	align-self: flex-start;
	background: var(--asrl-sage);
	color: var(--asrl-sage-dark);
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 13px;
	font-weight: 600;
}
.asrl-card-title {
	font-size: 19px;
	line-height: 1.45;
	margin: 0;
}
.asrl-card-title a { color: var(--asrl-ink); text-decoration: none; }
.asrl-card-title a:hover { color: var(--asrl-emerald-2); }
.asrl-card-desc {
	color: var(--asrl-muted);
	font-size: 14.5px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.asrl-card-meta {
	color: var(--asrl-muted);
	font-size: 13.5px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: auto 0 0;
	padding-top: 6px;
}
.asrl-card-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}
.asrl-btn {
	flex: 1;
	text-align: center;
	border-radius: 9px;
	padding: 10px 8px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1.5px solid var(--asrl-emerald-2);
}
.asrl-btn-read { background: var(--asrl-emerald-2); color: #fff !important; }
.asrl-btn-read:hover { background: var(--asrl-emerald); }
.asrl-btn-download { background: #fff; color: var(--asrl-emerald-2) !important; }
.asrl-btn-download:hover { background: var(--asrl-sage); }
.asrl-card-share {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 13.5px;
	margin-top: 10px;
}
.asrl-share {
	color: var(--asrl-muted);
	text-decoration: none;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	padding: 0;
}
.asrl-share:hover { color: var(--asrl-emerald-2); text-decoration: underline; }

.asrl-archive-share {
	background: var(--asrl-sage);
	border-radius: var(--asrl-radius);
	text-align: center;
	padding: 20px;
	margin-top: 30px;
	color: var(--asrl-emerald);
	font-weight: 600;
}

/* ---------- Single ---------- */
.asrl-breadcrumb {
	font-size: 14px;
	color: var(--asrl-muted);
	padding: 14px 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.asrl-breadcrumb a { color: var(--asrl-muted); text-decoration: none; }
.asrl-breadcrumb a:hover { color: var(--asrl-emerald-2); }
.asrl-breadcrumb-current { color: var(--asrl-ink); }

.asrl-single-head {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	margin-bottom: 28px;
}
@media (max-width: 760px) {
	.asrl-single-head { grid-template-columns: 1fr; }
	.asrl-single-cover { max-width: 280px; }
}
.asrl-single-cover img {
	width: 100%;
	border-radius: var(--asrl-radius);
	border: 1px solid var(--asrl-border);
	display: block;
}
.asrl-single-title {
	font-size: clamp(24px, 3.6vw, 34px);
	line-height: 1.35;
	margin: 6px 0 8px;
	color: var(--asrl-emerald);
}
.asrl-single-author { color: var(--asrl-muted); margin: 0 0 12px; }
.asrl-meta-chips {
	list-style: none;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 16px;
}
.asrl-meta-chips li {
	background: var(--asrl-cream);
	border: 1px solid var(--asrl-border);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 14px;
}
.asrl-single .asrl-card-actions { max-width: 460px; }

.asrl-summary,
.asrl-topics,
.asrl-reader,
.asrl-sharebox,
.asrl-faq,
.asrl-related,
.asrl-related-posts,
.asrl-about {
	background: #fff;
	border: 1px solid var(--asrl-border);
	border-radius: var(--asrl-radius);
	padding: 22px 24px;
	margin-bottom: 22px;
}
.asrl-summary h2,
.asrl-topics h2,
.asrl-reader h2,
.asrl-sharebox h2,
.asrl-faq h2,
.asrl-related h2,
.asrl-related-posts h2,
.asrl-about h2 {
	color: var(--asrl-emerald);
	font-size: 21px;
	margin: 0 0 12px;
}
.asrl-topic-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.asrl-topic-list li {
	background: var(--asrl-sage);
	color: var(--asrl-sage-dark);
	border-radius: 999px;
	padding: 3px 14px;
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Reader ---------- */
.asrl-reader-toolbar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 12px;
}
.asrl-tool-btn {
	background: var(--asrl-cream);
	border: 1px solid var(--asrl-border);
	border-radius: 8px;
	padding: 7px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	color: var(--asrl-ink);
	text-decoration: none;
}
.asrl-tool-btn:hover { background: var(--asrl-sage); }
.asrl-page-status { font-weight: 600; padding: 0 4px; }
.asrl-reader-stage {
	position: relative;
	background: linear-gradient(180deg, #eef0e4 0%, #e7e9da 100%);
	border-radius: 10px;
	overflow: auto;
	padding: 18px 12px;
	max-height: 85vh;
	/* The reader runs its own gestures (drag-scroll + pinch zoom), so
	   the browser must not turn touches into a page zoom of its own —
	   that is what used to tear the layout apart when zooming. */
	touch-action: none;
	overflow-anchor: none;
	overscroll-behavior: contain;
	cursor: grab;
}
.asrl-reader-stage:active { cursor: grabbing; }

/* eBook mode (v1.0.6, zoom model v1.0.7): pages flow in one continuous
   vertical scroll, like an ebook app — drag/scroll to read. Zoom is the
   reader's OWN (pinch, double-tap, Ctrl+wheel scale the sheets via
   --asrl-z), never the browser's page zoom, so the toolbar and layout
   can never tear apart. Sheets carry their real aspect ratio from the
   start, so the scroll length never jumps while a page still renders. */
.asrl-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.asrl-sheet {
	position: relative;
	/* --asrl-z is the reader's own zoom factor (1 = fit to width),
	   driven by pinch / double-tap / Ctrl+wheel from the reader JS. */
	width: calc(var(--asrl-z, 1) * 100%);
	max-width: calc(var(--asrl-z, 1) * 880px);
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 10px 28px rgba(11, 61, 36, 0.22), 0 2px 8px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	line-height: 0;
}
.asrl-sheet canvas {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
}
.asrl-sheet-num {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	background: rgba(11, 61, 36, 0.82);
	color: #fff;
	font-size: 11.5px;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	pointer-events: none;
}

/* ---------- Reading guide (করণীয় ও বর্জনীয়) ---------- */
.asrl-guide {
	background: #fff;
	border: 1px solid var(--asrl-border);
	border-radius: var(--asrl-radius);
	padding: 22px 24px;
	margin-bottom: 22px;
}
.asrl-guide h2 {
	color: var(--asrl-emerald);
	font-size: 21px;
	margin: 0 0 12px;
}
.asrl-guide > p { line-height: 1.8; }
.asrl-guide-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 6px;
}
@media (max-width: 700px) {
	.asrl-guide-cols { grid-template-columns: 1fr; }
}
.asrl-guide-col h3 {
	margin: 0 0 8px;
	font-size: 16.5px;
	color: var(--asrl-emerald);
}
.asrl-guide-col ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.asrl-guide-col li {
	margin-bottom: 7px;
	line-height: 1.75;
	font-size: 15px;
}
.asrl-guide-contact {
	margin: 14px 0 0;
	background: var(--asrl-cream);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.75;
}

/* Compact toolbar on phones: one slim row with thumb-sized targets. */
@media (max-width: 640px) {
	.asrl-reader-toolbar { gap: 6px; flex-wrap: nowrap; }
	.asrl-tool-btn { padding: 7px 10px; font-size: 13.5px; }
	.asrl-page-status { font-size: 13.5px; padding: 0 1px; }
	.asrl-reader-stage { padding: 10px 6px; }
	.asrl-pages { gap: 10px; }
}

/* Automatic reading comfort: when the device itself is in dark mode
   the reader dims itself a touch — no on-screen option anywhere, it
   simply follows the screen. */
@media (prefers-color-scheme: dark) {
	.asrl-reader { background: #0a120d; }
	.asrl-sheet canvas { filter: brightness(0.93) sepia(0.07); }
}



/* Loading overlay: spinner + determinate progress when the server
   reports the file size. */
.asrl-reader-loading {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(247, 245, 236, 0.94);
	border-radius: 10px;
	text-align: center;
	padding: 20px;
}
.asrl-reader-loading[hidden] { display: none; }
.asrl-reader-loading p { margin: 0; font-weight: 600; color: var(--asrl-emerald); }
.asrl-spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 4px solid var(--asrl-sage);
	border-top-color: var(--asrl-emerald-2);
	animation: asrl-spin 0.9s linear infinite;
}
@keyframes asrl-spin { to { transform: rotate(360deg); } }
.asrl-progress {
	width: min(260px, 70%);
	height: 6px;
	border-radius: 99px;
	background: var(--asrl-sage);
	overflow: hidden;
}
.asrl-progress-bar {
	height: 100%;
	width: 0;
	background: var(--asrl-emerald-2);
	transition: width 0.2s ease;
}

.asrl-reader:fullscreen { background: #fff; overflow: auto; padding: 16px; display: flex; flex-direction: column; }
.asrl-reader:fullscreen .asrl-reader-stage { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ---------- Reader overlay (v1.0.5) ----------
   The reader is not a section in the page flow at all: it lives as a
   full-viewport overlay that appears only when "অনলাইনে পড়ুন" is
   clicked, so the landing page carries no separate reader screen below
   and reading starts right from the button — nothing on screen but the
   toolbar and the page. visibility (not display) keeps its layout
   measurable while hidden, so the fit maths works the moment it opens. */
.asrl-reader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #12211a;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
	/* No browser gestures anywhere in the overlay (see the stage rule). */
	touch-action: none;
}
.asrl-reader.asrl-reading {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
body.asrl-reading-open { overflow: hidden; }
.asrl-reader > h2,
.asrl-reader .asrl-reader-hint,
.asrl-reader .asrl-reader-note { display: none; }
.asrl-reader .asrl-reader-toolbar {
	background: rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	padding: 6px;
}
.asrl-reader .asrl-reader-stage {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}
.asrl-close-reading {
	display: inline-block;
	margin-left: auto;
	background: var(--asrl-gold);
	border-color: var(--asrl-gold);
	color: #231a04;
	font-weight: 700;
}
.asrl-reader-hint { color: var(--asrl-sage-dark); font-size: 13.5px; margin-top: 10px; }
.asrl-reader-note { color: var(--asrl-muted); font-size: 13px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
	.asrl-spinner { animation-duration: 2.4s; }
}

/* ---------- Share + FAQ + related ---------- */
.asrl-share-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.asrl-share-row .asrl-share {
	border: 1px solid var(--asrl-border);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 14.5px;
	color: var(--asrl-ink);
}
.asrl-share-row .asrl-share:hover { background: var(--asrl-sage); text-decoration: none; }
.asrl-faq-item {
	border: 1px solid var(--asrl-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 10px;
}
.asrl-faq-item summary { cursor: pointer; font-weight: 600; }
.asrl-faq-answer { margin-top: 8px; color: var(--asrl-ink); }
.asrl-related-posts ul { margin: 0; padding-left: 20px; }
.asrl-about { background: var(--asrl-cream); text-align: center; }
.asrl-tagline { color: var(--asrl-gold); font-weight: 700; }