/* ═══════════════════════════════════════════
   QURAN READER — extends noor25.css tokens
   ═══════════════════════════════════════════ */

body{padding-top:64px;}

/* ── NAV (lighter version of main site nav) ── */
nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1.4rem;border-bottom:1px solid var(--border-dim);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--nav-bg);}
.nav-logo{font-family:"Cinzel",serif;font-size:.92rem;font-weight:600;letter-spacing:.08em;line-height:1.15;color:var(--gold);text-decoration:none;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;}
@supports not (-webkit-background-clip: text){.nav-logo{color:var(--gold);}}
.nav-right{display:flex;align-items:center;gap:.6rem;}
.icon-btn{width:38px;height:38px;border:1px solid var(--border-gold);background:transparent;color:var(--gold);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;}
.icon-btn:hover{background:rgba(var(--gold-rgb),.1);}
.lang-tog{display:flex;border:1px solid var(--border-gold);overflow:hidden;background:transparent;appearance:none;-webkit-appearance:none;padding:0;}
.lt-opt{padding:.5rem .85rem;font-family:"Cinzel",serif;font-size:.62rem;font-weight:600;letter-spacing:.08em;color:var(--text-dim);cursor:pointer;transition:all .25s;opacity:.55;}
.lt-opt:not(.active):hover{opacity:.85;background:rgba(var(--gold-rgb),.1);color:var(--text-dim2);}
.lt-opt.active{background:var(--gold);color:var(--deep);opacity:1;font-weight:700;}

/* ── HERO ── */
.qr-hero{text-align:center;padding:3rem 1.4rem 1.6rem;max-width:760px;margin:0 auto;}
.qr-hero-orn{font-size:1.6rem;color:var(--gold);opacity:.6;margin-bottom:.6rem;}
.qr-hero h1{font-family:"Cormorant Garamond",serif;font-size:clamp(2.1rem,5vw,3.1rem);font-weight:600;color:var(--gold-l);margin:0 0 .5rem;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;}
@supports not (-webkit-background-clip: text){.qr-hero h1{color:var(--gold);}}
.qr-hero-sub{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.05rem;color:var(--text-dim2);margin:0;}
.qr-hero-lang-row{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.4rem;}
.qr-hlr-label{font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.lang-tog-lg .lt-opt{padding:.6rem 1.2rem;font-size:.85rem;font-family:"Cormorant Garamond",serif;}
.qr-progress-row{margin-top:1.4rem;min-height:1px;}
.qr-last-read{display:inline-flex;align-items:center;gap:.8rem;border:1px solid var(--border-gold);background:var(--feat-bg);padding:.55rem 1rem;}
.qr-lr-label{font-family:"Cinzel",serif;font-size:.55rem;letter-spacing:.1em;color:var(--muted);}
#qr-lr-btn{background:transparent;border:none;color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:.98rem;font-style:italic;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.4);}

/* ── LIST VIEW: TABS ── */
#qr-main{max-width:1100px;margin:0 auto;padding:0 1.2rem 4rem;}
.qr-list-toolbar{display:flex;justify-content:center;margin:1.6rem 0 1.8rem;}
.qr-tabs{display:flex;border:1px solid var(--border-gold);}
.qr-tab{font-family:"Cinzel",serif;font-size:.6rem;letter-spacing:.1em;padding:.6rem 1.3rem;background:transparent;border:none;border-right:1px solid var(--border-dim);color:var(--text-dim2);cursor:pointer;transition:all .25s;}
.qr-tab:last-child{border-right:none;}
.qr-tab.active{background:var(--gold);color:var(--deep);}
.qr-tab:not(.active):hover{background:rgba(var(--gold-rgb),.08);}

/* ── SURAH GRID ── */
.qr-surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;}
.qr-surah-card{display:flex;align-items:center;gap:.9rem;border:1px solid var(--card-border);background:var(--card-bg);padding:.85rem 1rem;cursor:pointer;transition:all .25s;text-align:left;}
.qr-surah-card:hover{border-color:rgba(var(--gold-rgb),.5);transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow);}
.qr-sc-num{flex-shrink:0;width:36px;height:36px;border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;font-size:.82rem;color:var(--gold);position:relative;}
.qr-sc-num::before{content:"";position:absolute;inset:0;border:1px solid rgba(var(--gold-rgb),.25);transform:rotate(45deg) scale(.78);}
.qr-sc-body{flex:1;min-width:0;}
.qr-sc-en{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.05rem;color:var(--text-dim2);}
.qr-sc-meta{font-size:.68rem;color:var(--muted);letter-spacing:.03em;margin-top:.1rem;}
.qr-sc-ar{font-family:"Amiri",serif;font-size:1.25rem;color:var(--gold-l);flex-shrink:0;}

/* ── BOOKMARKS ── */
.qr-empty-msg{text-align:center;color:var(--text-dim);font-style:italic;font-family:"Cormorant Garamond",serif;font-size:1.05rem;padding:3rem 1rem;}
.qr-bm-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--card-border);background:var(--card-bg);padding:.9rem 1.1rem;margin-bottom:.6rem;cursor:pointer;}
.qr-bm-item:hover{border-color:rgba(var(--gold-rgb),.4);}
.qr-bm-ref{font-family:"Cinzel",serif;font-size:.62rem;letter-spacing:.08em;color:var(--gold);}
.qr-bm-text{font-size:.85rem;color:var(--text-dim2);margin-top:.25rem;max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qr-bm-remove{background:transparent;border:1px solid var(--border-dim);color:var(--text-dim);width:30px;height:30px;cursor:pointer;flex-shrink:0;}
.qr-bm-remove:hover{border-color:#C25B5B;color:#C25B5B;}

/* ── READ VIEW ── */
.qr-read-header{padding:1rem 0 .6rem;}
.qr-read-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.qr-back-btn{background:transparent;border:1px solid var(--border-dim);color:var(--text-dim2);font-family:"Cinzel",serif;font-size:.58rem;letter-spacing:.08em;padding:.45rem .9rem;cursor:pointer;}
.qr-back-btn:hover{border-color:rgba(var(--gold-rgb),.4);}
.qr-read-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;}
.qr-nav-arrow{width:42px;height:42px;border:1px solid var(--border-gold);background:transparent;color:var(--gold);font-size:1.3rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .25s;}
.qr-nav-arrow:hover:not(:disabled){background:rgba(var(--gold-rgb),.1);}
.qr-nav-arrow:disabled{opacity:.25;cursor:default;}
.qr-read-title{text-align:center;min-width:0;}
.qr-rt-ar{display:block;font-family:"Amiri",serif;font-size:1.8rem;color:var(--gold-l);}
.qr-rt-en{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.05rem;color:var(--text-dim2);margin-top:.15rem;}
.qr-read-meta{text-align:center;font-size:.7rem;letter-spacing:.05em;color:var(--muted);margin:.6rem 0 2rem;text-transform:uppercase;}

/* ── VERSES ── */
.qr-verses{max-width:780px;margin:0 auto;}
.qr-verse{border-bottom:1px solid var(--border-dim);padding:1.6rem 0;display:flex;gap:1rem;}
.qr-verse:first-child{padding-top:0;}
.qr-v-num{flex-shrink:0;width:30px;height:30px;border:1px solid var(--border-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--gold);margin-top:.3rem;}
.qr-v-body{flex:1;min-width:0;}
.qr-v-ar{font-family:"Amiri",serif;font-size:1.7rem;line-height:2.15;color:var(--gold-l);direction:rtl;text-align:right;margin-bottom:1.1rem;padding-bottom:1.1rem;position:relative;}
.qr-v-ar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.4) 50%,transparent);}
[data-theme="light"] .qr-v-ar{color:#2A1D08;}
.qr-v-translit{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:.85rem;color:var(--muted);margin-bottom:.5rem;display:none;}
.qr-v-trans{font-family:"Cormorant Garamond",serif;font-size:1.08rem;color:#F0E9D6;line-height:1.55;}
[data-theme="light"] .qr-v-trans{color:#2A1D08;}
.qr-v-trans.ur{font-family:"Noto Nastaliq Urdu",serif;direction:rtl;text-align:right;font-size:1.25rem;line-height:2.1;color:#FAF6EC;}
[data-theme="light"] .qr-v-trans.ur{color:#1F1505;}
.qr-v-actions{display:flex;gap:.5rem;margin-top:.7rem;}
.qr-v-act{background:transparent;border:1px solid var(--border-dim);color:var(--text-dim);font-size:.85rem;width:30px;height:30px;cursor:pointer;transition:all .25s;}
.qr-v-act:hover{border-color:rgba(var(--gold-rgb),.4);color:var(--gold);}
.qr-v-act.active{color:var(--gold);border-color:rgba(var(--gold-rgb),.5);}
.qr-verse.qr-highlighted{background:rgba(var(--gold-rgb),.06);margin:0 -1rem;padding:1.6rem 1rem;}

/* ── SEARCH OVERLAY ── */
.qr-overlay{position:fixed;inset:0;z-index:1200;background:rgba(4,6,14,.92);backdrop-filter:blur(6px);display:none;}
.qr-overlay.open{display:block;}
[data-theme="light"] .qr-overlay{background:rgba(40,30,12,.85);}
.qr-overlay-inner{max-width:780px;margin:0 auto;padding:5vh 1.2rem 2rem;height:100vh;display:flex;flex-direction:column;}
.qr-search-bar{display:flex;gap:.6rem;margin-bottom:1.2rem;flex-shrink:0;}
#qr-search-input{flex:1;background:var(--modal-bg);border:1px solid var(--border-gold);color:var(--text-dim2);font-size:1.05rem;padding:.85rem 1.1rem;font-family:"Cormorant Garamond",serif;}
#qr-search-input:focus{outline:none;border-color:var(--gold);}
#qr-search-close{width:48px;background:var(--modal-bg);border:1px solid var(--border-gold);color:var(--gold);font-size:1.1rem;cursor:pointer;flex-shrink:0;}
#qr-search-results{overflow-y:auto;flex:1;}
.qr-sr-item{border:1px solid var(--border-dim);background:var(--card-bg);padding:.9rem 1.1rem;margin-bottom:.6rem;cursor:pointer;}
.qr-sr-item:hover{border-color:rgba(var(--gold-rgb),.4);}
.qr-sr-ref{font-family:"Cinzel",serif;font-size:.58rem;letter-spacing:.08em;color:var(--gold);}
.qr-sr-snippet{font-size:.92rem;color:var(--text-dim2);margin-top:.35rem;line-height:1.5;}
.qr-sr-snippet mark{background:rgba(var(--gold-rgb),.35);color:inherit;padding:0 .1em;}
.qr-sr-empty{text-align:center;color:var(--text-dim);font-style:italic;font-family:"Cormorant Garamond",serif;padding:3rem 1rem;}

/* ── FOOTER / BACK TOP ── */
.qr-footer{max-width:780px;margin:0 auto;padding:2rem 1.4rem 3rem;text-align:center;font-size:.72rem;color:var(--muted);line-height:1.6;}
.qr-footer a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.35);}
#qr-back-top{position:fixed;bottom:1.2rem;right:1.2rem;width:42px;height:42px;border:1px solid var(--border-gold);background:var(--deep2);color:var(--gold);font-size:.9rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;z-index:500;}
#qr-back-top.show{opacity:1;pointer-events:auto;}

/* ── MOBILE ── */
@media(max-width:700px){
  .nav-logo{font-size:.78rem;}
  .qr-hero{padding:2.2rem 1rem 1.2rem;}
  .qr-surah-grid{grid-template-columns:1fr;}
  .qr-v-ar{font-size:1.5rem;line-height:1.95;}
  .qr-v-trans.ur{font-size:1.1rem;}
  .qr-read-nav{gap:.8rem;}
  .qr-nav-arrow{width:36px;height:36px;}
  .qr-rt-ar{font-size:1.45rem;}
  nav,#qr-search-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;}
}