/* ═══════════════════════════════════════════════
   ROOT VARIABLES
═══════════════════════════════════════════════ */
:root {
  --g1:#06271c; --g2:#0d3d2e; --g3:#145a3c; --g4:#1d7a52; --g5:#26a06b;
  --gold:#c9943a; --gold2:#e8c06a; --gold3:#f5d98a; --gold-glow:rgba(201,148,58,0.35);
  --bg:#f7f2e9; --bg2:#ede7d8; --bg3:#e4dccb; --card:#ffffff;
  --text:#18120a; --text2:#4a3c2e; --text3:#7a6858;
  --border:#d8ccb4; --border2:#c4b494;
  --shadow-sm:0 2px 8px rgba(13,61,46,0.08);
  --shadow-md:0 6px 24px rgba(13,61,46,0.12);
  --shadow-lg:0 16px 48px rgba(13,61,46,0.18);
  --shadow-gold:0 4px 24px rgba(201,148,58,0.25);
  --r:14px; --r-sm:8px; --r-pill:100px;
  --font-title:'Aslam',serif;
  --font-body:'Jameel Noori Nastaleeq New','Jameel_Noori_Nastaleeq_New',serif;
  --font-quran:'Al Qalam Quran Majeed Web2_D','Al-Qalam',serif;
  --font-hadith:'Al_Mushaf','ar',serif;
  --font-farsi: 'Jameel Noori Kasheeda', serif;
  --font-juziyaat: 'LotusLinotype', 'Segoe UI', sans-serif;
  --trans:0.25s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] {
  --bg:#07140e; --bg2:#0b1e14; --bg3:#0f2a1c; --card:#0d2318;
  --text:#f0e8d8; --text2:#b0a090; --text3:#6a5e50;
  --border:#1e3d2a; --border2:#2a5038;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.55);
}

/* ═══════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  line-height:2;
  min-height:100vh;
  transition:background var(--trans),color var(--trans);
  overflow-x:hidden;
}

/* ═══════════════════════════════════════════════
   GLOBAL GEOMETRIC BG PATTERN
═══════════════════════════════════════════════ */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23c9943a' stroke-opacity='0.04' stroke-width='1'%3E%3Cpolygon points='60,8 112,34 112,86 60,112 8,86 8,34'/%3E%3Cpolygon points='60,22 98,42 98,78 60,98 22,78 22,42'/%3E%3Ccircle cx='60' cy='60' r='16' stroke-opacity='0.03'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 15%, rgba(201,148,58,0.05) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(13,61,46,0.07) 0%,transparent 55%);
  pointer-events:none;z-index:0;
}
.container{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

/* ═══════════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════════ */
#progress-bar{
  position:fixed;top:0;right:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--g4),var(--gold),var(--g4));
  width:0%;z-index:9999;
  box-shadow:0 0 8px var(--gold-glow);
  transition:width 0.1s linear;
}

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
#site-header{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  border-bottom:3px solid var(--gold);
  position:sticky;top:0;z-index:900;
  box-shadow:0 4px 32px rgba(0,0,0,0.35);
}
.header-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;max-width:1240px;margin:0 auto;gap:16px;
}

/* Logo */
.logo-wrap{display:flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer;}
.logo-emblem{
  width:52px;height:52px;flex-shrink:0;
  background:linear-gradient(145deg,var(--gold),var(--gold2));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  box-shadow:0 0 0 3px rgba(201,148,58,0.3), var(--shadow-gold);
  transition:transform var(--trans),box-shadow var(--trans);
}
.logo-wrap:hover .logo-emblem{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 0 5px rgba(201,148,58,0.4),var(--shadow-gold);}
.logo-info{display:flex;flex-direction:column;}
.logo-ar{font-family:var(--font-title);font-size:24px;color:var(--gold2);line-height:1.1;}
.logo-en{font-size:10px;letter-spacing:3px;color:rgba(255,255,255,0.55);font-family:Georgia,serif;text-transform:uppercase;}

/* NAV */
.main-nav{display:flex;align-items:center;gap:2px;}
.nav-link{
  color:rgba(255,255,255,0.8);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--r-sm);
  font-size:15px;
  transition:all var(--trans);
  white-space:nowrap;
  position:relative;
}
.nav-link::after{
  content:'';position:absolute;bottom:4px;right:14px;left:14px;
  height:2px;background:var(--gold2);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform var(--trans);
}
.nav-link:hover{color:#fff;background:rgba(201,148,58,0.15);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--gold2);}

/* Header Actions */
.header-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--trans);
}
.icon-btn:hover{background:rgba(201,148,58,0.25);border-color:var(--gold);}
.hamburger{display:none;}

/* ═══════════════════════════════════════════════
   TICKER / BREAKING NEWS BAR
═══════════════════════════════════════════════ */
.ticker-bar{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 100%);
  padding:6px 0;overflow:hidden;
  display:flex;align-items:center;
}
.ticker-label{
  background:var(--g1);color:var(--gold2);
  padding:0 18px;white-space:nowrap;
  font-family:var(--font-title);font-size:13px;
  height:100%;display:flex;align-items:center;
  z-index:2;flex-shrink:0;
}
.ticker-scroll{
  display:flex;gap:60px;
  animation:ticker-move 30s linear infinite;
  white-space:nowrap;
}
.ticker-scroll span{color:var(--g1);font-size:13px;}
@keyframes ticker-move{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ═══════════════════════════════════════════════
   PAGE VIEWS (all managed by JS)
═══════════════════════════════════════════════ */
.page{display:none;animation:fadeUp 0.4s ease both;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

/* ═══════════════════════════════════════════════
   HOME — HERO
═══════════════════════════════════════════════ */
.hero{
  background:linear-gradient(160deg,var(--g1) 0%,var(--g2) 40%,var(--g3) 75%,var(--g4) 100%);
  padding:70px 24px 80px;
  text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23c9943a' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='55' fill='none' stroke='%23c9943a' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='30' fill='none' stroke='%23c9943a' stroke-opacity='0.06' stroke-width='1'/%3E%3Cline x1='100' y1='20' x2='100' y2='180' stroke='%23c9943a' stroke-opacity='0.03' stroke-width='1'/%3E%3Cline x1='20' y1='100' x2='180' y2='100' stroke='%23c9943a' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E") center/300px;
}
.hero-bismillah{
  font-family:var(--font-quran);font-size:30px;
  color:var(--gold2);margin-bottom:10px;
  opacity:0;animation:fadeUp 0.7s 0.1s ease both;
  position:relative;
}
.hero-title{
  font-family:var(--font-title);font-size:clamp(36px,5.5vw,64px);
  color:#fff;margin-bottom:8px;line-height:1.3;
  opacity:0;animation:fadeUp 0.7s 0.25s ease both;
  position:relative;
}
.hero-title em{color:var(--gold2);font-style:normal;}
.hero-sub{
  color:rgba(255,255,255,0.65);font-size:15px;
  margin-bottom:40px;letter-spacing:1px;
  font-family:Georgia,serif;
  opacity:0;animation:fadeUp 0.7s 0.4s ease both;
  position:relative;
}

/* SEARCH */
.search-outer{
  max-width:740px;margin:0 auto 36px;
  opacity:0;animation:fadeUp 0.7s 0.55s ease both;
  position:relative;z-index:10;
}
.search-box{
  display:flex;
  background:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 8px 40px rgba(0,0,0,0.3),0 0 0 4px rgba(201,148,58,0.25);
  overflow:hidden;transition:box-shadow var(--trans);
}
[data-theme="dark"] .search-box{background:var(--bg3);border:1px solid var(--border);}
.search-box:focus-within{box-shadow:0 8px 40px rgba(0,0,0,0.4),0 0 0 5px rgba(201,148,58,0.5);}
.search-box input{
  flex:1;border:none;background:transparent;
  padding:18px 24px;font-size:18px;
  font-family:var(--font-body);direction:rtl;
  outline:none;color:var(--text);
}
.search-box input::placeholder{color:#aaa;}
.search-btn{
  background:linear-gradient(135deg,var(--g3),var(--g4));
  border:none;padding:0 32px;color:#fff;
  font-size:22px;cursor:pointer;
  transition:opacity var(--trans);
  border-radius:0 var(--r-pill) var(--r-pill) 0;
  display:flex;align-items:center;
}
.search-btn:hover{opacity:0.88;}

/* AJAX dropdown */
.search-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;left:0;
  background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow-lg);overflow:hidden;
  display:none;z-index:200;
  border:1px solid var(--border);
}
.search-dropdown.open{display:block;animation:fadeUp 0.2s ease both;}
.sdrop-item{
  padding:13px 20px;border-bottom:1px solid var(--bg2);
  cursor:pointer;transition:background var(--trans);
  display:flex;align-items:center;gap:12px;
}
.sdrop-item:hover{background:var(--bg2);}
.sdrop-item:last-child{border-bottom:none;}
.sdrop-cat{
  background:var(--g3);color:#fff;
  padding:2px 12px;border-radius:var(--r-pill);
  font-size:12px;white-space:nowrap;flex-shrink:0;
}
.sdrop-title{font-size:15px;color:var(--text);}

/* CATEGORY PILLS */
.cat-pills{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  opacity:0;animation:fadeUp 0.7s 0.7s ease both;
  position:relative;
}
.cat-pill{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(201,148,58,0.45);
  color:rgba(255,255,255,0.88);
  padding:8px 20px;border-radius:var(--r-pill);
  cursor:pointer;font-family:var(--font-body);font-size:14px;
  transition:all var(--trans);backdrop-filter:blur(4px);
}
.cat-pill:hover,.cat-pill.active{
  background:var(--gold);color:var(--g1);
  border-color:var(--gold);font-weight:600;
  box-shadow:0 4px 16px rgba(201,148,58,0.4);
  transform:translateY(-2px);
}

/* ═══════════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════════ */
.stats-strip{
  background:linear-gradient(90deg,var(--g2),var(--g3));
  border-bottom:2px solid var(--gold);
  padding:18px 0;
}
.stats-row{display:flex;justify-content:center;gap:0;flex-wrap:wrap;}
.stat-item{
  text-align:center;padding:0 36px;
  border-left:1px solid rgba(201,148,58,0.2);
}
.stat-item:last-child{border-left:none;}
.stat-n{
  font-family:Georgia,serif;font-size:30px;
  font-weight:700;color:var(--gold2);
  display:block;line-height:1;
}
.stat-l{font-size:12px;color:rgba(255,255,255,0.65);display:block;margin-top:4px;}

/* ═══════════════════════════════════════════════
   SECTION UTILITIES
═══════════════════════════════════════════════ */
.section{padding:56px 0;}
.section-alt{background:var(--bg2);}
.sec-head{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
}
.sec-title{
  font-family:var(--font-title);font-size:26px;
  color:var(--g2);display:flex;align-items:center;gap:12px;
}
[data-theme="dark"] .sec-title{color:var(--gold2);}
.sec-title-line{
  display:block;width:56px;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);
  border-radius:2px;
}
.see-all{
  color:var(--g3);border:1.5px solid var(--g3);
  padding:7px 18px;border-radius:var(--r-pill);
  font-size:13px;text-decoration:none;
  transition:all var(--trans);white-space:nowrap;
}
.see-all:hover{background:var(--g3);color:#fff;}
[data-theme="dark"] .see-all{color:var(--gold);border-color:var(--gold);}
[data-theme="dark"] .see-all:hover{background:var(--gold);color:var(--g1);}

/* ═══════════════════════════════════════════════
   FATWA GRID CARDS
═══════════════════════════════════════════════ */
.fatwa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  gap:24px;
}
.fcard{
  background:var(--card);
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding:0;overflow:hidden;
  transition:all var(--trans);
  cursor:pointer;
  display:flex;flex-direction:column;
  position:relative;
}
.fcard::before{
  content:'';
  position:absolute;top:0;right:0;
  width:4px;height:100%;
  background:linear-gradient(to bottom,var(--gold),var(--g4));
}
.fcard:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-5px);
  border-color:var(--gold);
}
.fcard:hover::before{width:6px;}
.fcard-top{padding:22px 24px 16px;}
.fcard-cat{
  display:inline-block;
  background:linear-gradient(135deg,var(--g3),var(--g4));
  color:#fff;padding:3px 14px;
  border-radius:var(--r-pill);font-size:12px;
  margin-bottom:12px;
}
.fcard-title{
  font-family:var(--font-title);font-size:19px;
  color:var(--text);line-height:1.6;margin-bottom:10px;
}
.fcard-excerpt{
  font-size:14px;color:var(--text2);line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.fcard-meta{
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;font-size:12px;color:var(--text3);
  border-top:1px solid var(--bg2);
  flex-wrap:wrap;
}
.fcard-meta span{display:flex;align-items:center;gap:4px;}
.fcard-actions{
  display:flex;gap:8px;
  padding:12px 24px 20px;margin-top:auto;
}
.btn-read{
  flex:1;background:linear-gradient(135deg,var(--g3),var(--g4));
  color:#fff;border:none;padding:11px;
  border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--font-body);font-size:14px;
  transition:opacity var(--trans);
}
.btn-read:hover{opacity:0.88;}
.btn-pdf{
  background:linear-gradient(135deg,#8a5c1a,var(--gold));
  color:#fff;border:none;padding:11px 16px;
  border-radius:var(--r-sm);cursor:pointer;
  font-size:15px;transition:opacity var(--trans);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;font-family:var(--font-body);font-size:13px;
}
.btn-pdf:hover{opacity:0.88;}

/* ═══════════════════════════════════════════════
   POPULAR LIST
═══════════════════════════════════════════════ */
.pop-list{display:flex;flex-direction:column;gap:12px;}
.pop-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 22px;
  display:flex;align-items:center;gap:18px;
  cursor:pointer;transition:all var(--trans);
}
.pop-item:hover{
  border-color:var(--gold);box-shadow:var(--shadow-md);
  transform:translateX(-5px);
}
.pop-num{
  font-size:26px;font-weight:700;color:var(--gold);
  opacity:0.5;min-width:36px;text-align:center;
  font-family:Georgia,serif;
}
.pop-item:hover .pop-num{opacity:1;}
.pop-info{flex:1;}
.pop-title{font-family:var(--font-title);font-size:16px;color:var(--text);margin-bottom:4px;}
.pop-views{font-size:12px;color:var(--text3);}
.pop-arrow{color:var(--text3);font-size:18px;transition:color var(--trans);}
.pop-item:hover .pop-arrow{color:var(--gold);}

/* ═══════════════════════════════════════════════
   CATEGORIES GRID
═══════════════════════════════════════════════ */
.cats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.cat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:22px 20px;
  cursor:pointer;transition:all var(--trans);
  text-align:center;
}
.cat-card:hover{
  border-color:var(--gold);box-shadow:var(--shadow-gold);
  transform:translateY(-3px);
  background:linear-gradient(135deg,var(--g2),var(--g3));
}
.cat-card:hover .cat-icon,.cat-card:hover .cat-name,.cat-card:hover .cat-count{color:#fff;}
.cat-icon{font-size:32px;display:block;margin-bottom:10px;}
.cat-name{
  font-family:var(--font-title);font-size:17px;
  color:var(--text);display:block;margin-bottom:6px;
}
.cat-count{
  display:inline-block;
  background:var(--bg2);color:var(--text3);
  padding:2px 12px;border-radius:var(--r-pill);
  font-size:12px;transition:background var(--trans),color var(--trans);
}
.cat-card:hover .cat-count{background:rgba(255,255,255,0.2);}

/* ═══════════════════════════════════════════════
   SINGLE FATWA PAGE
═══════════════════════════════════════════════ */
.back-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1.5px solid var(--border);
  color:var(--text2);padding:8px 20px;border-radius:var(--r-pill);
  cursor:pointer;font-family:var(--font-body);font-size:14px;
  margin:24px 0;transition:all var(--trans);
}
.back-btn:hover{border-color:var(--g3);color:var(--g3);}

.fatwa-full{
  background:var(--card);border-radius:18px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  overflow:hidden;margin-bottom:48px;
}
.ff-header{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 60%,var(--g3) 100%);
  padding:36px 40px;position:relative;overflow:hidden;
}
.ff-header::before{
  content:'';position:absolute;top:-40px;left:-40px;
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(201,148,58,0.12);
  pointer-events:none;
}
.ff-header::after{
  content:'';position:absolute;bottom:-60px;right:-60px;
  width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(201,148,58,0.08);
  pointer-events:none;
}
.ff-cat-badge{
  display:inline-block;
  background:rgba(201,148,58,0.2);
  border:1px solid rgba(201,148,58,0.5);
  color:var(--gold2);padding:4px 18px;
  border-radius:var(--r-pill);font-size:13px;
  margin-bottom:16px;
}
.ff-title{
  font-family:var(--font-title);
  font-size:clamp(20px,3vw,30px);
  color:#fff;line-height:1.55;
  position:relative;z-index:1;
}
.ff-meta{
  background:var(--bg2);
  padding:14px 40px;
  display:flex;gap:28px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text2);
}
.ff-meta-item{display:flex;align-items:center;gap:6px;}
.ff-body{padding:36px 40px;}

/* Font legend */
.font-legend{
  display:flex;flex-wrap:wrap;gap:8px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 18px;
  margin-bottom:28px;font-size:12px;color:var(--text3);
  align-items:center;
}
.fl-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--card);border:1px solid var(--border);
  padding:3px 12px;border-radius:var(--r-pill);
}
.fl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Fatwa Sections */
.ff-section{margin-bottom:32px;}
.ff-section-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-title);font-size:20px;
  color:var(--g3);margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--gold);
}
[data-theme="dark"] .ff-section-label{color:var(--gold2);}
.ff-section-icon{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--g3),var(--g4));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}

/* Regular Urdu text block */
.urdu-block{
  font-family:var(--font-body);font-size:17px;
  line-height:2.1;color:var(--text);
  background:var(--bg2);
  border-right:4px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:22px 26px;margin:6px 0;
}

/* Quran block */
.quran-block{
  font-family:var(--font-quran);font-size:26px;
  line-height:2.6;text-align:center;
  background:linear-gradient(135deg,rgba(13,61,46,0.05),rgba(201,148,58,0.07));
  border:1.5px solid rgba(201,148,58,0.4);
  border-radius:var(--r);padding:28px 32px;
  margin:16px 0;position:relative;
}
.quran-block::before{
  content:'﴿';position:absolute;
  top:8px;right:18px;font-size:32px;
  color:var(--gold);opacity:0.4;
}
.quran-block::after{
  content:'﴾';position:absolute;
  bottom:8px;left:18px;font-size:32px;
  color:var(--gold);opacity:0.4;
}
.quran-ref{
  display:block;font-family:var(--font-body);
  font-size:13px;color:var(--g3);text-align:center;
  margin-top:8px;
}
[data-theme="dark"] .quran-ref{color:var(--gold2);}

/* Hadith block */
.hadith-block{
  font-family:var(--font-hadith);font-size:22px;
  line-height:2.4;
  background:linear-gradient(135deg,rgba(138,92,26,0.05),rgba(201,148,58,0.06));
  border-right:5px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  padding:22px 28px;margin:16px 0;
}
.hadith-label{
  display:block;font-family:var(--font-body);
  font-size:13px;color:var(--gold);
  margin-bottom:10px;font-weight:600;
}
.hadith-ref{
  display:block;font-family:var(--font-body);
  font-size:12px;color:var(--text3);
  border-top:1px dashed var(--border);
  padding-top:8px;margin-top:8px;
}

/* Fatwa Actions bar */
.ff-actions{
  display:flex;gap:12px;flex-wrap:wrap;
  padding:22px 40px;
  background:var(--bg2);
  border-top:1px solid var(--border);
}
.btn-lg{
  padding:13px 26px;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:15px;
  cursor:pointer;border:none;
  transition:all var(--trans);
  display:flex;align-items:center;gap:8px;
}
.btn-lg:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-green{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;}
.btn-gold{background:linear-gradient(135deg,#8a5c1a,var(--gold));color:#fff;}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text2);}
.btn-outline:hover{border-color:var(--g3);color:var(--g3);}

/* View counter inline */
.view-pulse{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(201,148,58,0.1);
  border:1px solid rgba(201,148,58,0.3);
  border-radius:var(--r-pill);padding:4px 14px;
  font-size:13px;color:var(--gold);
}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:0.6;}}

/* ═══════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════ */
.contact-wrap{
  max-width:700px;margin:48px auto;
  background:var(--card);border-radius:18px;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  overflow:hidden;
}
.contact-header{
  background:linear-gradient(135deg,var(--g1),var(--g3));
  padding:32px 40px;
}
.contact-header h2{font-family:var(--font-title);font-size:26px;color:var(--gold2);margin-bottom:6px;}
.contact-header p{color:rgba(255,255,255,0.65);font-size:14px;}
.contact-body{padding:36px 40px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:14px;color:var(--text2);margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 16px;
  border:2px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:15px;
  background:var(--bg);color:var(--text);
  direction:rtl;outline:none;
  transition:border-color var(--trans),box-shadow var(--trans);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--g3);
  box-shadow:0 0 0 3px rgba(20,90,60,0.12);
}
.form-group textarea{min-height:120px;resize:vertical;line-height:1.8;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.check-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:14px;color:var(--text2);}
.check-row input[type="checkbox"]{width:auto;accent-color:var(--g3);}
.btn-submit{
  width:100%;padding:15px;
  background:linear-gradient(135deg,var(--g1),var(--g4));
  color:#fff;border:none;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:18px;
  cursor:pointer;transition:opacity var(--trans);
  letter-spacing:0.5px;
}
.btn-submit:hover{opacity:0.88;}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer{
  background:linear-gradient(135deg,var(--g1) 0%,#040e09 100%);
  border-top:3px solid var(--gold);
  padding:56px 0 0;
  margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:36px;margin-bottom:40px;
}
.footer-col h4{
  font-family:var(--font-title);font-size:18px;
  color:var(--gold2);margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(201,148,58,0.25);
}
.footer-col p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.9;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:8px;}
.footer-links a{
  color:rgba(255,255,255,0.6);text-decoration:none;
  font-size:13px;transition:color var(--trans);
  display:flex;align-items:center;gap:6px;
}
.footer-links a:hover{color:var(--gold2);}
.footer-links a::before{content:'›';color:var(--gold);opacity:0.6;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.07);
  padding:18px 0;text-align:center;
  font-size:12px;color:rgba(255,255,255,0.35);
}
.footer-logo{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.footer-emblem{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.footer-brand-ar{font-family:var(--font-title);font-size:22px;color:var(--gold2);}
.footer-brand-en{font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:2px;font-family:Georgia,serif;}
.social-icons{display:flex;gap:10px;margin-top:16px;}
.soc-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--trans);text-decoration:none;
}
.soc-btn:hover{background:rgba(201,148,58,0.25);border-color:var(--gold);color:var(--gold2);}

/* ═══════════════════════════════════════════════
   FLOATING TOOLS
═══════════════════════════════════════════════ */
.float-tools{
  position:fixed;left:20px;bottom:80px;
  display:flex;flex-direction:column;gap:8px;z-index:500;
}
.ftool{
  width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--card);border:1.5px solid var(--border);
  color:var(--text);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);transition:all var(--trans);
}
.ftool:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.08);}
.back-top{
  position:fixed;left:20px;bottom:24px;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--g3),var(--g4));
  color:#fff;border:none;font-size:20px;cursor:pointer;
  box-shadow:0 4px 16px rgba(20,90,60,0.4);
  transition:all var(--trans);z-index:500;
  display:flex;align-items:center;justify-content:center;
}
.back-top:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(20,90,60,0.5);}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATION
═══════════════════════════════════════════════ */
#toast{
  position:fixed;bottom:90px;right:24px;
  background:var(--g1);color:var(--gold2);
  border:1px solid var(--gold);border-radius:var(--r-sm);
  padding:12px 22px;font-size:14px;
  box-shadow:var(--shadow-lg);z-index:9999;
  opacity:0;transform:translateY(16px) scale(0.95);
  transition:all var(--trans);pointer-events:none;
  max-width:320px;
}
#toast.show{opacity:1;transform:translateY(0) scale(1);}

/* ═══════════════════════════════════════════════
   MOBILE NAV DRAWER
═══════════════════════════════════════════════ */
#mobile-drawer{
  position:fixed;top:0;right:-100%;bottom:0;
  width:300px;background:var(--g1);
  z-index:1000;transition:right 0.35s ease;
  border-left:2px solid var(--gold);
  display:flex;flex-direction:column;
  padding:80px 0 40px;overflow-y:auto;
}
#mobile-drawer.open{right:0;}
.drawer-link{
  color:rgba(255,255,255,0.8);
  padding:14px 28px;font-size:17px;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.06);
  transition:all var(--trans);
  display:flex;align-items:center;gap:10px;
}
.drawer-link:hover{background:rgba(201,148,58,0.15);color:var(--gold2);padding-right:36px;}
.drawer-close{
  position:absolute;top:20px;left:20px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.1);border:none;
  color:#fff;font-size:20px;cursor:pointer;
}
#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:999;display:none;
}
#overlay.open{display:block;}

/* ═══════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════ */
.about-hero{
  background:linear-gradient(135deg,var(--g1),var(--g3));
  padding:60px 24px;text-align:center;color:#fff;
}
.about-hero h1{font-family:var(--font-title);font-size:40px;color:var(--gold2);margin-bottom:12px;}
.about-hero p{color:rgba(255,255,255,0.7);font-size:15px;max-width:600px;margin:0 auto;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:60px 0;}
.about-card{
  background:var(--card);border-radius:var(--r);
  padding:32px;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.about-card-icon{font-size:40px;margin-bottom:16px;display:block;}
.about-card h3{font-family:var(--font-title);font-size:22px;color:var(--g2);margin-bottom:12px;}
[data-theme="dark"] .about-card h3{color:var(--gold2);}
.about-card p{font-size:15px;color:var(--text2);line-height:2;}

/* ═══════════════════════════════════════════════
   SEARCH HIGHLIGHT
═══════════════════════════════════════════════ */
.search-highlight {
  background: rgba(201, 148, 58, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 3px;
  font-style: normal;
  font-weight: inherit;
  border-bottom: 1.5px solid rgba(201, 148, 58, 0.55);
}
[data-theme="dark"] .search-highlight {
  background: rgba(201, 148, 58, 0.18);
  border-bottom-color: rgba(201, 148, 58, 0.7);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:900px){
  .main-nav{display:none!important;}
  .hamburger{display:flex!important;}
  .fatwa-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .ff-header,.ff-body,.ff-actions{padding-right:22px;padding-left:22px;}
  .ff-meta{padding-right:22px;padding-left:22px;}
  .cats-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .stat-item{padding:0 20px;}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
  .hero{padding:50px 16px 60px;}
  .stats-row{gap:0;justify-content:space-around;}
  .stat-item{padding:0 12px;border-left:none;}
  .hero-title{font-size:30px;}
}  

/* ═══════════════════════════════════════════════
   VOICE BAR — sunnifatwa.in
   style.css ke end mein add karein
═══════════════════════════════════════════════ */

/* ── Main voice bar container ── */
.sf-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(13,61,46,0.06), rgba(201,148,58,0.05));
  border: 1.5px solid rgba(29,122,82,0.3);
  border-radius: 12px;
  margin: 16px 0 24px;
  direction: rtl;
  flex-wrap: wrap;
  position: relative;
}
[data-theme="dark"] .sf-voice-bar {
  background: linear-gradient(135deg, rgba(13,61,46,0.15), rgba(201,148,58,0.06));
  border-color: rgba(29,122,82,0.4);
}

/* ── Play/Pause button ── */
.sf-v-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1.5px solid rgba(29,122,82,0.5);
  background: linear-gradient(135deg, var(--g3), var(--g4));
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sf-v-play:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(20,90,60,0.35);
}
.sf-v-play.sf-playing {
  background: linear-gradient(135deg, #8a5c1a, var(--gold));
  border-color: var(--gold);
}
.sf-v-play svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Speed control ── */
.sf-v-speed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text3);
}
.sf-v-speed input[type="range"] {
  width: 80px;
  accent-color: var(--g3);
  cursor: pointer;
}
.sf-v-speed-val {
  font-family: Georgia, serif;
  font-size: 12px;
  color: var(--text2);
  min-width: 32px;
}

/* ── Status badge ── */
.sf-v-badge {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 100px;
  background: rgba(29,122,82,0.1);
  border: 1px solid rgba(29,122,82,0.25);
  color: var(--g3);
  margin-right: auto;
  transition: all 0.25s;
  white-space: nowrap;
}
.sf-v-badge.sf-active {
  background: rgba(201,148,58,0.15);
  border-color: rgba(201,148,58,0.5);
  color: var(--gold);
}
[data-theme="dark"] .sf-v-badge { color: #6dbf8b; }
[data-theme="dark"] .sf-v-badge.sf-active { color: var(--gold2); }

/* ── Progress bar ── */
.sf-v-progress {
  height: 3px;
  background: rgba(29,122,82,0.15);
  border-radius: 2px;
  margin: -14px 0 18px;
  overflow: hidden;
  transition: opacity 0.3s;
}
.sf-v-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--g4), var(--gold));
  border-radius: 2px;
  transition: width 0.3s linear;
}

/* ── Stop button ── */
.sf-v-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid rgba(200,60,60,0.35);
  background: rgba(200,60,60,0.07);
  color: #c83c3c;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s;
  flex-shrink: 0;
  display: none;
}
.sf-v-stop.visible { display: inline-flex; }
.sf-v-stop:hover {
  background: rgba(200,60,60,0.15);
  border-color: rgba(200,60,60,0.6);
}

/* ── Tooltip label ── */
.sf-voice-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text3);
  font-family: Georgia, serif;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-voice-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g4);
  flex-shrink: 0;
}

/* ── Pulse dot (active indicator) ── */
.sf-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  margin-left: 4px;
  animation: sfPulse 1.3s infinite;
  vertical-align: middle;
}
@keyframes sfPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}

/* ── Print mein voice bar hide ── */
@media print {
  .sf-voice-bar,
  .sf-voice-label,
  .sf-v-progress { display: none !important; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .sf-voice-bar { gap: 8px; padding: 10px 14px; }
  .sf-v-play { padding: 8px 16px; font-size: 13px; }
  .sf-v-speed input[type="range"] { width: 60px; }
}                  

/* ═══════════════════════════════════════════════
   HEADER — THEME DROPDOWN
   (header.php se move kiya)
═══════════════════════════════════════════════ */
.theme-dropdown{position:relative;display:inline-block;}
.theme-panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#06271c;border:1.5px solid var(--gold);border-radius:12px;
  padding:10px;display:none;flex-direction:column;gap:6px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);z-index:9999;min-width:165px;
}
.theme-panel.open{display:flex;}
.theme-opt{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;transition:all 0.2s;
  color:rgba(255,255,255,0.8);font-size:14px;white-space:nowrap;
  font-family:'Jameel Noori Nastaleeq New',serif;
}
.theme-opt:hover{background:rgba(201,148,58,0.2);border-color:rgba(201,148,58,0.4);color:var(--gold2);}
.theme-opt.active{background:rgba(201,148,58,0.25);border-color:var(--gold);color:var(--gold2);}
.theme-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);flex-shrink:0;}
.theme-panel-title{
  font-size:11px;letter-spacing:1.5px;color:rgba(201,148,58,0.6);
  text-align:center;padding:2px 0 6px;border-bottom:1px solid rgba(201,148,58,0.2);
  margin-bottom:2px;font-family:Georgia,serif;
}

/* ═══════════════════════════════════════════════
   HEADER — KUTUB NAV DROPDOWN
   (header.php se move kiya)
═══════════════════════════════════════════════ */
.nav-dropdown{position:relative;display:inline-block;}
.nav-dropdown-panel{
  position:absolute;top:calc(100% + 8px);right:50%;transform:translateX(50%);
  background:#06271c;border:1.5px solid var(--gold);border-radius:12px;
  padding:8px;display:none;flex-direction:column;gap:4px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);z-index:9999;min-width:200px;
  direction:rtl;
}
.nav-dropdown-panel.open{display:flex;}
.nav-dropdown-panel::before{
  content:'';position:absolute;top:-7px;right:50%;transform:translateX(50%);
  border:6px solid transparent;border-bottom-color:var(--gold);border-top:none;
}
.nav-dd-item{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;
  color:rgba(255,255,255,0.85);font-size:15px;text-decoration:none;
  font-family:'Jameel Noori Nastaleeq New',serif;
  border:1px solid transparent;transition:all 0.2s;white-space:nowrap;
}
.nav-dd-item:hover{background:rgba(201,148,58,0.18);border-color:rgba(201,148,58,0.35);color:var(--gold2);}
.nav-dd-item svg{flex-shrink:0;opacity:0.75;}
.nav-dd-divider{height:1px;background:rgba(201,148,58,0.2);margin:2px 0;}

/* ═══════════════════════════════════════════════
   HEADER — MOBILE DRAWER SUB MENU
   (header.php se move kiya)
═══════════════════════════════════════════════ */
.drawer-sub{display:none;flex-direction:column;background:rgba(0,0,0,0.2);}
.drawer-sub.open{display:flex;}
.drawer-sub-link{
  color:rgba(255,255,255,0.65);padding:11px 28px 11px 20px;
  font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:8px;transition:all var(--trans);
}
.drawer-sub-link:hover{background:rgba(201,148,58,0.12);color:var(--gold2);}
.drawer-kutub-toggle{justify-content:space-between;cursor:pointer;}
.drawer-kutub-toggle svg{transition:transform 0.2s;}

/* ═══════════════════════════════════════════════
   PAGE HERO (inner pages)
   (header.php se move kiya)
═══════════════════════════════════════════════ */
.page-hero{background:linear-gradient(135deg,var(--g1),var(--g3));padding:40px 24px;text-align:center;}
.page-hero h1{font-family:var(--font-title);font-size:36px;color:var(--gold2);margin-bottom:8px;}
.page-hero p{color:rgba(255,255,255,0.65);font-size:14px;}

/* ═══════════════════════════════════════════════
   INDEX — SEARCH BAR EXTRAS
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.sf-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:14px;}
.sf-sec-title{font-family:var(--font-title);font-size:20px;color:var(--text);display:flex;align-items:center;gap:10px;}
.sf-sec-title::after{content:'';display:inline-block;flex:1;min-width:30px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:1px;}
.sf-see-all{display:inline-flex;align-items:center;gap:6px;background:rgba(201,148,58,0.1);border:1px solid rgba(201,148,58,0.3);border-radius:var(--r-pill);padding:7px 18px;color:var(--gold2);font-size:13px;text-decoration:none;white-space:nowrap;transition:all var(--trans);}
.sf-see-all:hover{background:rgba(201,148,58,0.22);border-color:var(--gold);}

.sdrop-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--bg2);cursor:pointer;transition:background var(--trans);font-family:var(--font-body);}
.sdrop-row:last-of-type{border-bottom:none;}
.sdrop-row:hover,.sdrop-row.focused{background:var(--bg2);}
.sdrop-badge{background:var(--g3);color:#fff;padding:2px 12px;border-radius:var(--r-pill);font-size:12px;white-space:nowrap;flex-shrink:0;}
.sdrop-text{font-size:15px;color:var(--text);flex:1;}
.sdrop-text mark{background:rgba(201,148,58,0.25);border-bottom:1.5px solid rgba(201,148,58,0.6);border-radius:3px;padding:0 2px;font-style:normal;}
.sdrop-more{padding:11px 20px;text-align:center;color:var(--g3);font-size:13px;cursor:pointer;font-family:var(--font-body);background:var(--bg2);transition:background var(--trans);}
.sdrop-more:hover{background:var(--bg3,#e0d8c8);}
.sdrop-empty{padding:20px;text-align:center;color:var(--text3);font-size:14px;font-family:var(--font-body);}

.search-voice-btn{background:transparent;border:none;padding:0 12px;color:#aaa;cursor:pointer;font-size:20px;flex-shrink:0;transition:color 0.2s;display:flex;align-items:center;}
.search-voice-btn:hover{color:var(--g3);}
.search-voice-btn.listening{color:#e53935;animation:voicePulse 1s ease-in-out infinite;}
@keyframes voicePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.15);}}
.search-ai-btn{background:rgba(201,148,58,0.15);border:1px solid rgba(201,148,58,0.4);border-radius:100px;padding:7px 14px;color:#b8922e;cursor:pointer;font-size:13px;flex-shrink:0;transition:all 0.2s;display:flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;font-family:var(--font-body);margin:0 6px;}
.search-ai-btn:hover{background:rgba(201,148,58,0.28);border-color:var(--gold);color:var(--g2);}
.voice-tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.72);color:#fff;font-family:var(--font-body);font-size:13px;padding:6px 14px;border-radius:8px;white-space:nowrap;display:none;z-index:201;pointer-events:none;}
.voice-tip.show{display:block;}
.voice-tip::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:rgba(0,0,0,0.72);}

/* ═══════════════════════════════════════════════
   INDEX — LANGUAGE STRIP
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.lang-strip{background:var(--card);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.lang-strip-label{font-family:var(--font-body);font-size:13px;color:var(--text3);display:inline-flex;align-items:center;gap:6px;}
.lang-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg2);border:1.5px solid var(--border);border-radius:100px;padding:6px 16px;font-family:var(--font-body);font-size:13px;color:var(--text);text-decoration:none;transition:all var(--trans);white-space:nowrap;}
.lang-pill:hover{border-color:var(--gold);background:rgba(201,148,58,0.1);transform:translateY(-2px);}
.lang-pill-cnt{background:linear-gradient(135deg,var(--g2),var(--g3));border-radius:100px;padding:2px 10px;font-size:11px;color:#fff;font-family:Georgia,serif;font-weight:700;min-width:22px;text-align:center;}
.lang-pill-all{background:linear-gradient(135deg,var(--g2),var(--g3));border-color:var(--g3);color:#fff;}
.lang-pill-all:hover{opacity:0.88;background:linear-gradient(135deg,var(--g2),var(--g3));}

/* ═══════════════════════════════════════════════
   INDEX — FATWA CARD TRANSLATION BADGES
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.fcard-trans-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;align-items:center;}
.fcard-trans-badge{display:inline-flex;align-items:center;background:rgba(201,148,58,0.12);border:1px solid rgba(201,148,58,0.3);border-radius:100px;padding:2px 8px;font-size:11px;text-decoration:none;color:var(--gold2);line-height:1.4;transition:all var(--trans);}
.fcard-trans-badge:hover{background:rgba(201,148,58,0.25);border-color:var(--gold);}

/* ═══════════════════════════════════════════════
   INDEX — PDF BUTTON ON CARD
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.btn-card-pdf{background:linear-gradient(135deg,#b83232,#d94040);color:#fff;padding:9px 16px;border-radius:8px;font-family:var(--font-body);font-size:13px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:opacity var(--trans);white-space:nowrap;flex-shrink:0;}
.btn-card-pdf:hover{opacity:0.85;}

/* ═══════════════════════════════════════════════
   INDEX — POPULAR LIST RANKS
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.pop-item-rank{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:13px;font-weight:700;flex-shrink:0;}
.pop-rank-1{background:#d4af37;color:#18120a;}
.pop-rank-2{background:#b0b8c1;color:#1a1a1a;}
.pop-rank-3{background:#c9894a;color:#18120a;}
.pop-rank-4,.pop-rank-5{background:transparent;color:var(--text3);border:1.5px solid var(--border);}
.pop-mauzu-badge{font-size:11px;background:rgba(201,148,58,0.12);border:1px solid rgba(201,148,58,0.3);border-radius:var(--r-pill);padding:2px 10px;color:var(--gold2);font-family:var(--font-body);white-space:nowrap;flex-shrink:0;}

/* ═══════════════════════════════════════════════
   INDEX — MUFTIS GRID
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.mufti-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.mufti-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;transition:all var(--trans);position:relative;overflow:hidden;}
.mufti-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--g4));opacity:0;transition:opacity var(--trans);}
.mufti-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.mufti-card:hover::before{opacity:1;}
.mufti-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 4px 16px rgba(201,148,58,0.25);margin-bottom:14px;flex-shrink:0;}
.mufti-avatar-fb{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g4));border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:14px;flex-shrink:0;}
.mufti-naam{font-family:var(--font-title);font-size:16px;color:var(--text);line-height:1.5;margin-bottom:10px;}
.mufti-count{background:linear-gradient(135deg,var(--g2),var(--g3));color:#fff;padding:4px 14px;border-radius:var(--r-pill);font-size:12px;margin-top:auto;}

/* ═══════════════════════════════════════════════
   INDEX — KITAAB GRID
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.kitab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.kitab-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;align-items:stretch;transition:all var(--trans);}
.kitab-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.kitab-cover{width:72px;flex-shrink:0;background:linear-gradient(135deg,var(--g1),var(--g3));display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;}
.kitab-cover img{width:100%;height:100%;object-fit:cover;}
.kitab-cover-badge{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--g1);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;font-family:monospace;white-space:nowrap;}
.kitab-info{padding:16px 18px;flex:1;min-width:0;}
.kitab-naam{font-family:var(--font-title);font-size:16px;color:var(--text);line-height:1.5;margin-bottom:6px;}
.kitab-writer{font-size:12px;color:var(--text3);margin-bottom:10px;}
.kitab-pill{display:inline-flex;background:linear-gradient(135deg,var(--g2),var(--g3));color:#fff;padding:3px 12px;border-radius:var(--r-pill);font-size:11px;}

/* ═══════════════════════════════════════════════
   INDEX — MISSION BAR
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.mission-bar{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 24px;text-align:center;}
.mission-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);}
.mission-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0.5;}

/* ═══════════════════════════════════════════════
   INDEX — HADITH STRIP
   (index.php se move kiya)
═══════════════════════════════════════════════ */
@keyframes hadithFade{0%{opacity:0;transform:translateY(10px);}6%,23%{opacity:1;transform:translateY(0);}29%,100%{opacity:0;transform:translateY(-6px);}}
.hadith-strip{background:linear-gradient(135deg,var(--g1),var(--g2));border-top:2px solid rgba(201,148,58,0.4);border-bottom:2px solid rgba(201,148,58,0.4);padding:0;text-align:center;position:relative;overflow:hidden;min-height:140px;height:auto;display:flex;align-items:center;justify-content:center;}
.hadith-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,148,58,0.06) 0%,transparent 70%);pointer-events:none;}
.hadith-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 24px;opacity:0;animation:hadithFade 48s ease-in-out infinite;}
.hadith-item:nth-child(1){animation-delay:0s;}.hadith-item:nth-child(2){animation-delay:12s;}.hadith-item:nth-child(3){animation-delay:24s;}.hadith-item:nth-child(4){animation-delay:36s;}
.hadith-arabic{font-family:var(--font-hadith);font-size:clamp(16px,2.5vw,20px);color:var(--gold2,#e8c06a);line-height:2.2;direction:rtl;margin-bottom:6px;}
.hadith-tarjuma{font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,0.65);direction:rtl;}
.hadith-ref{font-size:11px;color:rgba(201,148,58,0.65);font-family:var(--font-hadith);margin-top:5px;}
.hadith-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;}
.hadith-dot{width:6px;height:6px;border-radius:50%;background:rgba(201,148,58,0.3);transition:background 0.4s,transform 0.4s;}
.hadith-dot.active{background:var(--gold2);transform:scale(1.4);}

/* ═══════════════════════════════════════════════
   INDEX — FATWA-E-ROZ (FOZ)
   (index.php se move kiya)
═══════════════════════════════════════════════ */
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(201,148,58,0.4);}50%{box-shadow:0 0 0 10px rgba(201,148,58,0);}}
.foz-section{background:var(--bg,#f7f2e9);padding:48px 24px;border-bottom:1px solid var(--border);}
[data-theme="dark"] .foz-section,[data-theme="layli"] .foz-section,[data-theme="aqeeq"] .foz-section{background:var(--bg2);}
.foz-inner{max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md,0 8px 32px rgba(0,0,0,0.1));display:grid;grid-template-columns:260px 1fr;}
@media(max-width:700px){.foz-inner{grid-template-columns:1fr;}.foz-left{border-right:none!important;border-bottom:1px solid var(--border);}}
.foz-left{background:linear-gradient(160deg,var(--g1),var(--g3));padding:32px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid rgba(201,148,58,0.2);position:relative;overflow:hidden;}
.foz-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,148,58,0.08) 0%,transparent 65%);pointer-events:none;}
.foz-badge{display:inline-block;background:rgba(201,148,58,0.2);border:1px solid rgba(201,148,58,0.4);color:var(--gold2);font-family:'Segoe UI',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 16px;border-radius:100px;margin-bottom:18px;position:relative;z-index:1;}
.foz-icon{width:64px;height:64px;border-radius:50%;background:rgba(201,148,58,0.15);border:2px solid rgba(201,148,58,0.4);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;animation:pulseGold 3s ease-in-out infinite;position:relative;z-index:1;}
.foz-date-label{font-family:var(--font-body);font-size:11px;color:rgba(255,255,255,0.4);position:relative;z-index:1;direction:rtl;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.foz-hijri-val{font-family:var(--font-body);font-size:15px;color:var(--gold2);direction:rtl;line-height:1.7;position:relative;z-index:1;}
.foz-miladi-val{font-family:Georgia,serif;font-size:12px;color:rgba(255,255,255,0.4);margin-top:5px;position:relative;z-index:1;direction:ltr;unicode-bidi:plaintext;}
.foz-right{padding:32px 36px;direction:rtl;display:flex;flex-direction:column;justify-content:space-between;gap:16px;}
.foz-cat{display:inline-block;background:rgba(20,90,60,0.08);border:1px solid rgba(20,90,60,0.2);color:var(--g3);font-family:var(--font-body);font-size:12px;padding:3px 14px;border-radius:100px;margin-bottom:10px;}
[data-theme="dark"] .foz-cat,[data-theme="madina"] .foz-cat,[data-theme="bareilly"] .foz-cat{background:rgba(20,90,60,0.25);color:#5DCAA5;}
.foz-title{font-family:var(--font-title);font-size:clamp(18px,2.5vw,24px);color:var(--text);line-height:1.6;margin-bottom:10px;}
.foz-excerpt{font-family:var(--font-body);font-size:13px;color:var(--text2);line-height:2.2;border-right:3px solid var(--gold);padding-right:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.foz-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text3);font-family:var(--font-body);border-top:1px solid var(--border);padding-top:14px;margin-top:4px;}
.foz-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--g2),var(--g3));color:#fff;padding:10px 24px;border-radius:var(--r-pill);text-decoration:none;font-family:var(--font-title);font-size:14px;transition:opacity var(--trans);white-space:nowrap;}
.foz-cta:hover{opacity:0.85;}

/* ═══════════════════════════════════════════════
   INDEX — MAUZU GRID CARDS
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.mauzu-section{padding:52px 24px;background:var(--card);}
.mauzu-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:24px;}
.mauzu-card-item{background:var(--bg,#f7f2e9);border:1.5px solid var(--border);border-radius:14px;padding:20px 14px;text-align:center;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all var(--trans);position:relative;overflow:hidden;}
.mauzu-card-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--g3));transform:scaleX(0);transform-origin:right;transition:transform var(--trans);}
.mauzu-card-item:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1);background:var(--card);}
.mauzu-card-item:hover::after{transform:scaleX(1);}
.mauzu-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(20,90,60,0.1),rgba(29,122,82,0.15));border:1px solid rgba(20,90,60,0.15);display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform var(--trans);}
[data-theme="dark"] .mauzu-icon,[data-theme="mekkah"] .mauzu-icon{background:rgba(201,148,58,0.12);border-color:rgba(201,148,58,0.2);}
.mauzu-card-item:hover .mauzu-icon{transform:scale(1.1) rotate(-3deg);}
.mauzu-card-naam{font-family:var(--font-title);font-size:15px;color:var(--text);line-height:1.4;}
.mauzu-card-cnt{font-size:11px;color:var(--text3);background:rgba(201,148,58,0.1);border-radius:100px;padding:2px 10px;font-family:var(--font-body);}

/* ═══════════════════════════════════════════════
   INDEX — CONTRIBUTOR CTA STRIP
   (index.php se move kiya)
═══════════════════════════════════════════════ */
.ctb-cta-strip{background:linear-gradient(135deg,var(--g1) 0%,#0a2e1f 40%,var(--g2) 70%,#0e3d28 100%);padding:56px 24px;text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(201,148,58,0.25);border-bottom:1px solid rgba(201,148,58,0.25);}
.ctb-cta-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(201,148,58,0.07) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(29,122,82,0.08) 0%,transparent 50%);pointer-events:none;}
.ctb-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}
.ctb-ayat-block{background:rgba(201,148,58,0.1);border-right:4px solid var(--gold);border-radius:var(--r,14px);padding:18px 28px;direction:rtl;margin-bottom:32px;display:inline-block;max-width:600px;}
.ctb-ayat-text{font-family:var(--font-quran,serif);font-size:22px;color:var(--gold2);line-height:2.4;direction:rtl;display:block;margin-bottom:6px;}
.ctb-ayat-ref{font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,0.55);display:block;}
.ctb-heading{font-family:var(--font-title);font-size:clamp(22px,3.5vw,34px);color:#fff;margin-bottom:10px;line-height:1.4;}
.ctb-heading span{color:var(--gold2);}
.ctb-sub{color:rgba(255,255,255,0.6);font-size:14px;font-family:var(--font-body);margin-bottom:28px;line-height:2;direction:rtl;}
.ctb-micro-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.ctb-micro-stat{background:rgba(255,255,255,0.06);border:1px solid rgba(201,148,58,0.25);border-radius:12px;padding:12px 20px;text-align:center;min-width:90px;}
.ctb-ms-n{display:block;font-family:Georgia,serif;font-size:22px;color:var(--gold2);font-weight:700;line-height:1;}
.ctb-ms-l{display:block;font-size:11px;color:rgba(255,255,255,0.45);margin-top:4px;font-family:var(--font-body);}
.ctb-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-ctb-gold{background:linear-gradient(135deg,var(--gold),#b8922e);color:var(--g1);padding:14px 36px;border-radius:var(--r-pill);font-family:var(--font-title);font-size:16px;font-weight:700;text-decoration:none;transition:all var(--trans);box-shadow:0 6px 24px rgba(201,148,58,0.35);display:inline-flex;align-items:center;gap:8px;}
.btn-ctb-gold:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(201,148,58,0.5);}
.btn-ctb-ghost{background:transparent;color:var(--gold2);border:1.5px solid rgba(201,148,58,0.45);padding:14px 28px;border-radius:var(--r-pill);font-family:var(--font-title);font-size:15px;text-decoration:none;transition:all var(--trans);display:inline-flex;align-items:center;gap:7px;}
.btn-ctb-ghost:hover{background:rgba(201,148,58,0.12);border-color:var(--gold);}

/* ═══════════════════════════════════════════════
   INDEX — MUSHKIL ALFAAZ SECTION
   (index.php se move kiya)
═══════════════════════════════════════════════ */
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.alfaaz-section{background:var(--bg,#f7f2e9);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:52px 0;position:relative;overflow:hidden;}
[data-theme="dark"] .alfaaz-section,[data-theme="mekkah"] .alfaaz-section{background:var(--card);}
.alfaaz-hero-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g4));border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px;animation:float 3s ease-in-out infinite;box-shadow:0 8px 32px rgba(201,148,58,0.25);}
.alfaaz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:28px 0;}
.alfaaz-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;text-align:right;direction:rtl;transition:all var(--trans);position:relative;overflow:hidden;}
.alfaaz-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:linear-gradient(to bottom,var(--gold),var(--g4));}
.alfaaz-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.alfaaz-card:hover::before{width:6px;}
.alfaaz-qism{display:inline-block;font-size:11px;padding:3px 12px;border-radius:var(--r-pill);margin-bottom:8px;font-family:var(--font-body);background:rgba(20,90,60,0.1);color:var(--g3);border:1px solid rgba(20,90,60,0.2);}
[data-theme="dark"] .alfaaz-qism,[data-theme="mekkah"] .alfaaz-qism{background:rgba(20,90,60,0.25);color:#5DCAA5;}
.alfaaz-lafz{font-family:var(--font-title);font-size:22px;color:var(--g2);margin-bottom:8px;line-height:1.5;}
[data-theme="dark"] .alfaaz-lafz,[data-theme="mekkah"] .alfaaz-lafz{color:var(--gold2);}
.alfaaz-matlab{font-family:var(--font-body);font-size:13px;color:var(--text2);line-height:2;border-right:3px solid var(--gold);padding-right:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.alfaaz-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--g2),var(--g3));border:none;border-radius:var(--r-pill);padding:12px 32px;color:#fff;font-family:var(--font-title);font-size:16px;text-decoration:none;transition:opacity var(--trans);box-shadow:0 6px 24px rgba(29,90,60,0.3);}
.alfaaz-cta:hover{opacity:0.88;}
.alfaaz-popular-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;}
.alfaaz-pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--border);border-radius:100px;padding:7px 18px;color:var(--g2);font-family:var(--font-title);font-size:15px;text-decoration:none;transition:all 0.2s;direction:rtl;}
[data-theme="dark"] .alfaaz-pill,[data-theme="mekkah"] .alfaaz-pill{color:var(--gold2);}
.alfaaz-pill:hover{border-color:var(--gold);background:rgba(201,148,58,0.1);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.alfaaz-pill-roman{font-size:10px;color:var(--text3);font-family:'Segoe UI',sans-serif;font-style:italic;}

/* ═══════════════════════════════════════════════
   FATWA PAGE — FULL LAYOUT
   (fatwa.php se move kiya)
═══════════════════════════════════════════════ */
.ff-full{background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--border);overflow:hidden;margin-bottom:40px;}
.ff-head{background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 60%,var(--g3) 100%);padding:36px 40px;position:relative;overflow:hidden;}
.ff-head::before{content:'';position:absolute;top:-40px;left:-40px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(201,148,58,0.12);}
.ff-cat{display:inline-block;background:rgba(201,148,58,0.2);border:1px solid rgba(201,148,58,0.5);color:var(--gold2);padding:4px 18px;border-radius:100px;font-size:13px;margin-bottom:16px;}
.ff-title{font-family:var(--font-title);font-size:clamp(20px,3vw,30px);color:#fff;line-height:1.55;position:relative;z-index:1;}
.ff-meta{background:var(--bg2);padding:14px 40px;display:flex;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2);align-items:center;}
.ff-reading-badge{background:rgba(29,122,82,0.12);border:1px solid rgba(29,122,82,0.25);color:var(--g3);padding:3px 12px;border-radius:100px;font-size:12px;display:inline-flex;align-items:center;gap:4px;}
[data-theme="dark"] .ff-reading-badge{color:#6dbf8b;}
.ff-body{padding:36px 40px;}
.ff-sec-label{display:flex;align-items:center;gap:12px;font-family:var(--font-title);font-size:20px;color:var(--g3);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--gold);}
[data-theme="dark"] .ff-sec-label{color:var(--gold2);}
.ff-sec-icon{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.ff-actions{display:flex;gap:12px;flex-wrap:wrap;padding:22px 40px;background:var(--bg2);border-top:1px solid var(--border);}
.btn-card{background:linear-gradient(135deg,#1a5c8a,#2980b9);color:#fff;}
.btn-card:hover{opacity:0.88;transform:translateY(-1px);}

/* ═══════════════════════════════════════════════
   FATWA PAGE — ACCORDION BOXES
   (fatwa.php se move kiya)
═══════════════════════════════════════════════ */
.acc-box{border-radius:14px;overflow:hidden;margin-bottom:20px;}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;cursor:pointer;user-select:none;transition:opacity 0.2s;}
.acc-head:hover{opacity:0.9;}
.acc-arrow{font-size:13px;transition:transform 0.3s;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.1);}
.acc-arrow.open{transform:rotate(0deg);}
.acc-arrow:not(.open){transform:rotate(-90deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height 0.45s ease;}
.acc-body.open{max-height:2000px;}

/* ═══════════════════════════════════════════════
   FATWA PAGE — RESEARCH, NOTE, REF BOXES
   (fatwa.php se move kiya)
═══════════════════════════════════════════════ */
.research-box{border:1.5px solid rgba(29,122,82,0.4);border-radius:14px;overflow:hidden;margin-bottom:20px;background:#f0faf5;}
[data-theme="dark"] .research-box{background:rgba(20,90,60,0.08);}
.research-head{background:linear-gradient(135deg,#1a5c3a,#1d7a52);padding:13px 22px;display:flex;align-items:center;justify-content:space-between;}
.research-head h4{font-family:var(--font-title);font-size:16px;color:#fff;margin:0;}
.research-badge{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:2px 12px;border-radius:100px;font-size:11px;font-family:Georgia,serif;letter-spacing:0.5px;}
.research-cell{padding:14px 20px;border-left:1px solid rgba(29,122,82,0.15);border-bottom:1px solid rgba(29,122,82,0.12);}
.research-cell-label{font-size:10px;letter-spacing:1.5px;color:var(--text3);font-family:Georgia,serif;text-transform:uppercase;display:block;margin-bottom:5px;}
.research-cell-val{font-family:var(--font-title);font-size:15px;color:#1a5c3a;display:block;}
[data-theme="dark"] .research-cell-val{color:#4cca80;}
.note-box{border:1.5px solid rgba(100,70,180,0.35);border-radius:14px;overflow:hidden;margin-bottom:20px;background:#f5f2ff;}
[data-theme="dark"] .note-box{background:rgba(80,60,150,0.08);}
.note-head{background:linear-gradient(135deg,#4a3090,#6040b0);padding:13px 22px;display:flex;align-items:center;justify-content:space-between;}
.note-head h4{font-family:var(--font-title);font-size:16px;color:#fff;margin:0;}
.note-badge{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:2px 12px;border-radius:100px;font-size:11px;font-family:Georgia,serif;letter-spacing:0.5px;}
.note-body{padding:20px 24px;font-family:var(--font-body);font-size:16px;line-height:2.1;color:var(--text);border-right:4px solid rgba(100,70,180,0.5);margin:16px 20px;border-radius:0 8px 8px 0;background:rgba(100,70,180,0.06);}
[data-theme="dark"] .note-body{background:rgba(100,70,180,0.1);}
.ref-box{background:linear-gradient(135deg,rgba(13,51,38,0.06),rgba(201,148,58,0.04));border:1.5px solid rgba(201,148,58,0.3);border-radius:14px;overflow:hidden;margin-bottom:28px;}
.ref-box-head{background:linear-gradient(135deg,var(--g2),var(--g3));padding:13px 22px;display:flex;align-items:center;gap:10px;}
.ref-box-head h4{font-family:var(--font-title);font-size:16px;color:var(--gold2);margin:0;flex:1;}
.ref-badge{background:rgba(201,148,58,0.2);border:1px solid rgba(201,148,58,0.4);color:var(--gold2);padding:2px 12px;border-radius:100px;font-size:11px;font-family:Georgia,serif;letter-spacing:0.5px;}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.ref-item{padding:14px 20px;border-left:1px solid rgba(201,148,58,0.12);border-bottom:1px solid rgba(201,148,58,0.08);}
.ref-item:last-child{border-bottom:none;}
.ref-item-label{font-size:10px;letter-spacing:1.5px;color:var(--text3);font-family:Georgia,serif;text-transform:uppercase;display:block;margin-bottom:5px;}
.ref-item-val{font-family:var(--font-title);font-size:15px;color:var(--text);display:block;line-height:1.6;}
[data-theme="dark"] .ref-item-val{color:var(--gold2);}
.ref-item-num{font-family:Georgia,serif;font-size:13px;color:var(--text3);display:block;margin-top:2px;}

/* ═══════════════════════════════════════════════
   FATWA PAGE — KHULASA, TAGS, LANG, FOOTNOTE
   (fatwa.php se move kiya)
═══════════════════════════════════════════════ */
.sf-khulasa-section{margin-top:1.5rem;padding:1.25rem 1.5rem;background:#f0faf5;border-radius:12px;border:1px solid #9FE1CB;direction:rtl;}
[data-theme="dark"] .sf-khulasa-section{background:rgba(20,90,60,0.1);border-color:rgba(93,202,165,0.3);}
.sf-khulasa-label{font-size:13px;font-weight:500;color:#085041;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
[data-theme="dark"] .sf-khulasa-label{color:#5DCAA5;}
.sf-khulasa-badge{background:#1D9E75;color:#fff;border-radius:4px;padding:2px 8px;font-size:11px;}
.sf-khulasa-text{font-family:var(--font-body);font-size:15px;color:var(--text);line-height:2;}
.sf-tags-block{margin-bottom:20px;padding:16px 20px;background:rgba(29,122,82,0.06);border:1.5px solid rgba(29,122,82,0.25);border-radius:12px;}
.sf-tags-label{font-size:10px;letter-spacing:2px;color:var(--text3);font-family:Georgia,serif;text-transform:uppercase;margin-bottom:10px;}
.sf-tags-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.sf-tag-pill{background:rgba(29,122,82,0.12);border:1px solid rgba(29,122,82,0.3);color:var(--g3);padding:5px 16px;border-radius:100px;font-family:var(--font-body);font-size:13px;text-decoration:none;transition:all 0.2s;display:inline-block;}
.sf-tag-pill:hover{background:rgba(29,122,82,0.25);}
[data-theme="dark"] .sf-tag-pill{color:#6dbf8b;}
.sf-lang-switcher{padding:16px 40px;background:var(--bg2);border-bottom:1px solid var(--border);}
.sf-lang-label{font-size:10px;letter-spacing:2px;color:var(--text3);font-family:Georgia,serif;text-transform:uppercase;margin-bottom:10px;}
.sf-lang-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.sf-lang-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:100px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);text-decoration:none;font-family:Georgia,serif;font-size:13px;transition:all 0.2s;}
.sf-lang-btn:hover:not(.unavailable){border-color:var(--g3);color:var(--g3);}
.sf-lang-btn.active{background:linear-gradient(135deg,var(--g3),var(--g4));color:#fff;border-color:var(--g3);}
.sf-lang-btn.unavailable{opacity:0.4;cursor:default;}
.sf-lang-dot{font-size:10px;padding:1px 6px;border-radius:100px;font-family:Georgia,serif;}
.sf-lang-dot.v{background:rgba(29,122,82,0.2);color:var(--g3);}
.sf-trans-banner{padding:10px 40px;background:rgba(201,148,58,0.07);border-bottom:1px solid rgba(201,148,58,0.18);display:flex;align-items:center;gap:10px;}
.sf-trans-flag{font-size:20px;}
.sf-trans-lang-name{font-family:Georgia,serif;font-size:13px;font-weight:bold;color:var(--text);}
.sf-trans-note{font-family:Georgia,serif;font-size:11px;color:var(--text3);}
.urdu-block.trans-en,.urdu-block.trans-roman-ur{direction:ltr;text-align:left;line-height:1.85;border-right:none;border-left:4px solid var(--gold);border-radius:8px 0 0 8px;font-size:16px;}
.urdu-block.trans-hi{direction:ltr;text-align:left;line-height:1.95;border-right:none;border-left:4px solid var(--gold);border-radius:8px 0 0 8px;font-size:17px;}
.urdu-block.trans-ar{direction:rtl;text-align:right;line-height:2.2;font-size:19px;}
.ff-title[dir="ltr"]{font-family:'Georgia','Times New Roman',Times,serif;text-align:left;}
.ff-title[lang="hi"]{font-family:'Noto Serif Devanagari','Aparajita','Kokila',sans-serif;}
.sf-footnote-item{position:relative;scroll-margin-top:90px;transition:background 0.6s ease;margin-top:22px!important;padding-top:18px!important;border-top:1.5px solid rgba(201,148,58,0.4);font-size:15px;color:var(--text2);}
.sf-footnote-item:target{background:rgba(201,148,58,0.18);border-radius:6px;padding:18px 8px 6px!important;}
[id^="fnref"]{scroll-margin-top:90px;}
/* Dark mode footnote fix */
[data-theme="dark"] .sf-footnote-item {
  color: var(--text) !important;
}
[data-theme="dark"] .sf-footnote-item a {
  color: var(--gold2) !important;
}

/* ═══════════════════════════════════════════════
   FATWA PAGE — MOBILE RESPONSIVE
   (fatwa.php se move kiya)
═══════════════════════════════════════════════ */
@media(max-width:600px){
  .ff-head,.ff-body,.ff-actions,.ff-meta,.sf-lang-switcher,.sf-trans-banner{padding-right:20px;padding-left:20px;}
  .ref-grid{grid-template-columns:1fr 1fr;}
  .sf-lang-label{font-size:9px;letter-spacing:1px;margin-bottom:8px;}
  .sf-lang-buttons{gap:6px;}
  .sf-lang-btn{padding:3px 8px;font-size:10px;gap:2px;border-radius:18px;}
  .sf-lang-btn span:first-child{font-size:0;width:0;overflow:hidden;}
  .sf-lang-dot{font-size:8px;padding:0 3px;}
  .ff-actions{gap:8px;padding:14px 20px;}
  .btn-lg{padding:9px 14px;font-size:13px;gap:5px;}
}
@media(max-width:480px){
  .sf-lang-btn{padding:2px 6px;font-size:9px;border-radius:16px;}
  .sf-lang-buttons{gap:4px;}
}

/* ═══════════════════════════════════════════════
   FATWA PAGE — SAAIL METADATA BLOCK
═══════════════════════════════════════════════ */
.sf-saail-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 16px;
  background: rgba(201,148,58,0.06);
  border: 1px solid rgba(201,148,58,0.22);
  border-radius: 8px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text2);
  line-height: 1.8;
}
.sf-saail-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sf-saail-key {
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--accent, #1a6b3c);   /* green badge */
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.sf-saail-val {
  color: var(--text);
  font-size: 14px;
}
.sf-saail-sep {
  color: var(--border2);
  font-size: 16px;
  line-height: 1;
}
[data-theme="dark"] .sf-saail-key {
  background: var(--accent2, #c9943a);   /* dark me gold */
  color: #1a1a1a;
}


/* ═══════════════════════════════════════════
   SIGNATURE STRIP — jawab block ke andar
═══════════════════════════════════════════ */
.sf-sig-strip {
  margin-top: 24px;
  border-top: 1px solid rgba(201,148,58,0.3);
  padding-top: 16px;
  font-family: var(--font-body);
}
.sf-sig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;  /* ← yeh badla */
}
.sf-sig-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,148,58,0.06);
  border: 1px solid rgba(201,148,58,0.2);
  border-radius: 8px;
  padding: 7px 14px;
  min-width: fit-content;
}
.sf-sig-badge {
  font-size: 11px;
  font-family: var(--font-body);
  padding: 3px 11px;
  border-radius: 100px;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.sf-sig-badge.musaddiq {
  background: #1a4a2e;
  color: #fff;
}
.sf-sig-badge.katib {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border2);
  padding: 3px 11px;
}
.sf-sig-badge.tarikh {
  background: transparent;
  color: var(--text3);
  border: 1.5px solid var(--border2);
  padding: 3px 11px;
  font-size: 11px;
}
.sf-sig-naam {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.sf-sig-katib-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-sig-maqam {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.4;
}
[data-theme="dark"] .sf-sig-card {
  background: rgba(201,148,58,0.1);
  border-color: rgba(201,148,58,0.25);
}
[data-theme="dark"] .sf-sig-badge.musaddiq {
  background: #2d6a4f;
}
/* ═══════════════════════════════════════════════
   INDEX — EXTRA MOBILE RESPONSIVE
   (index.php se move kiya)
═══════════════════════════════════════════════ */
@media(max-width:600px){
  .mufti-grid{grid-template-columns:repeat(2,1fr);}
  .kitab-grid{grid-template-columns:1fr;}
  .alfaaz-grid{grid-template-columns:1fr 1fr;}
  .mission-dot{display:none;}
  .fcard-actions{flex-wrap:wrap;}
  .mauzu-grid-cards{grid-template-columns:repeat(3,1fr);}
  .ctb-micro-stats{gap:10px;}
  .ctb-micro-stat{padding:10px 14px;min-width:70px;}
  .search-ai-btn{padding:6px 10px;font-size:12px;}
  .lang-strip{padding:12px 14px;gap:7px;}
  .lang-pill{padding:5px 12px;font-size:12px;}
  .lang-strip-label{width:100%;justify-content:center;}
}
@media(max-width:400px){
  .alfaaz-grid{grid-template-columns:1fr;}
  .mauzu-grid-cards{grid-template-columns:repeat(2,1fr);}
}