/* Base Styles */
.bg-light-pink {
  background-color: #32582b;
}

/* Logo Styles */
.navbar-brand {
  padding: 0.5rem 1rem;
}

.navbar-brand img {
  transition   : all 0.3s ease;
  /* filter    : drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); */
  max-height   : none !important;
  height       : 50px !important;
  width        : auto !important;
  min-width    : 120px;
}

.navbar-brand img:hover {
  transform: scale(1.05);
}

/* Footer Logo */
footer img {
  /* filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); */
  height   : 65px !important;
  width    : auto !important;
  min-width: 120px;
}

footer {
  min-height: 400px;
  padding: 40px 0 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #32582b 0%, #dce7d9 55%, #fff 100%);
  color: #263323;
}

footer h6,
footer p,
footer a,
footer .text-muted {
  color: #263323 !important;
}

footer a:hover {
  color: #32582b !important;
}

/*footer .row:first-child,
footer .row:first-child a,
footer .row:first-child .text-muted {
  color: #fff !important;
}*/

footer .row:first-child a:hover {
  color: #d7ead3 !important;
}

footer hr {
  border-color: rgba(38, 51, 35, 0.35);
}

/* Search Styles */
.search-container {
  position: relative;
  width   : 100%;
}

.search-input {
  border-radius   : 50px;
  border          : 1px solid #ddd;
  padding-left    : 2.2rem;
  background-color: #f8f9fa;
  width           : 100%;
  font-size       : 14px;
  transition      : all 0.3s ease;
}

.search-input:focus {
  background-color: white;
  border-color    : #007bff;
  box-shadow      : 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline         : none;
}

.search-input::placeholder {
  color: #6c757d;
}

.search-icon {
  position : absolute;
  left     : 15px;
  top      : 50%;
  transform: translateY(-50%);
  color    : #6c757d;
  z-index  : 10;
  font-size: 14px;
}

/* Search Results Dropdown */
.search-results {
  position     : absolute;
  top          : 100%;
  left         : 0;
  right        : 0;
  background   : white;
  border       : 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height   : 300px;
  overflow-y   : auto;
  z-index      : 1000;
  display      : none;
}

.search-results.show {
  display: block;
}

.search-result-item {
  padding      : 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor       : pointer;
  transition   : background-color 0.2s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f8f9fa;
}

.search-result-item .product-name {
  font-weight  : 500;
  color        : #333;
  margin-bottom: 4px;
}

.search-result-item .product-price {
  font-size: 0.9em;
  color    : #666;
}

.search-no-results {
  padding   : 16px;
  text-align: center;
  color     : #666;
  font-style: italic;
}

/* Product Highlight Animation */
.product-highlight {
  animation : highlightPulse 1s ease-in-out;
  border    : 2px solid #007bff !important;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.3) !important;
}

@keyframes highlightPulse {
  0% {
    transform : scale(1);
    box-shadow: 0 0 0 rgba(0, 123, 255, 0.3);
  }

  50% {
    transform : scale(1.02);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
  }

  100% {
    transform : scale(1);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
  }
}

/* Navigation Styles */
.nav-link {
  font-weight: 500;
  color      : white !important;
  white-space: nowrap;
}

.nav-link:hover {
  color: #d7ead3 !important;
  /* Bootstrap blue color */
}

.nav-link.active {
  color      : #d7ead3 !important;
  /* Bootstrap blue color */
  font-weight: 600;
}

/* Dropdown Styles - Base styles only */
.dropdown-menu {
  border       : 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top   : 8px;
  z-index      : 1050;
  position     : absolute;
  top          : 100%;
  left         : 0;
  display      : none;
  transition   : opacity 0.15s ease-in-out;
  opacity      : 0;
}

/* Disable Bootstrap default behavior globally */
.dropdown-menu.show {
  display: none !important;
}

/* Desktop hover behavior - ALL dropdowns work with hover on desktop */
@media (min-width: 992px) {

  /* Show dropdown when hovering over dropdown container OR the dropdown itself */
  .dropdown:hover .dropdown-menu,
  .dropdown-menu:hover {
    display: block;
    opacity: 1;
  }

  /* Keep dropdown visible when mouse moves from trigger to menu */
  .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
  }

  /* Dropdown remains visible when hovering over it directly */
  .dropdown .dropdown-menu:hover {
    display: block;
    opacity: 1;
  }

  /* Create seamless hover transition area */
  .dropdown {
    position: relative;
  }

  /* Invisible bridge between dropdown trigger and menu */
  .dropdown::after {
    content   : '';
    position  : absolute;
    top       : 100%;
    left      : 0;
    right     : 0;
    height    : 8px;
    background: transparent;
    z-index   : 1051;
  }
}

.user-dropdown {
  position: relative;
  display : inline-block;
}

.user-dropdown .user-icon {
  text-decoration: none;
  transition     : color 0.3s ease;
}

.user-dropdown .user-icon:hover {
  color: #007bff !important;
  /* Bootstrap blue */
}

.user-dropdown-menu {
  position     : absolute;
  top          : 100%;
  right        : 0;
  background   : white;
  border       : 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.15);
  padding      : 8px 0;
  min-width    : 160px;
  z-index      : 1000;
  opacity      : 0;
  visibility   : hidden;
  transform    : translateY(-10px);
  transition   : all 0.3s ease;
}

.user-dropdown:hover .user-dropdown-menu {
  opacity   : 1;
  visibility: visible;
  transform : translateY(0);
}

.user-dropdown-menu .dropdown-item {
  display        : flex;
  align-items    : center;
  padding        : 10px 16px;
  color          : #333;
  text-decoration: none;
  font-size      : 0.9rem;
  transition     : background-color 0.2s ease;
}

.user-dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color           : #dc3545;
}

.user-dropdown-menu .dropdown-item.user-info {
  background-color: #f8f9fa;
  font-weight     : 500;
  cursor          : default;
}

.user-dropdown-menu .dropdown-item.user-info:hover {
  background-color: #f8f9fa;
  color           : #333;
}

.user-dropdown-menu .dropdown-item i {
  margin-right: 10px;
  width       : 16px;
  text-align  : center;
}

.user-dropdown-menu .dropdown-divider {
  height          : 1px;
  background-color: #e9ecef;
  margin          : 8px 0;
}

/* User logged in state */
.user-dropdown.logged-in .user-icon {
  color: #007bff !important;
}

.user-dropdown.logged-in .user-icon i::before {
  content: "\f4ff";
  /* bi-person-check */
}

/* Cart Styles */
.cart-badge {
  top             : -8px;
  right           : -8px;
  background-color: #dc3545;
  color           : white;
  border-radius   : 50%;
  padding         : 2px 6px;
  font-size       : 0.7rem;
  font-weight     : bold;
  min-width       : 18px;
  height          : 18px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border          : 2px solid white;
  z-index         : 10;
}

/* Wishlist Styles */
.wishlist-badge {
  top             : -8px;
  right           : -8px;
  background-color: #e91e63;
  color           : white;
  border-radius   : 50%;
  padding         : 2px 6px;
  font-size       : 0.7rem;
  font-weight     : bold;
  min-width       : 18px;
  height          : 18px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border          : 2px solid white;
  z-index         : 10;
}

.cart-bounce {
  animation: cartBounce 0.6s ease-in-out;
}

.wishlist-bounce {
  animation: wishlistBounce 0.6s ease-in-out;
}

@keyframes cartBounce {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2) rotate(-5deg);
  }

  50% {
    transform: scale(1.1) rotate(0deg);
  }

  75% {
    transform: scale(1.15) rotate(3deg);
  }
}

@keyframes wishlistBounce {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2) rotate(-3deg);
  }

  50% {
    transform: scale(1.1) rotate(0deg);
  }

  75% {
    transform: scale(1.15) rotate(2deg);
  }
}

/* Add to cart button feedback */
.btn.btn-success {
  background-color: #28a745 !important;
  border-color    : #28a745 !important;
  color           : white !important;
}

.dropdown-item {
  padding   : 8px 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #efeeae;
  /* Light blue background */
  color           : #007bff !important;
  /* Bootstrap blue text */
}

/* Submenu Styles - DESKTOP ONLY */
@media (min-width: 992px) {
  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu .dropdown-menu {
    position   : absolute;
    top        : 0;
    left       : 100%;
    margin-top : 0;
    margin-left: 4px;
    display    : none !important;
    /* Force hide by default */
    z-index    : 1060;
  }

  /* Force hide all submenus when parent dropdown is not hovered */
  .dropdown-submenu .dropdown-menu {
    display: none !important;
  }

  /* Only show submenu when parent dropdown is hovered AND submenu is hovered */
  .dropdown:hover .dropdown-submenu:hover .dropdown-menu,
  .dropdown:hover .dropdown-submenu .dropdown-menu:hover {
    display: block !important;
    /* Force show when conditions are met */
  }

  .dropdown-submenu .dropdown-menu {
    display: none !important;
  }

  .dropdown:hover .dropdown-submenu:hover .dropdown-menu,
  .dropdown:hover .dropdown-submenu .dropdown-menu:hover {
    display: block !important;
  }

  /* Add transition for smoother experience */
  .dropdown-submenu .dropdown-menu {
    transition: opacity 0.15s ease-in-out;
    opacity   : 0;
  }

  .dropdown:hover .dropdown-submenu:hover .dropdown-menu {
    display: block !important;
    opacity: 1;
  }

  /* Ensure there's no gap between parent and submenu */
  .dropdown-submenu .dropdown-menu {
    margin-left: 2px;
  }

  /* Add padding to submenu container for better hover area */
  .dropdown-submenu::before {
    content : '';
    position: absolute;
    top     : 0;
    right   : -6px;
    width   : 6px;
    height  : 100%;
    z-index : 999;
  }

  .dropdown-submenu .dropdown-toggle::after {
    content    : "â–¶";
    border     : none;
    margin-left: auto;
    float      : right;
    margin-top : 2px;
    font-size  : 10px;
  }
}

/* MOBILE: Enable submenu functionality on smaller screens */
@media (max-width: 991.98px) {
  .dropdown-submenu {
    position: relative;
  }

  /* Hide submenu by default on mobile */
  .dropdown-submenu .dropdown-menu {
    position        : static;
    display         : none !important;
    margin-left     : 0;
    margin-top      : 0;
    box-shadow      : none;
    background-color: #ffeaea;
    /* Slightly darker than header */
    opacity         : 1;
    transition      : none;
    border-radius   : 0;
    border          : none;
    border-left     : 3px solid #28a745;
    padding         : 0;
    width           : 100%;
  }

  /* Show submenu ONLY when parent dropdown is open AND submenu has show class */
  .dropdown.show .dropdown-submenu.show .dropdown-menu {
    display   : block !important;
    visibility: visible !important;
    opacity   : 1 !important;
  }
}

/* Mobile Dropdown Adjustments */
@media (max-width: 991.98px) {

  /* Essential mobile navbar styling */
  .navbar-collapse {
    background-color: #F9F8BC;
    /* Same as header bg-light-pink */
    margin-top      : 10px;
    border-radius   : 5px;
    padding         : 10px 0;
  }

  .navbar-collapse:not(.show) {
    display: none !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  /* DISABLE HOVER BEHAVIORS ONLY FOR TRIGGERING DROPDOWNS - NOT FOR INTERACTION */
  .dropdown:not(.show):hover .dropdown-menu,
  .dropdown:not(.show) .dropdown-menu:hover {
    display   : none !important;
    visibility: hidden !important;
    opacity   : 0 !important;
  }

  /* FORCE dropdown to stay visible and interactive when shown via JavaScript */
  .navbar .dropdown.show .dropdown-menu,
  .navbar .dropdown.show:hover .dropdown-menu,
  .navbar .dropdown.show .dropdown-menu:hover {
    display       : block !important;
    visibility    : visible !important;
    opacity       : 1 !important;
    pointer-events: auto !important;
  }

  /* Allow interaction with dropdown items when dropdown is open */
  .navbar .dropdown.show .dropdown-menu .dropdown-item {
    pointer-events: auto !important;
  }

  /* Remove ALL invisible bridges that trigger hover on mobile */
  .dropdown::after {
    display: none !important;
  }

  /* Override Bootstrap dropdown behavior completely on mobile - but preserve navbar toggle */
  .navbar .dropdown-menu.show {
    display: none !important;
  }

  /* Make nav items full width */
  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    width        : 100%;
    padding      : 15px 20px;
    text-align   : left;
    border-bottom: 1px solid #e9ecef;
    display      : block;
  }

  /* Reset main dropdown for mobile - Same color as header */
  .navbar .dropdown-menu {
    display         : none !important;
    position        : static;
    margin-left     : 0;
    margin-top      : 0;
    box-shadow      : none;
    background-color: #F9F8BC;
    /* Same as header bg-light-pink */
    opacity         : 1;
    transition      : none;
    border-radius   : 0;
    border          : none;
    border-left     : 3px solid #007bff;
    /* Bootstrap blue border */
    padding         : 0;
    width           : 100%;
  }

  /* Show main dropdown ONLY with .show class - NEVER on hover */
  .navbar .dropdown.show>.dropdown-menu {
    display   : block !important;
    visibility: visible !important;
    opacity   : 1 !important;
  }

  /* Style mobile dropdown items - Same color as header */
  .navbar .dropdown-menu .dropdown-item {
    padding         : 15px 20px;
    font-size       : 0.95rem;
    color           : #333;
    border-bottom   : 1px solid #c0d4e8;
    /* Subtle blue border */
    background-color: #F9F8BC;
    /* Same as header */
    display         : block;
    width           : 100%;
    text-align      : left;
    transition      : background-color 0.2s ease;
    /* Re-enable transitions for interaction */
  }

  /* ALLOW HOVER EFFECTS when dropdown is open for better UX */
  .navbar .dropdown.show .dropdown-menu .dropdown-item:hover {
    background-color: #efeeae !important;
    /* Light blue background */
    color           : #007bff !important;
    /* Bootstrap blue text */
  }

  /* Simple submenu styling - Slightly darker than header */
  .navbar .dropdown-submenu .dropdown-menu {
    position        : static;
    margin-left     : 0;
    margin-top      : 0;
    display         : none !important;
    box-shadow      : none;
    background-color: #c4daf1;
    /* Slightly darker blue than header */
    opacity         : 1;
    transition      : none;
    border-radius   : 0;
    border          : none;
    border-left     : 3px solid #007bff;
    /* Bootstrap blue border */
    padding         : 0;
    width           : 100%;
  }

  /* Show submenu ONLY when parent dropdown is open and submenu has show class - NEVER on hover */
  .navbar .dropdown.show .dropdown-submenu.show>.dropdown-menu {
    display   : block !important;
    visibility: visible !important;
    opacity   : 1 !important;
  }

  /* Style submenu items - Slightly darker background */
  .navbar .dropdown-submenu .dropdown-menu .dropdown-item {
    padding         : 12px 40px;
    font-size       : 0.9rem;
    color           : #495057;
    border-bottom   : 1px solid #b4d0e6;
    /* Light blue border */
    background-color: #c4daf1;
    /* Slightly darker blue than header */
    transition      : background-color 0.2s ease;
    /* Re-enable transitions for interaction */
  }

  /* ALLOW HOVER EFFECTS for submenu items when dropdown is open */
  .navbar .dropdown.show .dropdown-submenu .dropdown-menu .dropdown-item:hover {
    background-color: #efeeae !important;
    /* Light blue background */
    color           : #007bff !important;
    /* Bootstrap blue text */
  }

  /* Simple dropdown toggle arrows */
  .navbar .dropdown-toggle::after {
    content    : "â–¼";
    border     : none;
    font-size  : 12px;
    margin-left: auto;
    float      : right;
  }

  .navbar .dropdown.show .dropdown-toggle::after {
    content: "â–²";
  }

  /* Simple submenu toggle arrows - NO HOVER INTERACTIONS */
  .dropdown-submenu .dropdown-toggle::after {
    content    : "â–¼";
    border     : none;
    font-size  : 12px;
    margin-left: auto;
    float      : right;
  }

  .dropdown-submenu.show .dropdown-toggle::after {
    content: "â–²";
  }

  /* DISABLE hover for opening submenus, but allow interaction when open */
  .dropdown-submenu:not(.show):hover {
    background-color: inherit !important;
  }

  .dropdown-submenu:not(.show):hover .dropdown-toggle {
    background-color: inherit !important;
    color           : inherit !important;
  }

  /* Allow hover effects for submenu when parent dropdown is open */
  .dropdown.show .dropdown-submenu:hover .dropdown-toggle {
    background-color: #efeeae !important;
    /* Light blue background */
    color           : #007bff !important;
    /* Bootstrap blue text */
  }

  /* Active submenu toggle styling */
  .dropdown.show .dropdown-submenu.show .dropdown-toggle {
    background-color: #efeeae !important;
    /* Light blue background */
    color           : #007bff !important;
    /* Bootstrap blue text */
  }

  /* Additional mobile-specific submenu styling */
  @media (max-width: 991.98px) {
    .dropdown.show .dropdown-submenu.show .dropdown-toggle {
      background-color: #efeeae !important;
      /* Light blue background */
      color           : #007bff !important;
      /* Bootstrap blue text */
    }

    .dropdown.show .dropdown-submenu:hover .dropdown-toggle {
      background-color: #efeeae !important;
      /* Light blue background */
      color           : #007bff !important;
      /* Bootstrap blue text */
    }

    /* Ensure submenu items maintain blue theme */
    .dropdown.show .dropdown-submenu .dropdown-item {
      background-color: #c4daf1 !important;
      /* Slightly darker blue */
    }

    .dropdown.show .dropdown-submenu .dropdown-item:hover {
      background-color: #efeeae !important;
      /* Light blue on hover */
      color           : #007bff !important;
      /* Bootstrap blue text */
    }
  }

  /* Force disable hover effects for OPENING dropdowns, but allow interaction when open */
  .navbar-nav .dropdown:not(.show):hover .dropdown-menu,
  .navbar-nav .dropdown-submenu:not(.show):hover .dropdown-menu {
    display   : none !important;
    visibility: hidden !important;
    opacity   : 0 !important;
  }

  /* Allow interaction when dropdown is open */
  .navbar-nav .dropdown.show:hover .dropdown-menu,
  .navbar-nav .dropdown.show .dropdown-menu:hover {
    display   : block !important;
    visibility: visible !important;
    opacity   : 1 !important;
  }

  /* Disable hover states for dropdown triggers when not open, but allow when open */
  .dropdown:not(.show):hover,
  .dropdown-submenu:not(.show):hover,
  .dropdown-toggle:not(.dropdown.show .dropdown-toggle):hover {
    background-color: #F9F8BC !important;
    /* Match new header color */
    color           : inherit !important;
  }

  /* Allow hover states for dropdown items when dropdown is open */
  .dropdown.show .dropdown-item:hover {
    background-color: #efeeae !important;
    /* Light blue background */
    color           : #007bff !important;
    /* Bootstrap blue text */
    transition      : background-color 0.2s ease !important;
  }

  /* Remove pseudo element on mobile */
  .dropdown-submenu::before {
    display: none;
  }
}

/* Navbar Layout Styles */
.navbar-brand {
  flex: 0 0 200px;
}

.navbar-nav-container {
  flex           : 1;
  display        : flex;
  justify-content: center;
}

.navbar-actions {
  flex           : 0 0 350px;
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
}

/* Large Screen Styles */
@media (min-width: 992px) {
  .search-box {
    width: 250px;
  }

  .navbar-collapse {
    display    : flex !important;
    align-items: center;
  }

  .navbar-nav {
    margin: 0;
  }
}

/* Mobile Styles */
@media (max-width: 991.98px) {
  .search-box {
    width     : 100%;
    margin-top: 10px;
  }

  .icon-group {
    margin-top: 10px;
  }

  .navbar-nav-container,
  .navbar-actions {
    flex : none;
    width: 100%;
  }

  .navbar-actions {
    justify-content: center;
    margin-top     : 15px;
  }

  .navbar-nav {
    margin-bottom: 15px;
  }

  /* User dropdown responsive */
  .user-dropdown-menu {
    right    : -20px;
    min-width: 140px;
  }

  .user-dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    padding  : 8px 12px;
  }
}

/* Footer Styles */
footer {
  background-color: #f8f9fa !important;
}

footer h6 {
  font-weight  : 600;
  color        : #333;
  margin-bottom: 15px;
}

footer p {
  margin-bottom: 8px;
  color        : #666;
  cursor       : pointer;
  transition   : color 0.2s ease;
}

footer p:hover {
  color: #007bff;
}

footer a {
  color          : #666;
  text-decoration: none;
  transition     : color 0.2s ease;
}

footer a:hover {
  color: #007bff;
}

footer .bi {
  font-size: 1.2rem;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

.py-5 {
  padding-top   : 3rem;
  padding-bottom: 3rem;
}

/* Common Page Layout */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
}

/* Common Button Styles */
.btn {
  border-radius: 8px;
  font-weight  : 500;
  transition   : all 0.3s ease;
}

.btn:hover {
  transform : translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Common Card Styles */
.card {
  border       : none;
  border-radius: 12px;
  transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform : translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Common Animation Classes */
.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from {
    opacity  : 0;
    transform: translateY(20px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity  : 0;
    transform: translateY(30px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

/* Active Navigation Styles */
.nav-link:not(.dropdown-toggle),
.wishlist-icon,
.cart-icon {
  position  : relative;
  transition: all 0.3s ease;
}

/* Nav links and cart icon - Blue color */
.nav-link:not(.dropdown-toggle)::after,
.cart-icon::after {
  content         : '';
  position        : absolute;
  bottom          : -2px;
  left            : 0;
  width           : 0;
  height          : 2px;
  background-color: #007bff;
  /* Bootstrap blue */
  transition      : width 0.3s ease;
}

.nav-link:not(.dropdown-toggle).active::after,
.cart-icon.active::after {
  width: 100%;
}

.nav-link:not(.dropdown-toggle):hover::after,
.cart-icon:hover::after {
  width: 100%;
}

.nav-link.active,
.cart-icon.active {
  color      : #007bff !important;
  /* Bootstrap blue */
  font-weight: 600;
}

/* Wishlist icon - Pink color (keep existing behavior) */
.wishlist-icon::after {
  content         : '';
  position        : absolute;
  bottom          : -2px;
  left            : 0;
  width           : 0;
  height          : 2px;
  background-color: #dc3545;
  /* Pink color */
  transition      : width 0.3s ease;
}

.wishlist-icon.active::after {
  width: 100%;
}

.wishlist-icon:hover::after {
  width: 100%;
}

.wishlist-icon.active {
  color      : #dc3545 !important;
  /* Pink color */
  font-weight: 600;
}

/* Special handling for dropdown toggle */
.nav-link.dropdown-toggle.active {
  color      : #007bff !important;
  /* Bootstrap blue */
  font-weight: 600;
}

/* Cart icon hover effect */
.cart-icon:hover {
  color: #007bff !important;
  /* Bootstrap blue */
}

/* Wishlist icon hover effect - keep pink */
.wishlist-icon:hover {
  color: #dc3545 !important;
  /* Pink color */
}

/* Header Animation Styles */
.navbar {
  position  : fixed;
  top       : 0;
  left      : 0;
  right     : 0;
  z-index   : 1030;
  transition: transform 0.3s ease-in-out;
}

.navbar.header-hidden {
  transform: translateY(-100%);
}

.navbar.header-visible {
  transform: translateY(0);
}

/* Add padding to body to account for fixed header */
body {
  padding-top: 80px;
  /* Adjust based on your header height */
}

/* Back to Top Button Styles */
.back-to-top {
  position        : fixed;
  bottom          : 30px;
  right           : 30px;
  width           : 50px;
  height          : 50px;
  background-color: #007bff;
  /* Bootstrap blue */
  color           : white;
  border          : none;
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 1.2rem;
  cursor          : pointer;
  opacity         : 0;
  visibility      : hidden;
  transition      : all 0.3s ease;
  z-index         : 1000;
  box-shadow      : 0 4px 12px rgba(0, 123, 255, 0.3);
  /* Blue shadow */
}

.back-to-top.show {
  opacity   : 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #0056b3;
  /* Darker blue on hover */
  transform       : translateY(-2px);
  box-shadow      : 0 6px 16px rgba(0, 123, 255, 0.4);
  /* Blue shadow */
}

.back-to-top i {
  transition: transform 0.2s ease;
}

.back-to-top:hover i {
  transform: translateY(-1px);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .back-to-top {
    bottom   : 20px;
    right    : 20px;
    width    : 45px;
    height   : 45px;
    font-size: 1rem;
  }

  body {
    padding-top: 70px;
  }
}

/* Cart and Wishlist Badge Styles */
.cart-badge,
.wishlist-badge {
  font-size      : 0.6rem;
  min-width      : 18px;
  height         : 18px;
  padding        : 0.25em 0.4em;
  border-radius  : 50%;
  font-weight    : 600;
  line-height    : 1;
  display        : flex !important;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cart-badge.show,
.wishlist-badge.show {
  display: flex !important;
}

/* Animation for badge updates */
.cart-badge,
.wishlist-badge {
  transition: all 0.3s ease;
}

.cart-badge.updated,
.wishlist-badge.updated {
  animation: badgePulse 0.6s ease-in-out;
}

@keyframes badgePulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Enhanced Search Results Styles */
.search-results {
  position                  : absolute;
  top                       : calc(100% + 5px);
  left                      : 0;
  right                     : 0;
  background                : white;
  border                    : 1px solid #e0e0e0;
  border-radius             : 12px;
  box-shadow                : 0 8px 25px rgba(0, 0, 0, 0.15);
  max-height                : 400px;
  overflow-y                : auto;
  z-index                   : 1050;
  display                   : none;
  opacity                   : 0;
  transform                 : translateY(-10px);
  transition                : all 0.3s ease;
  min-width                 : 100%;
  /* Improve scrolling performance */
  will-change               : scroll-position;
  -webkit-overflow-scrolling: touch;
}

.search-results.show {
  display  : block !important;
  opacity  : 1;
  transform: translateY(0);
}

.search-result-item {
  padding      : 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor       : pointer;
  transition   : background-color 0.2s ease;
  display      : flex;
  align-items  : center;
  /* Remove transform to prevent lag */
  position     : relative;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f8f9fa;
  /* Remove translateX transform that causes lag */
}

.search-result-item.no-results {
  padding   : 20px;
  text-align: center;
  color     : #666;
  cursor    : default;
}

.search-result-item.no-results:hover {
  background-color: transparent;
}

.search-result-item.view-all {
  background-color: #f8f9fa;
  font-weight     : 600;
  color           : #007bff;
  border-top      : 2px solid #e9ecef;
}

.search-result-item.view-all:hover {
  background-color: #e9ecef;
  color           : #0056b3;
}

.search-result-image {
  width          : 50px;
  height         : 50px;
  object-fit     : cover;
  border-radius  : 8px;
  border         : 1px solid #e9ecef;
  /* Improve image rendering performance */
  image-rendering: optimizeSpeed;
  /* Add loading placeholder */
  background     : #f8f9fa url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjRjhGOUZBIi8+CjxwYXRoIGQ9Ik0yNSAyMEMyMi4yNSAyMCAyMCAyMi4yNSAyMCAyNUMyMCAyNy43NSAyMi4yNSAzMCAyNSAzMEMyNy43NSAzMCAzMCAyNy43NSAzMCAyNUMzMCAyMi4yNSAyNy43NSAyMCAyNSAyMFoiIGZpbGw9IiNEREREREQiLz4KPC9zdmc+') center/cover no-repeat;
  /* Smooth loading transition */
  transition     : opacity 0.3s ease;
}

.search-result-image:not([src]) {
  opacity: 0.5;
}

.search-result-image[src] {
  opacity: 1;
}

.search-result-info {
  flex: 1;
}

.search-result-info h6 {
  margin     : 0;
  font-size  : 0.9rem;
  font-weight: 600;
  color      : #333;
  line-height: 1.2;
}

.search-result-price {
  margin-top: 4px;
}

.search-result-price .price {
  font-weight: 600;
  color      : #007bff;
  font-size  : 0.85rem;
}

.search-result-price .old-price {
  text-decoration: line-through;
  color          : #6c757d;
  font-size      : 0.8rem;
}

.search-result-price .category-tag {
  display         : inline-block;
  background-color: #e9ecef;
  color           : #495057;
  font-size       : 0.7rem;
  padding         : 2px 6px;
  border-radius   : 10px;
  margin-left     : 8px;
  font-weight     : 500;
}

/* Search Highlight Animation for Products */
.search-highlight {
  animation    : searchHighlight 2s ease-in-out;
  position     : relative;
  overflow     : hidden;
  border       : 2px solid #007bff !important;
  border-radius: 8px !important;
  box-shadow   : 0 0 20px rgba(0, 123, 255, 0.3) !important;
  transform    : scale(1.02);
  z-index      : 10;
}

.search-highlight::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : -100%;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.2), transparent);
  animation : searchSweep 2s ease-in-out;
  z-index   : 1;
}

@keyframes searchHighlight {
  0% {
    transform : scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  25% {
    transform : scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
  }

  75% {
    transform : scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
  }

  100% {
    transform : scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
  }
}

@keyframes searchSweep {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Clear Search Button Styles */
.clear-search-btn {
  font-size    : 0.8rem;
  padding      : 0.25rem 0.75rem;
  border-radius: 15px;
  transition   : all 0.3s ease;
}

.clear-search-btn:hover {
  background-color: #6c757d;
  border-color    : #6c757d;
  color           : white;
  transform       : translateY(-1px);
}

/* Search Container Responsive */
@media (max-width: 768px) {
  .search-container {
    width        : 100%;
    margin-bottom: 15px;
  }

  .search-results {
    max-height: 300px;
  }

  .search-result-item {
    padding: 10px 12px;
  }

  .search-result-image {
    width : 40px;
    height: 40px;
  }

  .search-result-info h6 {
    font-size: 0.85rem;
  }
}