/* ═══════════════════════════════════════════════════════════════
   READING MODE — Mushaf Style
   ═══════════════════════════════════════════════════════════════ */

/* Toggle button on surah detail page */
.reading-mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--gold-pale);
  color: var(--gold-deep);
  border: 1px solid var(--gold-main);
  border-radius: 20px;
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.reading-mode-toggle-btn:hover {
  background: var(--gold-main);
  border-color: var(--gold-main);
  color: #FFFFFF;
}

.reading-mode-page { min-height:100vh; background:var(--cream); display:flex; flex-direction:column; }
.reading-topbar { background:#FFFFFF; border-bottom:2px solid var(--border); position:sticky; top:64px; z-index:50; box-shadow: var(--shadow-sm); }
.reading-topbar-inner { max-width:860px; margin:0 auto; padding:0.6rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.reading-page-info { display:flex; align-items:baseline; gap:0.3rem; }
.reading-page-label { font-family:var(--font-urdu); font-size:0.8rem; color:var(--text-secondary); }
.reading-page-num { font-size:1.4rem; font-weight:700; color:var(--gold-main); font-family:var(--font-en); }
.reading-page-total { font-size:0.75rem; color:var(--text-muted); font-family:var(--font-en); }
.reading-para-info { display:flex; gap:0.4rem; flex-wrap:wrap; }
.reading-para-badge { font-family:var(--font-urdu); font-size:0.75rem; background:var(--gold-pale); color:var(--gold-deep); padding:2px 10px; border-radius:20px; border:1px solid var(--gold-main); }
.reading-controls { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.reading-font-ctrl { display:flex; gap:3px; }
.reading-font-ctrl button { width:30px; height:30px; background:var(--cream-dark); color:var(--text-primary); border:1px solid var(--border); border-radius:5px; cursor:pointer; font-size:0.78rem; transition:background 0.2s; }
.reading-font-ctrl button:hover { background:var(--border); }
.reading-goto-form { display:flex; gap:4px; }
.reading-goto-input { width:90px; padding:4px 8px; background:var(--cream-dark); border:1px solid var(--border); border-radius:5px; color:var(--text-primary); font-family:var(--font-en); font-size:0.82rem; text-align:center; }
.reading-goto-input::placeholder { color:var(--text-muted); }
.reading-goto-btn { padding:4px 10px; background:var(--gold-main); color:#FFFFFF; border:none; border-radius:5px; font-family:var(--font-urdu); font-size:0.8rem; cursor:pointer; font-weight:600; }
.reading-mode-link { font-family:var(--font-urdu); font-size:0.8rem; color:var(--text-secondary); text-decoration:none; padding:4px 8px; border-radius:5px; transition:background 0.2s; }
.reading-mode-link:hover { background:var(--cream-dark); color:var(--green-deep); }
.mushaf-page-container { flex:1; display:flex; justify-content:center; padding: 0.5rem 0.5rem 1.5rem; margin-bottom: 0; }
.mushaf-page { background:#FDFAF4; border:1px solid var(--border); border-radius:4px; box-shadow:0 2px 20px rgba(0,0,0,0.12),inset 0 0 0 6px rgba(201,168,76,0.08); max-width:720px; width:100%; padding:2.5rem 3rem; min-height:500px; font-family:var(--font-arabic); font-size:1.9rem; line-height:2.6; direction:rtl; text-align:justify; color:var(--text-primary); }
.mushaf-surah-header {
  display: block;
  width: 100%;
  margin: 1.2rem 0 0.5rem;
  direction: rtl;
}

/* Outer ornamental frame */
.mushaf-surah-frame {
  position: relative;
  border: 2px solid var(--gold-main);
  border-radius: 6px;
  background: linear-gradient(180deg, #F9F3E3 0%, #FDF8EE 50%, #F9F3E3 100%);
  padding: 0;
  overflow: hidden;
}

/* Top & bottom decorative lines */
.mushaf-surah-frame::before,
.mushaf-surah-frame::after {
  content: '';
  display: block;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold-main) 0px, var(--gold-main) 6px,
    transparent 6px, transparent 10px
  );
}

/* Inner row: right info — name — left info */
.mushaf-surah-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.2rem;
  border-top: 1px solid rgba(201,168,76,0.3);
  border-bottom: 1px solid rgba(201,168,76,0.3);
}

/* Right: revelation type (مکی/مدنی) */
.mushaf-surah-type {
  font-family: var(--font-arabic);
  font-size: 0.85rem;
  color: var(--green-mid);
  font-weight: 600;
  min-width: 70px;
  text-align: right;
  direction: rtl;
}

/* Center: surah name */
.mushaf-surah-name {
  font-family: var(--font-arabic);
  font-size: 1.5rem;
  color: var(--green-deep);
  text-align: center;
  flex: 1;
  letter-spacing: 0.02em;
  padding: 0 0.5rem;
  direction: rtl;
}

/* Left: ayah count */
.mushaf-surah-ayahs {
  font-family: var(--font-arabic);
  font-size: 0.85rem;
  color: var(--green-mid);
  font-weight: 600;
  min-width: 70px;
  text-align: left;
  direction: rtl;
}

.mushaf-surah-meta { display: none; } /* hide old meta */

/* Bismillah */
.mushaf-bismillah {
  font-family: var(--font-arabic);
  font-size: 1.45rem;
  color: var(--green-deep);
  display: block;
  text-align: center;
  padding: 0.5rem 1rem 0.6rem;
  direction: rtl;
  letter-spacing: 0.03em;
  background: transparent;
}

.mushaf-ayah { display:inline; cursor:pointer; transition:background 0.15s; border-radius:3px; padding:0 2px; }
.mushaf-ayah:hover { background:rgba(201,168,76,0.15); }
.mushaf-ayah.mushaf-ayah-highlighted {
  background: rgba(201, 168, 76, 0.35) !important;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.35);
  animation: mushafAyahGlow 3s ease-in-out;
}
@keyframes mushafAyahGlow {
  0% { background: rgba(201, 168, 76, 0.65); box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.65); }
  50% { background: rgba(201, 168, 76, 0.4); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.4); }
  100% { background: rgba(201, 168, 76, 0.25); box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25); }
}
.mushaf-ayah.mushaf-sajda { color:var(--green-mid); }
.mushaf-ayah-num { font-family:'Amiri',serif; font-size:0.7em; color:var(--gold-deep); display:inline; vertical-align:middle; padding:0 2px; }
.sajda-mark { font-size:0.65em; color:var(--green-mid); vertical-align:super; }
.mushaf-hizb-marker { display:inline-block; font-family:var(--font-arabic); font-size:0.65rem; color:var(--gold-deep); background:var(--gold-pale); border:1px solid var(--gold-main); border-radius:50%; width:24px; height:24px; line-height:22px; text-align:center; vertical-align:middle; margin:0 3px; }
.reading-nav { display: none !important; }
.reading-keyboard-hint { display: none !important; }
@media(max-width:640px){ .mushaf-page{padding:1.5rem 1.2rem;font-size:1.4rem !important;} .reading-goto-form{display:none;} }