/* Pintu Kabah Quran - Unified 5-color theme */
:root {
  --bg-light: #F8F9FA;
  --deep-navy: #003354;
  --gray-200: #E5E7EB;
  --teal-green: #148F87;
  --warm-yellow: #FFB606;
}

html, body { background: var(--bg-light) !important; }

/* Global navigation */
.bg-gold,
.navbar,
.navbar-toggler { background: var(--deep-navy) !important; }
.fixed-top { box-shadow: 0 2px 10px rgba(0,51,84,.18) !important; border-bottom: 4px solid var(--warm-yellow) !important; }
.nav-link, .navbar-brand, .navbar-brand-p, .navbar-brand-ayat { color: var(--bg-light) !important; }
a.about-link, a.surah-nav-links { color: var(--teal-green) !important; }

/* Remove the old orange/red header artwork on the Surah page */
.to-surah, .to-ayat { background: var(--deep-navy) !important; }
.to-surah img, .to-ayat img { display: none !important; }

/* JUZ / Surah selector dropdown */
.dropdown-menu,
#surah-list,
.dropdown-menu.ayah-selector,
.ayah-selector {
  background: #ffffff !important;
  border: 1px solid var(--gray-200, #E5E7EB) !important;
  box-shadow: 0 12px 32px rgba(0, 51, 84, 0.22) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 8px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  z-index: 999999 !important;
}

.dropdown-menu.show,
#surah-list.show,
.ayah-selector.show {
  display: block !important;
}

.d-i,
.dropdown-item,
.dropdown-menu a,
#surah-list a,
.ayah-selector .d-i {
  display: block !important;
  color: var(--deep-navy, #003354) !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--gray-200, #E5E7EB) !important;
  border-radius: 9px !important;
  margin: 4px 0 !important;
  padding: 11px 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: .18s ease !important;
}

.d-i p,
.dropdown-menu a p,
#surah-list a p {
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: var(--deep-navy, #003354) !important;
  opacity: .75 !important;
  font-weight: 500 !important;
}

.d-i:hover,
.d-i:focus,
.dropdown-menu a:hover,
#surah-list a:hover,
.ayah-selector .d-i:hover,
.ayah-selector .d-i:focus {
  color: var(--deep-navy, #003354) !important;
  background: rgba(20,143,135,.12) !important;
  border-color: var(--teal-green, #148F87) !important;
}

.d-i:hover p,
.dropdown-menu a:hover p,
#surah-list a:hover p {
  color: var(--teal-green, #148F87) !important;
  opacity: 1 !important;
}

/* ACTIVE HIGHLIGHTED SURAH ITEM -> BIRU NAVY (#003354) WITH WHITE TEXT */
.d-i-highlight,
.d-i.active,
.dropdown-item.active,
.dropdown-menu a.d-i-highlight,
#surah-list a.d-i-highlight,
.ayah-selector .d-i-highlight,
a.d-i.d-i-highlight {
  color: #FFFFFF !important;
  background: var(--deep-navy, #003354) !important; /* BIRU NAVY */
  border-color: var(--deep-navy, #003354) !important;
  box-shadow: 0 4px 14px rgba(0, 51, 84, 0.3) !important;
}

.d-i-highlight p,
.d-i.active p,
.dropdown-menu a.d-i-highlight p,
#surah-list a.d-i-highlight p,
.ayah-selector .d-i-highlight p,
a.d-i.d-i-highlight p {
  color: #E2E8F0 !important; /* SOFT WHITE SUBTITLE */
  opacity: 1 !important;
}

.dropdown-menu::-webkit-scrollbar-thumb,
.list-group::-webkit-scrollbar-thumb { background: var(--teal-green) !important; }
.dropdown-menu::-webkit-scrollbar { background: var(--gray-200) !important; }

/* Surah cards */
body.body { background: var(--bg-light) !important; }
.colom-surah {
  background: #FFFFFF !important;
  color: var(--deep-navy) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 3px 12px rgba(0,51,84,.08) !important;
}
.colom-surah:hover {
  background: rgba(20,143,135,.08) !important;
  border-color: var(--teal-green) !important;
}
.colom-surah p { color: var(--deep-navy) !important; opacity: .72; }
.arab { color: var(--deep-navy) !important; }

/* Search */
.form { background: var(--teal-green) !important; }
.input[type="search"] { border: 1px solid var(--gray-200) !important; }
.button { background: var(--deep-navy) !important; color: var(--bg-light) !important; }

/* Quran ayah accents */
.a-n, .ayah-number, .a-n-m, .ayah-number-mobile { color: var(--teal-green) !important; }
.AR-hover, .AR:hover, .w-a-hover, .wa-hover, .wa:hover, w-a:hover { color: var(--teal-green) !important; }
.AR-hover, .w-a-hover, .wa-hover { border-bottom-color: var(--teal-green) !important; }
.a:hover, .ayah-hover, .ayah:hover, .f-t-hover, .f-t:hover, .full-translation:hover { background: rgba(20,143,135,.08) !important; }
.f-t-l { color: var(--deep-navy) !important; }

/* Ayah separator */
.garis { border-bottom-color: var(--gray-200) !important; }

/* Quran reader controls */
.tab-label { background: var(--teal-green) !important; }
.tab-label:hover, .input:checked + .tab-label { background: var(--deep-navy) !important; }
.tab-close { background: var(--deep-navy) !important; }
.tab-close:hover { background: var(--teal-green) !important; }
.btn-gold, .btn-nav { background: var(--teal-green) !important; border-color: var(--teal-green) !important; color: var(--bg-light) !important; }
.btn-gold:hover, .btn:hover { color: var(--deep-navy) !important; border-color: var(--teal-green) !important; }

/* Modals / Penanda / Murajaah style */
.modal-content {
  background: var(--bg-light) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 12px 35px rgba(0,51,84,.18) !important;
}
.modal-header, .modal-footer { border-color: var(--gray-200) !important; }
.modal-header { background: var(--deep-navy) !important; color: var(--bg-light) !important; }
.modal-header .modal-title, .modal-header .close { color: var(--bg-light) !important; }
.modal-footer .btn, .modal-content .btn-secondary { background: var(--deep-navy) !important; border-color: var(--deep-navy) !important; color: var(--bg-light) !important; }
.modal-footer .btn:hover, .modal-content .btn-secondary:hover { background: var(--teal-green) !important; border-color: var(--teal-green) !important; }

/* Reader audio panel */
#PlayAud .modal-content { border-top: 4px solid var(--teal-green) !important; }
#PlayAud .modal-footer .btn { background: var(--deep-navy) !important; }
#PlayAud .modal-footer .btn:hover { background: var(--teal-green) !important; }
.social li:hover { background: var(--teal-green) !important; color: var(--bg-light) !important; }
.setclose { background: var(--deep-navy) !important; }
.d-i p { color: var(--deep-navy) !important; }

/* Bottom navigation */
.bottom-nav { background: var(--bg-light) !important; border-top: 1px solid var(--gray-200) !important; box-shadow: 0 -2px 12px rgba(0,51,84,.12) !important; }
.bottom-nav__item { color: var(--deep-navy) !important; }

/* Voice and misc controls */
#micvoice { border-color: var(--teal-green) !important; background: transparent !important; }

/* Old inline theme colors that occur in the reader */
[style*="#992121"], [style*="#9d0000"], [style*="#900"], [style*="#ed3020"] { background-color: var(--deep-navy) !important; border-color: var(--deep-navy) !important; }