/*============================================================================================*/
/* Rex and Rich Hotel - Dark Mode Stylesheet
/* Comprehensive dark mode for all pages and components
/*============================================================================================*/

/* ============================================
   CSS Variables for Light/Dark Mode
   ============================================ */
:root {
    /* Light mode colors (default) */
    --bg-primary: #faf8f5;
    --bg-secondary: #fff;
    --bg-tertiary: #f5f3f0;
    --bg-card: #fff;
    --bg-header: rgba(255, 255, 255, 0.85);
    --bg-header-scrolled: rgba(255, 255, 255, 0.95);
    --bg-footer: #292b33;
    --bg-input: #fff;
    --bg-hover: rgba(200, 169, 126, 0.05);
    --bg-dropdown: #fff;
    --bg-light: #f8f6f3;
    --bg-white: #fff;
    
    /* Text colors */
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #777;
    --text-light: #999;
    --text-inverse: #fff;
    --text-heading: #1a1a1c;
    
    /* Brand colors */
    --brand-gold: #c8a97e;
    --brand-gold-dark: #b8956c;
    --brand-accent: #978667;
    --brand-brown: #8B4513;
    --brand-orange: #D2691E;
    
    /* Borders */
    --border-color: rgba(200, 169, 126, 0.2);
    --border-light: #e5e5e5;
    --border-dark: #ddd;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.15);
    
    /* Overlays */
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Dark Mode Variables
   ============================================ */
[data-theme="dark"],
.theme-dark {
    --bg-primary: #1f1e1d;
    --bg-secondary: #262624;
    --bg-tertiary: #2f2f2d;
    --bg-card: #262624;
    --bg-header: rgba(31, 30, 29, 0.94);
    --bg-header-scrolled: rgba(31, 30, 29, 0.98);
    --bg-footer: #1a1a19;
    --bg-input: #30302e;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-dropdown: #262624;
    --bg-light: #262624;
    --bg-white: #262624;
    
    /* Text colors */
    --text-primary: #f5f5f4;
    --text-secondary: #d6d3d1;
    --text-muted: #a8a29e;
    --text-light: #78716c;
    --text-inverse: #1f1e1d;
    --text-heading: #fff;
    
    /* Brand colors - slightly brighter for dark mode */
    --brand-gold: #e7e5e4;
    --brand-gold-dark: #d6d3d1;
    --brand-accent: #bdb7b0;
    --brand-brown: #e7e5e4;
    --brand-orange: #cbd5e1;
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: #343432;
    --border-dark: #3f3f3d;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.42);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.45);
    
    /* Overlays */
    --overlay-dark: rgba(0, 0, 0, 0.62);
    --overlay-light: rgba(255, 255, 255, 0.05);
}

[data-theme="blue"],
.theme-blue {
    --bg-primary: #0f172a;
    --bg-secondary: #1e1e2d;
    --bg-tertiary: #25253a;
    --bg-card: #1e1e2d;
    --bg-header: rgba(15, 23, 42, 0.9);
    --bg-header-scrolled: rgba(15, 23, 42, 0.95);
    --bg-footer: #0a0a0a;
    --bg-input: #2a2a3f;
    --bg-hover: rgba(59, 130, 246, 0.12);
    --bg-dropdown: #1e1e2d;
    --bg-light: #1a1f35;
    --bg-white: #1e1e2d;

    --text-primary: #f5f7fb;
    --text-secondary: #d0d7e2;
    --text-muted: #94a3b8;
    --text-light: #6b7280;
    --text-inverse: #0f172a;
    --text-heading: #ffffff;

    --brand-gold: #60a5fa;
    --brand-gold-dark: #3b82f6;
    --brand-accent: #93c5fd;
    --brand-brown: #60a5fa;
    --brand-orange: #38bdf8;

    --border-color: rgba(96, 165, 250, 0.2);
    --border-light: #334155;
    --border-dark: #475569;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.55);

    --overlay-dark: rgba(0, 0, 0, 0.68);
    --overlay-light: rgba(255, 255, 255, 0.06);
}

/* ============================================
   Auto dark mode from system preference
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1f1e1d;
        --bg-secondary: #262624;
        --bg-tertiary: #2f2f2d;
        --bg-card: #262624;
        --bg-header: rgba(31, 30, 29, 0.94);
        --bg-header-scrolled: rgba(31, 30, 29, 0.98);
        --bg-footer: #1a1a19;
        --bg-input: #30302e;
        --bg-hover: rgba(255, 255, 255, 0.05);
        --bg-dropdown: #262624;
        --bg-light: #262624;
        --bg-white: #262624;
        --text-primary: #f5f5f4;
        --text-secondary: #d6d3d1;
        --text-muted: #a8a29e;
        --text-light: #78716c;
        --text-inverse: #1f1e1d;
        --text-heading: #fff;
        --brand-gold: #e7e5e4;
        --brand-gold-dark: #d6d3d1;
        --brand-accent: #bdb7b0;
        --brand-brown: #e7e5e4;
        --brand-orange: #cbd5e1;
        --border-color: rgba(255, 255, 255, 0.08);
        --border-light: #343432;
        --border-dark: #3f3f3d;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.34);
        --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.42);
        --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.45);
        --overlay-dark: rgba(0, 0, 0, 0.62);
        --overlay-light: rgba(255, 255, 255, 0.05);
    }
}

/* ============================================
   Base Element Styles
   ============================================ */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.theme-dark,
body.theme-blue {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.theme-dark .bg-white,
body.theme-dark .card,
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu,
body.theme-dark .list-group-item,
body.theme-dark .table-responsive,
body.theme-dark .sidebar,
body.theme-dark .admin-footer {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
}

body.theme-dark .navbar,
body.theme-dark .page-holder,
body.theme-dark .container-fluid,
body.theme-dark .page,
body.theme-dark .content-inner {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

body.theme-dark .table,
body.theme-dark table {
    color: var(--text-primary);
}

body.theme-dark th,
body.theme-dark td,
body.theme-dark .table td,
body.theme-dark .table th {
    border-color: var(--border-color) !important;
}

body.theme-dark .table-striped tbody tr:nth-of-type(odd),
body.theme-dark .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

body.theme-dark .form-control,
body.theme-dark .custom-select,
body.theme-dark .input-group-text,
body.theme-dark .select2-container--bootstrap-5 .select2-selection {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.theme-dark .text-muted,
body.theme-dark small,
body.theme-dark .small {
    color: var(--text-muted) !important;
}

body.theme-blue .bg-white,
body.theme-blue .card,
body.theme-blue .modal-content,
body.theme-blue .dropdown-menu,
body.theme-blue .list-group-item,
body.theme-blue .table-responsive,
body.theme-blue .sidebar,
body.theme-blue .admin-footer {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
}

body.theme-blue .navbar,
body.theme-blue .page-holder,
body.theme-blue .container-fluid,
body.theme-blue .page,
body.theme-blue .content-inner {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

body.theme-blue .table,
body.theme-blue table {
    color: var(--text-primary);
}

body.theme-blue th,
body.theme-blue td,
body.theme-blue .table td,
body.theme-blue .table th {
    border-color: var(--border-light) !important;
}

body.theme-blue .table-striped tbody tr:nth-of-type(odd),
body.theme-blue .table-hover tbody tr:hover {
    background-color: rgba(219, 234, 254, 0.45);
}

body.theme-blue .form-control,
body.theme-blue .custom-select,
body.theme-blue .input-group-text,
body.theme-blue .select2-container--bootstrap-5 .select2-selection {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

main {
    background-color: var(--bg-primary) !important;
}

/* Home page main with dark bg for footer reveal */
body.home-page main {
    background: var(--bg-primary) !important;
}

/* Ensure body has dark background too */
body {
    background-color: var(--bg-primary) !important;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6,
.title h2,
.title h3 {
    color: var(--text-heading);
}

p {
    color: var(--text-secondary);
}

a {
    color: var(--brand-gold);
}

a:hover {
    color: var(--brand-gold-dark);
}

.text-muted {
    color: var(--text-muted) !important;
}

small {
    color: var(--text-muted);
}

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

/* ============================================
   Navigation / Header
   ============================================ */
/* Only apply these overrides when NOT on transparent header, or scope to dark mode */
.floating-header:not(.header-transparent) .nav-container {
    background: var(--bg-header);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.floating-header:not(.header-transparent).scrolled .nav-container {
    background: var(--bg-header-scrolled);
    box-shadow: var(--shadow-lg);
}

.floating-header:not(.header-transparent) .nav-link {
    color: var(--text-primary);
}

.floating-header:not(.header-transparent) .nav-link:hover {
    color: var(--brand-gold);
    background: var(--bg-hover);
}

/* Transparent header on homepage - dark mode only overrides */
[data-theme="dark"] .floating-header.header-transparent .nav-container,
.dark-mode .floating-header.header-transparent .nav-container {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .floating-header.header-transparent .nav-link,
.dark-mode .floating-header.header-transparent .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .floating-header.header-transparent .nav-link:hover,
.dark-mode .floating-header.header-transparent .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Transparent header scrolled state - dark mode */
[data-theme="dark"] .floating-header.header-transparent.scrolled .nav-container,
.dark-mode .floating-header.header-transparent.scrolled .nav-container {
    background: var(--bg-header-scrolled) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .floating-header.header-transparent.scrolled .nav-link,
.dark-mode .floating-header.header-transparent.scrolled .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .floating-header.header-transparent.scrolled .nav-link:hover,
.dark-mode .floating-header.header-transparent.scrolled .nav-link:hover {
    color: var(--brand-gold) !important;
}

.floating-header .dropdown-menu {
    background: var(--bg-dropdown);
    box-shadow: var(--shadow-dropdown);
    border-color: var(--border-light);
}

.floating-header .dropdown-item {
    color: var(--text-secondary);
}

.floating-header .dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--brand-gold);
}

/* Mobile nav toggle */
.floating-header:not(.header-transparent) .nav-toggle {
    background: var(--bg-tertiary);
}

.floating-header:not(.header-transparent) .toggle-bar {
    background: var(--text-primary);
}

/* Dark mode toggle for transparent header scrolled */
[data-theme="dark"] .floating-header.header-transparent.scrolled .nav-toggle,
.dark-mode .floating-header.header-transparent.scrolled .nav-toggle {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .floating-header.header-transparent.scrolled .toggle-bar,
.dark-mode .floating-header.header-transparent.scrolled .toggle-bar {
    background: var(--text-primary) !important;
}

/* Dark mode logo swap */
.dark-mode .floating-header .nav-logo .logo-dark,
[data-theme="dark"] .floating-header .nav-logo .logo-dark {
    display: none;
}

.dark-mode .floating-header .nav-logo .logo-light,
[data-theme="dark"] .floating-header .nav-logo .logo-light {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .floating-header .nav-logo .logo-dark {
        display: none;
    }
    :root:not([data-theme="light"]) .floating-header .nav-logo .logo-light {
        display: block;
    }
}

/* Navigation dropdown */
.nav-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
}

.nav-dropdown a {
    color: var(--text-primary);
}

.nav-dropdown a:hover {
    background: var(--bg-tertiary);
    color: var(--brand-gold);
}

/* Mobile navigation panel */
.mobile-nav-panel {
    background: var(--bg-card);
}

/* Mobile navigation */
.mobile-nav {
    background: var(--bg-card);
}

.mobile-nav-header {
    border-color: var(--border-light);
}

.mobile-nav-close {
    background: var(--bg-tertiary);
}

.mobile-nav-close svg {
    stroke: var(--text-primary);
}

.mobile-nav-item {
    border-color: var(--border-light);
}

.mobile-nav-item > a,
.mobile-submenu-toggle {
    color: var(--text-primary);
}

.mobile-submenu li a {
    color: var(--text-secondary);
}

.mobile-nav-info {
    border-color: var(--border-light);
}

.mobile-nav-info h6 {
    color: var(--text-muted);
}

.mobile-nav-info p,
.mobile-nav-info p a {
    color: var(--text-secondary);
}

.mobile-nav-info .social-links a {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ============================================
   .bg_white and Pattern Sections (INDEX PAGE)
   ============================================ */
.bg_white,
.pattern_2 {
    background-color: var(--bg-secondary) !important;
}

/* Restaurant pattern background - hide chicken pattern in dark mode */
[data-theme="dark"] .pattern_3,
.dark-mode .pattern_3 {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}

/* Local amenities section */
.bg_white .title h3,
.bg_white .title small,
.bg_white p {
    color: var(--text-primary);
}

.bg_white .title small {
    color: var(--brand-gold);
}

/* ============================================
   Cards & Boxes
   ============================================ */
.card {
    background: var(--bg-card);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.card-body {
    background: var(--bg-card);
    color: var(--text-primary);
}

.card-footer {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/* Room cards */
.box_cat_rooms {
    background: var(--bg-card);
}

.box_cat_rooms .info {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.box_cat_rooms .info h3 {
    color: #fff;
}

.box_cat_rooms .info small {
    color: rgba(255,255,255,0.8);
}

/* Room List Cards (room-list.php) */
[data-theme="dark"] .box_item_info,
.dark-mode .box_item_info {
    background-color: var(--bg-card) !important;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .box_item_info small,
.dark-mode .box_item_info small {
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .box_item_info h2,
.dark-mode .box_item_info h2 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .box_item_info p,
.dark-mode .box_item_info p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .box_item_info .facilities ul li,
.dark-mode .box_item_info .facilities ul li {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .box_item_info .facilities ul li i,
.dark-mode .box_item_info .facilities ul li i {
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .box_item_info .box_item_footer,
.dark-mode .box_item_info .box_item_footer {
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .box_item_info .box_item_footer a,
.dark-mode .box_item_info .box_item_footer a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .row_list_version_2,
.dark-mode .row_list_version_2 {
    background-color: transparent !important;
}

/* Room comparison table (room-list.php) */
[data-theme="dark"] .room-comparison-section,
.dark-mode .room-comparison-section {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .room-comparison-section .table-responsive,
.dark-mode .room-comparison-section .table-responsive {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 18px;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

[data-theme="dark"] .room-comparison-table,
.dark-mode .room-comparison-table {
    margin-bottom: 0 !important;
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

[data-theme="dark"] .room-comparison-table thead th,
.dark-mode .room-comparison-table thead th {
    background: #151515 !important;
    color: var(--text-heading) !important;
    border-bottom: 1px solid var(--border-light) !important;
    border-top: 0 !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .room-comparison-table tbody td,
.dark-mode .room-comparison-table tbody td {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-color: var(--border-light) !important;
    vertical-align: middle;
}

[data-theme="dark"] .room-comparison-table.table-striped > tbody > tr:nth-of-type(odd) > *,
.dark-mode .room-comparison-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .room-comparison-table.table-striped > tbody > tr:nth-of-type(even) > *,
.dark-mode .room-comparison-table.table-striped > tbody > tr:nth-of-type(even) > * {
    background: rgba(200, 169, 126, 0.04) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .room-comparison-table tbody tr:hover > *,
.dark-mode .room-comparison-table tbody tr:hover > * {
    background: rgba(200, 169, 126, 0.1) !important;
}

[data-theme="dark"] .room-comparison-table tbody td:first-child,
.dark-mode .room-comparison-table tbody td:first-child {
    color: var(--text-heading) !important;
    font-weight: 600;
}

[data-theme="dark"] .room-comparison-table .text-success,
.dark-mode .room-comparison-table .text-success {
    color: #58d68d !important;
}

[data-theme="dark"] .room-comparison-table .btn_1.btn-sm,
.dark-mode .room-comparison-table .btn_1.btn-sm {
    box-shadow: none !important;
}

/* ============================================
   Facilities Section (Stacking Cards)
   ============================================ */
[data-theme="dark"] .facilities-process,
.dark-mode .facilities-process {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .facilities-badge,
.dark-mode .facilities-badge {
    background: rgba(200, 169, 126, 0.15) !important;
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .facilities-intro h2,
.dark-mode .facilities-intro h2 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .facilities-intro p,
.dark-mode .facilities-intro p {
    color: var(--text-secondary) !important;
}

/* Stack cards - scoped for dark mode with !important to override custom.css */
[data-theme="dark"] .stack-card-wrapper,
.dark-mode .stack-card-wrapper {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .stack-card-content,
.dark-mode .stack-card-content {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .stack-card-text h5,
.dark-mode .stack-card-text h5 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .stack-card-text p,
.dark-mode .stack-card-text p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .stack-card-icon,
.dark-mode .stack-card-icon {
    background: rgba(200, 169, 126, 0.15) !important;
}

[data-theme="dark"] .stack-card-icon i,
.dark-mode .stack-card-icon i {
    color: var(--brand-gold) !important;
}

/* ============================================
   Forms & Inputs
   ============================================ */
input,
textarea,
select,
.form-control {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--text-muted) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.2) !important;
}

/* Labels */
label {
    color: var(--text-secondary);
}

/* Nice Select (custom dropdowns) */
.nice-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.nice-select .current {
    color: var(--text-primary) !important;
}

.nice-select:after {
    border-bottom-color: var(--text-primary) !important;
    border-right-color: var(--text-primary) !important;
}

.nice-select .list {
    background: var(--bg-dropdown) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-dropdown) !important;
}

.nice-select .option {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected,
.nice-select .option.selected.focus {
    background: var(--bg-hover) !important;
    color: var(--brand-gold) !important;
}

/* Custom select wrapper */
.custom_select select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

/* Qty buttons - Light mode base */
.qty-buttons {
    background: var(--bg-input);
    border-color: var(--border-light);
}

.qty-buttons input.qty {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
}

.qty-buttons input.qtyplus,
.qty-buttons input.qtyminus {
    background-color: #f5f5f5 !important;
}

.qty-buttons.version_2 input.qtyplus,
.qty-buttons.version_2 input.qtyminus {
    background-color: #fff !important;
}

/* Qty buttons - Dark mode */
[data-theme="dark"] .qty-buttons,
.dark-mode .qty-buttons {
    background: var(--bg-input) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .qty-buttons input.qty,
.dark-mode .qty-buttons input.qty {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .qty-buttons input.qtyplus,
[data-theme="dark"] .qty-buttons input.qtyminus,
.dark-mode .qty-buttons input.qtyplus,
.dark-mode .qty-buttons input.qtyminus {
    background-color: #3a3a3a !important;
    filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .qty-buttons.version_2 input.qtyplus,
[data-theme="dark"] .qty-buttons.version_2 input.qtyminus,
.dark-mode .qty-buttons.version_2 input.qtyplus,
.dark-mode .qty-buttons.version_2 input.qtyminus {
    background-color: #3a3a3a !important;
    filter: invert(1) brightness(0.8);
}

/* ============================================
   Booking Section
   ============================================ */
/* ============================================
   Booking Section (uses CSS variables - works for both modes)
   ============================================ */
.booking_wrapper {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

#booking_section {
    background: transparent;
}

#booking_section .booking_wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

#booking_section label,
#booking_section .text-muted {
    color: var(--text-muted);
}

#booking_section small {
    color: var(--text-light);
}

/* Dark mode specific overrides for booking section */
[data-theme="dark"] .booking_wrapper,
.dark-mode .booking_wrapper {
    background: #1a1a1a !important;
    border-color: rgba(200, 169, 126, 0.3) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #booking_section .booking_wrapper,
.dark-mode #booking_section .booking_wrapper {
    background: #1a1a1a !important;
    border: 1px solid rgba(200, 169, 126, 0.25) !important;
}

/* Easepick Calendar - Light mode defaults */
.easepick-wrapper {
    background: #fff;
    border-color: #ddd;
}

/* Easepick Calendar Dark Mode - Only when dark theme is active */
[data-theme="dark"] .easepick-wrapper,
.dark-mode .easepick-wrapper {
    --color-bg-default: #252525 !important;
    --color-bg-secondary: #1e1e1e !important;
    --color-fg-default: #f5f5f5 !important;
    --color-fg-primary: #c9a869 !important;
    --color-fg-secondary: #b0b0b0 !important;
    --color-fg-selected: #0f0f0f !important;
    --color-fg-muted: #666 !important;
    --color-border-default: #444 !important;
    --color-border-locked: #333 !important;
    --white-color: #252525 !important;
    --black-color: #f5f5f5 !important;
    --lightgray-color: #2a2a2a !important;
    background: #252525 !important;
    border-color: rgba(200, 169, 126, 0.3) !important;
}

/* Calendar container - dark mode */
[data-theme="dark"] .easepick-wrapper .container,
[data-theme="dark"] .easepick-wrapper .container.inline,
.dark-mode .easepick-wrapper .container,
.dark-mode .easepick-wrapper .container.inline {
    background: #252525 !important;
    border-color: rgba(200, 169, 126, 0.2) !important;
}

[data-theme="dark"] .easepick-wrapper .container > main,
.dark-mode .easepick-wrapper .container > main {
    background: #252525 !important;
}

[data-theme="dark"] .easepick-wrapper .container > header,
[data-theme="dark"] .easepick-wrapper .container > footer,
.dark-mode .easepick-wrapper .container > header,
.dark-mode .easepick-wrapper .container > footer {
    background: #1e1e1e !important;
    border-color: #333 !important;
}

/* Calendar header (month/year) - dark mode */
[data-theme="dark"] .easepick-wrapper .calendar-header,
[data-theme="dark"] .easepick-wrapper .header,
.dark-mode .easepick-wrapper .calendar-header,
.dark-mode .easepick-wrapper .header {
    background: #1e1e1e !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .easepick-wrapper .month-name,
.dark-mode .easepick-wrapper .month-name {
    color: #f5f5f5 !important;
}

[data-theme="dark"] .easepick-wrapper .button-next-month,
[data-theme="dark"] .easepick-wrapper .button-previous-month,
.dark-mode .easepick-wrapper .button-next-month,
.dark-mode .easepick-wrapper .button-previous-month {
    color: #c9a869 !important;
    background: transparent !important;
}

[data-theme="dark"] .easepick-wrapper .button-next-month:hover,
[data-theme="dark"] .easepick-wrapper .button-previous-month:hover,
.dark-mode .easepick-wrapper .button-next-month:hover,
.dark-mode .easepick-wrapper .button-previous-month:hover {
    background: rgba(200, 169, 126, 0.15) !important;
}

/* Day names (Mon, Tue, etc) - dark mode */
[data-theme="dark"] .easepick-wrapper .daynames-row,
[data-theme="dark"] .easepick-wrapper .day-name,
.dark-mode .easepick-wrapper .daynames-row,
.dark-mode .easepick-wrapper .day-name {
    color: #888 !important;
    background: transparent !important;
}

/* Calendar days - dark mode */
[data-theme="dark"] .easepick-wrapper .day,
.dark-mode .easepick-wrapper .day {
    color: #f5f5f5 !important;
    background: transparent !important;
}

[data-theme="dark"] .easepick-wrapper .day:hover:not(.locked):not(.selected),
.dark-mode .easepick-wrapper .day:hover:not(.locked):not(.selected) {
    background: rgba(200, 169, 126, 0.2) !important;
    color: #c9a869 !important;
}

[data-theme="dark"] .easepick-wrapper .day.selected,
[data-theme="dark"] .easepick-wrapper .day.start,
[data-theme="dark"] .easepick-wrapper .day.end,
.dark-mode .easepick-wrapper .day.selected,
.dark-mode .easepick-wrapper .day.start,
.dark-mode .easepick-wrapper .day.end {
    background: #c9a869 !important;
    color: #0f0f0f !important;
}

[data-theme="dark"] .easepick-wrapper .day.in-range,
.dark-mode .easepick-wrapper .day.in-range {
    background: rgba(200, 169, 126, 0.25) !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .easepick-wrapper .day.locked,
.dark-mode .easepick-wrapper .day.locked {
    color: #555 !important;
    background: #1a1a1a !important;
}

[data-theme="dark"] .easepick-wrapper .day.today,
.dark-mode .easepick-wrapper .day.today {
    color: #c9a869 !important;
    font-weight: 600;
}

/* Booking steps */
.booking-steps {
    border-color: var(--border-color);
}

.booking-step {
    color: var(--text-secondary);
}

.booking-step .step-num {
    background: rgba(200, 169, 126, 0.15);
    color: var(--brand-gold);
}

/* Availability result box */
#availabilityResult {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light);
}

#availabilityResult,
#availabilityContent {
    color: var(--text-primary);
}

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

/* ============================================
   Buttons
   ============================================ */
.btn_1 {
    background: var(--brand-gold);
    color: var(--text-inverse);
    border: 2px solid var(--brand-gold);
}

.btn_1:hover {
    background: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
    color: var(--text-inverse);
}

.btn_1.outline {
    background: transparent;
    color: var(--brand-gold);
    border-color: var(--brand-gold);
}

.btn_1.outline:hover {
    background: var(--brand-gold);
    color: var(--text-inverse);
}

/* Dark mode specific for outline buttons */
[data-theme="dark"] .btn_1.outline,
.dark-mode .btn_1.outline {
    color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    background: transparent !important;
}

[data-theme="dark"] .btn_1.outline:hover,
.dark-mode .btn_1.outline:hover {
    background: var(--brand-gold) !important;
    color: #0f0f0f !important;
}

.btn-primary {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
}

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

.btn-outline-primary:hover {
    background: var(--brand-gold);
    color: var(--text-inverse);
}

.btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.btn-light {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* ============================================
   Marquee Section
   ============================================ */
.marquee {
    background: var(--bg-secondary);
}

.marquee .track .content {
    color: var(--text-muted);
}

/* ============================================
   Title / Intro Section
   ============================================ */
.title small {
    color: var(--brand-gold);
}

.intro p {
    color: var(--text-secondary);
}

.intro .lead {
    color: var(--text-primary);
}

/* ============================================
   Phone Element
   ============================================ */
.phone_element span {
    color: var(--text-primary);
}

.phone_element span em {
    color: var(--text-muted);
}

/* ============================================
   Modal Styles (My Bookings Modal)
   ============================================ */
.modal-content {
    background: var(--bg-card) !important;
    color: var(--text-primary);
    border-color: var(--border-light);
}

.modal-header {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
}

.modal-header .modal-title {
    color: var(--text-primary);
}

.modal-body {
    background: var(--bg-card);
    color: var(--text-primary);
}

.modal-footer {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
}

/* Booking modal specific */
.booking-modal .modal-content {
    background: var(--bg-card) !important;
}

.booking-modal .modal-body {
    background: var(--bg-card);
}

.booking-modal .modal-icon {
    background: var(--bg-tertiary);
    color: var(--brand-gold);
}

.booking-modal .modal-title-text {
    color: var(--text-heading);
}

.booking-modal .form-input-custom {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.booking-modal .form-input-custom:focus {
    border-color: var(--brand-gold) !important;
}

.booking-modal .form-input-custom::placeholder {
    color: var(--text-muted) !important;
}

.booking-modal .error-box {
    background: rgba(220, 53, 69, 0.1);
    color: #ff6b6b;
}

.booking-modal .submit-btn {
    background: var(--text-heading);
    color: var(--bg-primary);
}

.booking-modal .submit-btn:hover:not(:disabled) {
    background: var(--text-secondary);
}

.booking-modal .modal-footer-text {
    color: var(--text-muted);
}

.booking-modal .modal-footer-text a {
    color: var(--brand-gold);
}

.booking-modal .close-x {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.booking-modal .close-x:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

/* Dark mode close button invert */
.dark-mode .modal-header .btn-close,
[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1);
}

/* ============================================
   Popup Advertise Modal (popup_wrapper)
   ============================================ */
.popup_wrapper .popup_content {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.popup_wrapper .popup_content .content {
    background: var(--bg-card) !important;
}

.popup_wrapper .popup_content h3 {
    color: var(--text-heading) !important;
}

.popup_wrapper .popup_content p {
    color: var(--text-secondary) !important;
}

.popup_wrapper .popup_close {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

.popup_wrapper .popup_close:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Dark mode specific adjustments */
.dark-mode .popup_wrapper .popup_content,
[data-theme="dark"] .popup_wrapper .popup_content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .popup_wrapper .popup_content figure img,
[data-theme="dark"] .popup_wrapper .popup_content figure img {
    opacity: 0.9;
}

/* ============================================
   Footer
   ============================================ */
footer,
.footer {
    background: var(--bg-footer) !important;
    color: #fff;
}

/* Footer background image section */
footer .footer_bg {
    background: var(--bg-footer) !important;
}

/* Dark mode specific footer adjustments */
[data-theme="dark"] footer .footer_bg .background-image,
.dark-mode footer .footer_bg .background-image {
    opacity: 0.15 !important;
    filter: grayscale(100%) brightness(0.5) !important;
}

[data-theme="dark"] footer .footer_bg .gradient_over,
.dark-mode footer .footer_bg .gradient_over {
    background: linear-gradient(to bottom, transparent, var(--bg-footer)) !important;
}

/* Footer content */
footer .move_content {
    background: transparent !important;
}

footer h5,
.footer h5 {
    color: #fff !important;
}

footer p,
footer a,
footer ul li,
.footer p,
.footer a,
.footer ul li {
    color: rgba(255, 255, 255, 0.75) !important;
}

footer a:hover,
.footer a:hover {
    color: var(--brand-gold) !important;
}

footer .social ul li a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

footer .social ul li a:hover {
    background: var(--brand-gold) !important;
    color: #fff !important;
}

/* Footer links */
.footer_links ul li a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.footer_links ul li a:hover {
    color: var(--brand-gold) !important;
}

/* Footer copyright bar - dark mode only adjustment */
[data-theme="dark"] footer .copy,
.dark-mode footer .copy {
    background-color: #0a0a0a !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Newsletter */
#newsletter {
    background: transparent !important;
}

#newsletter input[type="email"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#newsletter input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--brand-gold) !important;
}

#newsletter button {
    color: var(--brand-gold) !important;
}

#newsletter p {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   Menu Category Cards (Menu of the Day)
   ============================================ */
.menu_category_card {
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
}

.menu_category_title {
    color: var(--brand-brown);
    border-color: var(--brand-orange);
}

.menu_item {
    border-color: var(--border-light);
}

.menu_item_name {
    color: var(--text-primary);
}

.menu_item_price {
    color: var(--brand-brown);
}

.menu_item_desc {
    color: var(--text-muted);
}

/* ============================================
   Contact Page
   ============================================ */
.contact_info {
    background: var(--bg-card);
}

.contact_row {
    color: var(--text-primary);
}

.contact_row i {
    color: var(--brand-gold);
}

.contact_row strong {
    color: var(--text-primary);
}

.contact_row span,
.contact_row a {
    color: var(--text-secondary);
}

/* ============================================
   Gallery Page
   ============================================ */
.gallery-item {
    background: var(--bg-card);
}

.gallery-caption {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ============================================
   Room List / Detail Pages
   ============================================ */
.room-card,
.box_list {
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
}

.room-card .wrapper,
.box_list .wrapper {
    background: var(--bg-card);
}

.room-card h3,
.box_list h3 {
    color: var(--text-primary);
}

.room-card .price,
.box_list .price {
    color: var(--brand-gold);
}

/* Room facilities */
.room_facilities_list ul li {
    color: var(--text-secondary);
}

/* ============================================
   Page Headers
   ============================================ */
.page-header-minimal {
    background: var(--bg-secondary);
}

.page-header-minimal h1 {
    color: var(--text-heading);
}

.page-header-minimal .breadcrumb-item a {
    color: var(--text-muted);
}

.page-header-minimal .breadcrumb-item.active {
    color: var(--text-light);
}

/* ============================================
   Tables (Scoped for Dark Mode)
   ============================================ */
[data-theme="dark"] table,
.dark-mode table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] th,
.dark-mode th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] td,
.dark-mode td {
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .table-responsive,
.dark-mode .table-responsive {
    background: var(--bg-card) !important;
}

/* ============================================
   Alerts & Notifications
   ============================================ */
.alert {
    border-color: var(--border-light);
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    color: #5cb85c;
    border-color: rgba(40, 167, 69, 0.2);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #ff6b6b;
    border-color: rgba(220, 53, 69, 0.2);
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #f0ad4e;
    border-color: rgba(255, 193, 7, 0.2);
}

.alert-info {
    background: rgba(23, 162, 184, 0.1);
    color: #5bc0de;
    border-color: rgba(23, 162, 184, 0.2);
}

/* ============================================
   Lists
   ============================================ */
.list-group-item {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-light);
}

ul li {
    color: var(--text-secondary);
}

/* ============================================
   Badges
   ============================================ */
.badge {
    color: var(--text-inverse);
}

.badge-primary,
.badge.bg-primary {
    background: var(--brand-gold) !important;
}

/* ============================================
   Miscellaneous
   ============================================ */
hr {
    border-color: var(--border-light);
}

.divider {
    background: var(--border-light);
}

blockquote {
    border-left-color: var(--brand-gold);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Scroll progress */
.scroll-progress {
    background: var(--brand-gold);
}

/* Cookie bar */
.cookie-bar {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ============================================
   Preloader
   ============================================ */
#preloader {
    background-color: var(--bg-primary);
}

[data-loader=circle-side] {
    border-color: var(--text-muted);
    border-top-color: var(--brand-gold);
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* ============================================
   Room Comparison Table & Box Features
   ============================================ */
[data-theme="dark"] .bg_white,
.dark-mode .bg_white {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .box_feat,
.dark-mode .box_feat {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .box_feat h4,
.dark-mode .box_feat h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .box_feat i,
.dark-mode .box_feat i {
    color: var(--brand-gold) !important;
}

/* ============================================
   Restaurant Menu Tabs
   ============================================ */
[data-theme="dark"] .tabs_menu .nav-tabs,
.dark-mode .tabs_menu .nav-tabs {
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .tabs_menu .nav-link,
.dark-mode .tabs_menu .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

[data-theme="dark"] .tabs_menu .nav-link.active,
.dark-mode .tabs_menu .nav-link.active {
    color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    background: var(--bg-card) !important;
}

[data-theme="dark"] .tabs_menu .card,
[data-theme="dark"] .tabs_menu .tab-pane,
.dark-mode .tabs_menu .card,
.dark-mode .tabs_menu .tab-pane {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .tabs_menu .card-header,
.dark-mode .tabs_menu .card-header {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .tabs_menu .card-header h5 a,
.dark-mode .tabs_menu .card-header h5 a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tabs_menu .card-body,
.dark-mode .tabs_menu .card-body {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .menu_item,
.dark-mode .menu_item {
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .menu_item .menu_title,
.dark-mode .menu_item .menu_title {
    background: radial-gradient(#444 40%, transparent 10%) !important;
    background-position: 0 13px !important;
    background-size: 4px 4px !important;
    background-repeat: repeat-x !important;
}

[data-theme="dark"] .menu_item .menu_title h3,
.dark-mode .menu_item .menu_title h3 {
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .menu_item .menu_title em,
.dark-mode .menu_item .menu_title em {
    color: var(--brand-gold) !important;
    background-color: var(--bg-card) !important;
}

/* Menu item figure - ensure proper z-index */
[data-theme="dark"] .menu_item figure,
.dark-mode .menu_item figure {
    z-index: 1;
}

[data-theme="dark"] .menu_item .menu_title,
.dark-mode .menu_item .menu_title {
    position: relative;
    z-index: 0;
}

[data-theme="dark"] .menu_item p,
.dark-mode .menu_item p {
    color: var(--text-secondary) !important;
}

/* ============================================
   Contact Info Card
   ============================================ */
[data-theme="dark"] .contact_info,
.dark-mode .contact_info {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .contact_info h4,
[data-theme="dark"] .contact_info h5,
[data-theme="dark"] .contact_info h6,
.dark-mode .contact_info h4,
.dark-mode .contact_info h5,
.dark-mode .contact_info h6 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .contact_info p,
.dark-mode .contact_info p {
    color: var(--text-secondary) !important;
}

/* Contact Row Dark Mode */
[data-theme="dark"] .contact_info.compact .contact_row,
.dark-mode .contact_info.compact .contact_row {
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .contact_info.compact .contact_row i,
.dark-mode .contact_info.compact .contact_row i {
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .contact_info.compact .contact_row strong,
.dark-mode .contact_info.compact .contact_row strong {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .contact_info.compact .contact_row span,
[data-theme="dark"] .contact_info.compact .contact_row a,
.dark-mode .contact_info.compact .contact_row span,
.dark-mode .contact_info.compact .contact_row a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .contact_info.compact .contact_row a:hover,
.dark-mode .contact_info.compact .contact_row a:hover {
    color: var(--brand-gold) !important;
}

/* ============================================
   Stack Cards Mobile Fix
   ============================================ */
@media (max-width: 991px) {
    [data-theme="dark"] .stack-cards__item,
    .dark-mode .stack-cards__item {
        margin-top: 100px !important; /* Prevent clash with floating header */
    }
    
    [data-theme="dark"] .facilities-process,
    .dark-mode .facilities-process {
        padding-top: 120px !important;
    }
}

/* ============================================
   Booking Page - Date Steps
   ============================================ */
[data-theme="dark"] .progress-steps,
.dark-mode .progress-steps {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .progress-steps .step,
.dark-mode .progress-steps .step {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .progress-steps .step.active,
.dark-mode .progress-steps .step.active {
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .progress-steps .step-number,
.dark-mode .progress-steps .step-number {
    background: var(--bg-input) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .progress-steps .step.active .step-number,
.dark-mode .progress-steps .step.active .step-number {
    background: var(--brand-gold) !important;
    color: #0f0f0f !important;
    border-color: var(--brand-gold) !important;
}

/* ============================================
   My Booking Page - Sidebar & Cards
   ============================================ */
[data-theme="dark"] .futuristic-sidebar,
.dark-mode .futuristic-sidebar {
    --gold: #c9a869;
    --gold-dark: #b89555;
    --gold-light: rgba(200, 169, 126, 0.3);
    --gold-pale: rgba(200, 169, 126, 0.15);
    --dark: #1e1e1e;
    --text-muted: #888;
}

[data-theme="dark"] .sidebar-container,
.dark-mode .sidebar-container {
    background: rgba(30, 30, 30, 0.95) !important;
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .sidebar-item,
.dark-mode .sidebar-item {
    color: #999 !important;
}

[data-theme="dark"] .sidebar-item:hover,
.dark-mode .sidebar-item:hover {
    color: var(--brand-gold) !important;
}

[data-theme="dark"] .sidebar-item.active,
.dark-mode .sidebar-item.active {
    color: #f5f5f5 !important;
}

[data-theme="dark"] .sidebar-tooltip,
.dark-mode .sidebar-tooltip {
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .sidebar-tooltip::before,
.dark-mode .sidebar-tooltip::before {
    border-right-color: #2a2a2a !important;
}

[data-theme="dark"] .sidebar-label,
.dark-mode .sidebar-label {
    color: #666 !important;
}

/* My Booking - Main Content Cards */
[data-theme="dark"] .booking-dashboard,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .action-row,
.dark-mode .booking-dashboard,
.dark-mode .feature-card,
.dark-mode .action-row {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

[data-theme="dark"] .booking-dashboard h1,
[data-theme="dark"] .booking-dashboard h2,
[data-theme="dark"] .booking-dashboard h3,
[data-theme="dark"] .booking-dashboard h4,
[data-theme="dark"] .booking-dashboard h5,
.dark-mode .booking-dashboard h1,
.dark-mode .booking-dashboard h2,
.dark-mode .booking-dashboard h3,
.dark-mode .booking-dashboard h4,
.dark-mode .booking-dashboard h5 {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .booking-dashboard p,
.dark-mode .booking-dashboard p {
    color: var(--text-secondary) !important;
}

/* Payment Status Badge */
[data-theme="dark"] .status-badge.paid,
[data-theme="dark"] .badge-success,
.dark-mode .status-badge.paid,
.dark-mode .badge-success {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #5cb85c !important;
}

[data-theme="dark"] .status-badge.pending,
[data-theme="dark"] .badge-warning,
.dark-mode .status-badge.pending,
.dark-mode .badge-warning {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #f0ad4e !important;
}

/* My Booking Logo */
[data-theme="dark"] .logo img,
[data-theme="dark"] .header .logo img,
.dark-mode .logo img,
.dark-mode .header .logo img {
    filter: brightness(0) invert(1);
}

/* ============================================
   Datepicker Dark Mode (Easepick) - Fallback
   ============================================ */
/* Light mode defaults for easepick wrapper */
.easepick-wrapper {
    background: #fff;
    border-color: #ededed;
    border-radius: 8px;
}

/* Dark mode fallback styles for easepick wrapper element */
[data-theme="dark"] .easepick-wrapper,
.dark-mode .easepick-wrapper {
    background: #252525 !important;
    border-color: rgba(200, 169, 126, 0.3) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Target light colored elements within easepick - dark mode only */
[data-theme="dark"] .easepick-wrapper *,
.dark-mode .easepick-wrapper * {
    border-color: #444 !important;
}

/* ============================================
   Dark Mode Toggle Button
   ============================================ */
#theme-toggle {
    position: fixed;
    right: 0;
    bottom: 160px;
    z-index: 9997;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: none;
    border-radius: 22px 0 0 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

#theme-toggle:hover {
    width: 56px;
    background: #2a2a2a;
}

.dark-mode #theme-toggle,
[data-theme="dark"] #theme-toggle {
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.dark-mode #theme-toggle:hover,
[data-theme="dark"] #theme-toggle:hover {
    background: #f0f0f0;
}

#theme-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#dark-theme-icon {
    display: none;
}

#dark-theme-icon svg {
    stroke: #1a1a1a;
}

#light-theme-icon {
    display: flex;
}

#light-theme-icon svg {
    stroke: #fff;
}

.dark-mode #dark-theme-icon,
[data-theme="dark"] #dark-theme-icon {
    display: flex;
}

.dark-mode #light-theme-icon,
[data-theme="dark"] #light-theme-icon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #dark-theme-icon {
        display: flex;
    }
    :root:not([data-theme="light"]) #light-theme-icon {
        display: none;
    }
    :root:not([data-theme="light"]) #theme-toggle {
        background: #fff;
    }
    :root:not([data-theme="light"]) #dark-theme-icon svg {
        stroke: #1a1a1a;
    }
}

/* ============================================
   Booking Page Specific
   ============================================ */
.booking-page-wrapper {
    background: var(--bg-tertiary) !important;
}

.booking-container {
    background: var(--bg-card);
}

/* Booking confirmation page */
.confirmation-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}

/* ============================================
   Pinned Image Sections
   ============================================ */
.pinned-image__container-overlay {
    background: var(--overlay-dark);
}

.pinned_over_content .title.white h2,
.pinned_over_content .title.white small {
    color: #fff;
}

/* ============================================
   Parallax Sections
   ============================================ */
.parallax_section_1 .wrapper {
    background: var(--overlay-dark);
}

/* ============================================
   Progress / Scroll to Top Button
   ============================================ */
.progress-wrap {
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-sm);
}

.progress-wrap svg.progress-circle path {
    stroke: var(--brand-gold);
}

/* ============================================
   Bootstrap Overrides for Dark Mode
   ============================================ */
.bg-white {
    background-color: var(--bg-secondary) !important;
}

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

.text-dark {
    color: var(--text-primary) !important;
}

.text-body {
    color: var(--text-primary) !important;
}

.border {
    border-color: var(--border-light) !important;
}

.border-bottom {
    border-color: var(--border-light) !important;
}

.border-top {
    border-color: var(--border-light) !important;
}

/* ============================================
   Icons
   ============================================ */
.bi {
    color: inherit;
}

i.customicon-private-parking,
i.customicon-wifi,
i.customicon-cocktail,
i.customicon-swimming-pool {
    color: var(--brand-gold);
}

/* ============================================
   Smooth Transitions (disabled by default)
   ============================================ */
.transitioning *,
.transitioning *::before,
.transitioning *::after {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease, 
                box-shadow 0.3s ease !important;
}