/* ========== Base Reset & Tokens ========== */
* { box-sizing: border-box; }
:root {
--bg: #fafafa;
--text: #222;
--muted: #666;
--muted-2: #333;
--card: #fff;
--border: #eee;
--brand: #111;
--shadow: 0 1px 0 rgba(0,0,0,.02);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 14px;
--space-1: 6px;
--space-2: 8px;
--space-3: 10px;
--space-4: 12px;
--space-5: 14px;
--space-6: 16px;
}
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
}
/* ========== Layout ========== */
.container {
max-width: 980px;
margin: var(--space-6) auto;
padding: 0 var(--space-6);
}
.header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--card);
border-bottom: 1px solid var(--border);
backdrop-filter: saturate(180%) blur(6px);
}
.header .brand { font-weight: 700; letter-spacing: .2px; }
.header .spacer { flex: 1; }
.header a {
color: var(--brand);
text-decoration: none;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
}
.header a.active,
.header a:hover {
background: color-mix(in oklab, var(--border) 60%, transparent);
}
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
/* ========== Form Controls & Buttons ========== */
select,
input,
button {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card);
color: var(--text);
}
button.primary {
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
button:disabled { opacity: .6; cursor: not-allowed; }
/* ========== Cards & Grids ========== */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin: var(--space-3) 0;
box-shadow: var(--shadow);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-3);
}
/* ========== Utilities ========== */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.badge {
display: inline-block;
font-size: 12px;
padding: 3px 8px;
border-radius: 999px;
background: color-mix(in oklab, var(--border) 85%, transparent);
}
.small { font-size: 12px; color: var(--muted); }
.local { margin-top: 4px; color: var(--muted-2); }
/* ========== Ayah Blocks ========== */
.ayah {
padding: var(--space-4) 0;
border-bottom: 1px dashed var(--border);
}
.ayah:last-child { border-bottom: 0; }
.ar {
font-size: 22px;
line-height: 1.8;
text-align: right;
}
/* ========== Bookmark Star in List Rows ========== */
.ayah-row {
position: relative;
padding-left: 36px; /* room for star button */
}
.ayah-row .bm {
position: absolute;
left: 10px;
top: 8px;
border: none;
background: transparent;
font-size: 18px;
cursor: pointer;
opacity: .5;
line-height: 1;
}
.ayah-row .bm.on { opacity: 1; }
.ayah-row .bm:focus { outline: 2px solid color-mix(in oklab, var(--brand) 30%, #888); }
/* ========== Auth Card ========== */
.login-card {
max-width: 380px;
margin: 2rem auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-6);
}
.login-card input {
width: 100%;
margin: .25rem 0 1rem;
padding: .5rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card);
color: var(--text);
}
/* ========== Quick Verse Cards ========== */
.qv-card { border-radius: 14px; }
.qv-ar {
font-size: 1.6rem; line-height: 2.2rem;
font-family: "Scheherazade New","Amiri","Noto Naskh Arabic","Lateef", serif;
text-align: right;
}
.qv-trn {
font-size: 1.05rem; line-height: 1.8rem;
font-family: "Noto Serif Bengali","Siyam Rupali","Hind Siliguri", serif;
}
/* ========== Surah Grid/List ========== */
.surah-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
}
.surah-item {
display: grid;
grid-template-columns: 56px 1fr auto auto;
align-items: center;
padding: 12px 16px;
border: 1px solid #eee;
border-radius: 12px;
background: #fff;
text-decoration: none;
color: #222;
transition: box-shadow .12s ease, transform .05s ease;
}
.surah-item:hover {
box-shadow: 0 2px 12px rgba(0,0,0,.06);
transform: translateY(-1px);
}
.si-left { display:flex; align-items:center; justify-content:center; }
.si-diamond {
width: 40px; height: 40px;
background: #f5f5f5;
transform: rotate(45deg);
border-radius: 8px;
display:flex; align-items:center; justify-content:center;
}
.si-diamond span { transform: rotate(-45deg); font-weight: 700; }
.si-name-en { font-weight: 700; line-height: 1.2; }
.si-name-bn { font-size: .92rem; color: #666; margin-top: 2px; }
.si-ar {
font-family: "Scheherazade New","Amiri","Noto Naskh Arabic","Lateef", serif;
font-size: 1.15rem; padding: 0 12px; white-space: nowrap;
}
.si-meta { color: #666; font-size: .9rem; white-space: nowrap; }
/* ========== Surah Detail ========== */
.sd-header { margin-bottom: 12px; }
.sd-title { font-size: 1.3rem; margin: 0 0 8px; }
.sd-name { font-weight: 700; }
.ayah-list { display: flex; flex-direction: column; gap: 10px; }
.ayah-card {
padding: 12px 14px;
border: 1px solid #eee;
border-radius: 14px;
background: #fff;
}
.ayah-pill {
display: inline-block;
min-width: 46px;
text-align: center;
padding: 4px 10px;
border-radius: 999px;
background: #f5f5f7;
color: #333;
font-weight: 700;
margin-bottom: 8px;
}
.ayah-ar {
font-family: "Scheherazade New","Amiri","Noto Naskh Arabic","Lateef", serif;
font-size: 1.35rem;
line-height: 2rem;
text-align: right;
margin-bottom: 6px;
direction: rtl;
}
.ayah-tr {
font-size: 1.03rem;
line-height: 1.7rem;
font-family: "Kalpurush","Noto Serif Bengali","Siyam Rupali","Hind Siliguri", serif;
}
mark { padding: 0 .15em; border-radius: .2em; }
/* ========== Error Messages ========== */
.error { color: #c0392b; margin-top: .5rem; }
/* ========== Search Page ========== */
.search-page { max-width: 980px; margin: 0 auto; padding: 0 12px; }
/* Sticky search bar */
.search-sticky {
position: sticky;
top: 64px; /* header height */
z-index: 1030;
border-radius: 16px;
margin-bottom: 1rem;
background: rgba(255,255,255,0.96);
backdrop-filter: saturate(150%) blur(4px);
}
/* Inputs */
.search-page .form-control,
.search-page .form-select { min-height: 44px; }
.search-page .form-select { min-width: 140px; }
/* Results card */
.search-results.card { border-radius: 16px; overflow: hidden; }
.search-results .card-header,
.search-results .card-footer { background: #fafafa; }
/* Result item */
.search-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 12px;
}
.search-item__meta { font-size: 13px; color: #6c757d; }
.search-item__open { align-self: start; }
.search-item:hover { background: #fcfcff; }
/* Text blocks */
.search-ayah-ar {
font-size: 1.25rem;
line-height: 1.9rem;
direction: rtl;
text-align: right;
margin: 6px 0 2px;
}
.search-ayah-tr { margin: 2px 0 0; }
.search-ayah-en { margin: 2px 0 0; color: #6c757d; font-size: .95rem; }
/* Highlight */
.search-page mark {
padding: .1em .22em;
border-radius: 4px;
background: #fff3cd;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
/* Pager */
.search-pager .btn { min-width: 96px; }
/* ========== Fonts ========== */
[lang="ar"], .search-ayah-ar {
font-family: "Noto Naskh Arabic","Scheherazade New","Amiri","Lateef", serif;
}
html[lang="bn"] body {
font-family: "Kalpurush","Noto Sans Bengali", system-ui, sans-serif;
}
/* Bangla Fonts */
@font-face {
font-family: 'Kalpurush';
src: url('/fonts/kalpurush/kalpurush.woff2') format('woff2'),
url('/fonts/kalpurush/kalpurush.woff') format('woff'),
url('/fonts/kalpurush/kalpurush.ttf') format('truetype');
font-display: swap;
}
/* Arabic Quran Fonts */
/* Noore Hidayat */
@font-face {
font-family: 'noorehidayat';
src: url('/fonts/noorehidayat/noorehidayat.woff2') format('woff2'),
url('/fonts/noorehidayat/noorehidayat.woff') format('woff'),
url('/fonts/noorehidayat/noorehidayat.ttf') format('truetype');
font-display: swap;
}
/* Me Quran */
@font-face {
font-family: 'me_quran';
src: url('/fonts/me_quran.woff') format('woff'),
url('/fonts/me_quran.ttf') format('truetype');
font-display: swap;
}
/* PDMS Saleem Quran */
@font-face {
font-family: 'PDMSSaleemQuranFont';
src: url('/fonts/indopak/pdms/pdms_saleem_quran.woff2') format('woff2'),
url('/fonts/indopak/pdms/pdms_saleem_quran.woff') format('woff'),
url('/fonts/indopak/pdms/pdms_saleem_quran.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: "Diwan Thuluth";
src: url("/fonts/thuluth/DiwanThuluth.woff2") format("woff2"),
url("/fonts/thuluth/DiwanThuluth.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* New surah detail page */
/* ===== Surah Reader (Quran.com-like) ===== */
.surah-reader {
max-width: 980px;
margin: 0 auto;
}
/* Sticky header for reader */
/* .sr-top {
position: sticky;
top: 64px;
z-index: 1020;
border-radius: 16px;
margin: 12px 0;
padding: 12px 16px;
background: rgba(255,255,255,0.96);
border: 1px solid var(--border);
backdrop-filter: saturate(150%) blur(4px);
} */
.sr-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sr-title .sr-surah-name { display: flex; gap: 8px; align-items: baseline; }
.sr-name-bn { font-weight: 700; font-size: 1.2rem; }
.sr-number { color: #6c757d; font-size: .95rem; }
.sr-actions .btn { min-width: 96px; }
.sr-controls {
margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.sr-search { display: flex; gap: 8px; align-items: center; }
.sr-search .form-control { min-width: 120px; min-height: 40px; }
.sr-toggles { display: flex; gap: 12px; align-items: center; }
.form-check { display: inline-flex; gap: 6px; align-items: center; }
.sr-bismillah { display: flex; justify-content: center; margin: 16px 0 8px; }
.sr-bismillah-ar { font-size: 1.6rem; line-height: 2.2rem; }
/* Verse list */
.sr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sr-item {
display: grid;
grid-template-columns: 64px 1fr;
align-items: start;
gap: 8px 12px;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--card);
}
/* Make Arabic + translations use the wide column */
.sr-item { grid-template-columns: 64px 1fr; } /* already there */
.sr-ar, .sr-tr, .sr-en { grid-column: 2 / -1; }
/* Optional: a bit more readable sizes */
.sr-tr { font-size: 1.12rem; line-height: 1.9rem; }
.sr-en { font-size: 1rem; line-height: 1.7rem; color: #6c757d; }
/* Gutter (ayah no + bookmark) */
.sr-gutter { display: grid; grid-template-rows: auto auto; justify-items: center; gap: 6px; }
.sr-ayahno {
width: 36px; height: 36px; display: grid; place-items: center;
border-radius: 999px; background: #f5f5f7; color: #333; font-weight: 700;
}
.sr-bm {
border: none; background: transparent; font-size: 18px; line-height: 1; opacity: .4; cursor: pointer;
}
.sr-bm.on { opacity: 1; color: #f59e0b; }
/* Arabic + translations */
.sr-ar { font-size: 1.5rem; line-height: 2.2rem; margin-top: 4px; text-align: right; }
.sr-tr { font-size: 1.05rem; line-height: 1.8rem; margin-top: 8px; }
.sr-en { margin-top: 6px; }
.sr-bottom {
display: flex; gap: 10px; justify-content: center; align-items: center;
border-radius: 12px; padding: 12px; margin: 10px 0 24px;
}
@media (max-width: 576px) {
.sr-item { grid-template-columns: 48px 1fr; padding: 10px 12px; }
.sr-ar { font-size: 1.35rem; line-height: 2rem; }
.sr-bismillah-ar { font-size: 1.4rem; line-height: 2rem; }
}
/* Apply globally to Arabic text */
[lang="ar"], .ayah-ar, .search-ayah-ar, .qv-ar {
direction: rtl;
font-family: noorehidayat, "me_quran", "PDMSSaleemQuranFont", sans-serif;
font-size: 30px;
line-height: 1.8;
}
/* Quran font utility — apply anywhere */
/* .font-quran {
font-family: noorehidayat, "me_quran", "PDMSSaleemQuranFont", sans-serif !important;
letter-spacing: 0; /* keep mushaf spacing
direction: rtl;
text-align: right;
} */
/* Also style any element that correctly declares Arabic language */
[lang="ar"] {
font-family: noorehidayat, "me_quran", "PDMSSaleemQuranFont", sans-serif;
}
/* Common Arabic blocks in your app */
.qv-ar, .ayah-ar, .si-ar, .ar, .search-ayah-ar {
font-family: noorehidayat, "me_quran", "PDMSSaleemQuranFont", sans-serif !important;
direction: rtl;
text-align: right;
word-spacing: 9px; /* Quran mushaf spacing */
}
/* Utility to force Quran fonts everywhere you add it */
.font-quran {
font-family: noorehidayat, "me_quran", "PDMSSaleemQuranFont", sans-serif !important;
letter-spacing: 0;
direction: rtl;
text-align: right;
word-spacing: 9px; /* Quran mushaf spacing */
}
/* Random verse Arabic line sizing (matches your old inline sizes) */
.rv-ar { font-size: 1.6rem; line-height: 2.2rem; }
/* Random verse card parity */
.qv-card .qv-ar { margin-bottom: 8px; }
.qv-card .qv-trn { margin-top: 6px; }
.qv-card .qv-meta { margin-top: 6px; }
.qv-card .qv-actions { margin-top: 10px; }
/* Reader grid + offset under sticky header */
.sr-item { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); scroll-margin-top: 96px; }
.sr-gutter { display: grid; grid-template-rows: auto auto; justify-items: center; gap: 6px; }
.sr-ref { font-size: .95rem; color: #6c757d; }
.sr-actions-col { display: grid; gap: 6px; }
.sr-act { border: none; background: transparent; font-size: 18px; line-height: 1; opacity: .4; cursor: pointer; }
.sr-act.on { opacity: 1; color: #f59e0b; }
.sr-ar, .sr-tr, .sr-en { grid-column: 2 / -1; }
/* --- Surah Reader fixes --- */
/* Make sticky top sit below navbar and leave space before first card */
.sr-top {
position: sticky;
top: 72px; /* was 64 — adjust if your navbar differs */
margin-bottom: 16px;
z-index: 1020;
}
/* Grid and scroll offset (prevents sticky overlap when jumping) */
.sr-item {
display: grid;
grid-template-columns: 72px 1fr;
gap: 8px 12px;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--card);
scroll-margin-top: 120px; /* increase to match .sr-top top */
}
/* Force content to wide column */
.sr-ar, .sr-tr, .sr-en { grid-column: 2 / -1; }
/* Gutter layout */
.sr-gutter { display: grid; grid-template-rows: auto auto; justify-items: center; align-items: start; gap: 8px; }
/* Circular Surah:Ayah badge (Bangla/English digits via controller formatter) */
.sr-ref-badge {
width: 40px; height: 40px;
border-radius: 999px;
background: #ededf1;
color: #555;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .9rem;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
/* Action buttons vertical under the circle */
.sr-actions-col { display: grid; gap: 8px; }
.sr-act { border: none; background: transparent; font-size: 18px; line-height: 1; opacity: .4; cursor: pointer; }
.sr-act.on { opacity: 1; color: #f59e0b; }
/* Arabic & translations (unchanged sizes, adjust if you like) */
.sr-ar { font-size: 1.5rem; /*line-height: 2.2rem;*/ text-align: right; }
.sr-tr { line-height: 1.9rem; margin-top: 8px; color: #A1A1A1;}
.sr-en { font-size: 1rem; line-height: 1.7rem; margin-top: 6px; color: #6c757d; }
.sr-tr-select { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tr-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 999px;
background: #f3f4f6; color: #333; cursor: pointer; user-select: none;
}
.tr-pill input { margin: 0; }
.sr-tr-name { margin-top: 6px; }
/* --- PATCH: Surah Reader polish (non-destructive) --- */
/* 1) Translator pills: clearer active/hover states */
.tr-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: #f3f4f6;
color: #333;
border: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
.tr-pill:hover { background: #eef1f5; }
.tr-pill input { margin: 0; }
.tr-pill.active {
background: color-mix(in oklab, var(--brand) 10%, #eef5ff);
border-color: color-mix(in oklab, var(--brand) 25%, var(--border));
color: var(--text);
font-weight: 600;
}
/* If you add .active in ng-class on checked pills, it’ll style nicely. */
/* 2) Surah:Ayah badge – match your tokens a bit more */
.sr-ref-badge {
width: 40px; height: 40px;
border-radius: 999px;
background: #ededf1;
color: #444;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .95rem;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
/* 3) Prevent Bengali translations from breaking by word
(if your template wraps words in spans/divs) */
.sr-tr { white-space: normal; word-break: break-word; }
.sr-tr > * { display: inline; } /* any child spans inline */
.ayah-tr { white-space: normal; word-break: break-word; }
.ayah-tr > * { display: inline; }
/* If server returns
between words, CSS can’t join them;
then we should fix the text at source (join with spaces). */
/* 4) Arabic block stays right; ensure consistent sizing with your fonts */
.sr-ar { text-align: right; direction: rtl; }
/* 5) Reader grid spacing & hover */
.sr-item { transition: background-color .12s ease; }
/* 6) Small align tweaks for gutter column */
.sr-gutter { align-items: start; gap: 8px; }
/* 7) Make checkboxes/pills row wrap nicely */
.sr-tr-select { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
/* Mobile */
@media (max-width: 576px){
.sr-item { grid-template-columns: 64px 1fr; scroll-margin-top: 128px; }
.sr-ref-badge { width: 36px; height: 36px; font-size: .85rem; }
}
/* ---- Surah detail UI polish (keeps your fonts/tokens) ---- */
/* Active/hover state for translator pills */
.tr-pill { border: 1px solid var(--border); background: #f3f4f6; }
.tr-pill:hover { background: #eef1f5; }
.tr-pill.active {
background: color-mix(in oklab, var(--brand) 10%, #eef5ff);
border-color: color-mix(in oklab, var(--brand) 25%, var(--border));
font-weight: 600;
}
/* Better circular badge */
.sr-ref-badge {
width: 40px; height: 40px;
border-radius: 999px;
background: #ededf1;
color: #444;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .95rem;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
/* Make translations flow inline, not one word per line */
.sr-tr-text, .sr-tr { white-space: normal; word-break: break-word; }
.sr-tr-text > * { display: inline; }
/* Slight hover feedback */
.sr-item { transition: background-color .12s ease; }
/* Flatten any residual tags inside translation text */
.sr-tr-text,
.sr-tr-text * {
display: inline !important;
white-space: normal !important;
word-break: break-word !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.sr-col { grid-column: 2 / -1; }
/* Keep the translator name on its own line but compact */
.sr-tr-name { display: inline; margin-top: 6px; }
.sr-tr { margin-bottom: 8px; }
/* ========== Responsive Tweaks ========== */
@media (max-width: 576px) {
.container { padding: 0 12px; }
.ar { font-size: 20px; }
.search-page .btn,
.search-page .form-select,
.search-page .form-control { min-height: 44px; }
.search-item { grid-template-columns: 1fr; }
.search-item__open { justify-self: end; }
}
@media (max-width: 420px) {
.ayah-card { padding: 12px; }
.ayah-ar { font-size: 1.25rem; line-height: 1.8rem; }
.ayah-tr { font-size: 1rem; line-height: 1.6rem; }
}
/* Random card — same layout as Home */
.qv-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.qv-meta-left { display:flex; align-items:baseline; gap:8px; color:#6c757d; }
.qv-surah-name { font-weight:700; color: var(--text); }
.qv-sep { opacity:.6; }
.qv-ref { opacity:.9; }
.qv-actions .btn + .btn { margin-left:-1px; } /* segmented look */
.qv-card .qv-ar { margin: 6px 0 8px; text-align:right; }
.qv-card .qv-trn { margin-top: 6px; }
/* (already present in your app.css for fonts/typography) */
/* .qv-card, .qv-ar, .qv-trn, .local styles remain as-is */
/* ========== New html allow design ========== */
/* Default: show translation as a normal paragraph block */
.sr-tr-text { display:block; white-space:normal; }
/* Flatten ONLY non-rich translations so Bangla doesn't go one-word-per-line */
.sr-tr-text:not(.rich),
.sr-tr-text:not(.rich) * {
display: inline !important;
white-space: normal !important;
word-break: break-word !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* ==== Surah detail: translations & tafsir (final) ==== */
/* Base */
.sr-tr-text { display: block; white-space: normal; }
/* NON-rich translations keep inline flow (prevents one-word-per-line) */
.sr-tr-text:not(.rich),
.sr-tr-text:not(.rich) * {
display: inline !important;
white-space: normal !important;
word-break: break-word !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Rich tafsir: restore proper block layout */
.sr-tr-text.rich { white-space: normal; word-break: normal; }
.sr-tr-text.rich p,
.sr-tr-text.rich div,
.sr-tr-text.rich ul,
.sr-tr-text.rich ol,
.sr-tr-text.rich li,
.sr-tr-text.rich blockquote,
.sr-tr-text.rich h1,
.sr-tr-text.rich h2,
.sr-tr-text.rich h3,
.sr-tr-text.rich h4,
.sr-tr-text.rich h5,
.sr-tr-text.rich h6 {
display: block !important;
}
/* Spacing — key: bigger gap after the first paragraph (the verse line) */
.sr-tr-text.rich p:first-child { margin-bottom: 18px !important; }
.sr-tr-text.rich p { margin: 10px 0 16px; line-height: 1.9; color: #0f1115;}
.sr-tr-text.rich p:last-child { margin-bottom: 0; }
/* Translator label line + space before body */
.sr-tr .sr-tr-name { display: block; margin: 6px 0 10px; }
/* Space between multiple translators on the same ayah */
.sr-tr + .sr-tr { margin-top: 10px; }
/* Page rhythm (optional) */
.sr-ar { margin-bottom: 14px; }
.sr-item { padding-bottom: 18px; }
/* If you convert [n] → in sanitizeRich() */
.sr-note-idx { font-weight: 600; font-size: 0.9em; vertical-align: super; }
/* Minimal, clean translator chips */
.tr-chip {
display:inline-flex; align-items:center; gap:.4rem;
padding:.28rem .66rem; border:1px solid #e2e5ea; border-radius:999px;
background:#fff; user-select:none; cursor:pointer; font-size:.875rem;
}
.tr-chip input[type="checkbox"] { margin:0; }
.tr-chip input[type="checkbox"]:checked + span {
font-weight:600; background:#f0f3ff; border-radius:999px; padding:0 .2rem;
}
/* Meta pills under the title */
.meta-pill {
display:inline-block; padding:.25rem .6rem; border-radius:999px;
background:#f4f6f9; border:1px solid #e6e9ef; font-size:.875rem;
}
/* Random hero look (soft green) */
.random-hero {
background: linear-gradient(90deg, #e6f5ed, #d7efe6);
border-radius:16px; padding:.5rem .5rem; border:1px solid #d6e9df;
}
.random-hero .rand-ar { font-size: 1.6rem; line-height: 1.7; }
.random-hero .rand-tr { color:#5f6b6f; }
/* Translator pill bar */
.tools-pillbar {
background:#edf7f1; border:1px solid #d9eae1; border-radius:20px;
}
/* Simple translator chips */
.tr-chip {
display:inline-flex; align-items:center; gap:.4rem;
padding:.28rem .66rem; border:1px solid #e2e5ea; border-radius:999px;
background:#fff; user-select:none; cursor:pointer; font-size:.9rem;
}
.tr-chip input[type="checkbox"] { margin:0; }
.tr-chip input[type="checkbox"]:checked + span {
font-weight:600; background:#f0f3ff; border-radius:999px; padding:0 .2rem;
}
/* ===== Surah header look ===== */
.surah-badge{
width:78px; height:78px; flex:0 0 auto;
border-radius:9999px;
background:#106B3A; color:#fff;
display:inline-flex; align-items:center; justify-content:center;
font-weight:700; font-size:28px;
box-shadow:0 6px 16px rgba(16,107,58,.25);
}
.surah-headline{ font-size:32px; line-height:1.15; margin:0; }
@media (max-width:576px){
.surah-headline{ font-size:26px; }
.surah-badge{ width:64px; height:64px; font-size:24px; }
}
/* Arabic name in brackets next to local title */
.surah-title-ar{
color:#0D8A4A; /* green accent */
font-weight:700;
letter-spacing:.5px;
font-family:'Scheherazade','Amiri',serif; /* or your Quran font */
}
/* Meaning line under the title */
.surah-title-meaning{
font-size:16px;
color:#6c757d; /* muted */
}
/* Meta pills (Makki/Madani + Aya count) */
.meta-pill{
display:inline-flex; align-items:center; gap:.35rem;
padding:.35rem .75rem;
background:#f1f3f5;
color:#334155;
border-radius:999px;
font-size:.9rem;
}
/* Random hero + translator toolbar (soft green) */
.random-hero{ background:linear-gradient(0deg,#e8f5ec,#e1f3e9); border-radius:12px; padding:18px 20px; }
.tools-pillbar{ background:#eff7f1; border-radius:12px; }
/* Translator chips */
.tr-chip{
display:inline-flex; align-items:center; gap:.4rem;
padding:.35rem .6rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:999px;
font-size:.92rem;
}
.tr-chip input{ margin:0; }
/* Bismillah */
.sr-bismillah .sr-bismillah-ar{ font-size:36px; text-align:center; margin:8px 0 16px; }
/* Verse ref badge (left gutter) */
.sr-ref-badge{
background:#f8fafc; color:#475569;
border:1px solid #e5e7eb; border-radius:12px;
font-variant-numeric:tabular-nums;
padding:.25rem .5rem; font-size:.85rem;
}
/* Make sure Arabic lines use your Quran font */
.font-quran{ font-family:'KFGQPC Uthmanic Script','Scheherazade','Amiri',serif; }
/* --- Header meaning line: bigger / stronger --- */
.surah-title-meaning{
font-size: 18px;
line-height: 1.35;
font-weight: 600;
color: #475569; /* slate-600 */
}
@media (min-width: 768px){
.surah-title-meaning{ font-size: 20px; }
}
/* --- Arabic bracket title: fix shaping & direction --- */
/* Do NOT letter-space Arabic; ensure proper joining and RTL parentheses */
.surah-title-ar{
color: #0D8A4A;
font-weight: 700;
letter-spacing: 0 !important; /* kill any spacing */
direction: rtl; /* correct pairing of brackets */
unicode-bidi: isolate; /* keep its own bidi context */
font-family: 'KFGQPC Uthmanic Script','Scheherazade','Amiri',serif;
margin-left: .25rem; /* a little breathing room after local title */
}
/* Bookmark star */
.sr-star { color:#9aa0a6; border-color:#d0d5db; }
.sr-star.on {
color:#f5c518; /* yellow star */
border-color:#f5c518;
background: rgba(245,197,24,.08);
}
/* Bottom pager */
.sr-pager{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:24px 0 8px;
}
.sr-pager-btn{
min-width: 156px;
border-radius: 999px;
padding: .5rem 1rem;
font-weight: 500;
}
/* Optional: keep layout sensible for Arabic */
.sr-pager.is-rtl{
direction: rtl;
}
.sr-pager.is-rtl .sr-pager-btn{
direction: ltr; /* so arrows stay visually correct inside the pill */
}
/* VERSE LIST: make Arabic right-aligned (RTL) no matter what it inherits */
.surah-reader .sr-list .sr-ar {
direction: rtl;
text-align: right !important;
display: block;
margin: 6px 0 8px; /* slightly tighter around the Arabic line */
}
/* If inner tags (span/p) were given center alignment, override them too */
.surah-reader .sr-list .sr-ar * {
text-align: inherit !important; /* inherit "right" from the parent */
}
/* Keep the green random block centered (unchanged) */
.random-hero .rand-ar { text-align: center; }
/* Tighten verse card spacing a bit */
.surah-reader .sr-item {
padding: 16px 18px; /* reduce vertical padding inside cards */
margin-bottom: 12px; /* reduce gap between cards */
}
.surah-reader .sr-item:last-child { margin-bottom: 8px; }
/* Slightly tighter translation spacing */
.surah-reader .sr-tr-name { margin: 6px 0 2px; }
.surah-reader .sr-tr-text { margin-top: 4px; }
/* tighten the Arabic line (this replaces Bootstrap's my-2) */
.surah-reader .sr-item .font-quran[lang="ar"] {
margin-top: .25rem !important; /* was .5rem via my-2 */
margin-bottom: .35rem !important;
text-align: right; /* keep it on the right */
direction: rtl;
}
/* reduce padding inside each verse card and the gap between cards */
.surah-reader .sr-item {
padding: 12px 16px; /* was larger */
margin-bottom: 10px; /* space between cards */
}
/* translation block spacing a bit tighter */
.surah-reader .sr-tr-name { /* — Translator */
margin: 6px 0 2px;
}
.surah-reader .sr-tr-text {
margin-top: 4px;
}
/* Use the grid gap as the only vertical spacing */
.surah-reader .sr-list {
/* tighten the list gap; set both sides explicitly if you had two numbers */
row-gap: 8px; /* vertical gap (was 16px) */
column-gap: 8px; /* keep your horizontal gap, or adjust as needed */
/* If you prefer a single value instead: gap: 8px; */
}
/* Kill any extra per-card margins that double the spacing */
.surah-reader .sr-item,
.surah-reader .sr-item.card {
margin-bottom: 0 !important;
}
/* (Optional) if you used Bootstrap helpers like .mb-3 on cards, neutralize them here */
.surah-reader .sr-item.mb-3 { margin-bottom: 0 !important; }
/* extra gap ONLY after the Arabic verse line inside the list */
.surah-reader .sr-list .sr-item [lang="ar"][dir="rtl"],
.surah-reader .sr-list .sr-item .font-quran[lang="ar"] {
margin-bottom: 18px !important; /* tune: 12–20px */
}
/* extra space just below the Arabic line inside each verse card */
.surah-reader .sr-list .sr-item .font-quran[lang="ar"],
.surah-reader .sr-list .sr-item [lang="ar"][dir="rtl"] {
margin-bottom: 14px !important; /* tweak: 12–18px */
}
/* translations: keep your gray + improve readability */
.surah-reader .sr-tr {
line-height: 1.9rem;
margin-top: 8px; /* gap between multiple translations */
color: #A1A1A1;
}
/* translator name a touch smaller & muted */
.surah-reader .sr-tr-name {
font-size: .92rem;
color: #9aa0a6;
margin-bottom: 4px;
}
/* responsive: a hair tighter on small screens */
@media (max-width: 768px) {
.surah-reader .sr-list .sr-item [lang="ar"][dir="rtl"],
.surah-reader .sr-list .sr-item .font-quran[lang="ar"] {
margin-bottom: 12px !important;
}
.surah-reader .sr-tr { line-height: 1.8rem; }
}
/* new */
/* =============== Surah header badge =============== */
.surah-badge{
--size: 112px; /* tweak overall size here */
width: var(--size);
height: var(--size);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
isolation: isolate; /* keep pseudo elements behind number */
}
/* The number inside */
.surah-badge__num{
font-weight: 800;
font-size: calc(var(--size) * 0.32);
line-height: 1;
color: #fff;
letter-spacing: 1px;
z-index: 1;
font-variant-numeric: lining-nums;
}
/* ---------- BEFORE: existing round badge ---------- */
.surah-badge--circle{
background: #0f6a44; /* your green */
border-radius: 999px;
box-shadow:
0 10px 30px rgba(15,106,68,.20),
inset 0 0 0 1px rgba(255,255,255,.06);
}
/* ---------- AFTER: star frame with green core ---------- */
/* green core (keeps the number readable) */
.surah-badge--star{
background: #0f6a44; /* same green core */
border-radius: 999px; /* core still round */
box-shadow:
0 10px 30px rgba(15,106,68,.20),
inset 0 0 0 1px rgba(255,255,255,.06);
}
/* decorative 8-point star frame, using your PNG/SVG */
.surah-badge--star::before{
content: "";
position: absolute;
inset: -12px; /* how far the frame expands around the core */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 0;
/* Use whichever asset you prefer.
1) Your provided “last box border” image:
*/
background-image: url("/images/star4.png"); /* put the file in /public/img/ */
/* 2) (Optional) If you’d rather inline an SVG, comment the line above and
use a data-URI below. You can swap stroke/color as you like.
background-image: url("data:image/svg+xml;utf8,\
");
*/
}
/* Slight hover lift (optional) */
.surah-badge:hover{ transform: translateY(-1px); transition: transform .2s ease; }
/* Force Diwan Thuluth only on the Arabic name in the list */
.surah-grid .surah-item .si-ar.thuluth {
font-family: "Diwan Thuluth", serif !important; /* override any global quran font */
font-size: 1.7rem;
line-height: 1.1;
font-weight: normal;
text-align: right;
white-space: nowrap;
}
/* Right column stacks Arabic name (top) + ayah count (bottom) */
.surah-grid .surah-item .si-right {
min-width: 128px;
display: flex;
flex-direction: column;
align-items: center; /* center like your target */
gap: 6px;
}
/* Ayah count shown just under Arabic name (teal-ish like your mock) */
.surah-grid .surah-item .si-ayahs.under-ar {
font-family: system-ui, -apple-system, "Inter", "Noto Sans Bengali", sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: #0aa29a;
line-height: 1.1;
}
/* If your old layout had a far-right meta, hide it to avoid duplicates */
.surah-grid .surah-item .si-meta { display: none !important; }
/* Force Diwan Thuluth ONLY on surah list Arabic names */
.surah-grid .surah-item .si-right .si-ar {
font-family: "Diwan Thuluth", serif !important;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.2;
text-align: center;
}
@font-face {
font-family: "A Thuluth Regular";
src: url("/fonts/thuluth/A-Thuluth-Regular.woff2") format("woff2"),
url("/fonts/thuluth/A-Thuluth-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Arabic surah names in the list */
.surah-grid .surah-item .si-right .si-ar {
font-family: "A Thuluth Regular", serif !important;
font-size: 1.9rem;
line-height: 1.2;
font-weight: normal;
text-align: center;
white-space: nowrap;
}
/* Apply ONLY to the Arabic name on the right */
.surah-grid .surah-item .si-right .si-ar {
font-family: "A Thuluth Regular", "Scheherazade New", "Amiri", serif !important;
font-size: 1.65rem; /* slightly smaller helps readability */
line-height: 1.05; /* tight like calligraphy */
font-weight: 400;
text-align: center;
white-space: nowrap;
direction: rtl;
/* --- Arabic shaping & ligatures --- */
font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
-webkit-font-feature-settings: "rlig" 1, "liga" 1, "calt" 1, "kern" 1;
font-feature-settings: "rlig" 1, "liga" 1, "calt" 1, "kern" 1;
/* --- spacing tweaks --- */
letter-spacing: 0; /* never expand Arabic letters */
word-spacing: -1px; /* pull words closer (subtle) */
/* render smoother */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Ayah count under it (kept as UI font) */
.surah-grid .surah-item .si-right .under-ar {
margin-top: 4px;
font-size: .95rem;
font-weight: 600;
color: #0aa29a;
}
/* Stack the right column (if not already) */
.surah-grid .surah-item .si-right {
min-width: 132px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Slightly larger on big screens */
@media (min-width: 1200px) {
.surah-grid .surah-item .si-right .si-ar { font-size: 1.8rem; }
}
/* ====== Mobile reading area optimizations (safe, non-breaking) ====== */
/* Keep your existing container, just trim gutters on small screens */
@media (max-width: 768px) {
.container,
.container-fluid,
.qmbd-container,
.main-content {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* Optional: cap desktop width but let mobile breathe edge-to-edge */
.main-content,
.page--surah .content,
.page--surah .container {
max-width: 860px; /* desktop/tablet */
margin-left: auto;
margin-right: auto;
}
/* Slim, sticky surah header – like Quran.com */
.page--surah .surah-topbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(140%) blur(6px);
border-bottom: 1px solid rgba(0,0,0,.05);
}
@media (max-width: 768px) {
.page--surah .surah-topbar {
padding: 8px 12px;
min-height: 44px;
}
.page--surah .surah-topbar .extras,
.page--surah .surah-topbar .breadcrumbs {
display: none; /* keep it simple on phones */
}
}
/* Verse card: reduce chrome, increase content */
.page--surah .verse-card {
border: 1px solid #eee;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
overflow: hidden;
}
.page--surah .verse-card + .verse-card { margin-top: 12px; }
@media (max-width: 768px) {
.page--surah .verse-card {
margin: 8px 0;
}
.page--surah .verse-card .verse-inner {
padding: 12px 14px; /* was usually 20–24px */
}
}
/* Collapse the left tool rail on phones (copy, share, play, etc.) */
@media (max-width: 768px) {
.page--surah .verse-left-rail,
.page--surah .verse-tools.left,
.page--surah .icons-col,
.page--surah .meta-col {
display: none !important;
}
/* If your template relies on grid columns, let the body stretch full width */
.page--surah .verse-body {
width: 100% !important;
max-width: 100% !important;
}
}
/* Arabic line: fluid sizing & comfortable line-height */
.page--surah .ayah-ar {
font-family: "KFGQPC Uthmanic Script", "Amiri Quran", "Scheherazade New", serif;
font-feature-settings: "calt" 1, "liga" 1;
letter-spacing: 0;
}
@media (max-width: 768px) {
.page--surah .ayah-ar {
font-size: clamp(26px, 6vw, 36px);
line-height: 1.9;
/* remove accidental side padding coming from your utilities */
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Translation block: readable width & spacing */
.page--surah .ayah-tr {
font-size: 17px;
line-height: 1.9;
color: #222;
}
@media (max-width: 768px) {
.page--surah .ayah-tr {
font-size: clamp(16px, 3.8vw, 18px);
margin-top: 10px;
}
}
/* Verse number badge floats top-right (saves a line) */
@media (max-width: 768px) {
.page--surah .verse-number-badge {
position: absolute;
top: 10px;
right: 12px;
transform: none;
}
}
/* Tighten vertical whitespace that often eats space on phones */
@media (max-width: 768px) {
.page--surah .verse-actions-top,
.page--surah .verse-actions-bottom {
margin-top: 6px !important;
margin-bottom: 0 !important;
}
.page--surah .divider,
.page--surah hr {
margin: 10px 0 !important;
}
}
/* Hide non-essential controls on phones; keep a three-dot inside card if you have it */
@media (max-width: 768px) {
.page--surah .btn-outline-secondary,
.page--surah .btn-sm.secondary,
.page--surah .action-label {
display: none !important;
}
}
/* Respect iOS notches for true edge-to-edge feel */
@supports (padding: max(0px)) {
@media (max-width: 768px) {
body,
.container,
.page--surah .content {
padding-left: max(10px, env(safe-area-inset-left)) !important;
padding-right: max(10px, env(safe-area-inset-right)) !important;
}
}
}
/* === Mobile reading-area fix for Surah page (drop at end) === */
@media (max-width: 768px) {
/* 1) Make the main container edge-to-edge on phones */
.page--surah .container,
.page--surah .content,
.page--surah .main-content {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Kill Bootstrap row negative margins inside Surah content */
.page--surah .content .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove grid padding so cards can use full width */
.page--surah .content [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Collapse the left icon/tools rail that’s stealing width */
.page--surah .verse-card .left-rail,
.page--surah .verse-card .icons-col,
.page--surah .verse-card .tools-col,
.page--surah .verse-card .meta-col,
.page--surah .verse-row > .col-auto:first-child {
display: none !important;
}
/* If the star/flag must remain, overlay it instead of reserving a column */
.page--surah .verse-card {
position: relative;
}
.page--surah .verse-card .btn-star,
.page--surah .verse-card .btn-flag {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
/* 3) Tighten the verse card shell */
.page--surah .verse-card {
margin: 10px 0 !important;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.page--surah .verse-card .verse-inner,
.page--surah .verse-body {
padding: 12px 14px !important;
}
/* 4) Arabic & translation comfortable sizing and no extra side spacing */
.page--surah .ayah-ar {
font-size: clamp(26px, 6vw, 36px) !important;
line-height: 1.9 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.page--surah .ayah-tr {
font-size: clamp(16px, 3.8vw, 18px) !important;
line-height: 1.9 !important;
margin-top: 10px !important;
}
/* 5) Trim extra gaps from action rows/dividers */
.page--surah .verse-actions-top,
.page--surah .verse-actions-bottom {
margin-top: 6px !important;
margin-bottom: 0 !important;
}
.page--surah .divider, .page--surah hr {
margin: 10px 0 !important;
}
}
/* Respect iPhone notches for true edge-to-edge feel */
@supports (padding: max(0px)) {
@media (max-width: 768px) {
.page--surah .content {
padding-left: max(10px, env(safe-area-inset-left)) !important;
padding-right: max(10px, env(safe-area-inset-right)) !important;
}
}
}
/* =========================================================
SURAH READER — CLEAN FINAL OVERRIDES
Desktop: gutter with badge over star
Mobile : top row (badge → star), Arabic below, no overlap
========================================================= */
/* ---------- Desktop / tablet ---------- */
@media (min-width: 769px) {
/* Keep two columns: 72px gutter + main content */
.surah-reader .sr-item.d-grid {
grid-template-columns: 72px 1fr !important;
align-items: start !important;
}
/* Left gutter: stack badge over star (vertical) */
.surah-reader .sr-item.d-grid > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
position: static !important;
text-align: center !important;
width: 72px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Badge (surah:ayah) */
.surah-reader .sr-item.d-grid > div:first-child .mono {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: #f3f4f6;
color: #111;
border-radius: 10px;
padding: 4px 8px;
font-weight: 600;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
position: static !important;
margin: 0 !important;
}
/* Star under badge */
.surah-reader .sr-star {
display: inline-flex !important;
align-items: center; justify-content: center;
font-size: 16px !important;
line-height: 1 !important;
opacity: .9 !important;
margin-top: 2px !important;
position: static !important;
}
.surah-reader .sr-star.on { color: #f5c518; opacity: 1 !important; }
/* Main content stays full width of column 2 */
.surah-reader .sr-item.d-grid > div:nth-child(2) { width: 100% !important; }
}
/* ---------- Mobile phones ---------- */
@media (max-width: 768px) {
/* Trim page gutters around reader content */
.surah-reader .container,
.surah-reader .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
.surah-reader .container .row { margin-left: 0 !important; margin-right: 0 !important; }
.surah-reader .container [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
/* Turn verse card into two rows: [topbar] over [main]
Also override any inline 72px grid only on mobile */
.surah-reader .sr-item.d-grid,
.surah-reader .sr-item.d-grid[style*="grid-template-columns"] {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
grid-template-areas: "topbar" "main" !important;
/* margin: 10px 0 !important; */
border-radius: 14px;
background: var(--card, #fff);
border: 1px solid var(--border, #eee);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
padding: 12px !important;
gap: 8px !important;
overflow: hidden !important;
}
/* First child becomes TOP ROW (badge → star), left aligned */
.surah-reader .sr-item.d-grid > div:first-child {
grid-area: topbar !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important; /* defeat .text-center */
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Badge */
.surah-reader .sr-item.d-grid > div:first-child .mono {
position: static !important; top:auto !important; right:auto !important; left:auto !important;
display: inline-block !important;
margin: 0 !important;
background: #f3f4f6;
color: #111;
border-radius: 10px;
padding: 2px 8px;
font-weight: 600;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
order: 1;
}
/* Star sits next to badge */
.surah-reader .sr-star {
position: static !important;
display: inline-flex !important;
align-items: center; justify-content: center;
padding: 2px 8px !important;
font-size: 14px !important; line-height: 1 !important;
margin: 0 !important;
opacity: 1 !important; visibility: visible !important;
order: 2;
}
/* Main content row */
.surah-reader .sr-item.d-grid > div:nth-child(2) {
grid-area: main !important;
width: 100% !important;
margin: 0 !important;
}
/* Comfortable typography */
.surah-reader .font-quran[lang="ar"] {
font-size: clamp(26px, 6vw, 36px) !important;
line-height: 1.9 !important;
margin: 0 !important;
/* text-align: right !important; */
}
.surah-reader .sr-tr {
font-size: clamp(16px, 3.8vw, 18px) !important;
line-height: 1.9 !important;
margin-top: 8px !important;
}
}
/* =========================================================
END Surah Reader final clean-up
========================================================= */
.auth-container {
display:flex;
justify-content:center;
align-items:center;
height:80vh;
background:#fff;
}
.auth-card {
width:400px;
background:#fff;
border:1px solid #eee;
border-radius:14px;
padding:32px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.auth-tabs {
display:flex;
justify-content:center;
margin-bottom:24px;
}
.auth-tabs button {
flex:1;
padding:10px 0;
background:#f6f8f9;
border:none;
cursor:pointer;
border-radius:20px;
font-weight:500;
color:#333;
transition:all .2s ease;
}
.auth-tabs button.active {
background:#14a39a;
color:#fff;
}
.form-group, .form-row, input {
width:100%;
margin-bottom:14px;
}
.form-row {
display:flex;
gap:8px;
}
input {
border:1px solid #ddd;
border-radius:8px;
padding:10px 12px;
font-size:15px;
background:#f9fcff;
}
input:focus {
outline:none;
border-color:#14a39a;
}
.btn-main {
width:100%;
padding:12px;
background:#14a39a;
color:#fff;
border:none;
border-radius:8px;
font-size:16px;
cursor:pointer;
transition:background .2s ease;
}
.btn-main:hover {
background:#0e8c84;
}
.forgot {
display:block;
text-align:right;
font-size:14px;
color:#14a39a;
margin-bottom:10px;
}
.privacy {
font-size:12px;
color:#777;
margin-top:16px;
text-align:center;
}
.privacy a {
color:#14a39a;
}
.err { margin-top:8px; font-size:14px; color:#c02626; white-space:pre-line; }
/* ===== Auth layout: compact desktop, comfy mobile ===== */
/* Container no longer fills viewport height */
.auth-container {
display: block;
background: transparent;
padding: 24px 16px;
}
/* Centered card with fixed max width */
.auth-card {
width: 100%;
max-width: 480px; /* desktop width cap */
margin: 56px auto 96px; /* space from top/bottom */
background: #fff;
border: 1px solid #eee;
border-radius: 14px;
padding: 24px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Tabs a bit slimmer on desktop */
.auth-tabs {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 18px;
}
.auth-tabs button {
flex: 1;
padding: 8px 0; /* was bigger before */
background: #f6f8f9;
border: 0;
border-radius: 20px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all .2s ease;
}
.auth-tabs button.active { background:#14a39a; color:#fff; }
/* Inputs + buttons trimmed */
.form-group, .form-row, input { width:100%; margin-bottom:12px; }
.form-row { display:flex; gap:8px; }
input {
border: 1px solid #ddd;
border-radius: 8px;
padding: 9px 11px; /* slightly smaller */
font-size: 15px;
background: #f9fcff;
}
input:focus { outline: none; border-color:#14a39a; }
.btn-main {
width: 100%;
padding: 11px 12px; /* slimmer */
background: #14a39a;
color: #fff;
border: 0;
border-radius: 8px;
font-size: 15px;
cursor: pointer;
transition: background .2s ease;
}
.btn-main:hover { background:#0e8c84; }
/* Error text (optional) */
.err { margin-top:8px; font-size:14px; color:#c02626; white-space:pre-line; }
/* Privacy note smaller */
.privacy { font-size:12px; color:#777; margin-top:14px; text-align:center; }
.privacy a { color:#14a39a; }
/* --- Responsive tweaks --- */
@media (max-width: 480px) {
.auth-card { margin: 32px auto 64px; padding: 20px; }
.form-row { flex-direction: column; gap: 0; }
}
@media (min-width: 992px) {
.auth-card { max-width: 460px; margin: 72px auto 140px; padding: 28px 32px; }
}
@media (min-width: 1280px) {
.auth-card { max-width: 480px; margin: 96px auto 160px; }
}
/* Compact, centered desktop auth card */
.auth-wrap{
width:100%;
max-width: 480px; /* <- desktop cap */
margin: 72px auto 140px; /* nice top/bottom space */
padding: 0 16px; /* small side breathing room */
}
/* make sure nothing else stretches it */
.auth-wrap .auth-card{
width:100% !important;
margin: 0 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
border: 1px solid #eee;
border-radius: 14px;
padding: 24px;
}
/* inputs/buttons stay inside the cap */
.auth-wrap input,
.auth-wrap .btn-main,
.auth-wrap .auth-tabs{ width:100%; }
/* tab buttons look balanced */
.auth-wrap .auth-tabs{
display:flex; gap:10px; margin-bottom:16px;
}
.auth-wrap .auth-tabs button{
flex:1; padding:10px 0; border-radius:20px;
}
/* tighter desktop; comfy mobile */
@media (max-width: 480px){
.auth-wrap{ margin:32px auto 64px; padding:0 12px; }
.auth-wrap .auth-card{ padding:20px; }
}
@media (min-width: 1280px){
.auth-wrap{ max-width: 460px; } /* even tidier on big screens */
}
/* Translator tools: compact pills, controlled grow/wrap */
#translator-tools .card { background:#19875421; border:1px solid #e6f4f8; }
#translator-tools .card-body{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.5rem .75rem;
position:relative;
}
/* prevent Bootstrap flex grow on children */
#translator-tools .card-body > * { flex:0 0 auto !important; }
#translator-tools .tt-toggle{
display:inline-flex; align-items:center; gap:.5rem;
padding:6px 10px; border-radius:999px;
background:#fff; border:1px solid #e7ecef; white-space:nowrap;
}
#translator-tools .tt-pills{ display:flex; flex-wrap:wrap; gap:.5rem .5rem; }
#translator-tools .tt-pill{
display:inline-flex; align-items:center; gap:.4rem;
padding:6px 10px; border-radius:999px;
background:#fff; border:1px solid #e7ecef; white-space:nowrap;
cursor:pointer;
}
#translator-tools .tt-pill input[type="checkbox"]{ margin:0; }
#translator-tools .tt-apply{ margin-left:auto; }
@media (max-width: 576px){
#translator-tools .tt-apply{ order:99; margin-left:0; }
}
/* ---------- Mobile fixes for translator tools ---------- */
@media (max-width: 576px) {
#translator-tools .card { border-radius: 12px; }
/* tighter spacing inside the card */
#translator-tools .card-body{
padding: 12px 12px 8px;
gap: .45rem .45rem;
}
/* toggle chip full-width */
#translator-tools .tt-toggle{
width: 100%;
padding: 8px 10px;
font-size: 14px;
}
/* pills as a responsive grid instead of inline-wrap */
#translator-tools .tt-pills{
display: grid !important;
grid-template-columns: 1fr 1fr; /* two columns on most phones */
gap: .45rem .45rem !important;
width: 100%;
}
/* each pill fills its grid cell and stays compact */
#translator-tools .tt-pill{
width: 100%;
padding: 8px 10px;
font-size: 14px;
justify-content: flex-start;
}
#translator-tools .tt-pill input[type="checkbox"]{
transform: scale(1.0);
}
/* action button drops to its own row */
#translator-tools .tt-apply{
order: 99;
width: 100%;
}
#translator-tools .tt-apply .btn{
width: 100%;
padding: 8px 10px;
}
}
/* Very narrow devices (≤360px): single-column pills */
@media (max-width: 360px) {
#translator-tools .tt-pills{
grid-template-columns: 1fr;
}
}
/* --- MOBILE polish for translator pills (drop after previous rules) --- */
@media (max-width: 576px) {
/* keep 2 columns (1 column under 360px already handled) */
#translator-tools .tt-pills{
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: .45rem .45rem !important;
width: 100%;
}
/* pill layout: checkbox fixed, text flexible & truncates */
#translator-tools .tt-pill{
display: flex !important;
align-items: center;
gap: .4rem;
padding: 8px 10px;
width: 100%;
min-width: 0; /* allow shrink inside grid cell */
overflow: hidden; /* clip extra */
}
#translator-tools .tt-pill input[type="checkbox"]{
flex: 0 0 auto; /* checkbox never shrinks */
margin: 0;
}
#translator-tools .tt-pill span{
flex: 1 1 auto; /* text can shrink */
min-width: 0; /* enable ellipsis */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
/* toggle chip full width with truncation too */
#translator-tools .tt-toggle{
width: 100%;
padding: 8px 10px;
display: flex;
align-items: center;
gap: .5rem;
min-width: 0;
}
#translator-tools .tt-toggle .form-check-input{ flex:0 0 auto; }
#translator-tools .tt-toggle .form-check-label{
flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* action button on its own row & full width */
#translator-tools .tt-apply{ order: 99; width: 100%; }
#translator-tools .tt-apply .btn{ width: 100%; padding: 8px 10px; }
}
/* ultra-narrow phones: 1 column */
@media (max-width: 360px) {
#translator-tools .tt-pills{ grid-template-columns: 1fr; }
}
/* === Translator options: plain checkboxes (no pill UI) === */
/* wrapper keeps the soft blue card only */
#translator-tools .card { background:#f0fbff; border:1px solid #e6f4f8; }
#translator-tools .card-body { display:flex; flex-wrap:wrap; gap:.6rem .8rem; align-items:center; }
/* toggle stays as a small chip */
#translator-tools .tt-toggle{
display:inline-flex; align-items:center; gap:.45rem;
padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #e7ecef;
}
/* remove “pill” styling from each translator item */
#translator-tools .tt-pills{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; }
#translator-tools .tt-pill{
display:inline-flex !important;
align-items:center;
gap:.45rem;
padding:0; /* no padding */
background:transparent; /* no bg */
border:0; /* no border */
border-radius:0; /* no rounded shape */
width:auto; /* auto width on desktop */
cursor:pointer;
}
/* text behaves well when long */
#translator-tools .tt-pill span{ line-height:1.2; }
/* action button stays on the right */
#translator-tools .tt-apply{ margin-left:auto; }
/* -------- Mobile polish -------- */
@media (max-width:576px){
#translator-tools .card-body{ padding:12px; gap:.5rem .6rem; }
/* make the list a neat 2-column checklist on phones */
#translator-tools .tt-pills{ display:grid !important; grid-template-columns:1fr 1fr; gap:.4rem .8rem !important; width:100%; }
/* each item aligns nicely; long text truncates instead of breaking */
#translator-tools .tt-pill{ width:100%; min-width:0; }
#translator-tools .tt-pill input{ flex:0 0 auto; }
#translator-tools .tt-pill span{
flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* toggle + action full-width for easy tap */
#translator-tools .tt-toggle{ width:100%; }
#translator-tools .tt-apply{ order:99; width:100%; }
#translator-tools .tt-apply .btn{ width:100%; }
}
/* ultra-narrow phones: 1 column */
@media (max-width:360px){
#translator-tools .tt-pills{ grid-template-columns:1fr; }
}
/* ===== FINAL mobile fix: always show translator names ===== */
@media (max-width: 576px) {
/* Stack as a simple vertical checklist (most robust) */
#translator-tools .tt-pills{
display: block !important; /* stop the grid */
width: 100%;
}
#translator-tools .tt-pill{
display: flex !important;
align-items: center;
gap: .5rem;
width: 100%;
padding: 6px 2px; /* no pill look */
border: 0;
background: transparent;
}
#translator-tools .tt-pill + .tt-pill{ margin-top: .35rem; }
/* Checkbox fixed; text must be visible and may wrap */
#translator-tools .tt-pill input{ flex: 0 0 auto; }
#translator-tools .tt-pill span{
flex: 1 1 auto;
min-width: 0; /* allow wrapping space */
white-space: normal; /* <-- allow multi-line */
overflow: visible; /* no clipping */
text-overflow: clip; /* no ellipsis */
color: #111; /* explicit color to avoid inheritance quirks */
line-height: 1.25;
}
/* Toggle + action full-width for tap targets */
#translator-tools .tt-toggle{ width: 100%; }
#translator-tools .tt-apply{ order: 99; width: 100%; }
#translator-tools .tt-apply .btn{ width: 100%; }
}
/* ultra-narrow (≤360px): same vertical list works well, no change needed */
/* Translator tools container */
#translator-tools .card { background:#f0fbff; border:1px solid #e6f4f8; }
#translator-tools .card-body { padding:12px 14px; }
/* Toggle chip */
#translator-tools .tt-toggle {
background:#fff;
border:1px solid #e7ecef;
border-radius:999px;
padding:6px 10px;
}
/* Plain checklist items (no pill, no borders) */
#translator-tools .tt-list { margin-top:.25rem; }
#translator-tools .tt-item {
padding:6px 2px;
margin:0;
cursor:pointer;
}
#translator-tools .tt-item + .tt-item { margin-top:.25rem; }
/* Ensure label text is always visible and can wrap */
#translator-tools .tt-item .form-check-label {
color:#111 !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.25;
}
/* Desktop: 2-column checklist */
@media (min-width: 768px) {
#translator-tools .tt-list {
display:grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
}
#translator-tools .tt-item + .tt-item { margin-top:.35rem; }
#translator-tools .tt-apply { text-align:right; }
}
/* Mobile: single-column, full-width button */
@media (max-width: 767.98px) {
#translator-tools .tt-apply .btn { width:100%; }
}
/* Collapsible translations card */
#translator-tools .card { background:#f0fbff; border:1px solid #e6f4f8; }
#translator-tools .tt-header{
padding:12px 14px;
border:0;
text-decoration:none;
display:flex; justify-content:space-between; align-items:center;
}
#translator-tools .tt-header:focus{ outline: none; }
#translator-tools .collapse-body{ border-top:1px solid #e6f4f8; }
/* Tidy checklist spacing */
#translator-tools .tt-list .form-check-label{
white-space: normal; line-height:1.25; color:#111;
}
/* Tiny avatar (initials) */
.avatar{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
background:#e8f0fe; color:#2b4acb; font-weight:700; font-size:12px;
}
/* Language segmented control */
.lang-switch .btn{ min-width:64px; }
.lang-switch .btn.active{ background:#0ea7a0; color:#fff; border-color:#0ea7a0; }
.avatar{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
background:#e8f0fe; color:#2b4acb; font-weight:700; font-size:12px;
}
.btn-group .btn.active{ background:#0ea7a0; color:#fff; border-color:#0ea7a0; }
/* Minimal, safe styles */
.site-header .navbar-brand { font-size: 1.25rem; }
.avatar {
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
background:#e8f0fe; color:#2b4acb; font-weight:700; font-size:12px;
}
.btn-group .btn.active{
background:#0ea7a0; color:#fff; border-color:#0ea7a0;
}
/* Hide the mobile menu on desktop even if Bootstrap tries to force it visible */
@media (min-width: 992px) {
.site-header .navbar.navbar-expand-lg #siteNav.navbar-collapse {
display: none !important;
}
}
/* ===== Mobile header polish (< lg) ===== */
@media (max-width: 991.98px) {
/* Keep brand & hamburger on one line */
.site-header .navbar > .container {
padding-top: .35rem;
padding-bottom: .35rem;
gap: .25rem;
}
.site-header .navbar-brand {
margin-right: 0;
font-size: 1.15rem;
}
.site-header .navbar-toggler {
margin-left: auto; /* pushes burger to the right */
padding: .25rem .5rem;
border-radius: .75rem;
}
/* Make the collapsed menu look like a card */
#siteNav {
border: 1px solid #eee;
border-radius: 12px;
background: #fff;
padding: .5rem;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
/* Search button full width */
#siteNav .btn.btn-outline-secondary {
width: 100%;
}
/* Language buttons in a tidy grid (3 equal columns) */
#siteNav .btn-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
width: 100%;
}
#siteNav .btn-group .btn {
width: 100%;
}
/* User row: compact, aligned */
#siteNav .user-row { /* if you added the class */
padding-top: .25rem;
padding-bottom: .25rem;
}
/* Fallback if class not present (targets same structure) */
#siteNav .d-flex.align-items-center.justify-content-between {
padding-top: .25rem;
padding-bottom: .25rem;
}
#siteNav .avatar {
width: 28px; height: 28px; font-size: 12px;
}
#siteNav .user-row .btn,
#siteNav .d-flex.align-items-center.justify-content-between .btn {
padding: .25rem .5rem;
border-radius: .5rem;
}
/* Tighten gaps between stacked items */
#siteNav .d-flex.flex-column.gap-2 {
gap: .5rem !important;
}
}
/* Minimal shared styles */
.site-header .navbar-brand{ font-size:1.25rem; }
.avatar{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
background:#e8f0fe; color:#2b4acb; font-weight:700; font-size:12px;
}
.btn-group .btn.active{ background:#0ea7a0; color:#fff; border-color:#0ea7a0; }
/* Mobile header polish */
@media (max-width: 991.98px) {
.site-header .navbar > .container{
padding-top:.35rem; padding-bottom:.35rem;
gap:.25rem;
}
.site-header .navbar-brand{ margin-right:0; font-size:1.15rem; }
.site-header .navbar-toggler{ margin-left:auto; padding:.25rem .5rem; border-radius:.75rem; }
/* Collapsed panel as card */
#siteNav{
border:1px solid #eee; border-radius:12px; background:#fff;
padding:.5rem; box-shadow:0 4px 14px rgba(0,0,0,.04);
}
/* Language buttons into 3 equal columns */
#siteNav .btn-group{
display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; width:100%;
}
#siteNav .btn-group .btn{ width:100%; }
/* Search/button widths and user row spacing */
#siteNav .btn.btn-outline-secondary{ width:100%; }
#siteNav .user-row{ padding:.25rem 0; }
#siteNav .avatar{ width:28px; height:28px; font-size:12px; }
#siteNav .user-row .btn{ padding:.25rem .5rem; border-radius:.5rem; }
#siteNav .d-flex.flex-column.gap-2{ gap:.5rem !important; }
}
/* Quran.com-style icon header */
.site-header .navbar-brand { font-size: 1.25rem; }
/* Round, clean icon button */
.icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:999px;
border:1px solid rgba(0,0,0,.08); background:#fff;
}
.icon-btn i { font-size:18px; line-height:1; }
.icon-btn:hover{ background:#f6f7f9; border-color:rgba(0,0,0,.12); }
/* Dropdown menu touch targets */
.dropdown-menu .dropdown-item{
padding:.5rem .875rem; font-size:.95rem;
}
.dropdown-menu .dropdown-item.active{
background:#e8f5ee; color:#0b8a7a;
}
/* Keep spacing tidy on small screens */
@media (max-width: 575.98px){
.site-header .container{ gap:.5rem; }
.icon-btn{ width:34px; height:34px; }
}
/* Header + icon styles */
.site-header .navbar-brand { font-size: 1.25rem; }
.icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:999px;
border:1px solid rgba(0,0,0,.08); background:#fff;
}
.icon-btn i { font-size:18px; line-height:1; }
.icon-btn:hover{ background:#f6f7f9; border-color:rgba(0,0,0,.12); }
.dropdown-menu .dropdown-item{ padding:.5rem .875rem; font-size:.95rem; }
.dropdown-menu .dropdown-item.active{ background:#e8f5ee; color:#0b8a7a; }
/* Pin button near verse */
.sr-pin { margin-left:.5rem; }
.sr-pin.on { background:#fff7e6; border-color:#ffd27a; color:#b06b00; }
/* Mobile tweaks */
@media (max-width:575.98px){
.site-header .container{ gap:.5rem; }
.icon-btn{ width:34px; height:34px; }
}
/* Profile avatar */
.avatar{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#e8f0fe; color:#2b4acb; font-weight:700; font-size:16px; }
.avatar{
width:44px;
height:44px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:600;
background:#e9f0ff; /* adjust */
color:#1f2937; /* adjust */
text-transform:uppercase;
}
/* if profile container includes Arabic text, enforce direction in that piece */
.arabic-text {
direction: rtl;
text-align: right;
unicode-bidi: isolate; /* helps with mixed LTR/RTL */
}
.icon-btn{
width: 28px; height: 28px;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #e5e7eb; background:#fff;
border-radius:6px; cursor:pointer; padding:0;
line-height:1;
}
.icon-btn i{ font-size:16px; }
.icon-btn:hover{ background:#f9fafb; }
.icon-btn:active{ transform: translateY(0.5px); }
.icon-btn.pin.is-active{
border-color:#f59e0b; background:#fff7ed; color:#b45309;
}
.icon-btn.bookmark.is-active{
border-color:#3b82f6; background:#eff6ff; color:#1d4ed8;
}
/* keep consistent spacing in the verse row action column */
.verse-actions{
display:flex; gap:6px; align-items:center;
}
/* ---------- Surah header ---------- */
.surah-badge.surah-badge--star{
width:78px;height:78px;background:#0f6d3d;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
}
.surah-badge.surah-badge--star > span{font-size:28px;line-height:1}
/* ---------- Random block ---------- */
.card-random{ border:0; background:#e8f5ee; }
/* ---------- Verse list ---------- */
.sr-list{ display:flex; flex-direction:column; gap:12px; } /* tighter, no !important */
.sr-item{
display:grid; grid-template-columns:72px 1fr; gap:12px;
background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px;
}
.sr-body{ min-width:0 } /* prevent overflow on narrow screens */
/* Left gutter: ref + actions */
.sr-top{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:.25rem; }
.sr-ref{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-variant-numeric:tabular-nums;
font-size:.95rem; line-height:1; white-space:nowrap;
padding:.22rem .55rem; border-radius:999px; background:#f3f4f6; color:#4b5563;
}
.sr-actions{ display:flex; flex-direction:column; gap:6px; }
/* Toolbar buttons */
.sr-btn{
display:inline-flex; align-items:center; justify-content:center;
height:28px; min-width:28px; padding:0 .5rem; line-height:1;
border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#6b7280; cursor:pointer;
transition:background .15s, border-color .15s, color .15s;
}
.sr-btn:hover{ background:#f9fafb; }
.sr-btn--pin .bi{ font-size:14px; }
.sr-btn--star.is-on{ border-color:#f59e0b; background:#fff7ed; color:#b45309; }
.sr-btn--pin.is-on{ border-color:#10b981; background:#ecfdf5; color:#065f46; }
/* Translations spacing */
.sr-tr{ margin-top:.35rem; }
/* Pager */
.sr-pager{ display:flex; gap:12px; justify-content:center; margin:16px 0; }
.sr-pager.is-rtl{ direction:rtl; }
/* ---------- Mobile tweaks ---------- */
@media (max-width: 480px){
.sr-item{ grid-template-columns:1fr; padding:10px; }
.sr-top{ flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; }
.sr-actions{ flex-direction:row; gap:6px; margin-left:auto; } /* ref first, icons flush-right */
.sr-ref{ font-size:.80rem; padding:.22rem .45rem; }
.sr-btn{ height:26px; min-width:26px; padding:0 .4rem; font-size:12px; }
}
/* Optional: larger screens make the left gutter narrower */
@media (min-width: 992px){
.sr-item{ grid-template-columns:64px 1fr; }
}
/* Utility */
.surah-reader .subline{ font-size:.95rem }
.sr-empty{ border:1px dashed #cfe4ff; background:#f6fbff }
/*testing */
/* Panel container */
#translator-tools .card{
border: 1px solid #e5e7eb;
background: #eeeeee00; /* soft green */
border-radius: 14px;
box-shadow:
0 14px 32px -16px #eee, 0 3px 8px -2px #eee, inset 0 1px 0 rgba(255, 255, 255, .65);
}
/* Toggle header (the bar you click) */
#translator-tools .tt-header{
display:flex; align-items:center; justify-content:space-between;
color:#065f46; /* deep green text */
font-weight:600;
padding: .85rem 1rem;
border-bottom: 1px solid rgba(16,185,129,.25);
text-decoration:none;
}
#translator-tools .tt-header:hover{
background: linear-gradient(180deg,#f1fbf7 0%, #ecfdf5 100%);
}
/* Chevron color/animation */
#translator-tools .tt-header .bi{
color:#10b981; transition: transform .18s ease, color .18s ease;
}
#translator-tools .tt-header[aria-expanded="true"] .bi{
transform: rotate(180deg);
}
/* Body */
#translator-tools .collapse-body{
background: linear-gradient(180deg,#f7fdfa 0%, #ffffff 65%);
border-radius: 0 0 14px 14px;
}
/* Use theme color for checkboxes */
#translator-tools .form-check-input{
width: 1.05rem; height: 1.05rem;
border: 1px solid rgba(16,185,129,.45);
cursor:pointer;
accent-color: #10b981; /* modern browsers */
}
#translator-tools .form-check-input:focus{
box-shadow: 0 0 0 3px rgba(16,185,129,.18);
border-color:#10b981;
}
/* Label styling */
#translator-tools .form-check-label{
color:#0f5132; /* readable, not harsh */
}
#translator-tools .form-check:hover .form-check-label{
text-decoration: underline;
}
/* If you render translator “types”, these look nice */
.tt-list .badge{
border:1px solid rgba(16,185,129,.25);
color:#065f46; background:#ecfdf5;
}
.card-random{
border: 1px solid #e6f6ef;
background: #eee;
border-radius: 16px;
/* box-shadow:
0 18px 40px #eee, 0 6px 14px rgba(16, 185, 129, .16), 0 1px 2px rgba(16, 185, 129, .10); */
}
/* ===== Hero background (your new pattern) ===== */
.bg-sm {
background: url('/images/background-gray-bqh.jpg') no-repeat center center;
background-size: cover;
}
/* ===== Bangla display font for hero quote/text ===== */
/* Add the class .home-hero to the hero wrapper,
and place lang="bn" on the Bangla line or add .hero-quote-bn class */
.home-hero :lang(bn),
.hero-quote-bn {
font-family: "Galada", "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", system-ui, sans-serif;
font-weight: 400;
line-height: 1.35;
letter-spacing: .2px;
font-size: clamp(22px, 2.5vw, 40px); /* responsive sizing */
text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
/* Keep Arabic lines unaffected */
.home-hero :lang(ar){
font-family: "KFGQPC Uthmanic Script HAFS", "Amiri Quran", serif;
}
/* ===== Hero card polish ===== */
.home-hero {
position: relative;
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(0.5px);
box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
/* subtle inner gradient so text pops over the pattern */
.home-hero .card-body {
position: relative;
}
.home-hero .card-body::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 75%);
pointer-events: none;
border-radius: inherit;
}
/* meta chip (left, small) */
.hero-meta {
font-size: .85rem;
color: #6b7280; /* muted */
}
.hero-chip {
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .55rem;
border-radius: 999px;
background: #eef2f7;
border: 1px solid #e5e7eb;
}
/* Arabic line (top-right) */
.rv-ar {
font-size: clamp(18px, 2.1vw, 28px);
color: #0f4033;
opacity: .9;
text-align: end;
margin-bottom: 4px;
}
/* Bangla hero line (Galada) */
.home-hero :lang(bn),
.hero-quote-bn {
font-family: "Galada", "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", system-ui, sans-serif;
font-weight: 400;
font-size: clamp(22px, 2.5vw, 44px);
line-height: 1.55;
letter-spacing: .2px;
color: #0b1f1a;
text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
/* keep Arabic font explicit so it doesn't inherit */
.home-hero :lang(ar){
font-family: "KFGQPC Uthmanic Script HAFS","Amiri Quran",serif;
}
/* action buttons: lighter, rounded pills */
.btn-ghost {
--bd: rgba(15,109,61,.2);
border: 1px solid var(--bd);
background: rgba(255,255,255,.7);
backdrop-filter: blur(4px);
}
.btn-ghost:hover {
background: #fff;
border-color: rgba(15,109,61,.35);
}
/* spacing fixes on small screens */
@media (max-width: 768px){
.home-hero .d-flex.wrap-sm { flex-wrap: wrap; gap: .5rem; }
.rv-ar { margin-top: .25rem; }
}
/* --- Make hero text crisp --- */
/* Put the gradient UNDER the content and only on the right side */
.home-hero .card-body::before{
z-index: 0;
/* fade-in only on the right 40% to help the Arabic line, leave left crystal-clear */
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 60%,
rgba(255,255,255,.55) 78%,
rgba(255,255,255,.85) 100%
);
}
/* Ensure all content sits above the overlay */
.home-hero .card-body > * { position: relative; z-index: 1; }
/* Remove any blur feel on the whole card */
.home-hero { backdrop-filter: none; }
/* Chip (surah:ayah) — solid, high-contrast */
.hero-chip{
background: #fff; /* was translucent */
border: 1px solid #e5e7eb;
color: #111827;
font-weight: 600;
box-shadow: 0 1px 0 rgba(17,24,39,.04);
}
/* Bangla hero line — no shadow, super crisp */
.hero-quote-bn,
.home-hero :lang(bn){
text-shadow: none; /* remove softness */
color: #0a0f0e;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Optional: nudge size/line-height if you want it a touch tighter */
@media (min-width: 768px){
.hero-quote-bn,
.home-hero :lang(bn){
font-size: clamp(24px, 2.5vw, 29px);
line-height: 1.45;
}
}
/* Extra spacing between Arabic ayah and Bangla translation */
.home-hero .rv-ar{
margin-bottom: .6rem; /* was ~4px; give it more room */
}
.home-hero .rv-tr{
margin-top: .35rem; /* gentle top gap on the translation */
}
/* On wider screens, open it up a touch more */
@media (min-width: 992px){
.home-hero .rv-ar{ margin-bottom: .75rem; }
.home-hero .rv-tr{ margin-top: .45rem; }
}
/* Center by default */
.home-hero .rv-ar,
.home-hero .rv-tr {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 980px; /* keeps lines readable on wide screens */
}
/* Make multi-line headlines balance nicely if the browser supports it */
@supports (text-wrap: balance) {
.home-hero .rv-ar,
.home-hero .rv-tr { text-wrap: balance; }
}
/* When a verse is long, justify — but keep the last line centered for elegance */
.long-ar {
text-align: justify;
text-align-last: center; /* last line centered */
direction: rtl; /* ensure correct RTL justification */
}
.long-bn {
text-align: justify;
text-align-last: center; /* last line centered */
text-justify: inter-word;
hyphens: auto;
}
/* ===== English hero style: make EN translation the star, AR supportive ===== */
.i18n-en .rv-tr{
/* type */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-weight: 700;
font-size: clamp(22px, 2.5vw, 40px); /* bigger than AR */
line-height: 1.55;
letter-spacing: .2px;
color: #0b1f1a;
text-shadow: none;
max-width: 980px;
margin-left: auto; margin-right: auto;
text-align: center;
}
/* Arabic line a bit smaller & calmer when EN is primary */
.i18n-en .rv-ar{
font-size: clamp(18px, 1.8vw, 26px); /* smaller than EN */
opacity: .85;
color: #0f4033;
text-align: center;
margin-bottom: .65rem; /* breathing room above EN */
}
/* Long English lines: justify but keep last line centered (optional) */
.i18n-en .rv-tr.long-en{
text-align: justify;
text-align-last: center;
text-justify: inter-word;
}
/* If you want slightly tighter EN on large screens */
@media (min-width: 1200px){
.i18n-en .rv-tr{ font-size: clamp(24px, 2.6vw, 38px); }
}
/* Keep existing BN rules intact (from earlier), AR-only stays as before */
.i18n-en .rv-tr{
font-family: "Lugrasimo", cursive, "Merriweather", "Georgia", serif;
font-weight: 700;
font-size: clamp(22px, 2.5vw, 27px);
line-height: 1.6;
color: #0a1e14;
text-shadow: none;
text-align: center;
}
/* ===== Surah Detail – hero chip (separate from home) ===== */
.sd-chip-row{
display: flex;
justify-content: center; /* centered under the verse */
}
.sd-hero-chip{
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .7rem;
border-radius: 999px;
background: rgba(25, 135, 84, .23); /* #198754 at ~23% (Bootstrap green) */
border: 3px solid #e5e7eb;
color: #212529;
font-weight: 600;
box-shadow: 0 1px 0 rgba(17,24,39,.04);
}
.sd-hero-chip .sep{ opacity: .7; }
.sd-hero-chip strong{ font-weight: 700; }
/* small screens: slightly tighter */
@media (max-width: 480px){
.sd-hero-chip{ padding: .3rem .6rem; border-width: 2px; }
}
.surah-title-bn{
font-family: "Kalpurush","Noto Sans Bengali", "me_quran", system-ui, sans-serif;
}
.site-footer{
background: var(--card, #fff);
border-top: 1px solid var(--border, #eee);
color: var(--muted-2, #444);
font-size: 14px;
}
.site-footer .container{ max-width: 1160px; margin: 0 auto; padding: 32px 16px; }
.site-footer .grid{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 24px;
}
@media (max-width: 992px){
.site-footer .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
.site-footer .grid{ grid-template-columns: 1fr; }
}
.brand-title{ font-weight: 700; margin: 0 0 8px; }
.brand-text{ margin: 0 0 8px; line-height: 1.6; }
.brand-support{ margin: 0; font-size: 13px; }
.col-title{ font-weight: 600; margin: 0 0 8px; color: var(--muted, #666); }
.link-list{ list-style: none; margin: 0; padding: 0; }
.link-list li{ margin: 6px 0; }
.link-list a{ color: inherit; text-decoration: none; }
.link-list a:hover{ text-decoration: underline; }
.link-list.two-col{
columns: 2;
column-gap: 16px;
}
@media (max-width: 480px){
.link-list.two-col{ columns: 1; }
}
.divider{ border: 0; border-top: 1px solid var(--border, #eee); margin: 20px 0; }
.footer-bottom{
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.legal{ display: flex; align-items: center; gap: 10px; }
.legal a{ color: inherit; text-decoration: none; }
.legal a:hover{ text-decoration: underline; }
.meta{ display:flex; align-items:center; gap:12px; }
.control{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border,#eee); border-radius:10px; cursor:pointer; user-select:none; }
.control select{ border:0; background:transparent; outline:0; font:inherit; color:inherit; }
.copy{ margin-top: 14px; font-size: 12px; color: var(--muted,#666); }
/* Optional dark theme hook */
.theme-dark .site-footer{ background:#0e1114; border-top-color:#1b2026; color:#b7c1c8; }
.theme-dark .site-footer a{ color:#d3dde6; }
.theme-dark .divider{ border-top-color:#1b2026; }
.theme-dark .control{ border-color:#1b2026; }
.sr-item { scroll-margin-top: 110px; }
.verse-focus { outline: 2px dashed #0f6d3d; outline-offset: 6px; }
/* ============ THEME TOKENS ============ */
/* default (auto / light) */
:root {
--bg: #f6f7f8;
--surface: #ffffff;
--text: #0f172a;
--muted: #6b7280;
--border: rgba(15, 23, 42, 0.08);
--accent: #0f6d3d;
--footer-bg: #ffffff;
}
/* explicit light */
:root[data-theme="light"] {
--bg: #f6f7f8;
--surface: #ffffff;
--text: #0f172a;
--muted: #6b7280;
--border: rgba(15, 23, 42, 0.08);
--accent: #0f6d3d;
--footer-bg: #ffffff;
}
/* explicit dark */
:root[data-theme="dark"] {
--bg: #0f172a;
--surface: #111827;
--text: #e5e7eb;
--muted: rgba(229, 231, 235, 0.6);
--border: rgba(229, 231, 235, 0.08);
--accent: #34d399;
--footer-bg: #111827;
}
/* shared lang control (top + footer) */
.control.dropdown {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid rgba(15, 109, 61, 0.12);
border-radius: 999px;
padding: 4px 10px 4px 8px;
min-height: 36px;
}
.control.dropdown .ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(15, 109, 61, 0.08);
border-radius: 999px;
font-size: 14px;
color: #0f6d3d;
}
.control.dropdown select {
border: 0;
background: transparent;
outline: 0;
font: inherit;
color: inherit;
line-height: 1.2;
/* to make select height match */
padding: 3px 0;
min-width: 110px;
cursor: pointer;
}
/* footer version – keep it same size as top */
.site-footer .control.dropdown {
background: #f5f7f6;
}
.site-footer .meta {
display: flex;
gap: 10px;
align-items: center;
}
/* shared control look */
.site-footer .control {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid rgba(15, 109, 61, 0.12);
border-radius: 999px;
min-height: 36px;
padding: 4px 12px;
font-size: 14px;
cursor: pointer;
}
.site-footer .control .ic {
background: rgba(15, 109, 61, 0.08);
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #0f6d3d;
}
/* dropdown select same height */
.site-footer .control.dropdown select {
border: 0;
background: transparent;
outline: 0;
font: inherit;
color: inherit;
line-height: 1.2;
padding: 2px 0;
min-width: 110px;
cursor: pointer;
}
body {
background: var(--bg);
color: var(--text);
}
/* cards list (your surah cards) */
.card,
.surah-card,
.list-group-item {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
/* footer */
.site-footer {
background: var(--footer-bg);
color: var(--text);
}
.site-footer .col-title,
.site-footer .brand-title {
color: var(--text);
}
/* footer links */
.site-footer a {
color: inherit;
}
.site-footer a:hover {
color: var(--accent);
}
/* footer divider */
.site-footer .divider {
border-color: var(--border);
}
/* footer controls (theme + lang) */
.site-footer .control {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.site-footer .control .ic {
background: rgba(15, 109, 61, 0.12);
color: var(--accent);
}
/* dark-mode adjust for that icon bg */
:root[data-theme="dark"] .site-footer .control .ic {
background: rgba(52, 211, 153, 0.12);
}
/* language + theme buttons inside footer */
.site-footer .control.dropdown select {
color: var(--text);
}
/* Dark mode override */
:root[data-theme="dark"] .site-footer .control.dropdown {
background: #1f2937;
border-color: rgba(255, 255, 255, 0.2);
color: #f9fafb;
}
:root[data-theme="dark"] .site-footer .control.dropdown select {
color: #f9fafb;
}
:root[data-theme="dark"] .site-footer .control .ic {
background: rgba(255, 255, 255, 0.1);
color: var(--accent);
}
/* footer colors */
:root[data-theme="dark"] .site-footer {
background: #0f172a;
color: #e5e7eb;
}
:root[data-theme="dark"] .site-footer .col-title,
:root[data-theme="dark"] .site-footer .brand-title {
color: #f3f4f6;
}
:root[data-theme="dark"] .site-footer a {
color: #d1d5db;
}
:root[data-theme="dark"] .site-footer a:hover {
color: var(--accent);
}
/* divider line */
:root[data-theme="dark"] .site-footer .divider {
border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-random {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
:root[data-theme="dark"] .rv-ar {
color: #fff; /* Arabic text */
}
:root[data-theme="dark"] .rv-tr {
color: rgba(255, 255, 255, 0.9); /* Translation text */
}
:root[data-theme="dark"] .site-footer .control.dropdown {
background: #1f2937;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
}
:root[data-theme="dark"] .site-footer .control.dropdown select {
color: #ffffff;
}
/* make the options readable too (most browsers) */
:root[data-theme="dark"] .site-footer .control.dropdown select option {
color: #000; /* dropdown panel is light */
background: #ffffff;
}
/* hero: always light */
.card-random.bg-sm,
.bg-sm.card {
background: url('/images/background-gray-bqh.jpg') no-repeat center center;
background-size: cover;
color: #0f172a; /* dark text */
border: 1px solid rgba(15, 23, 42, 0.08);
}
/* even in dark mode: do NOT override hero */
:root[data-theme="dark"] .card-random.bg-sm,
:root[data-theme="dark"] .bg-sm.card {
background: url('/images/background-gray-bqh.jpg') no-repeat center center !important;
background-size: cover !important;
color: #0f172a !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
/* -------------- HERO (random) -------------- */
/* base hero */
.card-random.bg-sm {
position: relative;
background: url('/images/background-gray-bqh.jpg') center center no-repeat;
background-size: cover;
border: 1px solid rgba(15, 23, 42, 0.08);
overflow: hidden;
}
/* soft white overlay to improve contrast (both modes) */
.card-random.bg-sm::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.70);
pointer-events: none;
}
.card-random.bg-sm > * {
position: relative;
z-index: 1;
}
/* text colors inside hero */
.card-random.bg-sm .rv-ar {
color: #0f6d3d; /* Arabic in brand green */
}
.card-random.bg-sm .rv-tr,
.card-random.bg-sm .rv-en {
color: #0f172a;
}
/* even in DARK mode: do NOT darken hero */
:root[data-theme="dark"] .card-random.bg-sm {
background: url('/images/background-gray-bqh.jpg') center center no-repeat !important;
background-size: cover !important;
border: 1px solid rgba(15, 23, 42, 0.08);
}
:root[data-theme="dark"] .card-random.bg-sm::before {
background: rgba(255, 255, 255, 0.78);
}
:root[data-theme="dark"] .card-random.bg-sm .rv-ar {
color: #0f6d3d;
}
:root[data-theme="dark"] .card-random.bg-sm .rv-tr,
:root[data-theme="dark"] .card-random.bg-sm .rv-en {
color: #0f172a;
}
/* surah header should keep its own colors */
:root[data-theme="dark"] .surah-reader .card.surah-header,
:root[data-theme="dark"] .surah-reader .surah-top {
background: inherit;
color: inherit;
}
.site-footer .link-list a,
.site-footer .legal a,
.site-footer .copy a {
cursor: pointer !important;
}
/* base hero – light mode */
.card-random.bg-sm {
position: relative;
background: url('/images/background-gray-bqh.jpg') center center no-repeat;
background-size: cover;
border: 1px solid rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.card-random.bg-sm::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.75); /* light mode */
pointer-events: none;
}
.card-random.bg-sm > * {
position: relative;
z-index: 1;
}
/* text in hero */
.card-random.bg-sm .rv-ar {
color: #0f6d3d;
}
.card-random.bg-sm .rv-tr,
.card-random.bg-sm .rv-en {
color: #0f172a;
}
/* DARK MODE: keep pattern but use darker/tinted overlay so white text shows */
:root[data-theme="dark"] .card-random.bg-sm {
background: url('/images/background-gray-bqh.jpg') center center no-repeat !important;
background-size: cover !important;
}
:root[data-theme="dark"] .card-random.bg-sm::before {
/* slightly dark glass, not white */
background: rgba(15, 23, 42, 0.35);
}
/* text colors for dark hero */
:root[data-theme="dark"] .card-random.bg-sm .rv-ar {
color: #ffffff; /* Arabic in white */
}
:root[data-theme="dark"] .card-random.bg-sm .rv-tr,
:root[data-theme="dark"] .card-random.bg-sm .rv-en {
color: rgba(255, 255, 255, 0.95);
}
/* ---------- Surah detail header – dark mode readability ---------- */
:root[data-theme="dark"] .surah-header,
:root[data-theme="dark"] .surah-top {
/* keep your current dark background */
background: #08121e; /* close to what you have */
color: #ffffff;
}
/* main title */
:root[data-theme="dark"] .surah-header h1,
:root[data-theme="dark"] .surah-top h1,
:root[data-theme="dark"] .surah-top .surah-title {
color: #ffffff;
}
/* second line / meta line (this is the one that's too dark now) */
:root[data-theme="dark"] .surah-header .surah-subtitle,
:root[data-theme="dark"] .surah-top .surah-subtitle,
:root[data-theme="dark"] .surah-top .meta,
:root[data-theme="dark"] .surah-top small {
color: rgba(255, 255, 255, 0.78);
}
/* little badges (makki/madani, total ayah) */
:root[data-theme="dark"] .surah-top .badge,
:root[data-theme="dark"] .surah-top .pill,
:root[data-theme="dark"] .surah-top .tag {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.site-footer .link-list a:hover {
text-decoration: underline;
}
/* 1) hero */
.card-random.bg-sm::before { background: rgba(255,255,255,.65); }
:root[data-theme="dark"] .card-random.bg-sm::before { background: rgba(15,23,42,.45); }
:root[data-theme="dark"] .card-random.bg-sm .rv-ar { color:#fff; }
:root[data-theme="dark"] .card-random.bg-sm .rv-tr,
:root[data-theme="dark"] .card-random.bg-sm .rv-en { color:rgba(255,255,255,.96); }
/* 2) surah header */
:root[data-theme="dark"] .surah-reader .surah-top,
:root[data-theme="dark"] .surah-reader .surah-header { background:#0b1120; color:#fff; }
:root[data-theme="dark"] .surah-reader .text-muted.subline { color:rgba(255,255,255,.8) !important; }
/* ===================== HOME / RANDOM HERO ===================== */
/* the card that shows 1 verse on homepage & surah list page */
.card-random.bg-sm {
position: relative;
background: url('/images/background-gray-bqh.jpg') center center no-repeat;
background-size: cover;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 16px;
overflow: hidden;
min-height: 180px; /* adjust to your design */
}
/* LIGHT MODE overlay (keep it but make it a bit lighter so text is clearer) */
.card-random.bg-sm::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.60); /* <- this is the main change */
pointer-events: none;
}
.card-random.bg-sm > * {
position: relative;
z-index: 1;
}
/* LIGHT MODE text inside hero */
.card-random.bg-sm .rv-ar {
color: #0f6d3d;
}
.card-random.bg-sm .rv-tr,
.card-random.bg-sm .rv-en {
color: #0f172a;
}
/* ===================== DARK MODE ===================== */
:root[data-theme="dark"] .card-random.bg-sm {
/* still use your pattern */
background: url('/images/background-gray-bqh.jpg') center center no-repeat !important;
background-size: cover !important;
}
/* in dark mode, use a DARK glass, not white */
:root[data-theme="dark"] .card-random.bg-sm::before {
background: rgba(15, 23, 42, 0.50); /* 0.50 = strong enough so text pops */
}
/* dark-mode text colors */
:root[data-theme="dark"] .card-random.bg-sm .rv-ar {
color: #ffffff;
}
:root[data-theme="dark"] .card-random.bg-sm .rv-tr,
:root[data-theme="dark"] .card-random.bg-sm .rv-en {
color: rgba(255, 255, 255, 0.98);
}
/* dark-mode small buttons (Refresh / Full Surah, if they are inside) */
:root[data-theme="dark"] .card-random.bg-sm .btn,
:root[data-theme="dark"] .card-random.bg-sm button {
background: rgba(15, 23, 42, 0.35);
color: #fff;
}
/* === HOMEPAGE HERO FIX (light + dark mode consistent) === */
/* light mode */
.home-hero.bg-sm {
position: relative;
background: url('/images/background-gray-bqh.jpg') center center no-repeat;
background-size: cover;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 16px;
overflow: hidden;
}
.home-hero.bg-sm::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65); /* subtle white overlay */
pointer-events: none;
}
.home-hero.bg-sm > * {
position: relative;
z-index: 1;
}
.home-hero.bg-sm .rv-ar {
color: #0f6d3d;
}
.home-hero.bg-sm .rv-tr,
.home-hero.bg-sm .rv-en {
color: #0f172a;
}
/* === dark mode === */
/* help page */
.faq-item .faq-header {
width: 100%;
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: transparent;
border: 0;
font-weight: 500;
cursor: pointer;
}
.faq-item .faq-body {
padding: 0 14px 12px;
background: rgba(15, 109, 61, 0.02);
border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.faq-item .chevron {
transition: transform .2s ease;
}
.faq-item .chevron.rot {
transform: rotate(180deg);
}
.card-tile {
cursor: pointer;
border: 1px solid rgba(15,23,42,0.04);
transition: transform .1s ease, box-shadow .1s ease;
}
.card-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(15,23,42,0.05);
}
/* dark mode for help */
:root[data-theme="dark"] .faq-item .faq-body {
background: rgba(15, 23, 42, 0.25);
border-top: 1px solid rgba(255,255,255,0.05);
}
:root[data-theme="dark"] .card-tile {
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255,255,255,0.06);
}
.about-page .about-icon {
width: 38px;
height: 38px;
border-radius: 14px;
background: rgba(15, 109, 61, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
:root[data-theme="dark"] .about-page .card {
background: rgba(11, 17, 32, 0.45);
border: 1px solid rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .about-page .text-muted {
color: rgba(229, 231, 235, 0.7) !important;
}
/* =========================
Home hero – DARK MODE
========================= */
:root[data-theme="dark"] .home-hero,
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .hero-banner {
background: #5f6770; /* close to the grey in your screenshot */
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, rgba(95,103,112,0) 0);
background-size: 24px 24px;
color: #fff;
border: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
/* make inner texts white */
:root[data-theme="dark"] .home-hero h1,
:root[data-theme="dark"] .home-hero h2,
:root[data-theme="dark"] .home-hero p,
:root[data-theme="dark"] .home-hero .rv-tr,
:root[data-theme="dark"] .hero-card h1,
:root[data-theme="dark"] .hero-card h2,
:root[data-theme="dark"] .hero-card p {
color: #fff;
}
/* the small top-left chip (surah name) */
:root[data-theme="dark"] .home-hero .hero-chip,
:root[data-theme="dark"] .hero-card .hero-chip {
background: rgba(255,255,255,0.1);
color: #fff;
border-color: rgba(255,255,255,0.25);
}
/* keep Arabic nice and bright */
:root[data-theme="dark"] .home-hero .quran-ar,
:root[data-theme="dark"] .hero-card .quran-ar {
color: #fff;
text-shadow: none;
}
/* ===== Dark mode hero override (keep light mode as-is) ===== */
:root[data-theme="dark"] .home-hero {
background:
linear-gradient(140deg, rgba(248, 250, 252, 0.80) 0%, rgba(248, 250, 252, 0.30) 58%, rgba(15, 23, 42, 0) 100%),
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.07) 0%, rgba(15,23,42,0) 45%),
rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 18px 45px rgba(0,0,0,0.25);
backdrop-filter: blur(3px);
}
/* Arabic line – same as demo: green + light shadow */
:root[data-theme="dark"] .home-hero .rv-ar {
color: #15803d; /* green-700-ish */
text-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
/* Bangla / translation – dark-ish text on light glass */
:root[data-theme="dark"] .home-hero .rv-tr,
:root[data-theme="dark"] .home-hero .rv-bn {
color: rgba(15,23,42,0.9);
}
/* top chips (surah name, আবার, পূর্ব সূরা) */
:root[data-theme="dark"] .home-hero .hero-chip,
:root[data-theme="dark"] .home-hero .btn,
:root[data-theme="dark"] .home-hero button {
background: rgba(248, 250, 252, 0.95);
color: #0f172a;
border: 1px solid rgba(15,23,42,0.05);
}
/* keep rounded on mobile too */
@media (max-width: 768px) {
:root[data-theme="dark"] .home-hero {
border-radius: 18px;
}
}
/* Force some tafsir to respect line breaks and [1][2] markers */
.surah-reader .sr-tr .rich {
display: block;
white-space: pre-line;
word-break: break-word;
}
/* --- Random Verse Header Row --- */
.hero-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.hero-meta {
margin: 0;
padding: 0;
}
/* Icon buttons */
.icon-btn {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border, #e9ecef);
background: var(--card, #fff);
color: var(--muted-2, #333);
box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.08));
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.icon-btn i {
font-size: 18px;
line-height: 1;
}
:root[data-theme="dark"] .hero-chip {
background: rgba(255,255,255,0.08);
color: #fff;
box-shadow: 0 0 6px rgba(255,255,255,0.25);
}
/* === Fix for invisible Bootstrap icons in dark mode (Home Hero) === */
:root[data-theme="dark"] .home-hero .icon-btn {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
/* Bootstrap Icons render with mask; force visible white tone */
:root[data-theme="dark"] .home-hero .icon-btn .bi::before {
background-color: #fff !important; /* actual icon color */
border-color: rgba(255, 255, 255, 0.3);
-webkit-mask-composite: source-over !important;
mask-composite: add !important;
opacity: 1 !important;
filter: brightness(200%) !important;
}
/* Hover: stronger glow */
:root[data-theme="dark"] .home-hero .icon-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}
.site-logo {
height: 46px; /* Adjust depending on your header height */
width: auto;
object-fit: contain;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}
.site-logo:hover {
transform: scale(1.05);
filter: brightness(1.1);
}
@media (max-width: 576px) {
.site-logo {
height: 36px;
}
}
/* Floating Back to Top button */
.btn-back-to-top {
position: fixed;
right: 16px;
bottom: 20px;
z-index: 1040;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
background: rgba(15, 109, 61, 0.92); /* matches your green theme */
color: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
cursor: pointer;
opacity: 1;
transform: translateY(0);
transition:
opacity 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.btn-back-to-top:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.btn-back-to-top:active {
transform: translateY(0);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
/* Mobile: keep clear of any bottom nav / audio */
@media (max-width: 575.98px) {
.btn-back-to-top {
right: 12px;
bottom: 70px; /* adjust if you have a bottom bar */
width: 42px;
height: 42px;
font-size: 26px;
}
}
/* Dark mode tweaks (support both possible class names just in case) */
body.dark-mode .btn-back-to-top,
body.theme-dark .btn-back-to-top {
background: rgba(21, 128, 61, 0.95);
color: #e5f6ef;
}
/* ===== Dark mode upgrade */
/* ==== DARK MODE BASE (safe, non-breaking) ==== */
body.dark-mode,
body.theme-dark {
background-color: #020617; /* very dark slate, not pure black */
color: #e5e7eb; /* light grey text */
}
/* Make generic text readable in dark mode */
body.dark-mode,
body.theme-dark {
--qmbd-text-main: #e5e7eb;
--qmbd-text-muted: #9ca3af;
}
body.dark-mode .surah-reader,
body.theme-dark .surah-reader {
color: var(--qmbd-text-main);
}
/* Hero / header block in dark mode */
body.dark-mode .home-hero,
body.theme-dark .home-hero {
background: radial-gradient(circle at top, #0f172a, #020617);
color: #f9fafb;
}
/* Surah header card on detail page */
body.dark-mode .surah-reader .card:first-child,
body.theme-dark .surah-reader .card:first-child {
background: linear-gradient(135deg, #0f172a, #022c22);
border-color: rgba(148, 163, 184, 0.4);
color: #e5e7eb;
}
/* Surah badge stays readable */
body.dark-mode .surah-badge--star,
body.theme-dark .surah-badge--star {
background: #16a34a; /* your green tone, bright enough */
color: #fefce8;
}
/* Generic cards in surah detail dark mode */
body.dark-mode .surah-reader .card,
body.theme-dark .surah-reader .card {
background-color: #020617; /* dark slate */
border-color: rgba(148, 163, 184, 0.35);
color: #e5e7eb;
}
/* Verse content text */
body.dark-mode .surah-reader .card .rv-ar,
body.theme-dark .surah-reader .card .rv-ar,
body.dark-mode .surah-reader .card .rv-tr,
body.theme-dark .surah-reader .card .rv-tr,
body.dark-mode .surah-reader .card .verse-ar,
body.theme-dark .surah-reader .card .verse-ar,
body.dark-mode .surah-reader .card .verse-tr,
body.theme-dark .surah-reader .card .verse-tr {
color: #e5e7eb; /* main text */
}
/* Muted secondary text (translators, small labels, refs) */
body.dark-mode .surah-reader .card .text-muted,
body.theme-dark .surah-reader .card .text-muted,
body.dark-mode .surah-reader .card small,
body.theme-dark .surah-reader .card small {
color: #9ca3af !important;
}
/* Random verse card a bit brighter */
body.dark-mode .card-random,
body.theme-dark .card-random {
background: #020617;
border-color: rgba(56, 189, 248, 0.4); /* soft cyan accent */
}
body.dark-mode .btn-back-to-top,
body.theme-dark .btn-back-to-top {
background: rgba(22, 163, 74, 0.95); /* green */
color: #e5f6ef;
}
/* ============================
UNIVERSAL CHIP / BUTTON FIX
Works for both light & dark mode
============================ */
/* Light mode (default) — keep your existing look */
.sd-hero-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .7rem;
border-radius: 999px;
background: rgba(225, 235, 244, .8); /* soft light tint */
border: 1px solid #e5e7eb;
color: #212529;
font-weight: 600;
box-shadow: 0 1px 4px rgba(17, 24, 39, 0.1);
}
/* Dark Mode — match your existing dark theme */
body.dark-mode .sd-hero-chip,
body.theme-dark .sd-hero-chip {
background: rgba(148, 163, 184, 0.15); /* light slate glass */
border: 1px solid rgba(148, 163, 184, 0.3);
color: #e2e8f0; /* readable slate text */
backdrop-filter: blur(4px);
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* ===== OPTION 3: Pure Neutral Glass (Minimal, Clean) ===== */
.sd-hero-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(209, 213, 219, 0.5);
color: #374151;
font-weight: 600;
font-size: 0.9rem;
backdrop-filter: blur(8px);
white-space: nowrap; /* keep text on a single line */
}
/* Dark mode version */
body.dark-mode .sd-hero-chip,
body.theme-dark .sd-hero-chip {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #e5e7eb;
}
/* ==== Ayah card hover fix for dark mode ==== */
/* Base ayah card – just for reference, tweak if needed */
.ayah-card,
.verse-card {
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
/* Dark theme base */
body.theme-dark .ayah-card,
body.theme-dark .verse-card,
body[data-theme="dark"] .ayah-card,
body[data-theme="dark"] .verse-card {
background-color: #111827; /* dark slate */
color: #f9fafb; /* near-white text */
}
/* Dark theme hover – keep readable, only subtle lift */
body.theme-dark .ayah-card:hover,
body.theme-dark .verse-card:hover,
body[data-theme="dark"] .ayah-card:hover,
body[data-theme="dark"] .verse-card:hover {
background-color: #1f2937; /* slightly lighter, NOT black */
color: #f9fafb; /* force light text */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
}
/* Optional: make sure any nested Arabic text stays light in dark mode */
body.theme-dark .ayah-card .rv-ar,
body.theme-dark .verse-card .rv-ar,
body[data-theme="dark"] .ayah-card .rv-ar,
body[data-theme="dark"] .verse-card .rv-ar {
color: #f9fafb;
}
/* ==== Dark mode ayah card fix ==== */
/* Base: how ayah cards look in dark mode */
body.theme-dark .surah-reader .sr-item,
body[data-theme="dark"] .surah-reader .sr-item {
background-color: #111827; /* dark slate */
border-color: #1f2937;
color: #f9fafb; /* light text */
}
/* Ensure Arabic text inside stays light in dark mode */
body.theme-dark .surah-reader .sr-item .font-quran,
body.theme-dark .surah-reader .sr-item .rv-ar,
body[data-theme="dark"] .surah-reader .sr-item .font-quran,
body[data-theme="dark"] .surah-reader .sr-item .rv-ar {
color: #f9fafb !important;
}
/* ---- Ayah row hover fix (all themes) ---- */
/* Light theme ayah rows */
.surah-reader .sr-item {
background-color: #ffffff;
color: #111827;
border: 1px solid #e5e7eb;
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
/* Dark theme ayah rows */
body[data-theme="dark"] .surah-reader .sr-item,
body.theme-dark .surah-reader .sr-item {
background-color: #111827;
color: #f9fafb;
border-color: #232635;
}
/* ============================================================
FINAL — CLEAN AYAH CARD HOVER (LIGHT & DARK)
============================================================ */
/* FINAL: unified hover for all themes */
.surah-reader .sr-item {
transition: box-shadow .15s ease, transform .1s ease;
}
.surah-reader .sr-item:hover,
.surah-reader .sr-item:focus-within {
background-color: inherit !important;
color: inherit !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
/* ============================================================
QMB – FINAL THEME + AYAH HOVER FIX (OVERRIDES)
Paste at VERY BOTTOM of app.css
============================================================ */
/* 1) Tell browser to NOT use system auto-dark heuristics */
html {
/* We control dark mode ourselves via data-theme / theme-dark */
color-scheme: light;
}
/* 2) Canonical ayah row styles (light mode) */
.surah-reader .sr-item {
background-color: #ffffff;
color: #111827;
border: 1px solid #e5e7eb;
border-radius: 12px;
transition:
box-shadow 0.15s ease,
transform 0.1s ease,
background-color 0.15s ease;
}
/* 3) Canonical ayah row styles (dark mode – your manual toggle) */
body[data-theme="dark"] .surah-reader .sr-item,
body.theme-dark .surah-reader .sr-item {
background-color: #111827;
color: #f9fafb;
border-color: #232635;
}
/* 4) FINAL hover – SAME bg/text in all themes, only subtle lift */
.surah-reader .sr-item:hover,
.surah-reader .sr-item:focus-within {
background-color: inherit !important;
color: inherit !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
/* HEADER ACTIONS – MOBILE ALIGNMENT FIX */
.site-header .container {
align-items: center;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
}
.header-actions > * {
flex: 0 0 auto;
}
.site-header .icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
line-height: 1;
}
.site-header .btn-signin {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding-inline: 14px;
white-space: nowrap;
}
/* ============================================
FIX: Normalize header icon sizes
============================================ */
.site-header .icon-btn i {
font-size: 20px; /* all icons same size now */
line-height: 1;
width: 20px;
height: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.site-header .icon-btn {
width: 40px !important;
height: 40px !important;
min-width: 40px;
min-height: 40px;
padding: 0 !important;
}
/* ============================================================
HEADER – prevent wrapping on small screens
============================================================ */
/* Don't let the navbar wrap its children */
.navbar.site-header {
flex-wrap: nowrap;
}
/* Don't let the inner container wrap either */
.navbar.site-header > .container {
flex-wrap: nowrap !important;
}
/* Extra tweak just for small phones */
@media (max-width: 480px) {
.sd-hero-chip {
font-size: 0.8rem;
padding: 0.3rem 0.65rem;
}
}
/* ---------------------------
SMART TOPIC SUGGESTION DROPDOWN
----------------------------*/
.search-suggest {
position: absolute;
top: 100%; /* directly under input */
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 6px;
z-index: 999;
max-height: 350px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* list items */
.search-suggest .list-group-item {
cursor: pointer;
font-size: 0.95rem;
padding: 10px 14px;
}
.search-suggest .list-group-item:hover {
background: #f5f5f5;
}
/* small header text */
.search-suggest .list-group-item.small {
background: #fafafa;
font-weight: 600;
cursor: default;
}
/* DARK MODE SUPPORT */
body.dark-mode .search-suggest {
background: #1f1f1f;
border-color: #444;
box-shadow: 0 4px 12px rgba(255,255,255,0.08);
}
body.dark-mode .search-suggest .list-group-item {
background: #1f1f1f;
color: #ddd;
}
body.dark-mode .search-suggest .list-group-item:hover {
background: #2b2b2b;
}
body.dark-mode .search-suggest .list-group-item.small {
background: #161616;
color: #aaa;
}
/* Suggestion dropdown container */
.topic-suggest-box {
position: absolute;
left: 0;
right: 0;
margin-top: 5px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
z-index: 9999;
max-height: 260px;
overflow-y: auto;
padding: 4px 0;
}
/* Individual suggestion item */
.topic-suggest-item {
padding: 10px 14px;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
transition: 0.15s;
}
.topic-suggest-item:hover {
background: #f5f5f5;
}
/* Icon styling */
.topic-suggest-item i {
font-size: 16px;
color: #888;
}
.topic-suggest-box .topic-suggest-item:hover {
background: #f1f1f1;
}
.topic-suggest-box a:hover {
background: #eef7ff;
}
/* ---- Search Suggest Dropdown ---- */
.topic-suggest-box {
position: absolute;
top: 100%;
left: 0;
width: 100%; /* match input width */
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 4px 18px rgba(0,0,0,0.08);
z-index: 9999; /* above header / cards */
max-height: 300px;
overflow-y: auto;
margin-top: 4px;
}
.topic-suggest-item {
padding: 10px 14px;
cursor: pointer;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.topic-suggest-item:hover {
background: #f7f9fc;
}
.topic-suggest-title {
padding: 8px 14px 4px;
font-weight: 600;
font-size: 13px;
color: #6c757d;
}
.topic-suggest-search {
padding: 10px 14px;
cursor: pointer;
border-top: 1px solid #f2f2f2;
}
.topic-suggest-search:hover {
background: #f7f9fc;
}
/* Main centered search bar */
.search-bar-wrapper {
max-width: 600px;
width: 100%;
}
/* Input box */
.search-input {
height: 52px;
padding-left: 16px;
border-radius: 12px;
font-size: 1.2rem;
}
/* Search button */
.search-btn {
position: absolute;
right: 6px;
top: 6px;
bottom: 6px;
border-radius: 10px;
padding: 0 18px;
}
/* Suggestions dropdown */
.suggestions-box {
position: absolute;
top: 58px;
left: 0;
right: 0;
background: white;
border-radius: 10px;
border: 1px solid #ddd;
z-index: 9999;
overflow: hidden;
}
.suggest-title {
font-size: 0.75rem;
padding: 6px 10px;
background: #f8f8f8;
font-weight: 600;
color: #666;
}
.suggest-item {
padding: 10px 12px;
cursor: pointer;
}
.suggest-item:hover {
background: #f1f1f1;
}
/* Arabic ayah */
.ayah-ar {
font-size: 1.4rem;
line-height: 2.2rem;
}
/* Translation */
.ayah-tr {
font-size: 1rem;
margin-top: 8px;
color: #333;
}
/* Clean Search UI */
.search-wrapper {
max-width: 700px;
margin: 40px auto;
border-radius: 12px;
}
.search-form {
display: flex;
gap: 12px;
align-items: center;
}
.search-input-area {
position: relative;
flex-grow: 1;
}
.search-input {
width: 100%;
height: 52px;
font-size: 18px;
padding: 10px 14px;
border-radius: 8px;
}
.search-btn {
height: 52px;
padding: 0 24px;
background: #0d6efd;
border: none;
font-size: 17px;
color: white;
border-radius: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.btn-text {
display: none;
}
@media (min-width: 500px) {
.btn-text { display: inline; }
}
/* Suggestions */
.suggest-box {
position: absolute;
top: 56px;
left: 0;
right: 0;
background: white;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
z-index: 999;
overflow: hidden;
}
.suggest-title {
padding: 8px 12px;
font-size: 13px;
color: #888;
font-weight: bold;
border-bottom: 1px solid #eee;
}
.suggest-item {
padding: 10px 12px;
cursor: pointer;
}
.suggest-item:hover {
background: #f7f7f7;
}
.search-direct {
border-top: 1px solid #eee;
}
.hint {
font-size: 12px;
color: #888;
margin-top: 4px;
}
/* Results */
.result-meta {
font-size: 14px;
margin-bottom: 6px;
}
.ayah-ar {
font-size: 25px;
line-height: 1.8;
text-align: right;
}
.ayah-tr, .ayah-en {
font-size: 16px;
}
.open-btn {
margin-top: 6px;
}
.search-form {
display: flex;
align-items: center;
gap: 12px;
}
.search-btn {
height: 52px !important;
line-height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.suggest-box {
margin-top: 4px;
}
.search-wrapper {
margin-top: 40px !important;
}
/* Wrapper that keeps the dropdown aligned */
.search-bar-wrapper {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
/* Search input container controls dropdown position */
.search-input-container {
flex: 1;
position: relative;
}
/* Input */
.search-input {
width: 100%;
height: 50px;
font-size: 18px;
padding: 8px 14px;
border: 1px solid #ddd;
border-radius: 8px;
}
/* Search button */
.search-btn {
height: 50px;
padding: 0 22px;
background: #0d6efd;
border-radius: 8px;
color: #fff;
border: none;
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
cursor: pointer;
}
/* Suggestions dropdown */
.suggest-box {
position: absolute;
top: 54px;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 6px 0;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
z-index: 2000;
}
.suggest-title {
padding: 6px 12px;
font-size: 12px;
color: gray;
}
.suggest-item {
padding: 10px 14px;
cursor: pointer;
display: flex;
gap: 6px;
align-items: center;
}
.suggest-item:hover {
background: #f5f5f5;
}
/* SEARCH BAR LAYOUT */
.search-form {
display: flex;
gap: 12px;
}
/* Input area */
.search-input-area {
flex-grow: 1;
position: relative;
}
/* Input styling */
.search-input {
height: 50px;
font-size: 18px;
padding-left: 14px;
}
/* Search button */
.search-btn {
height: 50px !important;
display: flex;
align-items: center;
gap: 6px;
padding: 0 22px !important;
font-size: 18px;
}
/* Suggestion box */
.suggest-box {
position: absolute;
top: 52px;
left: 0;
right: 0;
background: white;
border: 1px solid #e5e5e5;
border-radius: 6px;
z-index: 9999;
max-height: 300px;
overflow-y: auto;
}
.suggest-title {
padding: 8px 12px;
font-size: 13px;
font-weight: bold;
color: #666;
border-bottom: 1px solid #eee;
}
.suggest-item {
padding: 10px 14px;
cursor: pointer;
font-size: 15px;
}
.suggest-item:hover {
background: #f8f9fa;
}
/* Results Arabic */
.ayah-ar {
font-size: 30px;
line-height: 2;
}
/* Translation */
.ayah-tr, .ayah-en {
font-size: 16px;
margin-top: 6px;
}
.search-form {
display: block;
}
.search-input-area {
position: relative;
}
.search-input {
padding-left: 2.5rem; /* room for icon */
padding-right: 2.5rem; /* room for clear button */
border-radius: 999px; /* pill style like quran.com */
}
/* left icon */
.search-icon {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
pointer-events: none;
font-size: 1.1rem;
color: #999;
}
/* clear button (X) */
.clear-btn {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
border: none;
background: transparent;
padding: 0;
font-size: 1.2rem;
color: #999;
}
.clear-btn:hover {
color: #555;
}
/* suggestion box already exists, but we can round it a bit */
.suggest-box {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 20;
background: #fff;
border-radius: 1rem;
margin-top: 0.3rem;
max-height: 300px;
overflow-y: auto;
}
.suggest-title {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
padding: 0.5rem 0.9rem;
color: #888;
}
.suggest-item {
padding: 0.55rem 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.suggest-item:hover {
background: #f7f7f7;
}
.search-input-area {
position: relative;
}
.clear-btn {
position: absolute;
right: 12px;
top: 12px;
font-size: 20px;
background: transparent;
border: none;
cursor: pointer;
opacity: 0.6;
}
.clear-btn:hover {
opacity: 1;
}
.suggest-box {
position: absolute;
top: 105%;
left: 0;
width: 100%;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
z-index: 50;
max-height: 320px;
overflow-y: auto;
}
.suggest-title {
font-weight: bold;
font-size: 14px;
padding: 10px 14px;
border-bottom: 1px solid #eee;
background: #fafafa;
}
.suggest-item {
padding: 10px 14px;
display: flex;
gap: 10px;
align-items: center;
cursor: pointer;
}
.suggest-item:hover {
background: #f3f8ff;
}
.suggest-icon {
font-size: 20px;
}
.suggest-text {
font-size: 15px;
}
.search-input-area {
position: relative;
}
.clear-btn {
position: absolute;
right: 12px;
top: 12px;
background: none;
border: none;
font-size: 20px;
color: #888;
cursor: pointer;
}
.suggest-box {
position: absolute;
top: 58px;
left: 0;
width: 100%;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
z-index: 50;
max-height: 420px;
overflow-y: auto;
padding: 10px 0;
}
.suggest-title {
font-size: 14px;
font-weight: 600;
padding: 6px 15px;
color: #666;
}
.suggest-item {
display: flex;
align-items: center;
padding: 10px 15px;
cursor: pointer;
}
.suggest-item:hover {
background: #f3f7ff;
}
.suggest-icon {
width: 28px;
font-size: 18px;
}
.suggest-text {
flex-grow: 1;
}
.suggest-more {
text-align: center;
padding: 10px;
font-weight: 600;
color: #0066cc;
cursor: pointer;
}
/* Search (Option B) */
.search-form { margin: 0; }
.search-input-area { position: relative; max-width: 760px; margin: 0 auto; }
.clear-btn{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
border:0;
background:transparent;
font-size:18px;
line-height:1;
opacity:.6;
}
.clear-btn:hover{ opacity:1; }
.suggest-box{
position:absolute;
left:0;
right:0;
top: calc(100% + 8px);
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
z-index:999;
}
.suggest-title{
padding:10px 14px;
font-size:12px;
font-weight:600;
opacity:.7;
background:rgba(0,0,0,.02);
}
.suggest-item{
display:flex;
gap:10px;
align-items:center;
padding:12px 14px;
cursor:pointer;
}
.suggest-item:hover{ background:rgba(0,0,0,.04); }
.suggest-ico{ width:22px; text-align:center; }
.suggest-txt{ flex:1; }
.suggest-action{ font-weight:600; }
.suggest-panel{
position:absolute;
left:0;
right:0;
top:calc(100% + 10px);
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
overflow:hidden;
z-index:999;
}
.suggest-header{
padding:12px 14px;
border-bottom:1px solid rgba(0,0,0,.06);
background:rgba(0,0,0,.02);
}
.more-results{
text-decoration:none;
font-weight:600;
}
.suggest-item{
padding:12px 14px;
cursor:pointer;
}
.suggest-item:hover{
background:rgba(0,0,0,.03);
}
.suggest-title{
font-size:14px;
line-height:1.4;
}
.suggest-meta{
font-size:12px;
opacity:.7;
margin-top:4px;
}
.suggest-section-title{
padding:10px 14px 6px;
font-size:12px;
font-weight:700;
opacity:.7;
}
.suggest-search{
border-top:1px solid rgba(0,0,0,.06);
}
.ayah-preview {
display: block;
font-size: 14px;
line-height: 1.5;
white-space: normal;
}
.q-highlight,
mark {
background-color: #ffe58f;
padding: 0 2px;
border-radius: 3px;
}
.preview-text {
line-height: 1.45;
}
.badge {
font-size: 11px;
}
/* === Quran.com style search input (SAFE) === */
.search-box {
position: relative;
max-width: 720px;
margin: 30px auto;
}
/* wrapper needed for icon */
.search-input-wrapper {
position: relative;
}
/* input */
.search-input {
width: 100%;
padding: 14px 18px 14px 48px; /* space for icon */
font-size: 17px;
border-radius: 999px;
border: 1px solid #e5e7eb;
outline: none;
transition: all 0.2s ease;
background: #fff;
}
/* focus effect */
.search-input:focus {
border-color: #c9a84e;
box-shadow: 0 0 0 3px rgba(201,168,78,0.18);
}
/* icon */
.search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: #9ca3af;
pointer-events: none; /* IMPORTANT: no click interference */
}
/* dropdown alignment */
.search-box .list-group {
margin-top: 8px;
border-radius: 12px;
overflow: hidden;
}
/* Search result container */
.search-result-item {
padding: 14px 16px;
border-radius: 10px;
margin-bottom: 10px;
transition: background 0.15s ease;
}
.search-result-item:hover {
background: #f9fafb;
}
/* Surah : Ayah pill */
.sr-ref {
display: inline-block;
padding: 4px 10px;
font-size: 13px;
font-weight: 600;
border-radius: 999px;
background: #f1f3f5;
color: #495057;
margin-bottom: 6px;
}
/* Verse text */
.search-result-item .ayah-text,
.search-result-item p {
margin-top: 6px;
line-height: 1.7;
font-size: 15px;
}
/* Highlighted word */
mark {
background: #ffe08a;
padding: 0 3px;
border-radius: 4px;
}
.search-result-item {
border: 1px solid #eef0f2;
}
.search-result-item:hover {
border-color: #dee2e6;
}