/* ========================================
   THEME V3 - DYNAMIC STYLES
   APPLIED FROM DATABASE SETTINGS
   ======================================== */

/* ========================================
   DYNAMIC COLOR VARIABLES
   ======================================== */
  
:root {
  /* Primary Colors */
  --primary-color: var(--db-primary-color, #EE1C29);
  --secondary-color: var(--db-secondary-color, #EE1C29);
  --accent-color: var(--db-accent-color, #EE1C29);
  
  /* Text Colors */
  --text-color: var(--db-text-color, #333333);
  --background-color: var(--db-background-color, #ffffff);
  
  /* Header Colors */
  --header-top-bg-color: var(--db-header-top-bg-color, #2c2c2c);
  --header-top-text-color: var(--db-header-top-text-color, #ffffff);
  --header-main-bg-color: var(--db-header-main-bg-color, #f8f9fa);
  --header-main-text-color: var(--db-header-main-text-color, #333333);
  --header-accent-color: var(--db-header-accent-color, #e62e37);
  
  /* Logo Colors */
  --logo-main-color: var(--db-logo-main-color, #e62e37);
  --logo-sub-color: var(--db-logo-sub-color, #333333);
  --logo-arabic-color: var(--db-logo-arabic-color, #333333);
  
  /* Menu Colors */
  --menu-text-color: var(--db-menu-text-color, #333333);
  --menu-hover-color: var(--db-menu-hover-color, #e62e37);
  --menu-active-color: var(--db-menu-active-color, #e62e37);
  --menu-hover-bg-color: var(--db-menu-hover-bg-color, #e62e37);
  
  /* Footer Colors */
  --footer-bg-color: var(--db-footer-bg-color, #2c2c2c);
  --footer-text-color: var(--db-footer-text-color, #ffffff);
  
  /* Font Variables */
  --primary-font: var(--db-primary-font, 'Alexandria');
  --secondary-font: var(--db-secondary-font, 'Alexandria');
  --heading-font: var(--db-heading-font, 'Alexandria');
  --body-font: var(--db-body-font, 'Alexandria');
  
  /* Font Sizes */
  --font-size-base: var(--db-font-size-base, 16px);
  --font-size-heading: var(--db-font-size-heading, 24px);
  
  /* Gradients based on primary colors */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 80%, black) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, color-mix(in srgb, var(--secondary-color) 80%, black) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 80%, black) 100%);
}

/* ========================================
   DYNAMIC FONT APPLICATIONS
   ======================================== */
body {
  font-family: var(--body-font), 'Alexandria', sans-serif;
  font-size: var(--font-size-base);
  color: var(--text-color);
  background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font), 'Alexandria', sans-serif;
  font-size: var(--font-size-heading);
}

.section-title {
  font-family: var(--heading-font), 'Alexandria', sans-serif;
  color: var(--text-color);
}

.section-subtitle {
  font-family: var(--body-font), 'Alexandria', sans-serif;
  color: var(--secondary-color);
}

/* ========================================
   DYNAMIC COLOR APPLICATIONS
   ======================================== */

/* Primary Elements */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 123, 255, 0.3);
}

.btn-secondary {
  background: var(--gradient-secondary);
  color: white;
}

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

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Form Elements */
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Cards and Sections */
.card {
  border-color: rgba(0, 0, 0, 0.125);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* Hero Section */
.hero-section-new {
  background: var(--gradient-primary);
}

.hero-title {
  color: white;
  font-family: var(--heading-font), 'Alexandria', sans-serif;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--body-font), 'Alexandria', sans-serif;
}

/* Fleet Section */
.fleet-card-btn {
  background: var(--gradient-primary);
  color: white;
}

.fleet-card-btn:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}

.fleet-card-title {
  color: var(--text-color);
  font-family: var(--heading-font), 'Alexandria', sans-serif;
}

.fleet-card-description {
  color: var(--secondary-color);
  font-family: var(--body-font), 'Alexandria', sans-serif;
}

/* Booking Steps */
.step-number {
  background: var(--gradient-primary);
  color: white;
}

.step-title {
  color: var(--text-color);
  font-family: var(--heading-font), 'Alexandria', sans-serif;
}

.step-description {
  color: var(--secondary-color);
  font-family: var(--body-font), 'Alexandria', sans-serif;
}

/* Header Styles */
.header-v3 {
  background-color: var(--header-main-bg-color);
}

.header-top {
  background-color: var(--header-top-bg-color);
  color: var(--header-top-text-color);
}

.header-main {
  background-color: var(--header-main-bg-color);
}

.main-nav .nav-menu > li > a {
  color: var(--menu-text-color);
  font-family: var(--body-font), 'Alexandria', sans-serif;
}

.main-nav .nav-menu > li > a:hover,
.main-nav .nav-menu > li.active > a {
  color: var(--menu-hover-color);
  background-color: var(--menu-hover-bg-color);
}

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

.footer-widget h4 {
  color: var(--footer-text-color);
  font-family: var(--heading-font), 'Alexandria', sans-serif;
}

.footer-widget p {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--body-font), 'Alexandria', sans-serif;
}

/* Logo Colors */
.logo h1 {
  color: var(--logo-main-color);
  font-family: var(--heading-font), 'Alexandria', sans-serif;
}

/* ========================================
   ANIMATION SETTINGS
   ======================================== */
[data-enable-animations="false"] *,
[data-enable-animations="false"] *::before,
[data-enable-animations="false"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ========================================
   LAZY LOADING SETTINGS
   ======================================== */
[data-enable-lazy-loading="false"] img {
  loading: auto;
}

[data-enable-lazy-loading="true"] img {
  loading: lazy;
}

/* ========================================
   RESPONSIVE FONT SIZES
   ======================================== */
@media (max-width: 768px) {
  :root {
    --font-size-base: calc(var(--db-font-size-base, 16px) * 0.9);
    --font-size-heading: calc(var(--db-font-size-heading, 24px) * 0.8);
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-base: calc(var(--db-font-size-base, 16px) * 0.85);
    --font-size-heading: calc(var(--db-font-size-heading, 24px) * 0.7);
  }
}

/* ========================================
   RTL SUPPORT
   ======================================== */
[dir="rtl"] {
  font-family: var(--primary-font), 'Alexandria', sans-serif;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
    --transition-fast: none;
    --transition-slow: none;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #000000;
    --secondary-color: #333333;
    --text-color: #000000;
    --background-color: #ffffff;
  }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --background-color: #1a1a1a;
    --secondary-color: #cccccc;
  }
  
  .card {
    background-color: #2d2d2d;
    border-color: #404040;
  }
  
  .form-control {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #ffffff;
  }
}