.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 */
  padding: 10px 0 !important;
}

#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);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.btn-warning {
    background: #f59e0b;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 700;
}

.btn-warning:hover {
    background: #d97706;
    transform: translateY(-2px);
}

.category-card {
    background: white;
    border-radius: 20px;    
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.add-to-cart-btn-home {
  background: linear-gradient(135deg, #1067b9ff, #055c96ff);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
}

.add-to-cart-btn-home:hover {
  background: linear-gradient(135deg, #051b96ff, #042978ff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.out-of-stock-btn {
  width: 100%;
  background: var(--text-muted);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.7;
}
.bg-primary{
  background: #2563eb;
}

.theme-container {
    max-width: 1300px;
    margin: auto;
    padding: 20px;
}

.profile-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.profile-sidebar {
    background: linear-gradient(
        135deg,
        #0f172a,
        #2563eb
    );

    color: white;
    padding: 40px 25px;
    text-align: center;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin: auto auto 20px;
}

.profile-role {
    opacity: .9;
}

.profile-content {
    padding: 40px;
}

.profile-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.profile-section {
    margin-bottom: 40px;
}

.profile-section h3 {
    margin-bottom: 20px;
    color: #0f172a;
}

.form-grid {
    display: grid;
    grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.theme-input {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #dbeafe;
    transition: .3s;
}

.theme-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow:
    0 0 0 4px rgba(37,99,235,.1);
}

.btn-save-profile {
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: white;
    border: none;
    padding: 15px 28px;
    border-radius: 14px;
    font-weight: 700;
    transition: .3s;
}

.btn-save-profile:hover {
    transform: translateY(-2px);
    box-shadow:
    0 10px 25px rgba(37,99,235,.25);
}

@media (max-width: 992px) {

    .profile-card {
        grid-template-columns: 1fr;
    }

    .profile-content {
        padding: 25px;
    }

}