/* ========================================
   Al-Quran — Explore Page Styles
   ======================================== */

/* ── LAYOUT ── */
.explore-layout {
  display:flex; height:calc(100vh - 64px);
  margin-top:64px; position:relative; z-index:1;
}

/* ── SIDEBAR ── */
.sidebar {
  width:300px; min-width:300px;
  background:var(--bg2); border-right:1px solid var(--border2);
  display:flex; flex-direction:column;
  overflow:hidden; flex-shrink:0;
}

.sidebar-tabs {
  display:flex; border-bottom:1px solid var(--border2); flex-shrink:0;
}

.s-tab {
  flex:1; padding:0.85rem 0.5rem;
  background:transparent; border:none;
  color:var(--text3); font-family:'DM Sans',sans-serif;
  font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; cursor:pointer; transition:all 0.2s;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.s-tab:hover { color:var(--text2); }
.s-tab.active { color:var(--gold2); border-bottom-color:var(--gold); }

.sidebar-search-row {
  padding:0.85rem; flex-shrink:0;
  border-bottom:1px solid var(--border2);
}

.sidebar-search {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid var(--border2); border-radius:8px;
  padding:0.55rem 0.85rem; color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:0.82rem;
  outline:none; transition:border-color 0.2s;
}
.sidebar-search:focus { border-color:rgba(201,148,58,0.35); }
.sidebar-search::placeholder { color:var(--text3); }

.tab-panel { display:none; flex:1; overflow-y:auto; }
.tab-panel.active { display:block; }

.sidebar-list { padding:0.5rem; }

.sidebar-item {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.7rem 0.85rem; border-radius:10px; cursor:pointer;
  transition:background 0.15s; margin-bottom:2px;
}
.sidebar-item:hover { background:rgba(255,255,255,0.05); }
.sidebar-item.active { background:rgba(201,148,58,0.1); }

.s-item-num {
  min-width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.05); display:flex;
  align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:700; color:var(--text3); flex-shrink:0;
}
.sidebar-item.active .s-item-num { background:rgba(201,148,58,0.15); color:var(--gold); }

.s-item-info { overflow:hidden; flex:1; }

.s-item-arabic {
  font-family:'Amiri',serif; font-size:1rem; color:var(--text);
  direction:rtl; text-align:right; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; display:block; line-height:1.4;
}

.s-item-en {
  font-size:0.68rem; color:var(--text3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; display:block;
}
.sidebar-item.active .s-item-en { color:var(--text2); }

/* Juz items */
.juz-item {
  display:flex; align-items:center; gap:0.85rem;
  padding:0.85rem 1rem; border-bottom:1px solid rgba(255,255,255,0.03);
  cursor:pointer; transition:background 0.15s;
}
.juz-item:hover { background:rgba(255,255,255,0.04); }
.juz-item.active { background:rgba(201,148,58,0.08); }

.juz-num {
  width:38px; height:38px; border-radius:50%;
  background:rgba(201,148,58,0.08); border:1px solid rgba(201,148,58,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:0.78rem; font-weight:700; color:var(--gold); flex-shrink:0;
}
.juz-item.active .juz-num { background:var(--gold); color:#000; }

.juz-label { font-size:0.82rem; color:var(--text2); font-weight:500; }
.juz-item.active .juz-label { color:var(--text); }
.juz-arabic { font-family:'Amiri',serif; font-size:1rem; color:var(--text3); direction:rtl; }

/* Bookmark list items */
.bm-list-item {
  padding:0.85rem; border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 0.15s;
}
.bm-list-item:hover { background:rgba(255,255,255,0.03); }
.bm-list-arabic { font-family:'Amiri',serif; font-size:1rem; direction:rtl; text-align:right; color:var(--text); margin-bottom:0.3rem; line-height:1.8; }
.bm-list-ref { font-size:0.7rem; color:var(--gold); font-weight:600; }

.bm-empty {
  padding:3rem 1.5rem; text-align:center;
  color:var(--text3); font-size:0.85rem; line-height:1.8;
}
.bm-empty-icon { font-size:2rem; margin-bottom:0.75rem; display:block; opacity:0.5; }

/* ── VIEWER ── */
.viewer {
  flex:1; overflow-y:auto; padding:2rem;
}
.viewer > * + * { margin-top:1rem; }

/* Welcome state */
.viewer-welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:3rem 2rem; gap:1rem;
}
.welcome-arabic {
  font-family:'Amiri',serif; font-size:3rem;
  color:var(--text); direction:rtl; margin-bottom:0.5rem;
  line-height:1.6;
}
.welcome-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem; font-weight:300; color:var(--text2);
  margin-bottom:1.5rem; letter-spacing:0.05em;
}
.welcome-features { display:grid; gap:0.5rem; text-align:left; margin-top:0.5rem; }
.welcome-feature {
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.82rem; color:var(--text3); font-weight:300;
}
.welcome-feature::before { content:'✦'; color:var(--gold); font-size:0.55rem; flex-shrink:0; }

/* Viewer header */
.viewer-header {
  background:rgba(255,255,255,0.025); border:1px solid var(--border2);
  border-radius:12px; padding:1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:0.75rem; flex-shrink:0;
}

.vh-title { font-family:'Amiri',serif; font-size:1.4rem; color:var(--text); direction:rtl; }
.vh-subtitle { font-size:0.75rem; color:var(--text3); margin-top:0.2rem; }
.vh-meta { display:flex; gap:0.5rem; align-items:center; }
.vh-badge {
  font-size:0.65rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold2);
  background:rgba(201,148,58,0.1); border:1px solid rgba(201,148,58,0.2);
  padding:0.25rem 0.6rem; border-radius:50px;
}

/* Load more */
.load-more-btn {
  width:100%; padding:0.9rem;
  background:rgba(255,255,255,0.03); border:1px dashed var(--border2);
  border-radius:12px; color:var(--text3);
  font-family:'DM Sans',sans-serif; font-size:0.82rem;
  cursor:pointer; transition:all 0.2s; text-align:center;
}
.load-more-btn:hover { border-color:rgba(201,148,58,0.3); color:var(--gold2); }

/* ── EXPLORE VERSE CARD (extended) ── */
/* override shared: remove overflow clip so Arabic text isn't cut */
.viewer .verse-card { overflow:visible; }

.verse-num-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(201,148,58,0.1); border:1px solid rgba(201,148,58,0.2);
  font-size:0.68rem; font-weight:700; color:var(--gold);
  flex-shrink:0;
}

/* Explicit Arabic + translation styles for explore page */
.viewer .verse-arabic-text {
  font-family:'Amiri',serif !important;
  font-size:1.9rem !important;
  line-height:2.1; color:var(--text);
  direction:rtl; text-align:right;
  margin:1rem 0;
  display:block;
  min-height:1em;
}

.viewer .verse-translation-text {
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic; font-weight:300;
  font-size:1.05rem !important;
  line-height:1.85; color:var(--text2);
  margin-bottom:1rem;
  display:block;
}

/* ── WORD BY WORD ── */
.word-row {
  display:flex; flex-direction:row-reverse; flex-wrap:wrap;
  gap:0.5rem; margin-bottom:1rem; direction:rtl;
  padding:1rem; background:rgba(201,148,58,0.04);
  border:1px solid rgba(201,148,58,0.1); border-radius:10px;
}

.word-box {
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:0.2rem;
  padding:0.5rem 0.6rem; border-radius:8px;
  cursor:pointer; transition:background 0.2s;
  border:1px solid transparent; min-width:56px;
}
.word-box:hover { background:rgba(201,148,58,0.1); border-color:rgba(201,148,58,0.2); }

.word-arabic {
  font-family:'Amiri',serif; font-size:1.3rem; color:var(--text);
  direction:rtl; text-align:center; line-height:1.6;
}
.word-translit { font-size:0.6rem; color:var(--gold); font-weight:500; text-align:center; direction:ltr; }
.word-meaning { font-size:0.6rem; color:var(--text3); text-align:center; direction:ltr; max-width:70px; }

.wbw-toggle {
  display:inline-flex; align-items:center; gap:0.35rem;
  background:transparent; border:1px solid var(--border2);
  color:var(--text3); padding:0.3rem 0.7rem; border-radius:50px;
  font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:500;
  cursor:pointer; transition:all 0.2s;
}
.wbw-toggle:hover, .wbw-toggle.active {
  border-color:rgba(201,148,58,0.3); color:var(--gold2);
  background:rgba(201,148,58,0.06);
}

/* ── TAFSIR PANEL ── */
.tafsir-panel {
  margin-top:0.75rem; overflow:hidden;
  max-height:0; transition:max-height 0.35s ease;
}
.tafsir-panel.open { max-height:600px; }

.tafsir-inner {
  border-top:1px solid var(--border2); padding-top:1rem;
}
.tafsir-label {
  font-size:0.65rem; font-weight:600; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem;
  display:flex; align-items:center; gap:0.5rem;
}
.tafsir-label::after { content:''; flex:1; height:1px; background:var(--border2); }

.tafsir-text {
  font-size:0.85rem; line-height:1.85; color:var(--text2);
  font-weight:300;
}
.tafsir-source {
  font-size:0.68rem; color:var(--text3);
  margin-top:0.75rem; font-style:italic;
}

/* ── SHARE CARD MODAL ── */
.share-modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px); z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.share-modal-bg.open { opacity:1; pointer-events:all; }

.share-modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:2rem; width:100%; max-width:520px;
  transform:scale(0.95); transition:transform 0.3s;
}
.share-modal-bg.open .share-modal { transform:scale(1); }


.share-actions { display:flex; gap:0.6rem; }
.share-actions .pill-btn { flex:1; justify-content:center; }

.share-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.share-modal-head h3 {
  font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400;
}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .explore-layout { flex-direction:column; height:auto; }
  .sidebar { width:100%; min-width:unset; height:auto; border-right:none; border-bottom:1px solid var(--border2); }
  .sidebar-tabs { justify-content:center; }
  .tab-panel { max-height:280px; }
  .viewer { padding:1rem; }
}

@media (max-width:640px) {
  .viewer-header { padding:1rem; }
  .share-modal { padding:1.25rem; }
}