/* ========================================
   HEADER DYNAMIC STYLES
   APPLIED FROM DATABASE SETTINGS
   ======================================== */

/* ========================================
   DYNAMIC CSS VARIABLES
   ======================================== */
:root {
  /* 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);
  --menu-hover-bg-opacity: var(--db-menu-hover-bg-opacity, 0.1);
  
  /* Font Variables */
  --header-title-font: var(--db-header-title-font, 'Cairo');
  --header-link-font: var(--db-header-link-font, 'Cairo');
  --header-title-size: var(--db-header-title-size, '24px');
  --header-link-size: var(--db-header-link-size, '16px');
  --header-small-text-size: var(--db-header-small-text-size, '12px');
  
  /* Logo Sizes */
  --logo-width: var(--db-logo-width, 200px);
  --logo-height: var(--db-logo-height, 80px);
  --logo-max-width: var(--db-logo-max-width, 300px);
  --logo-max-height: var(--db-logo-max-height, 120px);
  --logo-mobile-width: var(--db-logo-mobile-width, 150px);
  --logo-mobile-height: var(--db-logo-mobile-height, 60px);
  
  /* Logo Margins */
  --logo-margin-top: var(--db-logo-margin-top, 0px);
  --logo-margin-bottom: var(--db-logo-margin-bottom, 0px);
  --logo-margin-left: var(--db-logo-margin-left, 0px);
  --logo-margin-right: var(--db-logo-margin-right, 0px);
  
  /* Logo Effects */
  --logo-border-radius: var(--db-logo-border-radius, 0px);
  --logo-box-shadow: var(--db-logo-box-shadow, none);
  --logo-hover-effect: var(--db-logo-hover-effect, none);
  
  /* Header Settings Variables */
  --header-height: var(--db-header-height, 80px);
  --header-width: var(--db-header-width, 100%);
  --header-max-width: var(--db-header-max-width, 1200px);
  --header-background-color: var(--db-header-background-color, #ffffff);
  --header-border: var(--db-header-border, none);
  --header-border-radius: var(--db-header-border-radius, 0px);
  --header-box-shadow: var(--db-header-box-shadow, none);
  --header-padding: var(--db-header-padding, 0px);
  --header-margin: var(--db-header-margin, 0px);
  --header-transition: var(--db-header-transition, all 0.3s ease);
  
  /* Menu Settings Variables */
  --menu-font-family: var(--db-menu-font-family, 'Cairo');
  --menu-font-size: var(--db-menu-font-size, 16px);
  --menu-font-weight: var(--db-menu-font-weight, 500);
  --menu-padding: var(--db-menu-padding, 10px 15px);
  --menu-border-radius: var(--db-menu-border-radius, 50px);
  --menu-border: var(--db-menu-border, none);
  --menu-box-shadow: var(--db-menu-box-shadow, none);
  --menu-transition: var(--db-menu-transition, all 0.3s ease);
  
  /* Icons Settings Variables */
  --icons-color: var(--db-icons-color, #333333);
  --icons-hover-color: var(--db-icons-hover-color, #007bff);
  --icons-size: var(--db-icons-size, 20px);
  --icons-background: var(--db-icons-background, transparent);
  --icons-hover-bg: var(--db-icons-hover-bg, rgba(0,123,255,0.1));
  --icons-padding: var(--db-icons-padding, 8px);
  --icons-border-radius: var(--db-icons-border-radius, 50px);
  --icons-border: var(--db-icons-border, none);
  --icons-box-shadow: var(--db-icons-box-shadow, none);
  --icons-transition: var(--db-icons-transition, all 0.3s ease);
  --icons-gap: var(--db-icons-gap, 15px);
  
  /* Spacing Variables */
  --container-padding: var(--db-container-padding, 0 15px);
  --logo-menu-gap: var(--db-logo-menu-gap, 30px);
  --menu-icons-gap: var(--db-menu-icons-gap, 20px);
  --mobile-breakpoint: var(--db-mobile-breakpoint, 768px);
  
  /* Header Intersection Variables */
  --header-top-spacing: var(--db-header-top-spacing, 0px);
  --header-bottom-spacing: var(--db-header-bottom-spacing, 0px);
  --header-intersection-margin: var(--db-header-intersection-margin, 0px);
  --header-intersection-padding: var(--db-header-intersection-padding, 0px);
  
  /* Header Height Variables for Overlap Calculation */
  --top-header-height: var(--db-top-header-height, 60px);
  --main-header-height: var(--db-main-header-height, 100px);
  --top-header-height-tablet: var(--db-top-header-height-tablet, 50px);
  --main-header-height-tablet: var(--db-main-header-height-tablet, 90px);
  --top-header-height-mobile: var(--db-top-header-height-mobile, 40px);
  --main-header-height-mobile: var(--db-main-header-height-mobile, 80px);
  
  /* Header Lift Control Variables */
  --header-lift: var(--db-header-lift, calc(var(--top-header-height, 60px) / 2 - var(--main-header-height, 100px) / 2));
  --header-lift-transform: var(--db-header-lift-transform, 0px);
  --header-lift-top: var(--db-header-lift-top, 0px);
  --header-lift-bottom: var(--db-header-lift-bottom, 0px);
  --header-lift-tablet: var(--db-header-lift-tablet, calc(var(--top-header-height-tablet, 50px) / 2 - var(--main-header-height-tablet, 90px) / 2));
  --header-lift-transform-tablet: var(--db-header-lift-transform-tablet, 0px);
  --header-lift-mobile: var(--db-header-lift-mobile, calc(var(--top-header-height-mobile, 40px) / 2 - var(--main-header-height-mobile, 80px) / 2));
  --header-lift-transform-mobile: var(--db-header-lift-transform-mobile, 0px);
  --header-intersection-border: var(--db-header-intersection-border, none);
  --header-intersection-border-radius: var(--db-header-intersection-border-radius, 0px);
  --header-intersection-box-shadow: var(--db-header-intersection-box-shadow, none);
  --header-intersection-background: var(--db-header-intersection-background, transparent);
  --header-intersection-z-index: var(--db-header-intersection-z-index, auto);
  
  /* Header Spacing Variables */
  --logo-menu-gap: var(--db-logo-menu-gap, 30px);
  --menu-icons-gap: var(--db-menu-icons-gap, 20px);
  --container-padding: var(--db-container-padding, 0 15px);
  
  /* Logo Position Variables */
  --logo-position: var(--db-logo-position, right);
  --logo-alignment: var(--db-logo-alignment, start);
  
  /* Icons Container Variables */
  --icons-container-background: var(--db-icons-container-background, rgba(255,255,255,0.1));
  --icons-container-border: var(--db-icons-container-border, 1px solid rgba(255,255,255,0.2));
  --icons-container-border-radius: var(--db-icons-container-border-radius, 50px);
  --icons-container-padding: var(--db-icons-container-padding, 10px 20px);
  --icons-container-margin: var(--db-icons-container-margin, 0px);
  --icons-container-box-shadow: var(--db-icons-container-box-shadow, 0 2px 8px rgba(0,0,0,0.1));
  --icons-container-width: var(--db-icons-container-width, auto);
  --icons-container-height: var(--db-icons-container-height, auto);
  --icons-container-display: var(--db-icons-container-display, flex);
  --icons-container-justify-content: var(--db-icons-container-justify-content, center);
  --icons-container-align-items: var(--db-icons-container-align-items, center);
  --icons-container-gap: var(--db-icons-container-gap, 15px);
}

/* ========================================
   HEADER NAVIGATION STYLES
   ======================================== */
.header-navigation {
  /* Apply spacing variables */
  margin-top: var(--header-top-spacing);
  margin-bottom: var(--header-bottom-spacing);
}

.header-navigation .container-fluid {
  padding: var(--container-padding);
}

/* Header Navigation Styles */
.header-navigation {
  background-color: var(--header-background-color) !important;
  color: var(--header-main-text-color) !important;
  font-family: var(--header-link-font), 'Cairo', 'Tajawal', sans-serif !important;
  height: var(--header-height) !important;
  width: var(--header-width) !important;
  max-width: var(--header-max-width) !important;
  border: var(--header-border) !important;
  border-radius: var(--header-border-radius) !important;
  box-shadow: var(--header-box-shadow) !important;
  padding: var(--header-padding) !important;
  margin: var(--header-margin) !important;
  transition: var(--header-transition) !important;
}

/* Header Container */
.header-navigation .container-fluid {
  padding: var(--container-padding) !important;
}

/* ========================================
   LOGO STYLES
   ======================================== */
.site-branding .brand-logo {
  /* Apply logo spacing */
  margin-right: var(--logo-menu-gap);
  width: var(--logo-width) !important;
  height: var(--logo-height) !important;
  max-width: var(--logo-max-width) !important;
  max-height: var(--logo-max-height) !important;
  margin: var(--logo-margin-top) var(--logo-margin-right) var(--logo-margin-bottom) var(--logo-margin-left) !important;
  border-radius: var(--logo-border-radius) !important;
  box-shadow: var(--logo-box-shadow) !important;
  transition: all 0.3s ease !important;
}

.site-branding .brand-logo:hover {
  transform: var(--logo-hover-effect) !important;
}

.site-branding .brand-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Logo Text Styles */
.logo-text-container {
  font-family: var(--header-title-font), 'Cairo', 'Tajawal', sans-serif !important;
}

.logo-main {
  font-size: var(--header-title-size) !important;
  font-weight: bold !important;
  color: var(--logo-main-color) !important;
  line-height: 1.2 !important;
}

.logo-sub {
  font-size: var(--header-small-text-size) !important;
  color: var(--logo-sub-color) !important;
  margin-top: 2px !important;
}

.logo-arabic {
  font-size: var(--header-small-text-size) !important;
  color: var(--logo-arabic-color) !important;
  margin-top: 2px !important;
}

/* ========================================
   MENU STYLES
   ======================================== */
.main-menu ul {
  font-family: var(--menu-font-family), 'Cairo', 'Tajawal', sans-serif !important;
}

.main-menu .menu-item a {
  color: var(--menu-text-color) !important;
  font-size: var(--menu-font-size) !important;
  font-weight: var(--menu-font-weight) !important;
  transition: var(--menu-transition) !important;
  padding: var(--menu-padding) !important;
  display: block !important;
  border-radius: var(--menu-border-radius) !important;
  border: var(--menu-border) !important;
  box-shadow: var(--menu-box-shadow) !important;
}

.main-menu .menu-item a:hover {
  color: var(--menu-hover-color) !important;
  background-color: var(--menu-hover-bg-color) !important;
}

.main-menu .menu-item.active a {
  color: var(--menu-active-color) !important;
  background-color: var(--menu-hover-bg-color) !important;
}

/* Menu Position */
.nav-menu {
  margin-right: var(--logo-menu-gap) !important;
}

/* ========================================
   ICONS CONTAINER STYLES
   ======================================== */
.nav-buttons-container {
  background: var(--icons-container-background);
  border: var(--icons-container-border);
  border-radius: var(--icons-container-border-radius);
  padding: var(--icons-container-padding);
  margin: var(--icons-container-margin);
  box-shadow: var(--icons-container-box-shadow);
  width: var(--icons-container-width);
  height: var(--icons-container-height);
  display: var(--icons-container-display);
  justify-content: var(--icons-container-justify-content);
  align-items: var(--icons-container-align-items);
  gap: var(--icons-container-gap);
}

/* ========================================
   ICONS STYLES
   ======================================== */
.header-right-nav .social-box,
.header-right-nav .user-actions,
.header-right-nav .cart-icon,
.header-right-nav .dashboard-icon {
  display: flex !important;
  align-items: center !important;
  gap: var(--icons-gap) !important;
}

.header-right-nav .social-box .social-link li a,
.header-right-nav .user-actions a,
.header-right-nav .cart-icon a,
.header-right-nav .dashboard-icon a {
  color: var(--icons-color) !important;
  font-size: var(--icons-size) !important;
  background-color: var(--icons-background) !important;
  padding: var(--icons-padding) !important;
  border-radius: var(--icons-border-radius) !important;
  border: var(--icons-border) !important;
  box-shadow: var(--icons-box-shadow) !important;
  transition: var(--icons-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.header-right-nav .social-box .social-link li a:hover,
.header-right-nav .user-actions a:hover,
.header-right-nav .cart-icon a:hover,
.header-right-nav .dashboard-icon a:hover {
  color: var(--icons-hover-color) !important;
  background-color: var(--icons-hover-bg) !important;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */
@media (max-width: var(--mobile-breakpoint)) {
  .site-branding .brand-logo {
    width: var(--logo-mobile-width) !important;
    height: var(--logo-mobile-height) !important;
  }
  
  .logo-main {
    font-size: calc(var(--header-title-size) * 0.8) !important;
  }
  
  .main-menu .menu-item a {
    font-size: calc(var(--menu-font-size) * 0.9) !important;
  }
  
  .header-right-nav .social-box .social-link li a,
  .header-right-nav .user-actions a,
  .header-right-nav .cart-icon a {
    font-size: calc(var(--icons-size) * 0.9) !important;
    padding: calc(var(--icons-padding) * 0.8) !important;
  }
}

@media (max-width: 576px) {
  .logo-main {
    font-size: calc(var(--header-title-size) * 0.7) !important;
  }
  
  .main-menu .menu-item a {
    font-size: calc(var(--menu-font-size) * 0.85) !important;
  }
  
  .header-right-nav .social-box .social-link li a,
  .header-right-nav .user-actions a,
  .header-right-nav .cart-icon a {
    font-size: calc(var(--icons-size) * 0.8) !important;
    padding: calc(var(--icons-padding) * 0.7) !important;
  }
}

/* ========================================
   RTL SUPPORT
   ======================================== */
[dir="rtl"] .header-navigation {
  font-family: var(--header-link-font), 'Cairo', 'Tajawal', 'Almarai', sans-serif !important;
}

[dir="rtl"] .logo-text-container {
  font-family: var(--header-title-font), 'Cairo', 'Tajawal', 'Almarai', sans-serif !important;
}

[dir="rtl"] .nav-menu {
  margin-left: var(--logo-menu-gap) !important;
  margin-right: 0 !important;
}

/* ========================================
   ANIMATION SUPPORT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .site-branding .brand-logo,
  .main-menu .menu-item a,
  .header-right-nav .social-box .social-link li a,
  .header-right-nav .user-actions a,
  .header-right-nav .cart-icon a {
    transition: none !important;
  }
}

/* ========================================
   STICKY HEADER SUPPORT
   ======================================== */

/* Sticky Header Navigation */
.header-navigation.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  animation: slideDown 0.3s ease-in-out !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Sticky Top Header Bar */
.header-top-bar.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  animation: slideDown 0.3s ease-in-out !important;
  background: rgba(44, 44, 44, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

/* When both headers are sticky, adjust main header position */
.header-top-bar.sticky + .header-navigation.sticky {
  top: 60px !important; /* Adjust based on top header height */
}

/* Body class for sticky state */
body.header-sticky {
  padding-top: 140px !important; /* Adjust based on combined header height */
}

/* Sticky animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive sticky behavior */
@media (max-width: 768px) {
  .header-top-bar.sticky + .header-navigation.sticky {
    top: 50px !important; /* Smaller offset for mobile */
  }
  
  body.header-sticky {
    padding-top: 120px !important; /* Smaller padding for mobile */
  }
} 

/* Header Dynamic CSS Variables */
:root {
  /* Header Styles */
  --header-height: var(--header-height, auto);
  --header-width: var(--header-width, 100%);
  --header-max-width: var(--header-max-width, none);
  --header-background-color: var(--header-background-color, transparent);
  --header-background-image: var(--header-background-image, none);
  --header-background-size: var(--header-background-size, cover);
  --header-background-position: var(--header-background-position, center);
  --header-border: var(--header-border, none);
  --header-border-radius: var(--header-border-radius, 0);
  --header-box-shadow: var(--header-box-shadow, none);
  --header-padding: var(--header-padding, 0);
  --header-margin: var(--header-margin, 0);
  
  /* Header Intersection Styles */
  --header-top-spacing: var(--header-top-spacing, 0);
  --header-bottom-spacing: var(--header-bottom-spacing, 0);
  --header-intersection-margin: var(--header-intersection-margin, 0);
  --header-intersection-padding: var(--header-intersection-padding, 0);
  --header-intersection-border: var(--header-intersection-border, none);
  --header-intersection-border-radius: var(--header-intersection-border-radius, 0);
  --header-intersection-box-shadow: var(--header-intersection-box-shadow, none);
  --header-intersection-background: var(--header-intersection-background, transparent);
  --header-intersection-z-index: var(--header-intersection-z-index, auto);
  
  /* Container Spacing */
  --container-padding: var(--container-padding, 0);
  --logo-menu-gap: var(--logo-menu-gap, 0);
  --menu-icons-gap: var(--menu-icons-gap, 0);
  
  /* Logo Position Styles */
  --logo-position: var(--logo-position, left);
  --logo-alignment: var(--logo-alignment, start);
  --logo-margin-left: var(--logo-margin-left, 0);
  --logo-margin-right: var(--logo-margin-right, 0);
  --logo-margin-top: var(--logo-margin-top, 0);
  --logo-margin-bottom: var(--logo-margin-bottom, 0);
  
  /* Icons Container Styles */
  --icons-container-background: var(--icons-container-background, rgba(255, 255, 255, 0.9));
  --icons-container-border: var(--icons-container-border, none);
  --icons-container-border-radius: var(--icons-container-border-radius, 50px);
  --icons-container-padding: var(--icons-container-padding, 10px);
  --icons-container-margin: var(--icons-container-margin, 0);
  --icons-container-box-shadow: var(--icons-container-box-shadow, 0 4px 12px rgba(0,0,0,0.1));
  --icons-container-width: var(--icons-container-width, auto);
  --icons-container-height: var(--icons-container-height, auto);
  --icons-container-display: var(--icons-container-display, flex);
  --icons-container-justify-content: var(--icons-container-justify-content, center);
  --icons-container-align-items: var(--icons-container-align-items, center);
  --icons-container-gap: var(--icons-container-gap, 10px);
}

/* Apply header spacing */
.header-navigation {
  margin-top: var(--header-top-spacing);
  margin-bottom: var(--header-bottom-spacing);
}

/* Sticky header transitions */
.header-navigation,
.header-top-bar {
  transition: all 0.3s ease-in-out !important;
}

/* Ensure proper z-index stacking */
.header-top-bar {
  z-index: 1001 !important;
}

.header-navigation {
  z-index: 1000 !important;
}

/* Apply container padding */
.header-navigation .container-fluid {
  padding: var(--container-padding);
}

/* Apply logo-menu gap */
.site-branding .brand-logo {
  margin-right: var(--logo-menu-gap);
}

/* Apply icons container styles */
.nav-buttons-container {
  background: var(--icons-container-background);
  border: var(--icons-container-border);
  border-radius: var(--icons-container-border-radius);
  padding: var(--icons-container-padding);
  margin: var(--icons-container-margin);
  box-shadow: var(--icons-container-box-shadow);
  width: var(--icons-container-width);
  height: var(--icons-container-height);
  display: var(--icons-container-display);
  justify-content: var(--icons-container-justify-content);
  align-items: var(--icons-container-align-items);
  gap: var(--icons-container-gap);
}

/* Dynamic Logo Positioning */
.site-branding {
  order: 1;
  justify-self: var(--logo-alignment);
  margin-left: var(--logo-margin-left);
  margin-right: var(--logo-margin-right);
  margin-top: var(--logo-margin-top);
  margin-bottom: var(--logo-margin-bottom);
}

/* Logo position based on CSS variables */
.site-branding[data-position="center"] {
  order: 2;
}

.site-branding[data-position="right"] {
  order: 3;
}

/* Language-based positioning */
/* Arabic/RTL Layout */
html[dir="rtl"] .header-navigation .primary-menu,
body[dir="rtl"] .header-navigation .primary-menu,
html[lang="ar"] .header-navigation .primary-menu,
body[lang="ar"] .header-navigation .primary-menu {
  flex-direction: row-reverse;
}

html[dir="rtl"] .site-branding,
body[dir="rtl"] .site-branding,
html[lang="ar"] .site-branding,
body[lang="ar"] .site-branding {
  order: 3;
  margin-left: 0;
  margin-right: var(--logo-margin-left);
}

html[dir="rtl"] .header-right-nav,
body[dir="rtl"] .header-right-nav,
html[lang="ar"] .header-right-nav,
body[lang="ar"] .header-right-nav {
  order: 1;
}

/* English/LTR Layout */
html[dir="ltr"] .header-navigation .primary-menu,
body[dir="ltr"] .header-navigation .primary-menu,
html[lang="en"] .header-navigation .primary-menu,
body[lang="en"] .header-navigation .primary-menu {
  flex-direction: row;
}

html[dir="ltr"] .site-branding,
body[dir="ltr"] .site-branding,
html[lang="en"] .site-branding,
body[lang="en"] .site-branding {
  order: 1;
  margin-left: var(--logo-margin-left);
  margin-right: 0;
}

html[dir="ltr"] .header-right-nav,
body[dir="ltr"] .header-right-nav,
html[lang="en"] .header-right-nav,
body[lang="en"] .header-right-nav {
  order: 3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-navigation .primary-menu {
    flex-direction: column !important;
  }
  
  .site-branding {
    order: 1 !important;
    margin: 10px 0 !important;
  }
  
  .header-right-nav {
    order: 2 !important;
    margin: 10px 0 !important;
  }
}

/* Icons styling */
.search-icon,
.user-menu,
.dashboard-icon,
.cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.search-icon a,
.user-menu a,
.dashboard-icon a,
.cart-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.search-icon:hover,
.user-menu:hover,
.dashboard-icon:hover,
.dashboard-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}