/* ==========================================================================
   Hotel Azur Casablanca - Theme System
   Comprehensive dark mode + card visibility fixes
   ========================================================================== */

/* ------------------------------------------------------------------
   1. THEME TOKENS (CSS custom properties)
   ------------------------------------------------------------------ */
:root {
    /* Brand */
    --azur-gold: #aa8453;
    --azur-gold-light: #c9a574;
    --azur-gold-dark: #8a6b3d;

    /* Light theme (default) */
    --bg-base: #ffffff;
    --bg-soft: #f8f5f0;
    --bg-elevated: #ffffff;
    --bg-cream: #f8f5f0;
    --bg-black-section: #1a1a1a;
    --bg-overlay: rgba(0,0,0,.55);

    --text-primary: #222222;
    --text-secondary: #555555;
    --text-muted: #888888;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(255,255,255,.78);
    --text-on-gold: #ffffff;

    --border-subtle: #ececec;
    --border-strong: #d9d9d9;

    --card-bg: #ffffff;
    --card-shadow: 0 10px 30px rgba(0,0,0,.08);
    --card-shadow-hover: 0 20px 40px rgba(0,0,0,.12);

    --nav-bg: rgba(255,255,255,.0);
    --nav-bg-scrolled: rgba(255,255,255,.95);
    --nav-text: #222222;

    --footer-bg: #1a1a1a;
    --footer-text: rgba(255,255,255,.7);

    --input-bg: #ffffff;
    --input-border: #d9d9d9;
    --input-text: #222222;

    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #aa8453;

    --transition-theme: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

/* ------------------------------------------------------------------
   2. DARK THEME (data-theme="dark")
   ------------------------------------------------------------------ */
html[data-theme="dark"] {
    --bg-base: #0e1014;
    --bg-soft: #14171c;
    --bg-elevated: #1b1f26;
    --bg-cream: #14171c;
    --bg-black-section: #050608;
    --bg-overlay: rgba(0,0,0,.72);

    --text-primary: #f2eee5;
    --text-secondary: #b8b3a8;
    --text-muted: #888178;
    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(255,255,255,.7);

    --border-subtle: #262a32;
    --border-strong: #3a3f49;

    --card-bg: #1b1f26;
    --card-shadow: 0 12px 32px rgba(0,0,0,.5);
    --card-shadow-hover: 0 24px 48px rgba(0,0,0,.65);

    --nav-bg: rgba(14,16,20,0);
    --nav-bg-scrolled: rgba(14,16,20,.92);
    --nav-text: #f2eee5;

    --footer-bg: #050608;
    --footer-text: rgba(255,255,255,.62);

    --input-bg: #1b1f26;
    --input-border: #3a3f49;
    --input-text: #f2eee5;

    --scrollbar-track: #14171c;
    --scrollbar-thumb: #aa8453;

    color-scheme: dark;
}

/* Auto-dark when user prefers it AND hasn't manually chosen a theme */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --bg-base: #0e1014;
        --bg-soft: #14171c;
        --bg-elevated: #1b1f26;
        --bg-cream: #14171c;
        --bg-black-section: #050608;
        --bg-overlay: rgba(0,0,0,.72);
        --text-primary: #f2eee5;
        --text-secondary: #b8b3a8;
        --text-muted: #888178;
        --text-on-dark-muted: rgba(255,255,255,.7);
        --border-subtle: #262a32;
        --border-strong: #3a3f49;
        --card-bg: #1b1f26;
        --card-shadow: 0 12px 32px rgba(0,0,0,.5);
        --card-shadow-hover: 0 24px 48px rgba(0,0,0,.65);
        --nav-bg-scrolled: rgba(14,16,20,.92);
        --nav-text: #f2eee5;
        --footer-bg: #050608;
        --footer-text: rgba(255,255,255,.62);
        --input-bg: #1b1f26;
        --input-border: #3a3f49;
        --input-text: #f2eee5;
        --scrollbar-track: #14171c;
        color-scheme: dark;
    }
}

/* ------------------------------------------------------------------
   3. CARD VISIBILITY FIXES (room cards, news, services)
       Fixes h3/p/spans I added on top of dark gradient overlays
   ------------------------------------------------------------------ */
.rooms1 .item .con h3,
.rooms1 .item .con h3 a,
.rooms1 .item .con h4,
.rooms1 .item .con h4 a {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Gilda Display', serif;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.rooms1 .item .con h3 a:hover,
.rooms1 .item .con h4 a:hover {
    color: var(--azur-gold-light);
}

/* Price block on dark gradient */
.rooms1 .item .con .price {
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.rooms1 .item .con .price .amount {
    font-family: 'Gilda Display', serif;
    font-size: 26px;
    color: var(--azur-gold-light);
    font-weight: 500;
}
.rooms1 .item .con .price .period {
    font-size: 13px;
    color: rgba(255,255,255,.82);
    margin-left: 4px;
    letter-spacing: 1px;
}

/* Card description paragraph on dark gradient */
.rooms1 .item .con p {
    color: rgba(255,255,255,.86) !important;
    font-size: 14px !important;
    line-height: 1.55;
    margin-bottom: 14px;
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* Permalink / details link on dark gradient */
.rooms1 .item .con .permalink a,
.rooms1 .item .con .permalink i {
    color: #fff !important;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.rooms1 .item .con .permalink a:hover,
.rooms1 .item .con .permalink i:hover {
    color: var(--azur-gold-light) !important;
}

/* Facilities icons */
.rooms1 .facilities ul li i {
    color: #fff;
    opacity: .9;
}

/* Lift the .con a bit higher so room title doesn't get clipped */
.rooms1 .item .con {
    bottom: -40px;
}
.rooms1 .item:hover .con {
    bottom: 0;
}

/* News cards — light cream card on dark section background.
   Default (light mode): dark text on cream (already correct from style.css).
   Dark mode: keep cream card BG, ensure dark text remains readable. */
.news .item .con {
    background-color: var(--card-bg, #f8f5f0) !important;
    border-color: var(--border-subtle, #f8f5f0);
    transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.news .item .con h5,
.news .item .con h5 a {
    color: var(--text-primary, #222) !important;
    font-family: 'Gilda Display', serif;
}
.news .item .con h5:hover,
.news .item .con h5 a:hover {
    color: var(--azur-gold) !important;
}
.news .item .con .category a {
    color: var(--text-secondary, #666) !important;
}
.news .item .con .category a:hover {
    color: var(--text-primary, #222) !important;
}
.news .item .con p {
    color: var(--text-secondary, #555) !important;
}
.news .item .con i {
    color: var(--text-primary, #222);
}

/* Date badge on news card image (outline on top of photo) */
.news .item .date,
.news .item .date a,
.news .item .date span,
.news .item .date i {
    color: #fff !important;
}

/* ------------------------------------------------------------------
   4. DARK MODE — global surfaces
   ------------------------------------------------------------------ */
html { transition: var(--transition-theme); }
body {
    background: var(--bg-base);
    color: var(--text-secondary);
    transition: var(--transition-theme);
}
p { color: var(--text-secondary); transition: color .4s ease; }

/* Headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Sections that switch from cream to elevated dark */
html[data-theme="dark"] .bg-cream {
    background: var(--bg-cream) !important;
    color: var(--text-secondary);
}
html[data-theme="dark"] .bg-cream h1,
html[data-theme="dark"] .bg-cream h2,
html[data-theme="dark"] .bg-cream h3,
html[data-theme="dark"] .bg-cream h4,
html[data-theme="dark"] .bg-cream h5,
html[data-theme="dark"] .bg-cream h6 { color: var(--text-primary); }
html[data-theme="dark"] .bg-cream p { color: var(--text-secondary); }

html[data-theme="dark"] .bg-black,
html[data-theme="dark"] section.bg-black { background: var(--bg-black-section) !important; }

/* About / Facilities / Services - general sections */
html[data-theme="dark"] .about,
html[data-theme="dark"] .facilties,
html[data-theme="dark"] .services {
    background: var(--bg-base);
}
html[data-theme="dark"] .services .bg-cream {
    background: var(--bg-elevated) !important;
}
html[data-theme="dark"] .services .content .cont h4 { color: var(--text-primary); }
html[data-theme="dark"] .services .content .cont p { color: var(--text-secondary); }

/* Facility cards */
html[data-theme="dark"] .facilties .single-facility {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 26px 22px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-theme), transform .4s ease, box-shadow .4s ease;
}
html[data-theme="dark"] .facilties .single-facility:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--azur-gold);
}
html[data-theme="dark"] .facilties .single-facility h5 { color: var(--text-primary); }
html[data-theme="dark"] .facilties .single-facility p { color: var(--text-secondary); }
html[data-theme="dark"] .facilties .single-facility span { color: var(--azur-gold-light); }
html[data-theme="dark"] .facilties .facility-shape span { color: rgba(170,132,83,.18); }

/* Section subtitles & titles */
html[data-theme="dark"] .section-subtitle { color: var(--azur-gold-light); }
html[data-theme="dark"] .section-title { color: var(--text-primary); }

/* Trust-signal stats row (the "4.6 / 85 / 0m / 24/7" block on index) */
html[data-theme="dark"] .about [style*="color:#888"] { color: var(--text-muted) !important; }

/* Why-Choose & Location list items (use inline-style backgrounds in index) */
html[data-theme="dark"] section[aria-labelledby="why-choose-title"] { background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-elevated) 100%) !important; }
html[data-theme="dark"] section[aria-labelledby="why-choose-title"] strong[style] { color: var(--text-primary) !important; }
html[data-theme="dark"] section[aria-labelledby="why-choose-title"] span[style] { color: var(--text-secondary) !important; }
html[data-theme="dark"] section[aria-labelledby="location-title"] h3[style] { color: var(--text-primary) !important; }
html[data-theme="dark"] section[aria-labelledby="location-title"] p[style] { color: var(--text-secondary) !important; }

/* Navbar */
html[data-theme="dark"] .navbar { background: var(--nav-bg); }
html[data-theme="dark"] .navbar.nabar-scroll,
html[data-theme="dark"] .navbar.nav-scrolled,
html[data-theme="dark"] .navbar.nav-scroll {
    background: var(--nav-bg-scrolled) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
html[data-theme="dark"] .navbar .nav-link { color: var(--nav-text) !important; }
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link.active { color: var(--azur-gold-light) !important; }
html[data-theme="dark"] .navbar .dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
html[data-theme="dark"] .navbar .dropdown-item a { color: var(--text-primary) !important; }
html[data-theme="dark"] .navbar .dropdown-item a:hover { color: var(--azur-gold-light) !important; background: rgba(170,132,83,.08); }
html[data-theme="dark"] .navbar .icon-bar i { color: var(--text-primary); }

/* Footer */
html[data-theme="dark"] .footer { background: var(--footer-bg); }
html[data-theme="dark"] .footer-title { color: var(--text-primary); }
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer-explore-list a,
html[data-theme="dark"] .footer-contact-text,
html[data-theme="dark"] .footer-contact-phone,
html[data-theme="dark"] .footer-contact-mail {
    color: var(--footer-text);
}
html[data-theme="dark"] .footer-language select {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}
html[data-theme="dark"] .footer-about-social-list a { color: var(--text-on-dark-muted); }
html[data-theme="dark"] .footer-about-social-list a:hover { color: var(--azur-gold-light); }

/* Pricing extra-services owl-carousel */
html[data-theme="dark"] .pricing { background: var(--bg-black-section) !important; }
html[data-theme="dark"] .pricing .color-2 { color: var(--text-on-dark-muted) !important; }
html[data-theme="dark"] .pricing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
}
html[data-theme="dark"] .pricing-card .desc .name,
html[data-theme="dark"] .pricing-card .desc .amount { color: var(--text-primary); }
html[data-theme="dark"] .pricing-card .desc ul li { color: var(--text-secondary); }

/* Testimonials block (dark image overlay already; ensure text stays light) */
html[data-theme="dark"] .testimonials .testimonials-box { background: rgba(20,23,28,.85); }
html[data-theme="dark"] .testimonials p,
html[data-theme="dark"] .testimonials h4,
html[data-theme="dark"] .testimonials h6 { color: #fff; }

/* Booking box */
html[data-theme="dark"] .booking-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
}
html[data-theme="dark"] .booking-box h4,
html[data-theme="dark"] .booking-box h6 { color: var(--text-primary); }
html[data-theme="dark"] .booking-box ul li { color: var(--text-secondary); }

/* Contact form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }

/* Buttons */
html[data-theme="dark"] .butn-dark a {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
html[data-theme="dark"] .butn-dark a:hover {
    background: var(--azur-gold);
    border-color: var(--azur-gold);
    color: #fff;
}
html[data-theme="dark"] .butn-light a {
    color: var(--text-on-dark);
    border-color: rgba(255,255,255,.4);
}
html[data-theme="dark"] .butn-light a:hover {
    background: var(--azur-gold);
    border-color: var(--azur-gold);
}

/* Maps modal in dark mode */
html[data-theme="dark"] .maps-modal-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
html[data-theme="dark"] .maps-modal h3,
html[data-theme="dark"] .maps-modal p { color: var(--text-primary); }

/* Preloader bg */
html[data-theme="dark"] .preloader-bg { background: var(--bg-base) !important; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--azur-gold-dark); }
html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* Selection */
::selection { background: var(--azur-gold); color: #fff; }
::-moz-selection { background: var(--azur-gold); color: #fff; }

/* ------------------------------------------------------------------
   5. THEME TOGGLE BUTTON — fixed at TOP-LEFT corner
   ------------------------------------------------------------------ */
.theme-toggle {
    position: fixed;
    top: 22px;
    left: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #222;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background .4s ease,
                color .4s ease,
                box-shadow .35s ease,
                border-color .4s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
html[data-theme="dark"] .theme-toggle {
    background: rgba(27,31,38,.92);
    color: #f2eee5;
    border-color: rgba(255,255,255,.08);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-toggle {
        background: rgba(27,31,38,.92);
        color: #f2eee5;
        border-color: rgba(255,255,255,.08);
    }
}
.theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(170,132,83,.4);
    border-color: var(--azur-gold);
    color: var(--azur-gold);
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle:focus-visible {
    outline: 2px solid var(--azur-gold);
    outline-offset: 3px;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 18px;
    height: 18px;
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity .35s ease;
    position: absolute;
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
    html:not([data-theme]) .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
}

@media (max-width: 768px) {
    .theme-toggle { top: 14px; left: 14px; width: 38px; height: 38px; }
    .theme-toggle .icon-sun,
    .theme-toggle .icon-moon { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------
   6. NO-FLASH: hide body until theme JS runs (handled inline in <head>)
   ------------------------------------------------------------------ */
html.theme-loading body { visibility: hidden; }
html.theme-loading.theme-ready body { visibility: visible; animation: fadeInBody .25s ease; }
@keyframes fadeInBody {
    from { opacity: 0; }
    to   { opacity: 1; }
}