/* ======================================
   Imports / Fonts
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* ======================================
   Style
====================================== */
:root {
  /* Fonts */
  --font-quran: 'Amiri Quran', serif;
  --font-arabic: 'Tajawal', serif;
  --quran-font-size: 38px;
  --translation-font-size: 28px;

  /* Light Mode Colors */
  --bg-body: #f0f0f0;
  --bg-container: #ffffff;
  --border-color: #ddd;
  --primary-color: #395364;
  --primary-hover: #4e738a;
  --disabled-color: #cccccc;
  --playback-bg: #f5f5f5;
  --text-color: #000;
  --edition-label-color: #888;
  --verse-bg: #f9f9f9;
  --active-color: #4f9b91;
  --active-color-hover: #67c4b7;

  /* Bootstrap Overrides */
  --bs-primary: #395364;
  --bs-primary-rgb: 57, 83, 100;
  --bs-success: #4f9b91;
  --bs-success-rgb: 79, 155, 145;
  --bs-body-bg: #f0f0f0;
  --bs-body-color: #666;
  --bs-border-color: #ddd;
}

body {
  font-family: var(--font-arabic);
  font-size: 25px;
  font-weight: 500;
  background-color: var(--bg-body);
  color: var(--text-color);
  padding: 20px 0;
}

select,
option,
label,
button {
  font-family: var(--font-arabic);
  font-size: var(--font-size-base);
  direction: rtl;
  overflow-wrap: break-word;
  cursor: pointer;
}

/* Bootstrap Component Overrides - Light Mode */
.card {
  background-color: var(--bg-container);
  border-color: var(--border-color);
}

.form-select,
.form-control {
  border-color: var(--border-color);
}

.form-select:focus,
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(57, 83, 100, 0.25);
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: white;
}

.btn-primary:disabled {
  background-color: var(--disabled-color);
  border-color: var(--disabled-color);
  color: white;
}

.btn-primary.active {
  background-color: var(--active-color);
  border-color: var(--active-color);
  color: white;
}

.btn-primary.active:hover {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
}

.btn-success {
  background-color: var(--active-color);
  border-color: var(--active-color);
  color: white;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
  color: white;
}

.btn-success.active {
  background-color: var(--active-color);
  border-color: var(--active-color);
  color: white;
}

.btn-success.active:hover {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.card.bg-light {
  background-color: var(--playback-bg) !important;
}

.btn {
  font-size: 1.1rem !important;
  padding: 0.5rem 1rem !important;
}

.form-control,
.form-select {
  font-size: 1.1rem !important;
  padding: 0.5rem 0.75rem !important;
}

button:disabled,
select:disabled {
  background: var(--disabled-color);
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Dark Mode Variables */
[data-theme='dark'] {
  --bg-body: #1a1a1a;
  --bg-container: #2d2d2d;
  --border-color: #404040;
  --primary-color: #4e738a;
  --primary-hover: #6a94b3;
  --disabled-color: #555555;
  --playback-bg: #353535;
  --text-color: #e0e0e0;
  --edition-label-color: #b0b0b0;
  --verse-bg: #353535;
  --active-color: #67c4b7;
  --active-color-hover: #7dd4c6;

  /* Bootstrap Overrides Dark */
  --bs-primary: #4e738a;
  --bs-primary-rgb: 78, 115, 138;
  --bs-success: #67c4b7;
  --bs-success-rgb: 103, 196, 183;
  --bs-body-bg: #1a1a1a;
  --bs-body-color: #e0e0e0;
  --bs-border-color: #404040;
}

[data-theme='dark'] body {
  background-color: var(--bg-body);
  color: var(--text-color);
}

[data-theme='dark'] .card {
  background-color: var(--bg-container);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme='dark'] .form-select,
[data-theme='dark'] .form-control {
  background-color: var(--bg-container);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme='dark'] .form-select:focus,
[data-theme='dark'] .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(78, 115, 138, 0.25);
}

[data-theme='dark'] .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-primary:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

[data-theme='dark'] .btn-primary.active {
  background-color: var(--active-color);
  border-color: var(--active-color);
}

[data-theme='dark'] .btn-primary.active:hover {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
}

[data-theme='dark'] .btn-primary:disabled {
  background-color: var(--disabled-color);
  border-color: var(--disabled-color);
}

[data-theme='dark'] .btn-success {
  background-color: var(--active-color);
  border-color: var(--active-color);
}

[data-theme='dark'] .btn-success:hover,
[data-theme='dark'] .btn-success:focus {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
}

[data-theme='dark'] .btn-success.active {
  background-color: var(--active-color);
  border-color: var(--active-color);
}

[data-theme='dark'] .btn-success.active:hover {
  background-color: var(--active-color-hover);
  border-color: var(--active-color-hover);
}

[data-theme='dark'] .btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

[data-theme='dark'] .btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

[data-theme='dark'] .card.bg-light {
  background-color: var(--playback-bg) !important;
}

[data-theme='dark'] .verse-container {
  background-color: var(--verse-bg);
}

[data-theme='dark'] .logo-img {
  content: url('../imgs/Al-Munir-white.png');
}

[data-theme='dark'] .alert-warning {
  background-color: #4a3f1a;
  border-color: #5a4f2a;
  color: #ffc107;
}

[data-theme='dark'] .text-muted {
  color: var(--edition-label-color) !important;
}

[data-theme='dark'] .modal-content {
  background-color: var(--bg-container);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme='dark'] .modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme='dark'] .btn-close {
  filter: invert(1);
}

.logo-img {
  width: 250px;
  max-width: 100%;
}

.quran-text .arabic {
  font-family: var(--font-quran);
  font-size: var(--quran-font-size);
  line-height: 2;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.quran-text .arabic:hover {
  transform: scale(1.02);
}

[data-theme='dark'] .quran-text .arabic {
  color: #ffffff;
}

.quran-text .translation {
  font-size: var(--translation-font-size);
  line-height: 1.6;
}

.edition-label {
  font-size: 0.9em;
  color: #888;
}

[data-theme='dark'] .edition-label {
  color: #b0b0b0;
}

.verse-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.site-description h2 {
  margin-bottom: 1rem;
}

.site-description p {
  margin-bottom: 1rem;
}

.theme-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1050;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .theme-toggle {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.loader {
  margin: 0 auto;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #395364;
  width: 65px;
  height: 65px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

[data-theme='dark'] .similar-site-link {
  color: var(--active-color);
}

[data-theme='dark'] .similar-site-link:hover {
  color: var(--active-color-hover);
}

.alert-link {
  color: var(--primary-color);
  font-weight: 700;
}

.alert-link:hover {
  color: var(--primary-hover);
}

.similar-section-title {
  color: var(--primary-color);
}

[data-theme='dark'] .similar-section-title {
  color: var(--active-color);
}

@media (max-width: 768px) {
  .logo-img {
    width: 180px;
  }

  .quran-text .arabic {
    font-size: 30px;
  }

  .quran-text .translation {
    font-size: 20px;
  }

  .site-description p {
    font-size: 1.2rem;
  }

  .theme-toggle {
    width: 45px;
    height: 45px;
    font-size: 20px;
    top: 10px;
    left: 10px;
  }
}