/* ═══════════════════════════════════════════════
   my-reservation-dark.css
   Dark mode overrides for Mi Reserva page
   Scoped under .dark-premium — no tocar originales
   Paleta: #0a0a0a base, #1e1c1a cards, #c4a882 acentos
   ═══════════════════════════════════════════════ */

/* ── Page background ── */
.dark-premium .home-boreal {
    background: #0a0a0a !important;
}

/* ── Aurora orbs — subtle warm glow in dark ── */
.dark-premium .nexo-aurora-orb {
    opacity: 0.08 !important;
}

/* ── HEADER: logo blanco, texto claro ── */
.dark-premium header { background: transparent !important; }
.dark-premium header svg path { fill: #ffffff !important; }
.dark-premium header nav a,
.dark-premium header nav span,
.dark-premium header .menu-item a { color: rgba(255, 255, 255, 0.85) !important; }
.dark-premium header .menu-item a:hover { color: #ffffff !important; }
.dark-premium header nav ul ul { background: #1c1c1e !important; border-color: #38383a !important; }
.dark-premium header nav ul ul a { color: rgba(255, 255, 255, 0.8) !important; }
.dark-premium header nav ul ul a:hover { background: #2c2c2e !important; color: #ffffff !important; }

/* Logo PNG invertido a blanco */
.dark-premium header img[src*="logo"] {
    filter: brightness(0) invert(1) !important;
}

/* Hamburguesa blanca */
.dark-premium #hamburgerIcon div {
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Menú mobile overlay */
.dark-premium #menuMobile { color: rgba(255, 255, 255, 0.85) !important; }

/* ── H1 title ── */
.mr-dark-title {
    color: #1A1A1A;
}

.dark-premium .mr-dark-title {
    color: #f0f0f0 !important;
}

/* ── "How it works" section ── */
.dark-premium .text-gray-900 {
    color: #f0f0f0 !important;
}

.dark-premium .text-gray-500 {
    color: #98989d !important;
}

/* Accent line under titles */
.dark-premium .bg-\[\#4A3F8A\] {
    background-color: #c4a882 !important;
}

/* Step icon boxes */
.dark-premium .bg-gradient-to-br.from-\[\#F7F5F3\].to-\[\#EDEAE6\] {
    background: linear-gradient(to bottom right, #2c2c2e, #3a3a3c) !important;
}

/* Step hover shadow */
.dark-premium .group:hover .group-hover\:shadow-\[0_8px_32px_rgba\(74\,63\,138\,\.08\)\] {
    box-shadow: 0 8px 32px rgba(196, 168, 130, .12) !important;
}

/* ── FAQ section ── */

/* FAQ divider lines */
.dark-premium .divide-\[\#E8E3DE\]\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(56, 56, 58, .6) !important;
}

/* FAQ summary text */
.dark-premium details summary .text-gray-900,
.dark-premium details summary .font-semibold {
    color: #f0f0f0 !important;
}

/* FAQ summary hover */
.dark-premium details summary:hover,
.dark-premium details summary .group-hover\:text-\[\#4A3F8A\]:hover {
    color: #c4a882 !important;
}

/* FAQ answer text */
.dark-premium details > div.text-gray-500,
.dark-premium details > div[class*="text-gray-500"] {
    color: #98989d !important;
}

/* FAQ icon circle */
.dark-premium .bg-\[\#F5F3F0\] {
    background-color: #2c2c2e !important;
}

/* FAQ icon circle open state */
.dark-premium .group-open\:bg-\[\#4A3F8A\]\/5 {
    background-color: rgba(196, 168, 130, .08) !important;
}

/* FAQ +/× icon colors */
.dark-premium .text-\[\#9B9590\] {
    color: #98989d !important;
}

.dark-premium .group-open\:text-\[\#4A3F8A\] {
    color: #c4a882 !important;
}

/* FAQ link */
.dark-premium details a.text-\[\#4A3F8A\] {
    color: #c4a882 !important;
}

.dark-premium details a[class*="decoration-\[\#4A3F8A\]"] {
    text-decoration-color: rgba(196, 168, 130, .3) !important;
}

/* ── Connecting line between steps (desktop) ── */
.dark-premium .bg-gradient-to-r.from-transparent.via-\[\#E0DCD8\].to-transparent {
    background: linear-gradient(to right, transparent, #38383a, transparent) !important;
}

/* ── Generic Tailwind text overrides inside the page ── */
.dark-premium main .tracking-tight.text-gray-900 {
    color: #f0f0f0 !important;
}

/* ── Footer ── */
.dark-premium footer {
    background: #111111 !important;
}

.dark-premium footer,
.dark-premium footer a,
.dark-premium footer span,
.dark-premium footer p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark-premium footer a:hover {
    color: #c4a882 !important;
}