/* features.css — تنسيقات ميزات «بيان» المُطعَّمة (أذكار/قبلة/تفسير/ختمة/علاماتي/مواقيت/تقويم/بحث).
   منقولة من نسخة web، ومربوطة بمتغيّرات ثيم v2 (تِيل/ذهبي) كي تتناسق فاتحًا وداكنًا بلا كسرٍ لواجهة المحرّك. */

/* جسر المتغيّرات: أسماء web (--green/--txt/--mut/--orange…) ← ثيم v2 الفعليّ (--teal/--ink/--muted/--gold…). */
:root{
  --green: var(--teal); --greenbg: var(--teal-soft);
  --mut: var(--muted);  --txt: var(--ink);
  --orange: var(--gold); --orangebg: var(--gold-soft);
  --redbg: var(--red-soft);
  --blue:#2563eb; --bluebg:rgba(37,99,235,.14);
  --accent: var(--teal);
}

/* ───── شبكة الميزات في الرئيسية ───── */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 20px;}
.feat{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:15px 6px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--txt); cursor:pointer;}
.feat:active{transform:scale(.97);}
.feat-ic{width:30px; height:30px; color:var(--green);} .feat-ic svg{width:30px; height:30px;}
.feat-l{font-size:13px; font-weight:500;}

/* ───── أقسام فرعيّة عامّة ───── */
.soon{text-align:center; color:var(--mut); padding:50px 20px;} .soon svg{width:40px; height:40px; color:var(--green); opacity:.5;}
.cat-list{display:flex; flex-direction:column; gap:9px;}
.cat-card{display:flex; align-items:center; gap:13px; padding:15px 14px; border-radius:15px; background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--txt); cursor:pointer;}
.cat-card:active{background:var(--greenbg);}
.cat-ic{flex:0 0 auto; width:26px; height:26px; color:var(--green);} .cat-ic svg{width:26px;height:26px;}
.cat-t{flex:1;} .cat-n{font-size:16px; font-weight:600;} .cat-d{font-size:12px; color:var(--mut); margin-top:2px;}
.cat-count{flex:0 0 auto; font-size:13px; color:var(--green); background:var(--greenbg); border-radius:999px; padding:3px 11px;}
.cat-hint{font-size:13px; color:var(--mut); text-align:center; margin:0 0 12px;}

/* شريط علويّ داخليّ للأقسام الفرعيّة (زرّ رجوع + عنوان) */
.feat-topbar{display:flex; align-items:center; gap:8px; padding:6px 0 10px;}
.feat-topbar .back{font-size:30px; color:var(--mut); text-decoration:none; width:36px; line-height:1; background:none; border:none; cursor:pointer;}
.feat-topbar .title{flex:1; text-align:center; font-size:18px; color:var(--txt);}
.feat-topbar .spacer{width:36px;}

/* ───── الأذكار ───── */
.dhikr-list{display:flex; flex-direction:column; gap:12px;}
.dhikr{padding:16px 15px; border-radius:16px; background:var(--panel); border:1px solid var(--line);}
.dhikr-text{font-family:var(--qfont); font-size:1.35rem; line-height:2.15; text-align:justify; color:var(--txt);}
.dhikr-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.dhikr-src{font-size:11px; color:var(--gold); background:var(--orangebg); border-radius:8px; padding:3px 9px;}
.dhikr-ben{font-size:11px; color:var(--mut); background:var(--greenbg); border-radius:8px; padding:3px 9px;}
.dhikr-ctr-wrap{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.dhikr-ctr-l{font-size:13px; color:var(--mut);}
.dhikr-ctr{min-width:52px; height:40px; border-radius:12px; border:none; background:var(--green); color:#fff; font-size:18px; font-weight:700; cursor:pointer;}
.dhikr-ctr.done{background:var(--greenbg); color:var(--green);}

/* ───── التقويم الهجريّ + الأحداث ───── */
.hijri-card{text-align:center; padding:22px 16px; border-radius:20px; background:linear-gradient(150deg,var(--greenbg),var(--orangebg)); border:1px solid var(--line);}
.hijri-wd{font-size:15px; color:var(--mut);} .hijri-day{font-size:60px; font-weight:800; color:var(--green); line-height:1.1;}
.hijri-mo{font-size:20px; font-weight:700; color:var(--txt);} .hijri-g{font-size:13px; color:var(--mut); margin-top:5px;}
.hijri-ram{margin-top:12px; font-size:13px; color:var(--gold); background:var(--panel); border-radius:10px; padding:8px;}
.ev-list{display:flex; flex-direction:column; gap:8px;}
.ev{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-radius:14px; background:var(--panel); border:1px solid var(--line);}
.ev-n{font-size:15px; font-weight:600; color:var(--txt);} .ev-d{font-size:12px; color:var(--mut); margin-top:2px;} .ev-date{font-size:11px; color:var(--gold); margin-top:3px;}
.ev-days{flex:0 0 auto; text-align:center; min-width:56px; color:var(--green);} .ev-days b{font-size:20px; display:block;} .ev-days span{font-size:11px; color:var(--mut);}

/* ───── مواقيت الصلاة ───── */
.next-card{text-align:center; padding:20px; border-radius:20px; background:linear-gradient(150deg,var(--teal),var(--teal2)); color:#fff; margin-bottom:14px;}
.next-l{font-size:13px; opacity:.85;} .next-n{font-size:34px; font-weight:800; margin:3px 0;} .next-in{font-size:15px; opacity:.9;} .next-at{font-size:18px; margin-top:4px; color:#ffe9b8;}
.pt-list{display:flex; flex-direction:column; gap:7px;}
.pt{display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-radius:13px; background:var(--panel); border:1px solid var(--line);}
.pt.on{border-color:var(--green); background:var(--greenbg);} .pt-n{font-size:16px; font-weight:600; color:var(--txt);} .pt-t{font-size:16px; color:var(--green);}
.ims{display:flex; gap:10px;} .ims-c{flex:1; text-align:center; padding:15px; border-radius:15px; background:var(--panel); border:1px solid var(--line);}
.ims-l{font-size:12px; color:var(--mut);} .ims-v{font-size:20px; font-weight:700; color:var(--gold); margin-top:5px;}

/* ───── القبلة ───── */
.qibla-wrap{text-align:center; padding:10px 0;}
.qibla-canvas{display:block; width:290px; height:290px; max-width:82vw; max-height:82vw; margin:8px auto;}
.qibla-deg{font-size:18px; font-weight:700; color:var(--green); margin:8px 0;}
.qibla-btns{display:flex; gap:10px; justify-content:center; margin-top:8px;}

/* ───── البحث ───── */
.srch-box{display:flex; gap:8px; margin-bottom:10px;}
.srch-in{flex:1; padding:13px 15px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:16px; font-family:inherit;}
.srch-btn,.srch-go,.tf-btn{border:none; border-radius:12px; background:var(--green); color:#fff; font-weight:700; cursor:pointer; font-family:inherit;}
.srch-btn{padding:0 20px; font-size:15px;} .srch-sum{padding:12px 14px; border-radius:12px; background:var(--greenbg); color:var(--txt); font-size:15px; margin-bottom:12px;} .srch-sum b{color:var(--green);}
.srch-out{display:flex; flex-direction:column; gap:8px;}
.srch-row{display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:13px; background:var(--panel); border:1px solid var(--line); cursor:pointer;}
.srch-t{flex:1;} .srch-a{font-family:var(--qfont); font-size:1.25rem; line-height:1.9; color:var(--txt);} .srch-m{font-size:12px; color:var(--mut); margin-top:3px;}
.srch-go{flex:0 0 auto; padding:7px 14px; font-size:13px;}
.srch-bm{flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--mut); cursor:pointer; display:flex; align-items:center; justify-content:center;} .srch-bm svg{width:16px;height:16px;} .srch-bm.on{color:var(--gold); border-color:var(--gold); background:var(--orangebg);}
.hl{color:var(--gold); font-weight:700;}

/* ───── التفسير ───── */
.tf-sel{width:100%; padding:13px 15px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:16px; font-family:inherit; margin-bottom:12px;}
.tf-out{display:flex; flex-direction:column; gap:10px;}
.tf-card{padding:15px; border-radius:15px; background:var(--panel); border:1px solid var(--line);}
.tf-ayah{font-family:var(--qfont); font-size:1.4rem; line-height:2.1; text-align:center; color:var(--txt);}
.tf-btn{margin-top:10px; padding:8px 16px; font-size:14px;}
.tf-body{margin-top:10px; padding:12px; border-radius:10px; background:var(--greenbg); font-size:15px; line-height:2; text-align:justify; color:var(--txt);}

/* ───── الختمة ───── */
.khatma{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:0 0 14px;}
.khatma-top{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--txt);}
.khatma-pct{color:var(--green); font-weight:700; font-size:16px;}
.khatma-bar{height:8px; border-radius:999px; background:var(--bg); border:1px solid var(--line); overflow:hidden; margin:9px 0 6px;}
.khatma-fill{height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:999px; transition:width .4s;}
.khatma-sub{font-size:11px; color:var(--mut);}
.juz-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-top:6px;}
.juz{aspect-ratio:1; border-radius:13px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:17px; font-weight:700; cursor:pointer;}
.juz.done{background:var(--green); color:#fff; border-color:var(--green);}

/* ───── متصفّح السور: بحث موحّد + أكورديون الأجزاء ───── */
.browser{margin:2px 0 8px;}
.browser .srch-box{margin-bottom:12px;}
.browser-results{display:flex; flex-direction:column; gap:14px;}
.browser-sec{font-size:13px; font-weight:700; color:var(--green); margin:2px 2px 8px;}
.juz-acc{display:flex; flex-direction:column; gap:8px;}
.juz-item{border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden;}
.juz-head{width:100%; display:flex; align-items:center; gap:10px; padding:14px 15px; background:none; border:none; cursor:pointer; color:var(--txt); font-family:inherit; text-align:start;}
.juz-h-n{font-size:16px; font-weight:700; color:var(--green); flex:0 0 auto;}
.juz-h-s{flex:1; font-size:12.5px; color:var(--mut);}
.juz-chev{flex:0 0 auto; color:var(--mut); display:flex; transition:transform .2s;}
.juz-item.open .juz-chev{transform:rotate(90deg);}
.juz-body{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.juz-surah{display:flex; align-items:center; gap:10px; padding:12px 15px; cursor:pointer; border-bottom:1px solid var(--line);}
.juz-surah:last-child{border-bottom:none;}
.juz-surah:active{background:var(--greenbg);}
.js-name{flex:1; font-size:15px; color:var(--txt);}
.js-range{flex:0 0 auto; font-size:12px; color:var(--mut);}
.js-badge{flex:0 0 auto; font-size:12px; color:var(--gold); background:var(--orangebg); border-radius:999px; padding:2px 9px;}
.js-badge.good{color:var(--green); background:var(--greenbg);}
/* صفوف السور داخل القائمة المنسدلة أو نتائج البحث: بطاقات مستقلّة */
.juz-drop{margin-top:2px;}
.juz-drop-body{margin-top:12px;}
.juz-drop-body .juz-surah, .browser-results .juz-surah{border:1px solid var(--line); border-radius:13px;}
.juz-select{width:100%; cursor:pointer;}

/* ───── أزرار عامّة ───── */
.again{display:block; width:100%; padding:15px; border:none; border-radius:14px; background:var(--panel); color:var(--txt); font-size:16px; border:1px solid var(--line); cursor:pointer; font-family:inherit;}
.again.ghost{background:var(--panel); color:var(--txt); border:1px solid var(--line);}