/* Advance KSA: the online reader (W-READER plugin). Style handle 'advance-reader', which the plugin
   loads after its defaults ('advance-reader-base') on the reader page only. It maps the plugin's
   --ar-* variables to the brand (light and dark) and sets calm reading defaults. The book's
   content.css (.advance-reader .ar-content ...) is more specific and keeps its own layout. */

.advance-reader {
	--ar-bg: #FCFCFE;
	--ar-panel: #FFFFFF;
	--ar-border: var(--line, #D9DEF0);
	--ar-text: var(--ink, #161B45);
	--ar-muted: var(--ink-2, #4B5275);
	--ar-primary: var(--blue-700, #222EAA);
	--ar-primary-text: #FFFFFF;
	--ar-accent: var(--orange-500, #DC9434);
	--ar-mark: var(--orange-100, #FBEEDC);
	--ar-font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--ar-font-head: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	font-size: 1.125rem;
	line-height: 1.95;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
.advance-reader[data-theme="dark"] {
	--ar-bg: #0E1233;
	--ar-panel: #151A45;
	--ar-border: #283067;
	--ar-text: #E6E9FB;
	--ar-muted: #A9B0D9;
	--ar-primary: #AEB8F5;
	--ar-primary-text: #0C1042;
	--ar-mark: #5A3D12;
}

/* Reading column: about 65 Arabic characters a line. */
.advance-reader.ar-reader { max-width: 46rem; }
.advance-reader :where(p, li) { text-wrap: pretty; }
.advance-reader :where(h1, h2, h3, h4) { color: inherit; font-family: var(--ar-font-head); font-weight: 700; line-height: 1.6; }
.advance-reader :where(p) { margin: 0 0 1em; }
.advance-reader :where(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.4em; }
.advance-reader :where(li) { margin-bottom: .35em; }
.advance-reader :where(a) { color: var(--ar-primary); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.advance-reader :where(blockquote) { margin: 1.2em 0; padding: .2em 1em; border-inline-start: 3px solid var(--ar-accent); color: var(--ar-muted); }
.advance-reader :where(hr) { margin: 2em 0; border: 0; border-top: 1px solid var(--ar-border); }
.advance-reader :where(figcaption) { color: var(--ar-muted); font-size: .85em; line-height: 1.7; }
.advance-reader :where(table) { font-variant-numeric: tabular-nums; }

/* Chrome of the reader: brand buttons and the progress line. */
.advance-reader .ar-btn-primary { font-family: var(--ar-font-head); }
.advance-reader .ar-bar { backdrop-filter: saturate(1.2); }
.advance-reader .ar-progress span { background: var(--ar-accent); }
.advance-reader .ar-kicker { color: var(--orange-700, #A45A0B); }
.advance-reader[data-theme="dark"] .ar-kicker { color: var(--ar-accent); }
.advance-reader .ar-card { border-radius: var(--r-m, 12px); }
.advance-reader .ar-book-title { color: var(--ar-text); }

/* Contents drawer (the plugin opens it from the start side on every screen size). */
.advance-reader .ar-toc { box-shadow: -8px 0 32px rgb(12 16 66 / .22); }
.advance-reader .ar-toc-head { font-family: var(--ar-font-head); font-weight: 700; }
.advance-reader .ar-toc-list a { display: flex; align-items: center; min-height: 44px; font-size: .95rem; }
.advance-reader .ar-toc-list a.is-current { border-right-color: var(--ar-accent); background: var(--ar-mark); }
.advance-reader .ar-toc-part { color: var(--ar-primary); }
.advance-reader .ar-backdrop { background: rgb(12 16 66 / .5); }

/* «مكتبتي» logged out (2.1.4, QA P3-9): WooCommerce's login form in the brand style: full-width fields as on the
   checkout, a navy button (orange stays for buying), the links in the brand blue. */
.woocommerce-form-login .form-row { float: none; width: 100%; margin: 0 0 var(--s-4); padding: 0; }
.woocommerce-form-login label { display: block; margin-bottom: 6px; color: var(--navy); font-weight: 600; font-size: var(--fs-sm); line-height: 1.6; }
.woocommerce-form-login .input-text { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); color: var(--ink); font: inherit; font-size: var(--fs-base); }
.woocommerce-form-login .input-text:focus { border-color: var(--navy); outline: 3px solid rgb(217 190 140 / .55); outline-offset: 1px; }
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-weight: 400; }
.woocommerce-form-login .woocommerce-form-login__rememberme input { width: 20px; height: 20px; accent-color: var(--navy); }
.woocommerce-form-login .woocommerce-form-login__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .55em 1.8em; border: 0; border-radius: var(--r); background: var(--navy); color: var(--white); font: 600 var(--fs-base) / 1.3 var(--font-body); cursor: pointer; }
.woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-form-login .woocommerce-form-login__submit:focus-visible { background: var(--navy-2); color: var(--white); }
.woocommerce-form-login .lost_password a { color: var(--royal); }

/* «مكتبتي» (2.2.0, owner: «الـ preview بتاع المنتجات كلها في صفحة شكلها نضيف»): every book a card in one grid: the
   whole cover (assets/img/covers, via inc/library.php), the title, pages and chapters, «افتح». Phones: the cover beside
   the text; from 700 px a shelf of cards with the cover on top. The page title is the H1, so the plugin's own heading
   (the same word) is hidden for sighted readers. */
.advance-reader.ar-page > .ar-h:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.advance-reader .ar-greeting { margin: 0 0 var(--s-4, 16px); color: var(--ink-2, #4B5275); font-size: var(--fs-base, 1.1875rem); }
.advance-reader .ar-books { grid-template-columns: minmax(0, 1fr); gap: var(--s-3, 12px); margin: 0 0 var(--s-5, 24px); }
.advance-reader .ar-book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4, 16px); align-items: stretch; padding: var(--s-4, 16px); border: 0; border-radius: var(--r-l, 16px); background: var(--white, #fff); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line, #D9DEF0); }
.advance-reader .ar-cover { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 18px rgb(7 10 34 / .2); }
.advance-reader .ar-book-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.advance-reader .ar-book .ar-kicker { margin: 0; color: var(--bronze, #806230); font-size: var(--fs-xs, .875rem); font-weight: 600; line-height: 1.5; }
.advance-reader .ar-book-title { margin: 0; color: var(--navy, #0C1042); font-family: var(--ar-font-head); font-size: var(--fs-base, 1.1875rem); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.advance-reader .ar-book .ar-muted { margin: 0; color: var(--stone, #6B6F80); font-size: var(--fs-xs, .875rem); line-height: 1.6; }
.advance-reader .ar-book .ar-last { display: block; color: var(--ink-2, #4B5275); }
.advance-reader .ar-book .ar-actions { margin: auto 0 0; padding-top: var(--s-3, 12px); }
.advance-reader .ar-book .ar-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .5em 1.6em; border: 0; border-radius: var(--r, 10px); background: var(--navy, #0C1042); color: var(--white, #fff); font-family: var(--font-body, inherit); font-size: var(--fs-base, 1.1875rem); font-weight: 600; text-decoration: none; }
.advance-reader .ar-book .ar-btn-primary:hover, .advance-reader .ar-book .ar-btn-primary:focus-visible { background: var(--navy-2, #1A2060); color: var(--white, #fff); }
.advance-reader .ar-line { border-radius: var(--r-l, 16px); }
@media (min-width: 700px) {
	.advance-reader .ar-books { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-4, 16px); }
	.advance-reader .ar-book { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: var(--s-4, 16px) var(--s-4, 16px) var(--s-5, 24px); }
	.advance-reader .ar-cover { width: auto; max-height: 240px; margin: 0 auto var(--s-2, 8px); }
	.advance-reader .ar-book .ar-btn-primary { width: 100%; }
}