/* === QURAN ROYAL DESIGN === */

/* Title with gold gradient */
.quran-title {
  background: linear-gradient(135deg, var(--color-salah), var(--color-primary), var(--color-quran));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Surah List Cards */
.quran-surah-card {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.quran-surah-card__border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.quran-surah-card:hover .quran-surah-card__border {
  opacity: 1;
}

.quran-surah-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.quran-surah-card__title {
  transition: color var(--transition-fast);
}

/* Meccan Surah Badge - Black & Gold */
.badge--Meccan {
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-quran);
  color: var(--color-quran) !important;
}

/* Madinan Surah Badge - Green & Gold */
.badge--Madinah, .badge--Medinan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-bg) 90%, var(--color-salah) 10%) 0%, color-mix(in srgb, var(--color-bg) 80%, var(--color-salah) 20%) 100%);
  border: 1px solid var(--color-salah);
  color: var(--color-salah) !important;
}

.quran-surah-card:hover .quran-surah-card__title {
  color: var(--color-quran);
}

/* === SEARCH === */
.quran-search-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.quran-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

/* Page Header */
.quran-page-header {
  border-bottom: 2px solid var(--color-primary);
}

.quran-page-header__title {
  color: var(--color-primary);
}

.quran-page-header__subtitle {
  color: var(--color-text-secondary);
}

/* Breadcrumb */
.quran-breadcrumb {
  color: var(--color-text-secondary);
}

.quran-breadcrumb__item {
  color: var(--color-text-secondary);
}

.quran-breadcrumb__item:hover {
  color: var(--color-primary);
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .quran-surah-card__title {
    font-size: var(--font-size-lg);
  }
}