/**
 * ============================================================
 * FILE: theme.css
 * PROJECT: Rudra Holidays
 * ============================================================
 * Purpose:  Dark mode overrides for all public pages.
 *           Applied via body.dark-mode class (toggled by
 *           theme.js using localStorage key 'rudra-theme').
 *           Also defines the .theme-toggle button styles and
 *           the no-transition flash prevention utility.
 *
 * Used By:  All public pages (index.html, html/*.html)
 *           Loaded AFTER page-specific CSS files (style.css,
 *           fleet.css, package.css, etc.)
 *
 * Does NOT affect: Admin dashboard (admin.css has own dark theme)
 *
 * Contains:
 *   - Smooth transition animation for all color properties
 *   - .no-transition utility (prevents flash on page load)
 *   - .theme-toggle button (light and dark variants)
 *   - Dark mode: header, nav, mobile menu
 *   - Dark mode: buttons, hero, glassmorphism containers
 *   - Dark mode: form controls, cards (info, fleet, package, dest)
 *   - Dark mode: gallery, lightbox, about, contact pages
 *   - Dark mode: booking modal (fleet page)
 *   - Dark mode: CTA sections, footer, particles, hero orbs
 * ============================================================
 */
/*
===========================================
  Rudra Holidays - Dark Mode Theme
  Applied via body.dark-mode class
===========================================
*/

/* ── Smooth theme transition ── */
body,
body *,
body *::before,
body *::after {
    transition-property: background-color, background, color, border-color, box-shadow, fill, stroke;
    transition-duration: 0.35s;
    transition-timing-function: ease;
}

/* Prevent transition flash on page load */
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after {
    transition: none !important;
}

/* ══════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════ */
.theme-toggle {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(127, 29, 29, 0.12);
    background: rgba(255, 255, 255, 0.8);
    color: #7f1d1d;
    font-size: 1.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.06);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.12);
}

.theme-toggle i {
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.theme-toggle .bx-sun {
    display: none;
}

.theme-toggle .bx-moon {
    display: inline-block;
}

/* ══════════════════════════════════════════
   DARK MODE — TOGGLE BUTTON
   ══════════════════════════════════════════ */
body.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fbbf24;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

body.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
}

body.dark-mode .theme-toggle .bx-sun {
    display: inline-block;
}

body.dark-mode .theme-toggle .bx-moon {
    display: none;
}

/* ══════════════════════════════════════════
   DARK MODE — BODY & GLOBAL BACKGROUNDS
   ══════════════════════════════════════════ */
body.dark-mode {
    color: #e5e7eb;
    background: 
        radial-gradient(circle at top left, rgba(185, 28, 28, 0.08), transparent 28%),
        linear-gradient(180deg, #0f1117 0%, #161a24 100%) !important;
}

/* ── Header ── */
body.dark-mode .header,
body.dark-mode .header.scrolled {
    background: rgba(15, 17, 23, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* ── Nav links ── */
body.dark-mode .nav-link,
body.dark-mode .nav-list a {
    color: #d1d5db;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active,
body.dark-mode .nav-list a:hover,
body.dark-mode .nav-list a.active {
    color: #ef4444;
}

/* ── Mobile menu ── */
body.dark-mode .nav-list.open,
body.dark-mode .nav-list {
    /* only applies when .open on mobile */
}

@media (max-width: 480px) {
    body.dark-mode .nav-list.open,
    body.dark-mode .nav-list {
        background: rgba(22, 26, 36, 0.97);
        border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode .nav-link:hover,
    body.dark-mode .nav-link.active,
    body.dark-mode .nav-list.open a:hover,
    body.dark-mode .nav-list.open a.active {
        background: rgba(185, 28, 28, 0.15);
    }
}

@media (max-width: 480px) {
    body.dark-mode .nav-list.open {
        background: rgba(22, 26, 36, 0.97);
        border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode .nav-list.open a:hover,
    body.dark-mode .nav-list.open a.active {
        background: rgba(185, 28, 28, 0.15);
    }
}

/* ── Mobile backdrop ── */
body.dark-mode .mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* ── Menu toggle button ── */
body.dark-mode .menu-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
}

/* ══════════════════════════════════════════
   DARK MODE — BUTTONS
   ══════════════════════════════════════════ */
body.dark-mode .btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
}

/* ══════════════════════════════════════════
   DARK MODE — HERO SECTION (Home)
   ══════════════════════════════════════════ */
body.dark-mode .hero-overlay {
    background:
        linear-gradient(90deg, rgba(15, 17, 23, 0.97) 0%, rgba(15, 17, 23, 0.92) 42%, rgba(15, 17, 23, 0.70) 68%, rgba(15, 17, 23, 0.45) 100%),
        radial-gradient(circle at left center, rgba(185, 28, 28, 0.10), transparent 36%);
}

body.dark-mode .title,
body.dark-mode .section-title,
body.dark-mode .section-head h2,
body.dark-mode .hero-copy h1,
body.dark-mode .fleet-hero-copy h1,
body.dark-mode .fleet-details h3,
body.dark-mode .cta-inner h2,
body.dark-mode .cta-box h2,
body.dark-mode .booking-head h3,
body.dark-mode .contact-form h3,
body.dark-mode .support-board-top h2,
body.dark-mode .route-card-top h2,
body.dark-mode .owner-content h3,
body.dark-mode .experience-content h2 {
    color: #f3f4f6;
}

body.dark-mode .description,
body.dark-mode .hero-text,
body.dark-mode .hero-description,
body.dark-mode .vehicle-description,
body.dark-mode .form-note,
body.dark-mode .support-board-top p,
body.dark-mode .section-head p:last-child,
body.dark-mode .cta-inner p:last-child,
body.dark-mode .cta-box p:last-child,
body.dark-mode .booking-head p:last-child,
body.dark-mode .owner-content p,
body.dark-mode .experience-content p {
    color: #9ca3af;
}

/* ── Hero points / badges ── */
body.dark-mode .hero-points span,
body.dark-mode .visual-badge,
body.dark-mode .brand-badge,
body.dark-mode .floating-note {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
}

/* ══════════════════════════════════════════
   DARK MODE — GLASSMORPHISM CONTAINERS
   ══════════════════════════════════════════ */
body.dark-mode .booking-glass-container,
body.dark-mode .features-glass-container {
    background: rgba(22, 26, 36, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════
   DARK MODE — FORM CONTROLS
   ══════════════════════════════════════════ */
body.dark-mode .form-control,
body.dark-mode .input-wrap input,
body.dark-mode .destination-add input,
body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
    box-shadow: none;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .input-wrap input::placeholder,
body.dark-mode .destination-add input::placeholder,
body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: #6b7280;
}

body.dark-mode .form-control:focus,
body.dark-mode .input-wrap input:focus,
body.dark-mode .destination-add input:focus,
body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: rgba(185, 28, 28, 0.50);
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.15);
}

body.dark-mode .native-select option {
    background: #1e2231;
    color: #e5e7eb;
}

body.dark-mode .input-wrapper label,
body.dark-mode .form-group label {
    color: #d1d5db;
}

body.dark-mode .dropdown-icon {
    color: #6b7280;
}

body.dark-mode .form-divider {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════
   DARK MODE — FEATURE ITEMS
   ══════════════════════════════════════════ */
body.dark-mode .feature-item {
    border-right-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .feature-item:last-child {
    border-right-color: transparent;
}

body.dark-mode .feature-text h4,
body.dark-mode .info-card h3,
body.dark-mode .fleet-card h3,
body.dark-mode .destination-card h3,
body.dark-mode .package-card h3,
body.dark-mode .why-card h4,
body.dark-mode .stat-card h3,
body.dark-mode .process-card h3,
body.dark-mode .hero-panel-card h3,
body.dark-mode .contact-card h4,
body.dark-mode .info-row strong,
body.dark-mode .support-card strong,
body.dark-mode .route-pin strong,
body.dark-mode .testimonial-card h4 {
    color: #f3f4f6;
}

body.dark-mode .feature-text p,
body.dark-mode .info-card p,
body.dark-mode .fleet-card p,
body.dark-mode .why-card p,
body.dark-mode .stat-card p,
body.dark-mode .process-card p,
body.dark-mode .hero-panel-card p,
body.dark-mode .contact-card p,
body.dark-mode .info-row p,
body.dark-mode .support-card span,
body.dark-mode .route-pin p,
body.dark-mode .testimonial-card p,
body.dark-mode .mini-metric span,
body.dark-mode .stat-card span,
body.dark-mode .stat-box span {
    color: #9ca3af;
}

body.dark-mode .feature-icon {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.18), rgba(185, 28, 28, 0.08));
    border-color: rgba(185, 28, 28, 0.18);
}

/* ══════════════════════════════════════════
   DARK MODE — CARDS (Info, Fleet, Destination, Package, etc.)
   ══════════════════════════════════════════ */
body.dark-mode .info-card,
body.dark-mode .destination-card,
body.dark-mode .why-card,
body.dark-mode .stat-card,
body.dark-mode .testimonial-card,
body.dark-mode .process-card,
body.dark-mode .contact-card,
body.dark-mode .support-card,
body.dark-mode .owner-point,
body.dark-mode .experience-list div,
body.dark-mode .coverage-points span,
body.dark-mode .route-pin,
body.dark-mode .mini-metric,
body.dark-mode .info-panel,
body.dark-mode .stat-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

body.dark-mode .info-card:hover,
body.dark-mode .destination-card:hover,
body.dark-mode .why-card:hover,
body.dark-mode .contact-card:hover,
body.dark-mode .support-card:hover {
    border-color: rgba(185, 28, 28, 0.30);
}

body.dark-mode .info-card i {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.20), rgba(185, 28, 28, 0.08));
}

/* ── Package cards ── */
body.dark-mode .package-card {
    background: linear-gradient(180deg, rgba(22, 26, 36, 0.95) 0%, rgba(30, 34, 49, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

body.dark-mode .package-card.featured {
    background:
        radial-gradient(circle at top right, rgba(185, 28, 28, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(22, 26, 36, 0.95) 0%, rgba(30, 34, 49, 0.95) 100%);
    border-color: rgba(185, 28, 28, 0.22);
}

body.dark-mode .package-desc,
body.dark-mode .package-points span {
    color: #9ca3af;
}

body.dark-mode .package-tag {
    background: rgba(185, 28, 28, 0.15);
    color: #fca5a5;
}

body.dark-mode .price-box small {
    color: #6b7280;
}

/* ── Fleet page cards ── */
body.dark-mode .fleet-card {
    background: rgba(22, 26, 36, 0.80);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

body.dark-mode .fleet-image-wrap {
    background:
        radial-gradient(circle at center, rgba(185, 28, 28, 0.15), rgba(0,0,0,0) 54%),
        linear-gradient(180deg, #1a1e2a 0%, #14171f 100%);
}

body.dark-mode .spec-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e5e7eb;
}

body.dark-mode .spec-pill:hover {
    background: rgba(185, 28, 28, 0.12);
    border-color: rgba(185, 28, 28, 0.25);
}

body.dark-mode .feature-list div {
    color: #d1d5db;
}

/* ── Visual card (fleet hero) ── */
body.dark-mode .visual-card {
    background:
        radial-gradient(circle at top, rgba(185, 28, 28, 0.12), transparent 42%),
        linear-gradient(180deg, #1a1e2a 0%, #14171f 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Hero panel (packages) ── */
body.dark-mode .hero-panel {
    background: linear-gradient(180deg, rgba(22, 26, 36, 0.95) 0%, rgba(30, 34, 49, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .hero-panel-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .panel-icon {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.20), rgba(185, 28, 28, 0.08));
}

/* ── Category pills ── */
body.dark-mode .category-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #d1d5db;
}

body.dark-mode .category-pill.active {
    background: rgba(185, 28, 28, 0.15);
    border-color: rgba(185, 28, 28, 0.25);
}

/* ══════════════════════════════════════════
   DARK MODE — CTA SECTIONS
   ══════════════════════════════════════════ */
body.dark-mode .cta-inner,
body.dark-mode .cta-box {
    background:
        radial-gradient(circle at top left, rgba(185, 28, 28, 0.15), transparent 35%),
        linear-gradient(180deg, rgba(22, 26, 36, 0.95) 0%, rgba(30, 34, 49, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

/* Home page dark CTA box override — already has brand gradient background */
body.dark-mode .cta-section .cta-box {
    background:
        linear-gradient(135deg, rgba(185, 28, 28, 0.96), rgba(127, 29, 29, 0.98)),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

/* ══════════════════════════════════════════
   DARK MODE — GALLERY
   ══════════════════════════════════════════ */
body.dark-mode .gallery-item {
    background: linear-gradient(180deg, #1a1e2a 0%, #14171f 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .filter-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #d1d5db;
}

body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active {
    color: #fff;
}

body.dark-mode .collage {
    background: linear-gradient(180deg, #1a1e2a 0%, #14171f 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════
   DARK MODE — ABOUT US (Route card, Owner, etc.)
   ══════════════════════════════════════════ */
body.dark-mode .route-card {
    background:
        linear-gradient(180deg, rgba(22, 26, 36, 0.95), rgba(30, 34, 49, 0.98)),
        radial-gradient(circle at top, rgba(185, 28, 28, 0.15), transparent 42%);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .route-card::before {
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .route-tags span,
body.dark-mode .chip {
    background: rgba(185, 28, 28, 0.12);
    border-color: rgba(185, 28, 28, 0.20);
    color: #fca5a5;
}

body.dark-mode .owner-image-wrap,
body.dark-mode .experience-media {
    background: #1a1e2a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .coverage-wrap {
    background:
        radial-gradient(circle at center, rgba(185, 28, 28, 0.12), transparent 35%),
        rgba(22, 26, 36, 0.80);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════
   DARK MODE — CONTACT PAGE
   ══════════════════════════════════════════ */
body.dark-mode .support-board {
    background:
        linear-gradient(180deg, rgba(22, 26, 36, 0.96), rgba(30, 34, 49, 0.98)),
        radial-gradient(circle at top, rgba(185, 28, 28, 0.12), transparent 42%);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .support-board::before {
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .support-pill {
    background: rgba(185, 28, 28, 0.12);
    border-color: rgba(185, 28, 28, 0.20);
    color: #fca5a5;
}

body.dark-mode .support-card i {
    background: rgba(185, 28, 28, 0.15);
}

body.dark-mode .contact-form-wrap {
    background: rgba(22, 26, 36, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-card i,
body.dark-mode .info-row i {
    background: rgba(185, 28, 28, 0.15);
}

/* ══════════════════════════════════════════
   DARK MODE — BOOKING MODAL (Fleet)
   ══════════════════════════════════════════ */
body.dark-mode .booking-modal {
    background: rgba(0, 0, 0, 0.78);
}

body.dark-mode .booking-panel {
    background:
        radial-gradient(circle at top, rgba(185, 28, 28, 0.12), transparent 40%),
        rgba(22, 26, 36, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

body.dark-mode .close-modal {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

body.dark-mode .close-modal:hover {
    background: rgba(185, 28, 28, 0.20);
}

body.dark-mode .availability-status.neutral {
    background: rgba(255, 255, 255, 0.06);
    color: #d1d5db;
    border-color: rgba(255, 255, 255, 0.10);
}

body.dark-mode .availability-status.available {
    background: rgba(46, 204, 113, 0.12);
    color: #4ade80;
    border-color: rgba(46, 204, 113, 0.25);
}

body.dark-mode .availability-status.booked {
    background: rgba(231, 76, 60, 0.14);
    color: #fca5a5;
    border-color: rgba(231, 76, 60, 0.25);
}

body.dark-mode .chip button {
    color: #fca5a5;
}

/* ══════════════════════════════════════════
   DARK MODE — DESTINATION IMAGES (fallback bg)
   ══════════════════════════════════════════ */
body.dark-mode .destination-munnar,
body.dark-mode .destination-alappuzha,
body.dark-mode .destination-wayanad,
body.dark-mode .destination-vagamon {
    background-color: #1a1e2a;
}

/* ══════════════════════════════════════════
   DARK MODE — FOOTER (Home & Packages)
   ══════════════════════════════════════════ */
body.dark-mode .footer {
    background: linear-gradient(180deg, #1a0808 0%, #110505 100%);
}

body.dark-mode .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Fleet page footer */
body.dark-mode .footer .footer-bottom {
    background: #0d0303;
}

/* Footer strip (About, Contact, Gallery) */
body.dark-mode .footer-strip {
    background: linear-gradient(180deg, #1a0808 0%, #110505 100%);
}

/* ══════════════════════════════════════════
   DARK MODE — PARTICLES
   ══════════════════════════════════════════ */
body.dark-mode .particles span {
    background: rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.18);
}

/* ══════════════════════════════════════════
   DARK MODE — HERO ORBS
   ══════════════════════════════════════════ */
body.dark-mode .hero-orb-1 {
    background: rgba(185, 28, 28, 0.18);
}

body.dark-mode .hero-orb-2 {
    background: rgba(245, 158, 11, 0.12);
}

/* ══════════════════════════════════════════
   DARK MODE — LIGHTBOX (Gallery)
   ══════════════════════════════════════════ */
body.dark-mode .lightbox {
    background: rgba(0, 0, 0, 0.92);
}

body.dark-mode .lightbox img {
    background: #0f1117;
}

/* ══════════════════════════════════════════
   DARK MODE — FEATURE ITEMS BORDER (mobile)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    body.dark-mode .feature-item {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode .feature-item:last-child {
        border-bottom-color: transparent;
    }
}