/* =============================================
   NOOR-E-ISLAM — style.css
   Islamic Learning Website Styles
   ============================================= */

:root {
  --emerald: #1a5c3a;
  --emerald-dark: #0f3d26;
  --emerald-mid: #2d7a52;
  --gold: #c9a84c;
  --gold-light: #f0d080;
  --gold-pale: #fdf6e3;
  --cream: #faf8f2;
  --cream-dark: #f0ead8;
  --text-dark: #1a1a1a;
  --text-mid: #3d3d3d;
  --text-light: #7a7a7a;
  --white: #ffffff;
  --shadow: 0 4px 24px rgba(26,92,58,0.13);
  --shadow-lg: 0 12px 40px rgba(26,92,58,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Playfair Display', serif;
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* === BACKGROUND PATTERN === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201,168,76,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(26,92,58,0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.04'%3E%3Cpath d='M30 0l8.66 5v10L30 20l-8.66-5V5zM0 17.32l8.66-5 8.66 5v10L8.66 32.32 0 27.32zM60 17.32l-8.66-5-8.66 5v10l8.66 5 8.66-5zM30 40l8.66 5v10L30 60l-8.66-5V45z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* =============================================
   HEADER
   ============================================= */
header {
  background: linear-gradient(135deg, var(--emerald-dark) 0%, var(--emerald) 60%, var(--emerald-mid) 100%);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 480px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 10px rgba(201,168,76,0.4);
  flex-shrink: 0;
}

.logo-text h1 {
  font-size: 16px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.3px;
}

.logo-text p {
  font-size: 10px;
  color: var(--gold-light);
  font-family: 'Amiri', serif;
  letter-spacing: 0.5px;
}

.lang-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold-light);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  font-family: 'Playfair Display', serif;
  white-space: nowrap;
}

.lang-btn:hover { background: rgba(255,255,255,0.2); }

/* =============================================
   NAVIGATION TABS
   ============================================= */
nav {
  background: var(--emerald-dark);
  border-top: 1px solid rgba(201,168,76,0.2);
}

.nav-inner {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
}

.nav-tab {
  flex: 1;
  padding: 11px 6px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.25s;
  font-family: 'Amiri', serif;
  letter-spacing: 0.3px;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nav-tab .tab-icon { font-size: 16px; }

.nav-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
  background: rgba(201,168,76,0.08);
}

/* =============================================
   MAIN CONTENT & PAGES
   ============================================= */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 100px;
  position: relative;
  z-index: 1;
}

.page { display: none; animation: fadeSlide 0.4s ease; }
.page.active { display: block; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   PAGE HERO
   ============================================= */
.page-hero {
  text-align: center;
  margin-bottom: 24px;
  padding-top: 4px;
}

.page-hero h2 {
  font-size: 26px;
  font-weight: 900;
  color: var(--emerald-dark);
  line-height: 1.2;
}

.page-hero p {
  font-size: 13px;
  color: var(--text-light);
  font-family: 'Amiri', serif;
  margin-top: 4px;
}

/* =============================================
   BISMILLAH BANNER
   ============================================= */
.bismillah-banner {
  background: linear-gradient(135deg, var(--emerald-dark), var(--emerald));
  color: var(--gold-light);
  text-align: center;
  padding: 16px 20px;
  border-radius: 16px;
  font-family: 'Amiri', serif;
  font-size: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  letter-spacing: 1px;
  direction: rtl;
}

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  border: 1px solid rgba(201,168,76,0.15);
  transition: box-shadow 0.2s;
}

.card:hover { box-shadow: var(--shadow-lg); }

.card-header {
  background: linear-gradient(135deg, var(--emerald-dark), var(--emerald-mid));
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 13px;
  font-family: 'Amiri', serif;
  font-weight: 700;
}

.card-header-left .icon { font-size: 16px; }

.card-badge {
  background: rgba(201,168,76,0.25);
  border: 1px solid rgba(201,168,76,0.5);
  color: var(--gold-light);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 12px;
  font-family: 'Amiri', serif;
}

.card-body { padding: 20px; }

/* =============================================
   LANGUAGE TABS (per card)
   ============================================= */
.lang-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.lang-tab-btn {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--cream-dark);
  background: var(--cream);
  color: var(--text-mid);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Amiri', serif;
}

.lang-tab-btn.active {
  background: var(--emerald);
  color: var(--white);
  border-color: var(--emerald);
}

/* =============================================
   TEXT SECTIONS
   ============================================= */
.arabic-text {
  font-family: 'Amiri', serif;
  font-size: 26px;
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  color: var(--emerald-dark);
  margin-bottom: 14px;
  display: none;
  padding: 12px;
  background: rgba(26,92,58,0.04);
  border-radius: 10px;
  border-right: 3px solid var(--gold);
}

.roman-text {
  font-family: 'Amiri', serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-mid);
  font-style: italic;
  margin-bottom: 14px;
  display: none;
}

.hindi-text {
  font-family: 'Amiri', serif;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-mid);
  margin-bottom: 14px;
  display: none;
}

.english-text {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 14px;
  display: none;
}

.text-section.show { display: block; }

/* =============================================
   SOURCE TAG
   ============================================= */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  color: var(--emerald);
  font-family: 'Amiri', serif;
  margin-top: 6px;
}

/* =============================================
   SURAH HEADER
   ============================================= */
.surah-header {
  text-align: center;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--cream-dark);
  margin-bottom: 14px;
}

.surah-name-arabic {
  font-family: 'Amiri', serif;
  font-size: 28px;
  color: var(--emerald-dark);
  direction: rtl;
}

.surah-name-eng {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.surah-info {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}

.surah-info span {
  font-size: 10px;
  color: var(--text-light);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--cream-dark);
}

/* =============================================
   DAROOD PAGE
   ============================================= */
.darood-ornament {
  text-align: center;
  font-size: 28px;
  margin: 8px 0 16px;
  opacity: 0.7;
}

.virtue-box {
  background: linear-gradient(135deg, rgba(26,92,58,0.06), rgba(201,168,76,0.08));
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--emerald-dark);
  font-family: 'Amiri', serif;
  line-height: 1.7;
  text-align: center;
}

/* =============================================
   TASBIH COUNTER
   ============================================= */
.tasbih-display {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--emerald-dark), var(--emerald-mid));
  border-radius: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
}

.tasbih-count {
  font-size: 72px;
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
  font-family: 'Playfair Display', serif;
  transition: color 0.3s;
}

.tasbih-label {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  margin-top: 4px;
  font-family: 'Amiri', serif;
}

.tasbih-btn {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none;
  border-radius: 50%;
  font-size: 32px;
  cursor: pointer;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(201,168,76,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}

.tasbih-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 10px rgba(201,168,76,0.3);
}

.tasbih-reset {
  display: block;
  margin: 10px auto 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.6);
  padding: 6px 18px;
  border-radius: 16px;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Amiri', serif;
  transition: all 0.2s;
}

.tasbih-reset:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}

.footer-banner {
  background: var(--emerald-dark);
  border-top: 1px solid rgba(201,168,76,0.2);
  padding: 10px 20px;
  text-align: center;
  pointer-events: all;
}

.footer-text {
  font-family: 'Amiri', serif;
  color: var(--gold-light);
  font-size: 12px;
}

.footer-sub {
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  margin-top: 1px;
}

/* =============================================
   MISC HELPERS
   ============================================= */
.scroll-hint {
  text-align: center;
  color: var(--text-light);
  font-size: 11px;
  margin-top: 16px;
  font-family: 'Amiri', serif;
}

/* =============================================
   AUDIO PLAYER BOX
   ============================================= */
.audio-box {
  background: linear-gradient(135deg, var(--emerald-dark), var(--emerald-mid));
  border-radius: 14px; padding: 12px 14px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ap-btn { display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; flex:1; }
.ap-icon {
  width:38px; height:38px; background:linear-gradient(135deg,var(--gold),var(--gold-light));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--emerald-dark); font-weight:900; flex-shrink:0;
  box-shadow:0 2px 8px rgba(201,168,76,0.4); transition:transform 0.15s; padding-left:2px;
}
.ap-btn:hover .ap-icon { transform:scale(1.08); }
.ap-info { display:flex; flex-direction:column; gap:1px; }
.ap-title { font-size:12px; font-weight:700; color:var(--white); font-family:'Playfair Display',serif; }
.ap-reciter { font-size:10px; color:var(--gold-light); font-family:'Amiri',serif; }
.ap-bar { width:100%; height:3px; background:rgba(255,255,255,0.2); border-radius:3px; margin-top:8px; overflow:hidden; }
.ap-fill { height:100%; width:0%; background:var(--gold-light); border-radius:3px; transition:width 0.5s linear; }
.ap-time { font-size:10px; color:var(--gold-light); font-family:'Amiri',serif; flex-shrink:0; }
.audio-box.loading .ap-icon { animation:spin 1s linear infinite; }
.audio-box.playing .ap-icon { background:linear-gradient(135deg,#ff6b6b,#ffa07a); }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* =============================================
   FLOATING PLAYER
   ============================================= */
.floating-player {
  position:fixed; bottom:52px; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; z-index:200;
  background:linear-gradient(135deg,#0a2a18,var(--emerald-dark));
  border-top:1px solid rgba(201,168,76,0.3); border-radius:16px 16px 0 0;
  padding:10px 16px; display:none; align-items:center; gap:10px;
  box-shadow:0 -4px 20px rgba(0,0,0,0.4);
}
.floating-player.visible { display:flex; }
.fp-wave { display:flex; align-items:flex-end; gap:2px; height:22px; flex-shrink:0; }
.fp-wave span { display:block; width:3px; background:var(--gold-light); border-radius:2px; animation:wave 0.8s ease-in-out infinite alternate; }
.fp-wave span:nth-child(1){height:8px;animation-delay:0s}
.fp-wave span:nth-child(2){height:16px;animation-delay:0.1s}
.fp-wave span:nth-child(3){height:22px;animation-delay:0.2s}
.fp-wave span:nth-child(4){height:14px;animation-delay:0.3s}
.fp-wave span:nth-child(5){height:10px;animation-delay:0.4s}
@keyframes wave { from{transform:scaleY(0.4)} to{transform:scaleY(1)} }
.floating-player.paused .fp-wave span { animation-play-state:paused; }
.fp-text { flex:1; overflow:hidden; }
.fp-title { font-size:12px; color:var(--white); font-family:'Playfair Display',serif; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-sub { font-size:10px; color:var(--gold-light); font-family:'Amiri',serif; }
.fp-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.1); }
.fp-fill { height:100%; width:0%; background:var(--gold); transition:width 0.5s linear; }
.fp-btns { display:flex; gap:6px; flex-shrink:0; }
.fp-play,.fp-stop {
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(201,168,76,0.4);
  background:rgba(201,168,76,0.15); color:var(--gold-light); font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.fp-play:hover { background:rgba(201,168,76,0.3); }
.fp-stop { border-color:rgba(255,100,100,0.4); color:#ff9090; background:rgba(255,100,100,0.1); }
.fp-stop:hover { background:rgba(255,100,100,0.25); }

/* =============================================
   NAMAZ PAGE STYLES
   ============================================= */
.clock-card {
  background:linear-gradient(135deg,var(--emerald-dark),var(--emerald-mid));
  border-radius:20px; padding:20px; text-align:center; margin-bottom:14px;
  box-shadow:var(--shadow-lg);
}
.clock-date { font-size:11px; color:var(--gold-light); font-family:'Amiri',serif; margin-bottom:4px; }
.clock-time { font-size:42px; font-weight:900; color:var(--white); font-family:'Playfair Display',serif; line-height:1; letter-spacing:2px; }
.next-prayer-wrap { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.15); }
.next-label { font-size:10px; color:rgba(255,255,255,0.5); font-family:'Amiri',serif; }
.next-name { font-size:18px; color:var(--gold-light); font-family:'Playfair Display',serif; font-weight:700; margin-top:2px; }
.next-countdown { font-size:28px; color:var(--white); font-family:'Playfair Display',serif; font-weight:900; margin-top:4px; }

.namaz-controls {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white); border-radius:14px; padding:10px 14px; margin-bottom:14px;
  box-shadow:var(--shadow); border:1px solid rgba(201,168,76,0.15);
}
.location-info { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-mid); font-family:'Amiri',serif; flex:1; overflow:hidden; }
.location-info span:first-child { flex-shrink:0; }
#locationText { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-btn {
  background:linear-gradient(135deg,var(--emerald-dark),var(--emerald));
  color:var(--white); border:none; border-radius:20px; padding:7px 12px;
  font-size:11px; cursor:pointer; font-family:'Amiri',serif; white-space:nowrap; flex-shrink:0;
}
.notif-btn.active { background:linear-gradient(135deg,#2d6a2d,#3d8a3d); }

.azan-bar {
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border-radius:14px; padding:12px 14px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid rgba(201,168,76,0.2);
}
.azan-info { display:flex; align-items:center; gap:10px; }
.azan-title { font-size:12px; color:var(--gold-light); font-family:'Playfair Display',serif; font-weight:700; }
.azan-sub { font-size:10px; color:rgba(255,255,255,0.5); font-family:'Amiri',serif; }
.azan-play-btn {
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--emerald-dark); border:none; border-radius:20px; padding:8px 14px;
  font-size:11px; cursor:pointer; font-weight:700; font-family:'Playfair Display',serif; white-space:nowrap;
}

.prayer-loading { text-align:center; padding:30px 20px; color:var(--text-light); font-family:'Amiri',serif; font-size:13px; }
.prayer-spinner {
  width:32px; height:32px; border:3px solid var(--cream-dark); border-top-color:var(--emerald);
  border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 12px;
}

.prayer-time-card {
  background:var(--white); border-radius:16px; padding:14px 16px; margin-bottom:10px;
  display:flex; align-items:center; gap:12px; border:1px solid rgba(201,168,76,0.15);
  box-shadow:var(--shadow); transition:all 0.2s;
}
.prayer-time-card.active-prayer {
  background:linear-gradient(135deg,var(--emerald-dark),var(--emerald-mid));
  border-color:var(--gold);
}
.prayer-time-card.active-prayer .pt-name,
.prayer-time-card.active-prayer .pt-arabic,
.prayer-time-card.active-prayer .pt-time { color:var(--white) !important; }
.prayer-time-card.active-prayer .pt-badge { background:var(--gold); color:var(--emerald-dark); }

.pt-icon { font-size:24px; flex-shrink:0; }
.pt-info { flex:1; }
.pt-name { font-size:14px; font-weight:700; color:var(--emerald-dark); font-family:'Playfair Display',serif; }
.pt-arabic { font-size:12px; color:var(--text-light); font-family:'Amiri',serif; direction:rtl; display:inline; }
.pt-time { font-size:22px; font-weight:900; color:var(--emerald); font-family:'Playfair Display',serif; }
.pt-badge {
  font-size:9px; background:var(--cream); border:1px solid var(--cream-dark);
  color:var(--text-light); padding:2px 7px; border-radius:10px; font-family:'Amiri',serif;
  display:inline-block; margin-top:2px;
}

.namaz-section-title {
  font-size:14px; font-weight:700; color:var(--emerald-dark); font-family:'Playfair Display',serif;
  padding:14px 4px 10px; border-bottom:2px solid var(--gold); margin-bottom:14px;
}
.rakaat-info { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.rakaat-badge {
  font-size:10px; padding:3px 9px; border-radius:12px; font-family:'Amiri',serif;
  background:rgba(26,92,58,0.08); color:var(--emerald); border:1px solid rgba(26,92,58,0.2);
}
.rakaat-badge.green { background:rgba(26,92,58,0.15); color:var(--emerald-dark); border-color:var(--emerald); font-weight:700; }
.rakaat-badge.gold  { background:rgba(201,168,76,0.15); color:#8a6a10; border-color:var(--gold); }
.rakaat-badge.purple{ background:rgba(100,50,150,0.1); color:#6a2d8a; border-color:#9b59b6; }

.surah-list-namaz { margin-bottom:12px; }
.snm-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--cream-dark); align-items:flex-start; }
.snm-item:last-child { border-bottom:none; }
.snm-num { font-size:10px; color:var(--gold); font-family:'Amiri',serif; font-weight:700; flex-shrink:0; min-width:55px; padding-top:1px; }
.snm-text { font-size:12px; color:var(--text-mid); font-family:'Amiri',serif; }
.arabic-dua { font-family:'Amiri',serif; font-size:18px; color:var(--emerald-dark); direction:rtl; text-align:right; line-height:1.8; margin-bottom:6px; background:rgba(26,92,58,0.04); padding:10px; border-radius:8px; border-right:3px solid var(--gold); }
.dua-roman { font-family:'Amiri',serif; font-size:12px; color:var(--text-light); font-style:italic; margin-bottom:10px; }

main { padding-bottom: 130px !important; }