/* =============================================================================
   IT-Life — Header & Footer Styles
   Header & Footer built with Elementor Theme Builder.
   Colors = CSS variables (theme-switchable)
   Layout = Elementor editor (user drags & drops)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HEADER — Elementor Theme Builder (elementor-location-header)
   ----------------------------------------------------------------------------- */

/* Main header wrapper */
.elementor-location-header {
  background-color: var(--il-header-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--il-header-border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  z-index: var(--il-z-header) !important;
  position: sticky;
  top: 0;
}

/* Also target .site-header-section if Phlox uses it on some pages */
.site-header-section {
  background-color: var(--il-header-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--il-header-border) !important;
  z-index: var(--il-z-header) !important;
}

/* All sections/containers inside header — transparent backgrounds */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-top-section,
.elementor-location-header .elementor-inner-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .aux-parallax-section,
.site-header-section .elementor-section,
.site-header-section .elementor-container,
.site-header-section .e-con {
  background-color: transparent !important;
  background-image: none !important;
}

/* Sticky header effect (when Elementor sticky is enabled) */
.elementor-sticky--active.elementor-location-header,
.elementor-location-header .elementor-sticky--active {
  background-color: var(--il-header-bg-scrolled) !important;
  box-shadow: var(--il-shadow) !important;
}


/* -----------------------------------------------------------------------------
   HEADER TEXT & LINKS
   All text inside the Elementor header follows theme colors
   ----------------------------------------------------------------------------- */

/* Headings in header */
.elementor-location-header .elementor-heading-title,
.elementor-location-header .elementor-heading-title a {
  color: var(--il-header-text) !important;
}

/* Text in header */
.elementor-location-header .elementor-widget-text-editor,
.elementor-location-header .elementor-widget-text-editor p,
.elementor-location-header .elementor-widget-text-editor span {
  color: var(--il-header-text) !important;
}

/* Icon list in header (phone, address, etc.) */
.elementor-location-header .elementor-icon-list-text {
  color: var(--il-header-text) !important;
  transition: color 0.2s ease !important;
}

.elementor-location-header .elementor-icon-list-icon svg {
  fill: var(--il-header-text) !important;
  transition: fill 0.2s ease !important;
}

.elementor-location-header .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--il-accent-primary) !important;
}

.elementor-location-header .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
  fill: var(--il-accent-primary) !important;
}

/* Phone link in header */
.elementor-location-header a[href^="tel:"] {
  color: var(--il-accent-primary) !important;
  font-weight: var(--il-font-weight-semibold) !important;
  text-decoration: none !important;
}

.elementor-location-header a[href^="tel:"]:hover {
  color: var(--il-accent-primary-hover) !important;
}

/* General links in header */
.elementor-location-header a {
  color: var(--il-header-text) !important;
  transition: color 0.2s ease !important;
}

.elementor-location-header a:hover {
  color: var(--il-accent-primary) !important;
}


/* -----------------------------------------------------------------------------
   NAVIGATION (Elementor Nav Menu widget or Phlox menu)
   ----------------------------------------------------------------------------- */

/* Elementor Nav Menu widget */
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  color: var(--il-header-text) !important;
  font-family: var(--il-font-family) !important;
  font-weight: var(--il-font-weight-medium) !important;
  transition: color 0.2s ease !important;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--il-accent-primary) !important;
}

/* Phlox native navigation (if used) */
.elementor-location-header .aux-master-menu .aux-menu-item > a {
  color: var(--il-header-text) !important;
  transition: color 0.2s ease !important;
}

.elementor-location-header .aux-master-menu .aux-menu-item > a:hover,
.elementor-location-header .aux-master-menu .current-menu-item > a {
  color: var(--il-accent-primary) !important;
}

/* Dropdown / submenu */
.elementor-nav-menu--dropdown,
.elementor-nav-menu__container,
.aux-master-menu .aux-submenu,
.aux-master-menu ul.sub-menu {
  background-color: var(--il-bg-card) !important;
  border: 1px solid var(--il-border-color) !important;
  border-radius: var(--il-border-radius) !important;
  box-shadow: var(--il-shadow-lg) !important;
}

.elementor-nav-menu--dropdown .elementor-item,
.aux-master-menu .aux-submenu a,
.aux-master-menu ul.sub-menu li a {
  color: var(--il-text-secondary) !important;
}

.elementor-nav-menu--dropdown .elementor-item:hover,
.aux-master-menu .aux-submenu a:hover,
.aux-master-menu ul.sub-menu li a:hover {
  color: var(--il-accent-primary) !important;
  background-color: var(--il-accent-primary-light) !important;
}


/* -----------------------------------------------------------------------------
   HEADER BUTTONS (Elementor buttons in header)
   ----------------------------------------------------------------------------- */

.elementor-location-header .elementor-button {
  background-color: var(--il-btn-primary-bg) !important;
  color: var(--il-btn-primary-text) !important;
  border-radius: var(--il-border-radius) !important;
  transition: all 0.3s ease !important;
}

.elementor-location-header .elementor-button:hover {
  background-color: var(--il-btn-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--il-shadow-button) !important;
}


/* -----------------------------------------------------------------------------
   CART ICON in header
   ----------------------------------------------------------------------------- */

.aux-cart-header,
.aux-shopping-basket,
.aux-header-cart-wrapper {
  color: var(--il-header-text) !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

.aux-cart-header:hover,
.aux-shopping-basket:hover {
  color: var(--il-accent-primary) !important;
}

.aux-cart-header .aux-cart-count,
.aux-shopping-basket .aux-cart-count,
.aux-cart-count {
  background-color: var(--il-badge-bg) !important;
  color: var(--il-badge-text) !important;
  font-size: 11px !important;
  font-weight: var(--il-font-weight-bold) !important;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: var(--il-border-radius-full) !important;
}


/* -----------------------------------------------------------------------------
   SOCIAL ICONS in header
   ----------------------------------------------------------------------------- */

.elementor-location-header .elementor-social-icon {
  transition: transform 0.3s ease !important;
}

.elementor-location-header .elementor-social-icon:hover {
  transform: translateY(-3px) !important;
}


/* -----------------------------------------------------------------------------
   MOBILE MENU / HAMBURGER
   ----------------------------------------------------------------------------- */

.elementor-location-header .elementor-menu-toggle {
  color: var(--il-header-text) !important;
}

.aux-burger,
.aux-menu-burger,
.aux-hamburger-menu {
  color: var(--il-header-text) !important;
}

/* Mobile menu panel */
.elementor-nav-menu__text-align-center .elementor-nav-menu--dropdown {
  background-color: var(--il-bg-card) !important;
}

.aux-fs-menu,
.aux-mobile-menu,
.aux-offcanvas-menu {
  background-color: var(--il-bg-card) !important;
}

.aux-fs-menu a,
.aux-mobile-menu a,
.aux-offcanvas-menu a {
  color: var(--il-text-primary) !important;
  border-color: var(--il-border-light) !important;
}


/* -----------------------------------------------------------------------------
   SEARCH
   ----------------------------------------------------------------------------- */

.aux-search-popup,
.aux-search-fullscreen {
  background-color: var(--il-bg-overlay) !important;
}

.aux-search-popup input,
.aux-search-fullscreen input,
.elementor-search-form__input {
  background-color: var(--il-input-bg) !important;
  color: var(--il-input-text) !important;
  border-color: var(--il-input-border) !important;
  border-radius: var(--il-border-radius) !important;
}


/* -----------------------------------------------------------------------------
   PAGE TITLE / BREADCRUMBS
   ----------------------------------------------------------------------------- */

.page-title-section,
.aux-page-title-section,
.page-header {
  background-color: var(--il-bg-secondary) !important;
  border-bottom: 1px solid var(--il-border-light) !important;
}

.page-title-section h1,
.page-title-section h2,
.aux-page-title-section .page-title {
  color: var(--il-text-primary) !important;
  font-family: var(--il-font-family) !important;
}

.aux-breadcrumbs,
.aux-breadcrumbs a,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--il-text-muted) !important;
}

.aux-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--il-accent-primary) !important;
}


/* =============================================================================
   FOOTER — Elementor Theme Builder (elementor-location-footer)
   ============================================================================= */

/* Main footer wrapper */
.elementor-location-footer {
  background-color: var(--il-footer-bg) !important;
  color: var(--il-footer-text) !important;
}

/* Also target Phlox footer selectors */
.page-footer,
.aux-footer,
.aux-subfooter {
  background-color: var(--il-footer-bg) !important;
  color: var(--il-footer-text) !important;
}

/* Sections/containers inside footer — transparent */
.elementor-location-footer .elementor-section,
.elementor-location-footer .elementor-top-section,
.elementor-location-footer .elementor-inner-section,
.elementor-location-footer .elementor-container,
.elementor-location-footer .elementor-column,
.elementor-location-footer .elementor-widget-wrap,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .aux-parallax-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* Footer headings */
.elementor-location-footer .elementor-heading-title {
  color: var(--il-footer-heading) !important;
}

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
  color: var(--il-footer-heading) !important;
}

/* Footer text */
.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer li,
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
  color: var(--il-footer-text) !important;
}

/* Footer links */
.elementor-location-footer a {
  color: var(--il-footer-link) !important;
  transition: color 0.2s ease;
}

.elementor-location-footer a:hover {
  color: var(--il-footer-link-hover) !important;
}

/* Footer icon list */
.elementor-location-footer .elementor-icon-list-text {
  color: var(--il-footer-link) !important;
}

.elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--il-footer-link-hover) !important;
}

.elementor-location-footer .elementor-icon-list-icon svg {
  fill: var(--il-footer-link) !important;
}

/* Footer social icons */
.elementor-location-footer .elementor-social-icon {
  transition: transform 0.3s ease !important;
}

.elementor-location-footer .elementor-social-icon:hover {
  transform: translateY(-3px) !important;
}

/* Sub-footer / copyright area */
.offcanvas-footer {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--il-footer-text) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.offcanvas-footer a {
  color: var(--il-footer-link) !important;
}

/* Gradient theme footer glow */
html[data-theme="gradient"] .elementor-location-footer {
  border-top: 1px solid rgba(247, 37, 133, 0.2) !important;
}


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

@media (max-width: 767px) {
  .elementor-location-header {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}