/**
 * BOOKING THEME CSS
 * 
 * Color schemes, dark mode, and theme variations
 * Depends on: booking-base.css
 * 
 * Version: 1.0
 * Last Updated: 2025-01-06
 */

/* ==========================================================================
   LIGHT THEME (DEFAULT)
   ========================================================================== */

[data-theme="light"],
:root {
    /* Primary Colors - Use global design system */
    /* Note: booking-base.css already defines these as aliases to global variables */
    /* This section is kept for backward compatibility but should eventually be removed */
    
    /* Semantic Colors - Use global design system */
    --booking-success: var(--success-color);
    --booking-success-bg: rgba(46, 204, 113, 0.1);
    --booking-warning: var(--warning-color);
    --booking-warning-bg: rgba(243, 156, 18, 0.1);
    --booking-error: var(--error-color);
    --booking-error-bg: rgba(231, 76, 60, 0.1);
    --booking-info: var(--info-color);
    --booking-info-bg: rgba(52, 152, 219, 0.1);
    
    /* Backgrounds - Use global design system */
    --booking-background: var(--color-background);
    --booking-surface: var(--color-background-secondary);
    --booking-surface-hover: var(--color-background-tertiary);
    
    /* Borders - Use global design system */
    --booking-border: var(--color-border);
    --booking-border-hover: var(--gray-400);
    --booking-border-focus: var(--primary-color);
    
    /* Text - Use global design system */
    --booking-text-primary: var(--color-text-primary);
    --booking-text-secondary: var(--color-text-secondary);
    --booking-text-muted: var(--gray-600);
    --booking-text-inverse: var(--color-white);
    
    /* Shadows - Use global design system */
    --booking-shadow-color: rgba(0, 0, 0, 0.1);
    --booking-shadow-sm: var(--shadow-sm);
    --booking-shadow-md: var(--shadow-md);
    --booking-shadow-lg: var(--shadow-lg);
    --booking-shadow-xl: var(--shadow-xl);
    
    /* Overlays */
    --booking-overlay-bg: rgba(0, 0, 0, 0.5);
    --booking-overlay-light: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   BOOKING PAGE BACKGROUNDS - Theme-consistent backgrounds
   ========================================================================== */

html[data-theme="light"],
html[data-theme="light"] body,
body.booking-page,
html[data-theme="light"] body.booking-page {
    background-color: var(--color-background, #ffffff) !important;
    background: var(--color-background, #ffffff) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.booking-page {
    background-color: var(--color-background) !important;
    background: var(--color-background) !important;
}

.site-main.booking-page,
.site-main .booking-process-container {
    background-color: transparent !important;
    background: transparent !important;
}

.booking-process-container {
    background: var(--booking-background, #ffffff) !important;
    background-color: var(--booking-background, #ffffff) !important;
}

[data-theme="dark"] .booking-process-container {
    background: var(--color-background) !important;
    background-color: var(--color-background) !important;
}

.booking-container {
    background-color: transparent !important;
    background: transparent !important;
}

html, body {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {
    /* Primary Colors - Use global design system (booking-base.css handles aliases) */
    
    /* Semantic Colors - Use global design system with darker blues for dark mode */
    --booking-success: var(--success-color);
    --booking-success-bg: rgba(46, 204, 113, 0.2);
    --booking-warning: var(--warning-color);
    --booking-warning-bg: rgba(243, 156, 18, 0.2);
    --booking-error: var(--error-color);
    --booking-error-bg: rgba(231, 76, 60, 0.2);
    /* Dark gray for dark mode - match property detail page */
    --booking-info: var(--color-text-secondary, #6b7280); /* Dark gray instead of blue */
    --booking-info-bg: rgba(55, 65, 81, 0.25); /* Dark gray background */
    
    /* Backgrounds - Use global design system */
    --booking-background: var(--color-background);
    --booking-surface: var(--color-background-secondary);
    --booking-surface-hover: var(--color-background-tertiary);
    
    /* Borders - Use global design system */
    --booking-border: var(--color-border);
    --booking-border-hover: var(--gray-400);
    --booking-border-focus: var(--primary-color);
    
    /* Text - Use global design system */
    --booking-text-primary: var(--color-text-primary);
    --booking-text-secondary: var(--color-text-secondary);
    --booking-text-muted: var(--gray-600);
    --booking-text-inverse: var(--color-dark-bg);
    
    /* Shadows - Use global design system */
    --booking-shadow-color: rgba(0, 0, 0, 0.3);
    --booking-shadow-sm: var(--shadow-sm);
    --booking-shadow-md: var(--shadow-md);
    --booking-shadow-lg: var(--shadow-lg);
    --booking-shadow-xl: var(--shadow-xl);
    
    /* Overlays */
    --booking-overlay-bg: rgba(0, 0, 0, 0.7);
    --booking-overlay-light: rgba(30, 41, 59, 0.95);
}

/* ==========================================================================
   DARK MODE COMPONENT OVERRIDES
   ========================================================================== */

[data-theme="dark"] .booking-process-container {
    background: var(--booking-background);
    color: var(--booking-text-primary);
}

[data-theme="dark"] .booking-card {
    background: var(--booking-surface);
    border-color: var(--booking-border);
}

[data-theme="dark"] .booking-input,
[data-theme="dark"] .booking-select,
[data-theme="dark"] .booking-textarea {
    background: var(--booking-surface);
    border-color: var(--booking-border);
    color: var(--booking-text-primary);
}

[data-theme="dark"] .booking-input:focus,
[data-theme="dark"] .booking-select:focus,
[data-theme="dark"] .booking-textarea:focus {
    border-color: var(--accent-color, #d4af37) !important; /* Gold accent like property detail */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

[data-theme="dark"] .booking-btn-secondary {
    background: var(--booking-surface);
    color: var(--booking-text-primary);
    border-color: var(--booking-border);
}

[data-theme="dark"] .booking-btn-secondary:hover {
    background: var(--booking-surface-hover);
    border-color: var(--booking-border-hover);
}

[data-theme="dark"] .property-quick-info {
    background: var(--booking-surface);
}

[data-theme="dark"] .info-icon {
    background: rgba(212, 175, 55, 0.2) !important; /* Gold background like property detail */
    color: var(--accent-color, #d4af37) !important; /* Gold icon */
}

[data-theme="dark"] .progress-step .step-circle {
    background: var(--booking-surface);
    border-color: var(--booking-border);
}

[data-theme="dark"] .progress-line {
    background: var(--booking-border);
}

/* ==========================================================================
   THEME TRANSITIONS
   ========================================================================== */

/* Smooth transitions when switching themes */
[data-theme] * {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: var(--booking-transition-base);
    transition-timing-function: ease-out;
}

/* ==========================================================================
   AUTO DARK MODE (System Preference)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Apply dark theme variables - match property detail page */
        --booking-primary: var(--color-text-secondary, #6b7280); /* Dark gray */
        --booking-primary-hover: var(--accent-color, #d4af37); /* Gold on hover */
        --booking-primary-light: var(--color-text-secondary, #9ca3af);
        --booking-primary-dark: var(--color-dark-border, #374151);
        --booking-primary-bg: rgba(55, 65, 81, 0.2);
        
        --booking-success: #34d399;
        --booking-success-bg: #064e3b;
        --booking-warning: #fbbf24;
        --booking-warning-bg: #78350f;
        --booking-error: #f87171;
        --booking-error-bg: #7f1d1d;
        --booking-info: var(--color-text-secondary, #6b7280); /* Dark gray instead of blue */
        --booking-info-bg: rgba(55, 65, 81, 0.25); /* Dark gray background */
        
        --booking-background: #0f172a;
        --booking-surface: #1e293b;
        --booking-surface-hover: #334155;
        
        --booking-border: #334155;
        --booking-border-hover: #475569;
        --booking-border-focus: var(--booking-primary);
        
        --booking-text-primary: #f1f5f9;
        --booking-text-secondary: #cbd5e1;
        --booking-text-muted: #94a3b8;
        --booking-text-inverse: #0f172a;
        
        --booking-shadow-color: rgba(0, 0, 0, 0.3);
        --booking-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --booking-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --booking-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        --booking-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
        
        --booking-overlay-bg: rgba(0, 0, 0, 0.7);
        --booking-overlay-light: rgba(30, 41, 59, 0.95);
    }
}

/* ==========================================================================
   CUSTOM COLOR THEMES
   ========================================================================== */

/* Blue Theme (Default) - Already defined in root */

/* Green Theme */
[data-theme-color="green"] {
    --booking-primary: #10b981;
    --booking-primary-hover: #059669;
    --booking-primary-light: #34d399;
    --booking-primary-dark: #047857;
    --booking-primary-bg: #d1fae5;
}

/* Purple Theme */
[data-theme-color="purple"] {
    --booking-primary: #8b5cf6;
    --booking-primary-hover: #7c3aed;
    --booking-primary-light: #a78bfa;
    --booking-primary-dark: #6d28d9;
    --booking-primary-bg: #ede9fe;
}

/* Red Theme */
[data-theme-color="red"] {
    --booking-primary: #ef4444;
    --booking-primary-hover: #dc2626;
    --booking-primary-light: #f87171;
    --booking-primary-dark: #b91c1c;
    --booking-primary-bg: #fee2e2;
}

/* Indigo Theme */
[data-theme-color="indigo"] {
    --booking-primary: #6366f1;
    --booking-primary-hover: #4f46e5;
    --booking-primary-light: #818cf8;
    --booking-primary-dark: #4338ca;
    --booking-primary-bg: #e0e7ff;
}

/* ==========================================================================
   ACCESSIBILITY COLOR ADJUSTMENTS
   ========================================================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --booking-border: #000000;
        --booking-text-muted: #374151;
        --booking-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        --booking-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }
    
    [data-theme="dark"] {
        --booking-border: #ffffff;
        --booking-text-muted: #e5e7eb;
    }
}

/* Reduced Transparency */
@media (prefers-reduced-transparency) {
    :root {
        --booking-overlay-bg: #000000;
        --booking-overlay-light: #ffffff;
    }
    
    [data-theme="dark"] {
        --booking-overlay-bg: #000000;
        --booking-overlay-light: #1e293b;
    }
}

/* ==========================================================================
   THEME TOGGLE COMPONENT
   ========================================================================== */

.theme-toggle {
    position: fixed;
    bottom: var(--booking-space-xl);
    right: var(--booking-space-xl);
    z-index: 1000;
}

.theme-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--booking-radius-full);
    background: var(--booking-surface);
    border: 2px solid var(--booking-border);
    color: var(--booking-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--booking-transition-base);
    box-shadow: var(--booking-shadow-lg);
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--booking-shadow-xl);
}

.theme-toggle-btn i {
    font-size: var(--booking-text-xl);
}

/* Hide theme toggle on mobile */
@media (max-width: 767px) {
    .theme-toggle {
        display: none;
    }
}