.navbar.fixed-top {
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.navbar .form-control {
  min-width: 350px;   /* Minimum width on small screens */
}
@media (min-width: 992px) {
  .navbar .form-control {
    min-width: 350px;  /* Larger on desktop */
  }
}
#mainNavbar {
  /*position: sticky; */
  top: 0;
  z-index: 1030;
  transition: all 0.3s ease-in-out;
}
/* Glass (transparent + blur) navbar style */
.glass-nav {
  background: rgba(0, 87, 173, 0.95); /* semi-transparent dark */
  backdrop-filter: blur(10px); /* glass blur effect */
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.navbar.scrolled {
  background-color: #6b01f5 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Darken navbar when scrolling */
.scrolled-nav {
  background: rgba(0, 87, 173, 0.95);
  box-shadow: 0 3px 15px rgba(0, 87, 173, 0.95);
}

.discount-badge {
    background-color: #e53935;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
}
.thumb-img.selected {
  border: 2px solid #007bff;
}

.thumb-img:hover {
  border: 2px solid #007bff;
}
.zoom-container {
  position: relative;
  overflow: hidden;
}

.zoom-image {
  transition: transform 0.4s ease;
  max-width: 100%;
}

.zoom-image:hover {
  transform: scale(1.6); /* You can adjust zoom level */
  cursor: zoom-in;
}
#zoomLens {
    pointer-events: none;
  }

.rupee {
  height: 12px; vertical-align: middle;
}

/* Hero custom styling */
.category {
  background: url("/static/images/slider-24.jpg") no-repeat center center;
  background-size: cover;        /* make it responsive */
  background-attachment: fixed;  /* parallax effect */
  width: 100%;                   /* full width */
  min-height: 400px;             /* adjust as needed */
  padding: 60px 0;
}

.category h2 {
  color: #ee46e6;   /* make heading readable */
  font-weight: bold;
}

/* --- Categories Dropdown (Mega Menu) --- */
.navbar .dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Mega Menu Layout */
.mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: none;
  border-radius: 0;
}

.mega-menu .dropdown-header a {
  color: #000000 !important;
  font-weight: bold;
}

.mega-menu .dropdown-item {
  color: #000000;
 
}

.mega-menu .dropdown-item:hover {
  background-color: #000000;
  color: #ffffff;
}




/* Hide nested submenus by default */
.dropdown-submenu > .dropdown-menu {
    display: none;
}

/* Show on hover desktop */
@media (min-width: 992px) {
  .dropdown-submenu:hover > .dropdown-menu {
      display: block;
  }
}

/* Position sub-submenus correctly */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    z-index: 1000;
}

/* Mobile toggle icon */
.submenu-toggle {
    font-weight: bold;
    cursor: pointer;
}

/* Arrow for desktop */
.submenu-arrow {
    margin-left: auto;   /* Push arrow to right */
    font-size: 1.4rem;
    transition: transform 0.3s;
}

/* Rotate arrow on hover (optional) */
@media (min-width: 992px) {
  .dropdown-submenu:hover > a .submenu-arrow {
    transform: rotate(90deg); /* Points right when hovering */
  }
}

/* 🧭 Navbar and dropdown fix */
#mainNavbar {
  z-index: 1050 !important; /* keep navbar above page sections */
}

#mainNavbar .dropdown-menu {
  z-index: 9999 !important; /* ensure dropdown floats above all */
  position: absolute !important;
}

/* 🧩 Fix clipping on some pages */
body,
.container,
section,
.main-content,
.card,
.row {
  overflow: visible !important;
  position: relative;
}

/* 🧱 Fix if your mega menu is inside position-static */
.nav-item.dropdown.position-static {
  position: static !important;
}

/* Optional: Add a subtle shadow to dropdown */
.dropdown-menu.mega-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}