/* ===========================================================================
   HOMEX Theme Variables - Teal/Turquoise Color System
   Inspired by Damro & Premium E-commerce Websites
   =========================================================================== */

:root {
  /* PRIMARY COLORS - Teal Theme */
  --primary-color: #17A2B8;          /* Bright Teal - Main CTA, Badges */
  --primary-dark: #0D7A89;           /* Dark Teal - Hover States */
  --primary-light: #D1ECF1;          /* Light Teal - Backgrounds */
  
  /* SECONDARY COLORS */
  --secondary-color: #0D7A89;        /* Dark Teal - Headers, Borders */
  --accent-dark: #1a1a1a;            /* Dark - Text, Borders */
  --accent-light: #f8f9fa;           /* Light - Backgrounds */
  
  /* NEUTRAL COLORS */
  --white: #ffffff;
  --black: #000000;
  --gray-light: #f8f9fa;
  --gray-medium: #e9ecef;
  --gray-dark: #6c757d;
  --text-color: #333333;
  --text-muted: #666666;
  
  /* FUNCTIONAL COLORS */
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #17A2B8;
  
  /* SPACING */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* TYPOGRAPHY */
  --font-family-base: 'Lato', sans-serif;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* BORDERS & RADIUS */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-width: 1px;
  --border-color: #e9ecef;
  
  /* SHADOWS */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
  
  /* Z-INDEX */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* TRANSITIONS */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --transition-slow: all 0.5s ease;
}

/* ========================================================================
   HEADER & NAVIGATION
   ======================================================================== */

/* Sticky Header */
.header-top-area, 
.header-bottom-area,
.sticky-header {
  background-color: var(--white);
  border-bottom: 2px solid var(--primary-color);
  box-shadow: var(--shadow-md);
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Header Text & Links */
.header-top-area a,
.header-bottom-area a,
.logo a {
  color: var(--text-color);
  transition: var(--transition-base);
}

.header-top-area a:hover,
.header-bottom-area a:hover,
.logo a:hover {
  color: var(--primary-color);
}

/* Main Navigation */
.mainmenu-area,
.mainmenu ul {
  background-color: var(--white);
}

.mainmenu ul li a {
  color: var(--text-color);
  font-weight: var(--font-weight-bold);
  transition: var(--transition-base);
}

.mainmenu ul li a:hover,
.mainmenu ul li.active a {
  color: var(--primary-color);
  background-color: var(--primary-light);
}

/* Hamburger Menu Icon */
.hamburger-menu {
  color: var(--primary-color);
  font-size: 24px;
}

.hamburger-menu:hover {
  color: var(--primary-dark);
}

/* ========================================================================
   BUTTONS & CTAs
   ======================================================================== */

.btn-primary,
.addcart-btn,
.new-product-action a,
.slider-btn a,
a.shopnow,
.contact-form-btn button,
.add-to-cart,
.wishlist-btn,
.compare-btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white) !important;
  transition: var(--transition-base);
}

.btn-primary:hover,
.addcart-btn:hover,
.new-product-action a:hover,
.slider-btn a:hover,
a.shopnow:hover,
.contact-form-btn button:hover,
.add-to-cart:hover,
.wishlist-btn:hover,
.compare-btn:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Secondary Button */
.btn-secondary,
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

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

/* ========================================================================
   SEARCH & INPUT ELEMENTS
   ======================================================================== */

.menu-search-box input,
.search-form input,
.form-control {
  border-color: var(--border-color);
  transition: var(--transition-base);
}

.menu-search-box input:focus,
.search-form input:focus,
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}

.menu-search-box button,
.search-form button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
  transition: var(--transition-base);
}

.menu-search-box button:hover,
.search-form button:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Mobile Search Slide Toggle */
.mobile-search-bar {
  background-color: var(--white);
  border-bottom: 2px solid var(--primary-color);
  padding: var(--spacing-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-search-bar.active {
  max-height: 100px;
}

/* ========================================================================
   PRODUCT SECTIONS
   ======================================================================== */

/* Product Cards */
.product-card,
.single-product {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: var(--transition-base);
}

.product-card:hover,
.single-product:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Product Prices */
.new-price,
.product-price {
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.old-price {
  color: var(--gray-dark);
  text-decoration: line-through;
}

/* Product Ratings */
.product-rate i,
.star {
  color: var(--warning);
}

/* Product Labels */
.new-label,
.sale-label,
.badge-primary {
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

.new-label {
  background-color: var(--info);
}

.sale-label {
  background-color: var(--danger);
}

/* ========================================================================
   BADGES & ICONS
   ======================================================================== */

/* Cart Badge */
.cart-count-badge,
.notification-badge {
  background-color: var(--danger);
  color: var(--white);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

/* Icon Colors */
.icon-search,
.icon-user,
.icon-heart,
.icon-cart {
  color: var(--primary-color);
  transition: var(--transition-base);
  cursor: pointer;
}

.icon-search:hover,
.icon-user:hover,
.icon-heart:hover,
.icon-cart:hover {
  color: var(--primary-dark);
  transform: scale(1.1);
}

/* ========================================================================
   SECTIONS & TITLES
   ======================================================================== */

.section-title {
  color: var(--text-color);
  border-bottom: 3px solid var(--primary-color);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.section-title::before {
  background-color: var(--primary-color);
}

.section-title h2 {
  color: var(--text-color);
}

/* Slider Navigation */
.nivo-directionalNav a,
.owl-nav button {
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius-md);
  transition: var(--transition-base);
}

.nivo-directionalNav a:hover,
.owl-nav button:hover {
  background-color: var(--primary-dark);
}

/* Pagination Dots */
.nivo-pagination a,
.owl-dots button,
.pagination .page-link {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.nivo-pagination a.active,
.owl-dots button.active,
.pagination .page-link.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

/* ========================================================================
   FORMS & INPUTS
   ======================================================================== */

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select {
  border-color: var(--border-color);
  color: var(--text-color);
  transition: var(--transition-base);
}

.contact-form-box input:focus,
.contact-form-box textarea:focus,
.contact-form-box select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
  color: var(--text-color);
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
  color: var(--gray-dark);
}

/* ========================================================================
   TABS & NAVIGATION
   ======================================================================== */

.nav-tabs .nav-link {
  color: var(--text-color);
  border-color: transparent;
  transition: var(--transition-base);
}

.nav-tabs .nav-link:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.nav-tabs .nav-link.active {
  background-color: var(--white);
  color: var(--primary-color);
  border-color: var(--primary-color) var(--primary-color) var(--white);
  border-bottom-color: var(--white);
}

/* ========================================================================
   FOOTER
   ======================================================================== */

.footer-area {
  background-color: var(--accent-dark);
  color: var(--white);
  border-top: 3px solid var(--primary-color);
}

.footer-area a {
  color: var(--primary-light);
  transition: var(--transition-base);
}

.footer-area a:hover {
  color: var(--primary-color);
}

.footer-widget-title {
  color: var(--white);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: var(--spacing-sm);
}

/* ========================================================================
   SCROLL TO TOP
   ======================================================================== */

#scrollUp {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
  transition: var(--transition-base);
}

#scrollUp:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ========================================================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ======================================================================== */

@media (max-width: 767px) {
  /* Active state highlight on mobile */
  a.active,
  .nav-link.active,
  .menu-item.active {
    color: var(--primary-color) !important;
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary-color);
    padding-left: var(--spacing-sm);
  }

  /* Teal bottom border for mobile nav items */
  .mobile-nav-item {
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-base);
  }

  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    background-color: var(--primary-light);
    color: var(--primary-color);
  }

  /* Mobile menu overlay background */
  .mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
}

@media (max-width: 480px) {
  /* Reduce spacing on very small devices */
  :root {
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }

  /* Ensure buttons are touch-friendly (44px minimum) */
  .btn,
  .add-to-cart,
  button {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
  }

  /* Mobile icon sizes */
  .icon-search,
  .icon-user,
  .icon-cart {
    font-size: 20px;
  }
}

/* ========================================================================
   ANIMATION & TRANSITIONS
   ======================================================================== */

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
}

.slide-enter {
  animation: slideDown 0.3s ease forwards;
}

.slide-exit {
  animation: slideUp 0.3s ease forwards;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

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

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

.bg-primary-light {
  background-color: var(--primary-light) !important;
}

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

.border-top-primary {
  border-top: 3px solid var(--primary-color) !important;
}

.border-bottom-primary {
  border-bottom: 2px solid var(--primary-color) !important;
}

/* Hover effects */
.hover-primary:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}