/* assets/css/layout/public-layout.css */
/* Estilos para el Header Público (Desktop y Mobile) - EXACTO AL LEGACY */

/* --- NAVBAR DESKTOP --- */
.navbar {
  background: #fff !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  z-index: 1020 !important; /* Asegurar que el navbar quede siempre por encima de otros elementos sticky */
}
.navbar-light .navbar-brand {
  color: #000 !important;
  font-weight: 600 !important;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: #000 !important;
}
.navbar-container {
  display: flex;
  align-items: center;
}
.logo-wrap {
  margin-right: 1.5rem;
}
.search-form-desktop {
  min-width: 250px;
  max-width: 400px;
  margin-right: 1rem;
}
.navbar.navbar-light .navbar-nav > .nav-item > .nav-link {
  margin: 0 10px !important;
  padding: 4px 8px !important;
  transition: 0.3s;
  font-size: 13pt !important;
  font-weight: 400 !important;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.75) !important;
  background: none !important;
}
.navbar.navbar-light .navbar-nav > .nav-item > .nav-link:not(.no-hover):hover,
.navbar.navbar-light .navbar-nav > .nav-item > .nav-link:not(.no-hover):focus {
  color: #333 !important;
  background: none !important;
}
.no-hover:hover {
  background: none !important;
  color: inherit !important;
}

/* --- BUSCADOR DESKTOP (EXACTO AL LEGACY) --- */
.search-form-desktop {
  min-width: 250px !important;
  max-width: 400px !important;
  margin-right: 1rem !important;
  gap: 4px !important;
}
.search-form-desktop .form-control-sm {
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  background-color: #fff !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
}
.search-form-desktop .form-control-sm:focus {
  border-color: #86b7fe !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
  color: #212529 !important;
  background-color: #fff !important;
}
.search-form-desktop .form-control-sm::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}
.search-form-desktop .btn-outline-secondary.btn-sm {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  border: 1px solid #ced4da !important;
  color: #6c757d !important;
  background-color: transparent !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
}
.search-form-desktop .btn-outline-secondary.btn-sm:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}
.search-form-desktop .btn-outline-secondary.btn-sm:focus {
  box-shadow: 0 0 0 0.25rem rgba(206, 212, 218, 0.5) !important;
}
.search-form-desktop .btn-outline-secondary.btn-sm:active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

/* Dropdown de usuario */
.navbar .dropdown-menu {
  background: #fff !important;
  border: 1px solid #ddd !important;
}
.navbar .dropdown-item {
  color: #333 !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* --- MEGA MENÚ DESKTOP --- */
.megamenu-li {
  position: static;
}

/* Sobrescribir completamente los estilos de Bootstrap para dropdown-menu */
.navbar .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  min-width: auto !important;
}

.megamenu {
  position: absolute;
  width: 100%;
  left: 0; right: 0;
  margin-top: 10px;
  padding: 35px 25px;
  border-top: none !important;
  border-radius: 0 !important;
  z-index: 9999;
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Corregir el row dentro del megamenu */
.megamenu .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.megamenu .row [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.dropdown.show .dropdown-menu {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu[data-bs-popper] {
  top: 90% !important;
}
.navbar-nav .show > .nav-link.dropdown-toggle {
  background: #000 !important;
  color: #fff !important;
}
.navbar-nav .show > .nav-link.dropdown-toggle:hover,
.navbar-nav .show > .nav-link.dropdown-toggle:focus {
  background: #000 !important;
  color: #fff !important;
}
.megamenu .dropdown-item {
  color: #3c3c3c !important;
  font-size: 15px !important;
  margin-bottom: 6px !important;
  padding: 4px 8px !important;
  text-transform: uppercase !important;
}
.megamenu .dropdown-item:hover,
.megamenu .dropdown-item:focus {
  background-color: #000 !important;
  color: #fff !important;
}
.megamenu .dropdown-item.fw-bold {
  color: #000 !important;
  font-weight: 700 !important;
}
.megamenu .dropdown-item.fw-bold:hover,
.megamenu .dropdown-item.fw-bold:focus {
  background-color: #000 !important;
  color: #fff !important;
}
.category-column {
  margin-bottom: 1rem;
}
.toggle-subcat {
  background: none !important;
  border: none !important;
  padding: 0 4px !important;
  font-size: 1rem !important;
  margin-left: 5px !important;
  cursor: pointer !important;
  color: #666 !important;
}
.toggle-subcat:hover {
  color: #333 !important;
}
.toggle-subcat:focus {
  outline: none !important;
}

/* --- OFFCANVAS GENERAL --- */
.offcanvas.offcanvas-end, .offcanvas.offcanvas-start {
  transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.offcanvas-body table td, .offcanvas-body table th {
  vertical-align: middle;
}

/* Offcanvas de Carrito Ancho */
.offcanvas.offcanvas-end.offcanvas-wide {
  width: 700px !important;
  max-width: 700px !important;
}

/* Offcanvas de Usuario (desde abajo) */
.offcanvas-user {
  height: 40%;
  max-height: 60%;
}

/* --- RESPONSIVE NAVBAR --- */
@media (max-width: 991.98px) {
  .desktop-nav {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .mobile-nav {
    display: none !important;
  }
}

/* --- CONTENEDOR MOBILE NAV --- */
.mobile-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* --- HEADER MOBILE --- */
.mobile-header {
  background: #fff;
  box-shadow: 1px 3px 4px 0 #adadad33;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  position: relative; /* Cambiado de sticky a relative, el sticky está en el padre */
}
.mobile-header .logo-text {
  color: #000 !important;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}
.mobile-header .right-group {
  display: flex;
  align-items: center;
  gap: 15px;
}
.mobile-header i {
  font-size: 1.5rem !important;
  color: #555 !important;
  cursor: pointer;
}
.mobile-header .btn {
  background: none !important;
  border: none !important;
  color: #555 !important;
  padding: 5px !important;
}
.mobile-header .btn:hover,
.mobile-header .btn:focus {
  background: none !important;
  border: none !important;
  color: #333 !important;
}
.mobile-header .badge {
  background-color: #dc3545 !important;
  color: #fff !important;
}

/* --- OFFCANVAS MOBILE (Categorías) --- */
.offcanvas-cats .megamenu {
  position: static;
  padding: 1rem;
  margin-top: 0;
  border-top: none;
}
.offcanvas-cats .category-column {
  margin-bottom: 1rem;
}
.mobile-offcanvas-search {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1rem;
}
.mobile-offcanvas-search input[type="search"] {
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  border: 1px solid #ced4da !important;
  border-radius: 0 !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
}
.mobile-offcanvas-search .btn {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  height: calc(1.5em + 0.5rem + 2px) !important;
  border: 1px solid #6c757d !important;
  border-radius: 0 !important;
  color: #6c757d !important;
  background-color: transparent !important;
}

/* --- BADGE DEL CARRITO --- */
.cart-button {
  position: relative;
}
.cart-button .badge {
  position: absolute;
  top: 0;
  start: 100%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
}

/* --- ESTILOS ADICIONALES DEL LEGACY --- */
.form-control, .form-select {
  border-radius: 0 !important;
}
.quantity-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  padding: 4px 12px;
  gap: 8px;
}
.quantity-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  font-size: 1rem;
  padding: 4px;
}
.qty-input {
  width: 40px;
  text-align: center;
  border: none;
  font-size: 1rem;
  outline: none;
  background: transparent;
}
.btn-black {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  padding: 4px 8px;
  text-decoration: none;
  cursor: pointer;
}
.btn-black:hover {
  background-color: #222;
}
.btn-outline {
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
}
.btn-outline:hover {
  background-color: #555;
  color: #fff;
}