:root {
    /* ============================================================================= */
    /* SITE-WIDE COLORS (Used across all QikApp files) */
    /* ============================================================================= */
    
    /* Brand Colors */
    --oe-primary: #EB5D19;
    --oe-secondary: #258cfb;
    --oe-blue: #5773FF;
    --oe-red: #FF0000;
    --green-1: #0ED145;
    --orange-1: #EB5D19;
    
    /* QikApp Specific Colors */
    --qikapp-primary-blue: #5773FF;
    --qikapp-secondary-blue: #258cfb;
    --qikapp-blue-hover: #4c63d7;
    --qikapp-blue-light: #007bff;
    --qikapp-blue-dark: #1a6ec7;
    
    /* Status Colors */
    --status-success: #28a745;
    --status-success-light: #0ED145;
    --status-error: #dc3545;
    --status-error-dark: #c82333;
    --status-warning: #ffbd59;
    --status-info: #5773FF;
    
    /* Charge Level Colors */
    --charge-high: #5773FF;
    --charge-medium: #ffbd59;
    --charge-low: #FF0000;
    --charge-complete: #0ED145;
    
    /* Background & Card Colors */
    --background: #fefefe;
    --background-light: #fcfcfc;
    --cards-1: #f5f5f5;
    --cards-2: #ffffff;
    --cards-2-hover: #ddd;
    --cards-3: #eaeaea;
    --cards-4: #e0e0e0;
    --cards-grey-light: #f8f9fa;
    --cards-grey-medium: #e9ecef;
    
    /* Text Colors */
    --text-1: #111111;
    --text-2: #666666;
    --text-3: #555555;
    --text-4: #999999;
    --text-light: #f1f1f1;
    --text-white: #ffffff;
    --text-dark: #333333;
    --text-medium: #495057;
    --text-error: #721c24;
    --text-success: #155724;
    --text-danger: #721c24;
    --text-muted: #6c757d;
    
    /* Grey Scale */
    --grey-1: #9b9b9b;
    --grey-2: #cccccc;
    --grey-3: #eeeeee;
    --grey-4: #dee2e6;
    --grey-5: #e9ecef;
    --grey-dark: #212529;
    
    /* Border Colors */
    --border-light: #eeeeee;
    --border-medium: #cccccc;
    --border-medium-grey: #ccc;
    --border-success: #c3e6cb;
    --border-danger: #f5c6cb;
    --border-white: #ffffff;
    --border-white-transparent: rgba(255, 255, 255, 0.2);
    
    /* Background Colors for Alerts/Notifications */
    --bg-success: #d4edda;
    --bg-danger: #f8d7da;
    --bg-warning: #fff3cd;
    --bg-info: rgba(87, 115, 255, 0.1);
    --bg-light: #f8f9fa;
    
    /* Button Colors */
    --btn-primary: #5773FF;
    --btn-primary-hover: #4c63d7;
    --btn-secondary: #6c757d;
    --btn-secondary-hover: #5c5c5c;
    --btn-danger: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-success: #28a745;
    --btn-success-hover: #218838;
    --btn-focus-shadow: rgba(87, 115, 255, 0.25);
    
    /* Transparency Colors */
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-backdrop: rgba(0, 0, 0, 0.4);
    --overlay-modal: rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(0, 0, 0, 0.7);
    
    /* Site-wide Shadows */
    --shadow-1: rgba(0, 0, 0, 0.1);
    --shadow-2: rgba(0, 0, 0, 0.2);
    --shadow-3: rgba(0, 0, 0, 0.3);
    --shadow-4: rgba(0, 0, 0, 0.15);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* ============================================================================= */
    /* QIKAPP SPECIFIC SPACING VARIABLES (For Help, Account, SessionHistory pages) */
    /* ============================================================================= */
    
    /* Container Padding */
    --qikapp-padding-container: 20px;
    --qikapp-padding-section: 20px;
    --qikapp-padding-card: 16px;
    --qikapp-padding-small: 12px;
    --qikapp-padding-tiny: 8px;
    
    /* Container Gaps */
    --qikapp-gap-container: 20px;
    --qikapp-gap-section: 25px;
    --qikapp-gap-cards: 20px;
    --qikapp-gap-medium: 16px;
    --qikapp-gap-small: 12px;
    --qikapp-gap-tiny: 8px;
    
    /* Form Spacing */
    --qikapp-form-gap: 20px;
    --qikapp-form-group-gap: 6px;
    --qikapp-form-padding: 12px 16px;
    --qikapp-form-padding-small: 10px 14px;
    --qikapp-form-padding-tiny: 8px 12px;
    
    /* Button Spacing */
    --qikapp-btn-padding: 12px 20px;
    --qikapp-btn-padding-small: 10px 16px;
    --qikapp-btn-padding-tiny: 8px 12px;
    --qikapp-btn-gap: 12px;
    
    /* ============================================================================= */
    /* QIKAPP SPECIFIC BORDER VARIABLES (For Help, Account, SessionHistory pages) */
    /* ============================================================================= */
    
    /* Border Radius */
    --qikapp-radius-card: 8px;
    --qikapp-radius-small: 6px;
    --qikapp-radius-tiny: 4px;
    --qikapp-radius-round: 50%;
    --qikapp-radius-large: 12px;
    
    /* Border Widths */
    --qikapp-border-thin: 1px;
    --qikapp-border-medium: 2px;
    --qikapp-border-thick: 3px;
    --qikapp-border-heavy: 4px;
    
    /* Box Shadows */
    --qikapp-shadow-card: 0 2px 4px var(--shadow-1);
    --qikapp-shadow-card-hover: 0 4px 8px var(--shadow-2);
    --qikapp-shadow-button: 0 4px 8px var(--shadow-1);
    --qikapp-shadow-input-focus: 0 0 0 3px var(--btn-focus-shadow);
    
    /* ============================================================================= */
    /* CHECKOUT MODAL SPECIFIC VARIABLES */
    /* ============================================================================= */
    
    /* Modal Colors */
    --modal-bg: var(--cards-2);
    --modal-overlay: var(--overlay-modal);
    --modal-text: var(--text-dark);
    --modal-border: var(--border-light);
    
    /* Modal Spacing */
    --modal-padding: 2rem;
    --modal-padding-small: 1.5rem;
    --modal-padding-tiny: 1rem;
    --modal-border-radius: 10px;
    
    /* Modal Button Colors */
    --modal-btn-back: var(--btn-secondary);
    --modal-btn-back-hover: var(--btn-secondary-hover);
    --modal-btn-confirm: var(--qikapp-primary-blue);
    --modal-btn-confirm-hover: var(--qikapp-blue-hover);
    
    /* ============================================================================= */
    /* TRANSITIONS AND ANIMATIONS */
    /* ============================================================================= */
    
    /* Standard Transitions */
    --transition-fast: all 0.2s ease;
    --transition-medium: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --transition-transform: transform 0.2s ease;
    
    /* Hover Effects */
    --hover-scale: 1.05;
    --hover-lift: translateY(-1px);
    --hover-lift-medium: translateY(-2px);
    
    /* ============================================================================= */
    /* RESPONSIVE BREAKPOINTS (For reference) */
    /* ============================================================================= */
    
    /* Mobile First Breakpoints */
    --mobile-small: 320px;
    --mobile-medium: 375px;
    --mobile-large: 425px;
    --tablet: 768px;
    --desktop: 1024px;
    --desktop-large: 1440px;
}

/* ============================================================================= */
/* DARK MODE STYLES */
/* ============================================================================= */

[data-dark-mode="enabled"] {
    /* ============================================================================= */
    /* DARK MODE COLOR OVERRIDES */
    /* ============================================================================= */
    

    --oe-primary: #d0d0ef;
    /* Background & Card Colors */
    --background: #0f1419;
    --background-light: #1a1f26;
    --cards-1: #1a1f26;
    --cards-2: #242b34;
    --cards-2-hover: #2e3740;
    --cards-3: #363d48;
    --cards-4: #404954;
    --cards-grey-light: var(--cards-2);
    --cards-grey-medium: var(--cards-4);
    
    /* Text Colors */
    --text-1: #ffffff;
    --text-2: #cccccc;
    --text-3: #aaaaaa;
    --text-4: #888888;
    --text-dark: #ffffff;
    --text-medium: #cccccc;
    --text-muted: #888888;
    
    /* Grey Scale */
    --grey-1: #666666;
    --grey-2: #555555;
    --grey-3: #444444;
    --grey-4: #4a4a4a;
    --grey-5: #404040;
    --grey-dark: #ffffff;
    
    /* Border Colors */
    --border-light: #444444;
    --border-medium: #666666;
    --border-medium-grey: #666666;
    --border-white: #ffffff;
    --border-white-transparent: rgba(255, 255, 255, 0.2);
    
    /* Background Colors for Alerts/Notifications */
    --bg-light: #2d2d2d;
    --bg-info: rgba(87, 115, 255, 0.2);
    
    /* Transparency Colors */
    --overlay-dark: rgba(0, 0, 0, 0.9);
    --overlay-light: rgba(255, 255, 255, 0.2);
    --overlay-backdrop: rgba(0, 0, 0, 0.7);
    --overlay-modal: rgba(0, 0, 0, 0.8);
    --glass-bg: rgba(0, 0, 0, 0.7);
    --glass-bg-dark: rgba(0, 0, 0, 0.9);
    
    /* Site-wide Shadows */
    --shadow-1: rgba(0, 0, 0, 0.3);
    --shadow-2: rgba(0, 0, 0, 0.4);
    --shadow-3: rgba(0, 0, 0, 0.5);
    --shadow-4: rgba(0, 0, 0, 0.3);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Body Styling */
[data-dark-mode="enabled"] body {
    background-color: var(--background);
    color: var(--text-1);
}

/* Dark Mode Input Styling */
[data-dark-mode="enabled"] input,
[data-dark-mode="enabled"] select,
[data-dark-mode="enabled"] textarea {
    background-color: var(--cards-2);
    color: var(--text-1);
    border-color: var(--border-medium);
}

[data-dark-mode="enabled"] input:focus,
[data-dark-mode="enabled"] select:focus,
[data-dark-mode="enabled"] textarea:focus {
    background-color: var(--cards-2);
    color: var(--text-1);
    border-color: var(--qikapp-primary-blue);
}

/* Dark Mode Navigation */
[data-dark-mode="enabled"] .navbar {
    background-color: var(--background) !important;
}

[data-dark-mode="enabled"] .navbar .nav-link {
    color: var(--text-2) !important;
}

[data-dark-mode="enabled"] .navbar .nav-link:hover {
    color: var(--text-1) !important;
}

/* Dark Mode Header */
[data-dark-mode="enabled"] .header {
    background-color: var(--cards-1);
    border-bottom: 1px solid var(--border-light);
}

/* Dark Mode Modal Overrides */
[data-dark-mode="enabled"] .modal-content {
    background-color: var(--cards-2);
    border-color: var(--border-medium);
}

[data-dark-mode="enabled"] .modal-header {
    background-color: var(--cards-1);
    border-bottom-color: var(--border-light);
}

[data-dark-mode="enabled"] .modal-body {
    background-color: var(--cards-2);
    color: var(--text-1);
}

[data-dark-mode="enabled"] .modal-footer {
    background-color: var(--cards-1);
    border-top-color: var(--border-light);
}

/* Dark Mode Form Controls */
[data-dark-mode="enabled"] .form-control {
    background-color: var(--cards-2);
    border-color: var(--border-medium);
    color: var(--text-1);
}

[data-dark-mode="enabled"] .form-control:focus {
    background-color: var(--cards-2);
    border-color: var(--qikapp-primary-blue);
    color: var(--text-1);
    box-shadow: var(--qikapp-shadow-input-focus);
}

[data-dark-mode="enabled"] .form-control::placeholder {
    color: var(--text-3);
}

[data-dark-mode="enabled"] .form-control:read-only {
    background-color: var(--cards-1);
    color: var(--text-3);
}

/* Dark Mode Alerts */
[data-dark-mode="enabled"] .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.3);
    color: #90ee90;
}

[data-dark-mode="enabled"] .alert-info {
    background-color: var(--bg-info);
    border-color: rgba(87, 115, 255, 0.3);
    color: #87ceeb;
}

[data-dark-mode="enabled"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ffb3b3;
}

/* Dark Mode Tour Dots */
[data-dark-mode="enabled"] .tour-page-dot {
    background-color: var(--grey-2);
}

[data-dark-mode="enabled"] .tour-page-dot:hover {
    background-color: var(--grey-1);
}

/* Dark Mode Pagination */
[data-dark-mode="enabled"] .splide__pagination__page {
    background: var(--grey-2) !important;
}

[data-dark-mode="enabled"] .splide__pagination__page:hover {
    background-color: var(--grey-1) !important;
}

/* Dark Mode Session Info */
[data-dark-mode="enabled"] .session-info {
    background-color: var(--cards-2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Return Prompt */
[data-dark-mode="enabled"] .return-prompt {
    background-color: var(--cards-1);
    color: var(--text-3);
}


/* Dark Mode Camera Error Container */
[data-dark-mode="enabled"] .camera-error-container {
    background: rgba(54, 54, 54, 0.95);
    border-color: var(--border-medium);
}

/* Dark Mode Preset Time Buttons */
[data-dark-mode="enabled"] .preset-time-btn {
    background: var(--cards-2);
    border-color: var(--border-medium);
    color: var(--text-1);
}

[data-dark-mode="enabled"] .preset-time-btn:hover {
    background-color: var(--bg-info);
    border-color: var(--qikapp-primary-blue);
}

/* Dark Mode Manual Entry */
[data-dark-mode="enabled"] .manual-entry-container {
    background-color: var(--cards-1);
    border-color: var(--border-medium);
}

[data-dark-mode="enabled"] .manual-id-input {
    background: var(--cards-2);
    border-color: var(--border-medium);
    color: var(--text-1);
}

/* Dark Mode Time Selection */
[data-dark-mode="enabled"] .time-selection-container {
    background-color: var(--cards-1);
    border-color: var(--border-medium);
}

[data-dark-mode="enabled"] .selected-time-display {
    background: var(--bg-info);
    border-color: rgba(87, 115, 255, 0.3);
}

/* Dark Mode Error Message */
[data-dark-mode="enabled"] .error-message-container {
    background-color: var(--cards-1);
    border-left-color: var(--status-error);
}

/* Dark Mode FAQ Items */
[data-dark-mode="enabled"] .faq-item {
    background: var(--cards-2);
    border-color: var(--border-light);
}

[data-dark-mode="enabled"] .faq-header {
    background: var(--cards-2);
    color: var(--text-1);
}

[data-dark-mode="enabled"] .faq-header:hover {
    background: var(--cards-1);
}

[data-dark-mode="enabled"] .faq-item input[type="checkbox"]:checked ~ .faq-header {
    background: var(--qikapp-primary-blue);
    color: var(--text-white);
}

[data-dark-mode="enabled"] .faq-content p {
    background: var(--cards-1);
    color: var(--text-2);
}

/* Dark Mode Contact Items */
[data-dark-mode="enabled"] .contact-item {
    background: var(--cards-2);
    border-color: var(--border-light);
}

/* Dark Mode Step Cards */
[data-dark-mode="enabled"] .step-card {
    background: var(--cards-2);
    border-left-color: var(--oe-blue);
}

/* Dark Mode Pickup Steps */
[data-dark-mode="enabled"] .pickup-step {
    border-color: var(--border-medium);
}

/* Dark Mode Spinner */
[data-dark-mode="enabled"] .spinner {
    border-color: var(--border-medium);
    border-top-color: var(--oe-primary);
}

/* Dark Mode Table Styling */
[data-dark-mode="enabled"] .sessions-table {
    background: var(--cards-2);
}

[data-dark-mode="enabled"] .sessions-table thead {
    background-color: var(--cards-1);
}

[data-dark-mode="enabled"] .sessions-table thead th {
    background: var(--cards-1);
    color: var(--text-1);
    border-bottom-color: var(--border-medium);
}

[data-dark-mode="enabled"] .sessions-table tbody tr {
    border-bottom-color: var(--border-light);
}

[data-dark-mode="enabled"] .sessions-table tbody tr:hover {
    background-color: var(--cards-1);
}

[data-dark-mode="enabled"] .sessions-table tbody td {
    border-bottom-color: var(--border-light);
    color: var(--text-1);
}

/* Dark Mode Avatar */
[data-dark-mode="enabled"] .avatar-container {
    background-color: var(--cards-2);
    border-color: var(--qikapp-primary-blue);
}

/* Dark Mode Big Icon */
[data-dark-mode="enabled"] .big-icon {
    color: var(--grey-2);
}

/* Dark Mode Scrollbars */
[data-dark-mode="enabled"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-dark-mode="enabled"] ::-webkit-scrollbar-track {
    background: var(--cards-1);
    border-radius: 4px;
}

[data-dark-mode="enabled"] ::-webkit-scrollbar-thumb {
    background: var(--grey-2);
    border-radius: 4px;
    border: 1px solid var(--cards-1);
}

[data-dark-mode="enabled"] ::-webkit-scrollbar-thumb:hover {
    background: var(--grey-1);
}

[data-dark-mode="enabled"] ::-webkit-scrollbar-thumb:active {
    background: var(--oe-primary);
}

[data-dark-mode="enabled"] ::-webkit-scrollbar-corner {
    background: var(--cards-1);
}