/**
 * THEME CUSTOMIZATION FILE
 * 
 * This CSS file overrides the default theme colors and styles.
 * Include this file AFTER the main CSS to apply customizations.
 * 
 * Usage: Add this line to your HTML:
 * <link rel="stylesheet" href="theme.css">
 * 
 * IMPORTANT: This file uses CSS custom properties (variables) for easy customization.
 * Change the values in the :root section to update colors throughout the app.
 */

:root {
  /* ============================================
     PRIMARY COLORS - KAYAK Orange Theme
     ============================================ */
  --color-primary: #ff6600;
  --color-primary-dark: #e65c00;
  --color-primary-light: #ff8533;
  
  /* ============================================
     ACCENT COLORS
     ============================================ */
  --color-accent: #ff6600;
  --color-accent-alt: #ff8533;
  --color-accent-hover: #e65c00;
  
  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  --color-bg: #f7f7f7;
  --color-bg-alt: #ffffff;
  --color-card: #ffffff;
  
  /* ============================================
     TEXT COLORS
     ============================================ */
  --color-text-primary: #1f1f1f;
  --color-text-secondary: #5a5a5a;
  --color-text-muted: #8c8c8c;
  --color-text-light: #ffffff;
  
  /* ============================================
     GRADIENT COLORS - Orange Gradient
     ============================================ */
  --gradient-start: #ff6600;
  --gradient-end: #ff8533;
  
  /* ============================================
     UI ELEMENTS
     ============================================ */
  --color-border: #e0e0e0;
  --color-border-focus: #ff6600;
  --color-shadow: rgba(0, 0, 0, 0.08);
  
  /* ============================================
     STATUS COLORS
     ============================================ */
  --color-success: #16a34a;
  --color-error: #e74c3c;
  --color-warning: #f39c12;
  --color-info: #0d6efd;
  
  /* ============================================
     FOOTER
     ============================================ */
  --color-footer-bg: #f2f4f7;
  --color-footer-text: #6b7280;
  
  /* ============================================
     LAYOUT
     ============================================ */
  --border-radius: 14px;
  --border-radius-large: 2rem;
  --container-max-width: 1200px;
  --card-max-width: 600px;
  
  /* ============================================
     SPACING
     ============================================ */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family-primary: 'Mulish', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Merriweather', serif;
  --font-family-display: 'Bree Serif', serif;
  
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xlarge: 1.25rem;
  --font-size-heading: 2rem;
  --font-size-display: 2.5rem;
}

/* ============================================
   APPLY THEME COLORS
   ============================================ */

/* Background */
html, body {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-primary) !important;
}

/* Headers with gradient */
.header-global,
#header-id,
.navbar-main {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
}

/* Cards */
.card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 8px 24px var(--color-shadow) !important;
}

.card:hover {
  border-color: var(--color-accent-alt) !important;
  box-shadow: 0 14px 30px rgba(254, 139, 113, 0.2) !important;
}

/* Buttons */
.btn-default,
.submit-btn {
  background: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-text-light) !important;
  border-radius: var(--border-radius) !important;
  font-weight: 700 !important;
}

.btn-default:hover,
.submit-btn:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Form inputs */
.form-control,
input[type="text"],
input[type="date"],
input[type="time"] {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  color: var(--color-text-primary) !important;
}

.form-control:focus,
input:focus {
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

/* Input groups */
.input-group-alternative {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
}

.input-group-alternative:focus-within {
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

/* Toggle switches */
.custom-toggle input:checked + .custom-toggle-slider {
  background: var(--color-accent) !important;
}

/* Links */
a {
  color: var(--color-primary) !important;
}

a:hover {
  color: var(--color-primary-dark) !important;
}

/* Navigation links */
.navbar-nav .nav-link,
.navbar-nav .btn.btn-link {
  color: var(--color-text-light) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .btn.btn-link:hover {
  color: var(--color-border) !important;
}

/* Footer */
.footer {
  background: var(--color-footer-bg) !important;
  color: var(--color-footer-text) !important;
}

/* Text colors */
.text-primary {
  color: var(--color-text-primary) !important;
}

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

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

/* Status messages */
.error,
.error-message {
  color: var(--color-error) !important;
  background: rgba(231, 76, 60, 0.1) !important;
  border-left: 3px solid var(--color-error) !important;
}

.success {
  color: var(--color-success) !important;
  background: rgba(22, 163, 74, 0.1) !important;
  border-left: 3px solid var(--color-success) !important;
}

.warning {
  color: var(--color-warning) !important;
  background: rgba(243, 156, 18, 0.1) !important;
  border-left: 3px solid var(--color-warning) !important;
}

/* Benefits list */
.benefits li:before {
  color: var(--color-accent) !important;
}

/* Autocomplete */
.pac-item:hover {
  background-color: rgba(255, 102, 0, 0.1) !important;
}

.pac-matched {
  color: var(--color-primary) !important;
}

/* Clear button */
.clear-button:hover {
  color: var(--color-primary) !important;
}

/* ============================================
   QUICK COLOR PRESETS
   ============================================
   Uncomment one of these sections to quickly change the theme
   ============================================ */

/* PRESET 1: KAYAK Orange (Default - ACTIVE) */
/* Already active - no changes needed */
/* This matches KAYAK's signature orange brand color */

/* PRESET 2: Professional Blue & Green */
/*
:root {
  --color-primary: #0d6efd;
  --color-primary-dark: #0a58ca;
  --color-accent: #16a34a;
  --gradient-start: #0d6efd;
  --gradient-end: #0a58ca;
  --color-bg: #f6f8fb;
  --color-text-primary: #1f2937;
}
*/

/* PRESET 3: Purple & Pink */
/*
:root {
  --color-primary: #8b5cf6;
  --color-primary-dark: #7c3aed;
  --color-accent: #ec4899;
  --gradient-start: #8b5cf6;
  --gradient-end: #ec4899;
}
*/

/* PRESET 4: Energetic Red & Orange */
/*
:root {
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-accent: #ef4444;
  --gradient-start: #f97316;
  --gradient-end: #dc2626;
}
*/

/* PRESET 4: Teal & Cyan */
/*
:root {
  --color-primary: #14b8a6;
  --color-primary-dark: #0d9488;
  --color-accent: #06b6d4;
  --gradient-start: #14b8a6;
  --gradient-end: #06b6d4;
}
*/

/* PRESET 5: Dark Mode */
/*
:root {
  --color-bg: #1f2937;
  --color-card: #374151;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-border: #4b5563;
  --color-primary: #60a5fa;
  --color-accent: #34d399;
}
*/

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  :root {
    --font-size-display: 2rem;
    --font-size-heading: 1.5rem;
    --spacing-xl: 1.5rem;
    --spacing-xxl: 2rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  :root {
    --color-bg: #ffffff;
    --color-card: #ffffff;
    --color-text-primary: #000000;
  }
  
  .header-global,
  .footer,
  .navbar,
  button {
    display: none !important;
  }
}