/* ==========================================================================
   LÍNEA GRÁFICA OFICIAL - BANANA STORE PERÚ (DESIGN.md)
   ========================================================================== */

/* 1. FUENTES Y VARIABLES GLOBALES */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* Brand Identity Colors */
  --bs-primary: #009AD8;        /* Azul Cyan Banana */
  --bs-primary-hover: #0082B8;  /* Azul Cyan Hover */
  --bs-secondary: #FFEB3B;      /* Amarillo Banana */
  --bs-secondary-hover: #FFEE58;/* Amarillo Hover */
  --bs-accent: #D32F2F;         /* Rojo Banner (Oferta/Badges) */
  --bs-success: #25D366;        /* Verde WhatsApp */

  /* Neutrales & Fondos */
  --bs-dark-bg: #111111;        /* TopBar, Header, Footer */
  --bs-text-heading: #242424;   /* Encabezados h1-h6 */
  --bs-text-body: #767676;      /* Párrafos */
  --bs-border: #E5E7EB;         /* Bordes de cards y divisores */
  --bs-border-dark: #D1D5DB;
  --bs-card-bg: #F7F7F7;        /* Fondo de tarjetas de producto */
  --bs-bg-white: #FFFFFF;

  /* Redefinición de variables del tema Onsus */
  --primary: #009AD8 !important;
  --primary-2: #0082B8 !important;
  --secondary: #009AD8 !important;
  --third: #FFEB3B !important;
  --third-2: #FFEE58 !important;
  --third-3: #FFEB3B !important;
  --third-4: #FFF59D !important;
  --text: #767676 !important;
  --text-2: #505050 !important;
  --text-3: #242424 !important;
  --line: #E5E7EB !important;
  --line-2: #D1D5DB !important;
  --bg: #FFFFFF !important;
  --bg-2: #F7F7F7 !important;
  --bg-3: #F7F7F7 !important;
}

/* 2. TIPOGRAFÍA Y CUERPO GENERAL */
body {
  font-family: 'Lato', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--bs-text-body);
  background-color: var(--bs-bg-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Lato', 'Poppins', sans-serif !important;
  color: var(--bs-text-heading);
  font-weight: 700;
}

/* 3. ENCABEZADO Y TOPBAR (ESTILO OSCURO #111111) */
.tf-top-bar.style-3,
.tf-header.style-5,
.top-bar,
.site-header {
  background-color: var(--bs-dark-bg) !important;
}

.tf-top-bar.style-3 a,
.tf-top-bar.style-3 span,
.tf-top-bar.style-3 li {
  color: #E5E7EB !important;
}

.tf-top-bar.style-3 a:hover {
  color: var(--bs-secondary) !important;
}

/* Marca y Logos */
.logo-site, .site-title {
  color: #FFFFFF !important;
}

/* 4. BOTONES E INTERACTIVOS (DESIGN.md) */
/* Botón Primario (Azul Cyan #009AD8) */
.tf-btn.bg-primary,
.tf-btn.style-3,
.btn-primary,
.bg-primary,
.button-primary {
  background-color: var(--bs-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--bs-primary) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.tf-btn.bg-primary:hover,
.tf-btn.style-3:hover,
.btn-primary:hover,
a.bg-primary:hover {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
  color: #FFFFFF !important;
}

/* Botón Secundario / Oferta (Amarillo Banana #FFEB3B) */
.tf-btn.style-2,
.btn-secondary,
.bg-secondary,
.tf-btn.btn-warning {
  background-color: var(--bs-secondary) !important;
  color: #111111 !important;
  border-color: var(--bs-secondary) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

.tf-btn.style-2:hover,
.btn-secondary:hover,
.bg-secondary:hover {
  background-color: var(--bs-secondary-hover) !important;
  border-color: var(--bs-secondary-hover) !important;
  color: #111111 !important;
}

/* Links primarios e íconos */
a:hover,
.link:hover,
.text-cl-5,
.hover-link-icon:hover i {
  color: var(--bs-primary) !important;
}

/* 5. BADGES, ETIQUETAS Y OFERTAS (DESIGN.md) */
.badge-sale,
.on-sale,
.box-sale-wrap,
.tag-sale,
.badge-danger {
  background-color: var(--bs-accent) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  font-weight: 700;
}

.badge-stock,
.in-stock,
.badge-success {
  background-color: var(--bs-success) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  font-weight: 700;
}

.badge-banana,
.badge-highlight {
  background-color: var(--bs-secondary) !important;
  color: #111111 !important;
  border-radius: 4px;
  font-weight: 700;
}

/* 6. TARJETAS DE PRODUCTO (CARDS) */
.card-product,
.product-card {
  transition: all 0.3s ease !important;
}

.wg-cls-2 {
  border: 1px solid var(--bs-border) !important;
  border-radius: 8px !important;
  background-color: var(--bs-bg-white) !important;
  transition: all 0.3s ease !important;
}

.card-product:hover,
.product-card:hover {
}

.wg-cls-2:hover {
  border-color: var(--bs-secondary) !important;
  box-shadow: 0 0 12px rgba(255, 235, 59, 0.5), 0 4px 15px rgba(255, 235, 59, 0.25) !important;
  transform: translateY(-2px);
}

.card-product .new-price,
.product-price,
.price-text {
  color: var(--bs-primary) !important;
  font-weight: 700 !important;
}

/* 7. BOTONES FLOTANTES DE REDES SOCIALES Y WHATSAPP CON ASESORES */
.bs-social-float {
  position: fixed;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 991;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.bs-social-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 46px;
  height: 46px;
  border-radius: 25px 0 0 25px;
  color: #ffffff !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  white-space: nowrap;
}

.bs-social-btn i {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  color: var(--bs-bg-white);
}

.bs-social-btn span {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding-right: 16px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--bs-bg-white);
}

.bs-social-btn:hover {
  width: 145px;
  border-radius: 25px 0 0 25px;
  box-shadow: -4px 6px 16px rgba(0, 0, 0, 0.35);
}

.bs-social-btn:hover span {
  opacity: 1;
  transform: translateX(0);
}

.bs-social-btn.facebook { background-color: #1877F2; }
.bs-social-btn.tiktok { background-color: #000000; border-left: 2px solid #FE2C55; }
.bs-social-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.bs-social-btn.youtube { background-color: #FF0000; }

/* WIDGET WHATSAPP FLOTANTE ABAJO A LA DERECHA */
@media screen and (min-width: 768px){
  .bs-whatsapp-widget {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 999;
    font-family: 'Poppins', sans-serif;
  }
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  .bs-whatsapp-widget {
    position: fixed;
    bottom: 140px;
    right: 20px;
    z-index: 999;
    font-family: 'Poppins', sans-serif;
  }
}

.bs-wa-toggle-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  cursor: pointer;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.bs-wa-toggle-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.65);
}

.bs-wa-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background-color: #FF3D00;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}

/* CAJA DESPLEGABLE DE ASESORES */
.bs-wa-popup {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 320px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: none;
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bs-wa-popup.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bs-wa-header {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
  color: #FFFFFF;
  padding: 16px 18px;
  position: relative;
}

.bs-wa-header h6 {
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.bs-wa-header p {
  color: #E0F2F1 !important;
  font-size: 12px;
  margin: 0;
}

.bs-wa-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
}

.bs-wa-close:hover {
  opacity: 1;
}

.bs-wa-body {
  padding: 14px;
  background-color: #E5DDD5;
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 12px 12px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bs-wa-advisor {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  color: #333333 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.bs-wa-advisor:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  background: #F8FAF9;
}

.bs-wa-avatar {
  position: relative;
  margin-right: 12px;
}

.bs-wa-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.bs-wa-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #25D366;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}

.bs-wa-info {
  flex: 1;
}

.bs-wa-name {
  font-weight: 700;
  font-size: 13px;
  color: #1F2937;
  display: block;
}

.bs-wa-role {
  font-size: 11px;
  color: #6B7280;
  display: block;
}

.bs-wa-icon {
  color: #25D366;
  font-size: 20px;
  margin-left: 8px;
}

/* 8. PIE DE PÁGINA (FOOTER - FONDO #111111) */
.tf-footer,
.site-footer {
  background-color: var(--bs-dark-bg) !important;
  color: #9CA3AF !important;
}

.tf-footer .ft-menu-list .link {
  color: var(--bs-primary) !important;
}

.tf-footer .social-list a:hover {
  color: var(--white) !important;
}

.tf-footer .title-sidebar {
  color: var(--bs-bg-white);
}

/* 9. LIBRO DE RECLAMACIONES */
.libro-de-reclamaciones {
  margin-top: 15px;
  display: inline-block;
}

.libro-de-reclamaciones a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #111111 !important;
  border: 2px solid #FFEB3B !important;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.libro-de-reclamaciones a:hover {
  background-color: #000000 !important;
  border-color: #FFEE58 !important;
  box-shadow: 0 0 16px rgba(255, 235, 59, 0.5), 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-2px);
}

.libro-de-reclamaciones img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.libro-de-reclamACIONES .l-reclama-fallback span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* BOTONES TF-BTN HOVER FIX */
.tf-btn, .tf-btn * {
  color: #FFFFFF !important;
}

.tf-btn:hover, .tf-btn:hover * {
  color: #FFFFFF !important;
}

.tf-btn.btn-gray:hover {
  background-color: var(--bs-primary) !important;
  color: #FFFFFF !important;
}

/* NAVEGACIÓN Y ENCABEZADO SUPERIOR / INFERIOR (ESTILO Y LEGIBILIDAD) */
.header-bottom {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.header-bottom .nav-title.btn-active {
  color: #111827 !important;
}

.header-bottom .nav-title.btn-active .title,
.header-bottom .nav-title.btn-active i {
  color: #111827 !important;
  font-weight: 700 !important;
}

.header-bottom .nav-title.btn-active:hover .title,
.header-bottom .nav-title.btn-active:hover i {
  color: var(--bs-primary) !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link {
  color: #1F2937 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  transition: all 0.25s ease !important;
  opacity: 1;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link:hover {
  color: var(--bs-primary) !important;
}

/* Colores especiales destacados */
.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-danger {
  color: #DC2626 !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-danger:hover {
  color: #991B1B !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-warning {
  color: #D97706 !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-warning:hover {
  color: #92400E !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-primary {
  color: #2563EB !important;
}

.header-bottom .main-nav-menu .nav-list .nav-item .item-link.text-primary:hover {
  color: #1D4ED8 !important;
}

.header-bottom .br-line.type-vertical {
  background-color: #E5E7EB !important;
}

.header-bottom .btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

.header-bottom .btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--bs-primary) !important;
}