/* ============================================
   KINAAV - Navbar Styles
   Modern navigation with white theme & accents
   ============================================ */

body {
  padding-bottom: 60px;
}

/* -------------------- Main Navbar -------------------- */
.navbar {
  /* Solid white background */
  background: #fff !important;
  border-bottom: none;
  /* Removed blur since background is solid */
  backdrop-filter: none;
  
  /* Sticky positioning */
  position: sticky;
  top: 0;
  z-index: 2000;
  
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-md);
  background: #fff !important;
}

/* -------------------- Brand / Logo -------------------- */
.navbar-brand {
  transition: transform var(--transition-base);
}

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

/* Default size for mobile */
.navbar-brand img,
.navbar-brand-img {
  height: 30px; /* Smaller size for mobile */
  width: auto;
  object-fit: contain;
  display: block;
  transition: height 0.3s ease, filter var(--transition-fast);
}

/* Size for desktop (lg and up) */
@media (min-width: 992px) {
  .navbar-brand img,
  .navbar-brand-img {
    height: 40px; /* Restore original size on desktop */
  }
}

.navbar-brand:hover img {
  filter: brightness(1.05);
}

/* -------------------- Search Bar (Input Group) -------------------- */

/* Base styles for the entire search bar container */
.navbar .input-group {
    /* Define the single, unifying border for the entire pill shape */
    background: rgba(248, 244, 238, 0.9); 
    border-radius: var(--radius-full); 
    border: 1px solid var(--border-light); 
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Focus State: Active ring when clicking input or buttons */
.navbar .input-group:focus-within {
    /* Create a thicker, colored ring around the entire input group */
    box-shadow: 0 0 0 4px var(--primary-lighter);
    
    /* Change the primary border color */
    border-color: var(--primary-light); 
}

/* The Search Input Field */
.navbar .input-group .form-control {
    /* Remove its own border to rely entirely on the parent's border */
    border: none; 
    
    /* Keep background transparent to show the parent's background */
    background-color: transparent; 
    
    /* Ensure no box-shadow on the input itself */
    box-shadow: none; 
    transition: all var(--transition-fast);
}

/* Search Buttons (Dropdown & Search Icon) */
.navbar .input-group .btn {
    border: none; /* Remove inner borders */
    transition: all var(--transition-fast);
}

.navbar .input-group .btn-outline-secondary {
    color: var(--text-muted);
}

.navbar .input-group .btn-outline-secondary:hover {
    background: transparent;
    color: var(--primary);
}

/* Specific hover for the dropdown toggle */
.navbar .input-group .dropdown-toggle.btn-outline-secondary:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* -------------------- Icons (Cart, Profile, Mobile Search) -------------------- */

/* 1. Base Styles & Transitions */
.mobile-search-btn img,
.icon-circle-profile,
.icon-circle-cart {
    /* Bouncy transition effect */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease;
}

/* Circle Containers */
.icon-circle-profile,
.icon-circle-cart {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border-color);
    border-radius: 50%; /* Make perfectly round */
    background: var(--surface-card);
    position: relative;
    
    /* FIX: Force browser to respect circle shape during scaling (removes square box effect) */
    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0); 
}

/* 2. Hover Effects */

/* Mobile Search Icon Hover */
.mobile-search-btn:hover img {
    transform: scale(1.2); /* Scale image only */
}

/* Cart & Profile Container Hover */
.icon-circle-profile:hover,
.icon-circle-cart:hover {
    transform: scale(1.1); /* Scale the whole circle */
    border-color: var(--primary); 
    background: var(--primary-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* -------------------- Cart Badge -------------------- */
.icon-circle-cart .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.3s ease-out;
  z-index: 2;
}

.icon-circle-cart .badge.notify {
  animation: pulse 2s ease-in-out infinite;
}

/* -------------------- Navbar Toggler (Hidden currently) -------------------- */
.navbar-toggler {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  transition: all var(--transition-fast);
}

.navbar-toggler:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* -------------------- Dropdowns -------------------- */
.navbar .dropdown-menu {
  z-index: 2000;
  border: none;
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg);
}

/* -------------------- Responsive Adjustments -------------------- */
@media (max-width: 420px) {
  .icon-circle-profile,
  .icon-circle-cart {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    margin-top: 1rem;
    padding: 1rem;
    box-shadow: var(--shadow-md);
    animation: fadeInDown 0.3s ease-out;
  }

  .navbar-nav {
    gap: 0.5rem;
  }
}

/* Update the selector to target the badge inside the nav-link, not the circle */
.nav-link .badge.notify {
  position: absolute; /* Floats on top */
  top: -5px;          /* Adjust vertical position */
  right: -5px;        /* Adjust horizontal position */
  
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;        /* Ensure it sits on top of everything */
  animation: pulse 2s ease-in-out infinite;
  
  /* Optional: Add a small white border to separate it from the icon */
  border: 2px solid #fff; 
}

/* Ensure the hover effect still works when hovering the whole link */
.nav-link:hover .icon-circle-cart {
  transform: scale(1.1);
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Fix for disappearing text on click/active state */
.navbar .input-group .btn-outline-secondary.dropdown-toggle:active,
.navbar .input-group .btn-outline-secondary.dropdown-toggle.show,
.navbar .input-group .btn-outline-secondary.dropdown-toggle:focus {
    color: var(--primary-dark) !important; /* Force the text to stay dark */
    background-color: var(--primary-light) !important; /* Keep the light background */
    border-color: var(--border-light) !important; /* Maintain border consistency */
}