/* Fixed header container */
.fixed-header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Navbar styles */
.fixed-header-container .navbar {
  padding: 0.5rem 0;
  background-color: white;
}

.modern-breadcrumb-container {
  position: relative;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 1030;
  background-color: white;
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Add padding to body to account for fixed header */
body {
  padding-top: 56px; /* Height of navbar */
}
@media (min-width: 768px) {
  body:has(.modern-breadcrumb-container) {
    padding-top: 96px; /* Height of navbar + breadcrumb */
  }
}

.modern-breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.modern-breadcrumb::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.modern-breadcrumb-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #6c757d;
  font-weight: 500;
}

.modern-breadcrumb-item + .modern-breadcrumb-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #dee2e6;
  border-right: 2px solid #dee2e6;
  transform: rotate(45deg);
  margin: 0 0.75rem;
}

.modern-breadcrumb-link {
  color: #495057;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.modern-breadcrumb-link:hover {
  color: #0d6efd;
}

/* Animated underline effect */
.modern-breadcrumb-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0d6efd;
  transition: width 0.3s ease;
}

.modern-breadcrumb-link:hover::after {
  width: 100%;
}

.modern-breadcrumb-item.active {
  color: #0d6efd;
  font-weight: 600;
}

/* Back button style */
.breadcrumb-back-button {
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  color: #495057;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-back-button:hover {
  background: #f8f9fa;
  transform: translateX(-2px);
}

.breadcrumb-back-button i {
  margin-right: 0.25rem;
}

/* Mobile optimization */
@media (max-width: 767.98px) {
  .fixed-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
  }

  .modern-breadcrumb-container {
    position: fixed;
    top: 56px; /* Default mobile position */
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.95); /* Use consistent background */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Keep mobile shadow */
  }

  /* MOVE page-specific overrides INSIDE the mobile media query */
  body.product-detail-page .modern-breadcrumb-container,
  body.category-detail-page .modern-breadcrumb-container {
    top: 108px !important; /* Specific position for these pages on mobile */
  }

  body.brand-detail-page .modern-breadcrumb-container {
    top: 56px !important; /* Specific position for brand page on mobile */
  }

  /* Adjust body padding ONLY on mobile */
  body {
     /* Default mobile padding top (navbar + default breadcrumb height) */
     padding-top: calc(56px + 40px); /* Adjust 40px if breadcrumb height differs */
  }

  body.product-detail-page,
  body.category-detail-page {
     /* Specific mobile padding top (mobile header + breadcrumb height) */
     padding-top: calc(108px + 40px) !important; /* Adjust 40px if breadcrumb height differs */
  }

   body.brand-detail-page {
     /* Specific mobile padding top (brand header + breadcrumb height) */
     padding-top: calc(56px + 40px) !important; /* Adjust 40px if breadcrumb height differs */
   }

  /* Fix for product and category detail pages */
  .modern-breadcrumb-container.product-detail-page,
  .modern-breadcrumb-container.category-detail-page {
    top: 108px !important; /* Match mobile-shop.css value for consistency */
  }

  /* Fix for brand detail pages */
  .modern-breadcrumb-container.brand-detail-page {
    top: 56px !important;
  }

  /* Clear conflicting rules */
  .product-detail-container {
    margin-top: 0 !important;
  }

  /* Adjust body padding ONLY on mobile to prevent content overlap */
  body {
    /* Adjust padding based on combined height of fixed elements (header + breadcrumb) */
    /* Example: padding-top: calc(56px + 40px); */
    /* This might need adjustment based on actual heights */
  }

  /* Product Detail Page Mobile Body Padding */
  body.product-detail-page {
    padding-top: 145px !important; /* Match mobile-shop.css value for consistency */
  }

  body.brand-detail-page {
    padding-top: calc(56px + 40px);
  }

  /* Remove conflicting margin */
  .d-block.d-md-none {
    margin-top: 0;
  }

  .modern-breadcrumb {
    /* Mobile specific breadcrumb alignment/padding */
    justify-content: space-between;
    padding: 0;
  }

  .breadcrumb-back-button {
    display: block; /* Show back button on mobile */
    /* ... styles for back button ... */
  }

  /* Hide desktop breadcrumb container explicitly on mobile if d-none isn't enough */
  /* .d-none.d-md-block { display: none !important; } */ /* Usually not needed */
}

/* Desktop Breadcrumb Styles */
@media (min-width: 768px) {
  .modern-breadcrumb-container {
    position: static !important; /* Crucial: Override fixed position, use !important if needed */
    background-color: transparent; /* Desktop background */
    backdrop-filter: none;
    box-shadow: none; /* No shadow on desktop */
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Desktop border */
    padding: 0.75rem 0; /* Desktop padding */
    margin-bottom: 1.5rem;
    width: 100%;
    top: auto !important; /* Ensure fixed 'top' is removed */
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  /* Reset body padding added for mobile */
  body {
     /* Reset padding-top to only account for fixed navbar */
     padding-top: 56px !important; /* Adjust if navbar height differs, use !important to override mobile */
  }

  .modern-breadcrumb {
    justify-content: flex-start; /* Align left */
    padding: 0; /* Reset padding */
  }

  .modern-breadcrumb-item {
    font-size: 0.9rem;
  }

  .modern-breadcrumb-item + .modern-breadcrumb-item::before {
    margin: 0 0.85rem;
  }

  .modern-breadcrumb-link {
    font-size: 0.9rem;
  }

  .breadcrumb-back-button {
    display: none; /* Hide mobile back button */
  }
}

/* Product Detail Page Specific Styles - Use same value as in mobile-shop.css */
body.product-detail-page .modern-breadcrumb-container {
  position: fixed;
  top: 108px !important; /* Match mobile-shop.css value for consistency */
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Brand Detail Page Specific Styles */
body.brand-detail-page .modern-breadcrumb-container {
  position: fixed;
  top: 56px !important;
  left: 0;
  right: 0;
  z-index: 1030;
}

body.brand-detail-page {
  padding-top: 96px !important;
}