/* =============================================================================
   COMPREHENSIVE HEADER & FOOTER RESPONSIVE CSS
   Target: All mobile devices, tablets, and desktop breakpoints
   ============================================================================= */

/* CSS Variables for Consistency */
:root {
  --header-height-mobile: 60px;
  --header-height-tablet: 70px;
  --header-height-desktop: 80px;
  --navigation-gap-mobile: 8px;
  --navigation-gap-tablet: 12px;
  --navigation-gap-desktop: 20px;
  --logo-max-width-mobile: 120px;
  --logo-max-width-tablet: 160px;
  --logo-max-width-desktop: 220px;
}

/* =============================================================================
   HEADER RESPONSIVE STYLES
   ============================================================================= */

/* Mobile First - Extra Small Devices (320px to 575px) */
@media (max-width: 575.98px) {
  /* Header Mobile Fixes */
  .header-mobile {
    height: var(--header-height-mobile) !important;
    min-height: var(--header-height-mobile) !important;
    padding: 0 !important;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; */
  }

  .header-mobile .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }

  .header-mobile .logo {
    flex: 1;
    text-align: center;
    margin: 0 !important;
  }

  .header-mobile .logo__image {
    max-width: var(--logo-max-width-mobile) !important;
    max-height: 40px !important;
    height: auto !important;
  }

  /* Mobile Navigation Menu */
  .header-mobile__navigation {
    background: rgba(255, 255, 255, 0.98) !important;
    /* backdrop-filter: blur(10px) !important;
    border-top: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; */
  }

  .header-mobile__navigation .navigation__list {
    flex-direction: column !important;
    padding: 15px 0 !important;
    gap: 0 !important;
  }

  .header-mobile__navigation .navigation__item {
    width: 100% !important;
    /* border-bottom: 1px solid #f0f0f0; */
  }

  .header-mobile__navigation .navigation__link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
  }

  .header-mobile__navigation .navigation__link:hover {
    background-color: #f8f9fa !important;
    color: #007bff !important;
    padding-left: 25px !important;
  }

  /* Mobile Search Field */


  /* Mobile Cart Icon */
  .header-tools__cart {
    position: relative !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: background-color 0.3s ease !important;
  }

  .header-tools__cart:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
  }

  .cart-amount {
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #dc3545 !important;
    color: white !important;
  }

  /* Hide Desktop Header on Mobile */
  .header-desk {
    display: none !important;
  }

  /* Mobile User Account Links */
  .customer-links {
    padding: 15px 20px !important;
    /* border-bottom: 1px solid #e5e5e5 !important; */
  }

  .customer-links span {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Mobile Social Links */
  .social-links {
    padding: 15px 20px !important;
    justify-content: center !important;
    gap: 15px !important;
  }

  .footer__social-link {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 50% !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
  }

  .footer__social-link:hover {
    background: #007bff !important;
    color: white !important;
    transform: translateY(-2px) !important;
  }
}

/* Small Devices - Large Phones (576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .header-mobile {
    height: calc(var(--header-height-mobile) + 5px) !important;
  }

  .header-mobile .logo__image {
    max-width: calc(var(--logo-max-width-mobile) + 20px) !important;
    max-height: 45px !important;
  }

  .header-mobile__navigation .navigation__link {
    padding: 14px 25px !important;
    font-size: 17px !important;
  }

  .header-mobile__navigation .search-field {
    margin: 20px 25px !important;
  }

  .cart-amount {
    min-width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    line-height: 20px !important;
  }
}

/* Medium Devices - Tablets (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Show desktop header, hide mobile header */
  .header-mobile {
    display: none !important;
  }

  .header-desk {
    display: flex !important;
  }

  #header {
    padding: 10px 0 !important;
  }

  .header-desk {
    align-items: center !important;
    gap: 20px !important;
  }

  .logo__image {
    max-width: var(--logo-max-width-tablet) !important;
    height: auto !important;
  }
  /* Tablet Navigation */
  .navigation {
    padding: 10px 30px !important;
    border-radius: 15px !important;
    max-width: 450px !important;
  }

  .navigation__list {
    gap: var(--navigation-gap-tablet) !important;
  }

  .navigation__link {
    padding: 8px 6px !important;
  }

  .navigation__link i {
    font-size: 20px !important;
    margin-bottom: 3px !important;
  }

  .navigation__link span {
    font-size: 11px !important;
  }

  /* Tablet Header Tools */
  .header-tools {
    gap: 15px !important;
  }

  .header-tools__item {
    padding: 8px !important;
  }

  /* Search Popup Tablet */
  .search-popup {
    right: 0 !important;
    left: auto !important;
    width: 400px !important;
    max-width: 90vw !important;
  }

  .search-popup .container {
    padding: 20px !important;
  }
}

/* Large Devices - Desktops (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-mobile {
    display: none !important;
  }

  #header {
    padding: 12px 0 !important;
  }

  .logo__image {
    max-width: var(--logo-max-width-desktop) !important;
  }

  .navigation {
    padding: 12px 50px !important;
    max-width: 500px !important;
  }

  .navigation__list {
    gap: var(--navigation-gap-desktop) !important;
  }

  .navigation__link {
    padding: 10px 8px !important;
  }

  .search-popup {
    width: 450px !important;
  }
}

/* Extra Large Devices (1200px and up) */
@media (min-width: 1200px) {
  .header-mobile {
    display: none !important;
  }

  .navigation {
    padding: 15px 60px !important;
    max-width: 600px !important;
  }

  .search-popup {
    width: 500px !important;
  }
}

/* =============================================================================
   FOOTER RESPONSIVE STYLES
   ============================================================================= */

/* Mobile Footer Fixes */
@media (max-width: 575.98px) {
  .footer {
    background: rgba(1, 134, 74, 0.356) !important;
    padding: 0 !important;
  }

  .footer-middle {
    padding: 30px 0 20px 0 !important;
  }

  .footer-middle .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .footer-middle .row {
    --bs-gutter-x: 0 !important;
  }

  .footer-column {
    margin-bottom: 25px !important;
    padding: 0 10px !important;
  }

  /* Footer Logo Section */
  .footer-store-info {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  .footer-store-info .logo {
    margin-bottom: 15px !important;
  }

  .footer-store-info .logo__image {
    max-width: 150px !important;
    height: auto !important;
  }

  .footer-address,
  .footer-store-info p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
    color: #555 !important;
  }

  /* Footer Menu Sections */
  .footer-menu .sub-menu__title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #333 !important;
    text-align: center !important;
    padding-bottom: 8px !important;
    /* border-bottom: 2px solid #e5e5e5 !important; */
  }

  .footer-menu .sub-menu__list {
    text-align: center !important;
    padding: 0 !important;
  }

  .footer-menu .sub-menu__item {
    margin-bottom: 8px !important;
  }

  .footer-menu .menu-link {
    display: inline-block !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    color: #000000 !important;
    text-decoration: none !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
  }

  .footer-menu .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
  }

  /* Footer Social Links */
  .footer-store-info .social-links {
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }

  .footer-store-info .footer__social-link {
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; */
    border-radius: 50% !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
  }

  .footer-store-info .footer__social-link:hover {
    /* background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; */
    color: white !important;
    transform: translateY(-3px) scale(1.05) !important;
    /* box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3) !important; */
  }



  .footer-bottom .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
  }

  .footer-copyright {
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  .footer-settings {
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
  }

  .footer-settings a {
    font-size: 13px !important;
    color: #000000 !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
  }

  .footer-settings a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #000000 !important;
  }

  /* Mobile Footer Navigation */
  .footer-mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    /* border-top: 1px solid #e5e5e5 !important; */
    /* box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1) !important; */
    z-index: 1000 !important;
    padding: 8px 0 12px 0 !important;
  }

  .footer-mobile .row {
    margin: 0 !important;
  }

  .footer-mobile .col-4 {
    padding: 0 5px !important;
  }

  .footer-mobile__link {
    padding: 8px 4px !important;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    min-height: 60px !important;
  }

  .footer-mobile__link:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
    transform: translateY(-2px) !important;
  }

  .footer-mobile__link svg {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 4px !important;
  }

  .footer-mobile__link span {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  /* Add bottom padding to body to account for fixed footer */
  body {
    padding-bottom: 70px !important;
  }
}

/* Tablet Footer Adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
  .footer-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .footer-middle .row {
    --bs-gutter-x: 1.5rem !important;
  }

  .footer-column {
    margin-bottom: 30px !important;
  }

  .footer-store-info {
    text-align: center !important;
  }

  .footer-menu .sub-menu__title {
    text-align: left !important;
    font-size: 17px !important;
  }

  .footer-menu .sub-menu__list {
    text-align: left !important;
  }

  .footer-bottom .container {
    text-align: center !important;
  }

  .footer-bottom .footer-copyright {
    display: block !important;
    margin-bottom: 10px !important;
  }

  .footer-bottom .footer-settings {
    justify-content: center !important;
  }
}

/* Desktop Footer */
@media (min-width: 992px) {
  .footer-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  .footer-store-info {
    text-align: left !important;
  }

  .footer-menu .sub-menu__title {
    text-align: left !important;
  }

  .footer-menu .sub-menu__list {
    text-align: left !important;
  }

  .footer-bottom .container {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
  }

  .footer-copyright {
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }
}

/* =============================================================================
   SEARCH FUNCTIONALITY RESPONSIVE FIXES
   ============================================================================= */

@media (max-width: 991.98px) {
  #box-content-search {
    max-height: 250px !important;
    margin-top: 5px !important;
  }

  .product-item {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  .product-item .image {
    width: 40px !important;
    height: 40px !important;
  }

  .product-item .name a {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

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

/* Hide/Show elements based on screen size */
@media (max-width: 991.98px) {
  .d-lg-block {
    display: none !important;
  }

  .d-mobile-block {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .d-mobile-block {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .navigation__link,
  .footer-mobile__link,
  .header-tools__item {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .search-field__input {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo__image {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}
/* Landscape orientation fixes for mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
  .header-mobile {
    height: 50px !important;
    min-height: 50px !important;
  }

  .header-mobile .logo__image {
    max-height: 35px !important;
  }

  .footer-mobile {
    padding: 5px 0 8px 0 !important;
  }

  .footer-mobile__link {
    min-height: 50px !important;
    padding: 5px 2px !important;
  }

  .footer-mobile__link svg {
    width: 18px !important;
    height: 18px !important;
  }

  .footer-mobile__link span {
    font-size: 10px !important;
  }
  body {
    padding-bottom: 60px !important;
  }
}