/* =====================================================
   ÁLVARO BLANCO — Custom PrestaShop Theme Overrides
   Archivo: assets/css/alvaro-custom.css
   ===================================================== */

/* ── Variables ── */
:root {
  --ab-navy:    #1c2a47;
  --ab-green:   #4db848;
  --ab-green-d: #3d9b3a;
  --ab-white:   #ffffff;
  --ab-light:   #f5f5f5;
  --ab-dark:    #232323;
  --ab-gray:    #7a7a7a;
  --ab-border:  #e0e0e0;
}

/* =====================================================
   1. BARRA SUPERIOR NAVY  (.ab-topbar)
   ===================================================== */

/* Ocultar el antiguo header-nav de PrestaShop */
#header .header-nav {
  display: none !important;
}

/* Nuestro nuevo topbar */
.ab-topbar {
  background: var(--ab-navy);
  color: #fff;
}

.ab-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

/* ── Lado izquierdo: info de envío desde displayNav1 ── */
.ab-topbar__left,
.ab-topbar__left * {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* ps_contactinfo reside en displayNav1 */
.ab-topbar__left .ab-contact-nav,
.ab-topbar__left nav.ab-contact-nav {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Texto blanco para todos los elementos del nav1 */
.ab-topbar__left a,
.ab-topbar__left span,
.ab-topbar__left .block-contact,
#header .ab-topbar a { color: #fff !important; }
#header .ab-topbar a:hover { color: var(--ab-green) !important; text-decoration: none; }

/* ── Lado derecho: login, idioma, divisa, carrito ── */
.ab-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ab-topbar__right *,
.ab-topbar__right a {
  color: #fff !important;
  font-size: 13px;
}

.ab-topbar__right a:hover { color: var(--ab-green) !important; }

/* Carrito en barra superior */
.ab-topbar__right .blockcart {
  background: transparent !important;
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.ab-topbar__right .blockcart .header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ab-topbar__right .blockcart .cart-products-count {
  background: var(--ab-green);
  color: #fff;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 3px;
}

/* Separar icono de persona */
.ab-topbar__right .user-info {
  margin: 0;
}

.ab-topbar__right .user-info .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

/* Selectores de idioma / divisa */
.ab-topbar__right .language-selector,
.ab-topbar__right .currency-selector {
  margin: 0;
  white-space: nowrap;
}

.ab-topbar__right .expand-more {
  color: #fff !important;
}

/* ── Móvil topbar ── */
.ab-topbar__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.ab-topbar__hamburger { cursor: pointer; }
.ab-topbar__hamburger .material-icons { color: #fff; line-height: 1; font-size: 26px; }

.ab-topbar__mobile-logo { flex: 1; text-align: center; }
.ab-topbar__mobile-logo img { max-height: 32px; filter: brightness(0) invert(1); }
.ab-topbar__mobile-logo h1 { margin: 0; }

.ab-topbar__mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ab-topbar__mobile-actions * { color: #fff !important; }


/* =====================================================
   2. CABECERA NAVY  (.ab-header)
   ===================================================== */

/* Ocultar el antiguo header-top de PrestaShop */
#header .header-top {
  padding: 0 !important;
}

.ab-header {
  background: var(--ab-navy);
  border-bottom: 2px solid rgba(255,255,255,0.08);
  padding: 14px 0;
}

.ab-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.ab-header__logo { flex-shrink: 0; }
.ab-header__logo-h1 { margin: 0; }
.ab-header__logo img { max-height: 64px; width: auto; }

/* Búsqueda */
.ab-header__search {
  flex: 1;
  min-width: 0; /* permite que flex comprima */
}

/* Forzar search-widget a ancho completo */
.ab-header__search .search-widget { width: 100%; min-width: unset; }
.ab-header__search .search-widget form {
  display: flex;
  width: 100%;
  position: relative;
}

.ab-header__search .search-widget form input[type=text] {
  width: 100%;
  min-width: unset;
  height: 44px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,0.15);
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  color: var(--ab-dark);
  background: var(--ab-white);
  transition: border-color .2s;
}
.ab-header__search .search-widget form input[type=text]::placeholder { color: #999; }
.ab-header__search .search-widget form input[type=text]:focus {
  border-color: var(--ab-green);
  outline: none;
  background: #fff;
}

.ab-header__search .search-widget form button[type=submit] {
  position: static;
  width: 50px;
  height: 44px;
  background: var(--ab-green);
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.ab-header__search .search-widget form button[type=submit]:hover { background: var(--ab-green-d); }
.ab-header__search .search-widget form button[type=submit] .search,
.ab-header__search .search-widget form button[type=submit] .material-icons {
  color: #fff;
  font-size: 22px;
}

/* Teléfono */
.ab-header__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ab-header__phone-icon { color: rgba(255,255,255,0.85); font-size: 32px !important; }
.ab-header__phone-text { display: flex; flex-direction: column; line-height: 1.35; }
.ab-header__phone-label { font-size: 11px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .5px; }
.ab-header__phone-num { font-size: 13px; font-weight: 700; color: var(--ab-white); }


/* =====================================================
   3. BARRA DE NAVEGACIÓN  (displayNavFullWidth → #header + ps_mainmenu)
   ===================================================== */

/* El hook displayNavFullWidth renderiza ps_mainmenu.tpl  */
#header { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Contenedor del menú */
.js-top-menu-link,
#_desktop_top_menu .top-menu {
  padding: 0;
  margin: 0;
}

/* Cada enlace del menú desktop */
#header .top-menu a[data-depth="0"] {
  color: var(--ab-dark) !important;
  text-transform: none !important;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 14px;
  display: inline-block;
  transition: color .15s;
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--ab-green) !important;
  text-decoration: none;
}

/* Borde inferior verde en hover/active */
#_desktop_top_menu > ul > li:hover > a[data-depth="0"],
#_desktop_top_menu > ul > li.current > a[data-depth="0"] {
  border-bottom: 3px solid var(--ab-green);
  padding-bottom: 11px;
}

/* Submenú */
.top-menu .sub-menu {
  border-top: 3px solid var(--ab-green) !important;
}

/* Blockreassurance dentro de displayNavFullWidth — ocultarlo ahí si no se quiere */
/* (se mostrará en footer como de costumbre) */


/* =====================================================
   4. BOTONES GLOBALES — verde en lugar de azul
   ===================================================== */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
input[type=submit].btn-primary {
  background-color: var(--ab-green) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 4px;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--ab-green-d) !important; }

.add-to-cart { border-radius: 4px !important; }

/* Product flags */
.product-flags li.product-flag { background: var(--ab-green); }
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale { background: #e63946; }

/* Paginación */
.page-item.active .page-link { background: var(--ab-green); border-color: var(--ab-green); }
.page-link:hover { color: var(--ab-green); }

/* Focus outline */
.form-control:focus { outline-color: var(--ab-green); }
.input-group.focus { outline-color: var(--ab-green); }
.tabs .nav-tabs .nav-link.active { color: var(--ab-green); border-bottom-color: var(--ab-green) !important; }

/* =====================================================
   5. GENERAL
   ===================================================== */

#wrapper { background: var(--ab-light); padding-top: 0; }
a:hover { color: var(--ab-green); }
.footer-container { border-top: 3px solid var(--ab-green); }

/* Producto — tarjeta con borde suave */
.product-miniature .thumbnail-container {
  border: 1px solid var(--ab-border);
  border-radius: 6px;
  transition: box-shadow .2s;
}
.product-miniature .thumbnail-container:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* =====================================================
   6. RESPONSIVE — TABLET (576px – 991px)
   ===================================================== */

@media (min-width: 576px) and (max-width: 991px) {
  .ab-header__inner { flex-wrap: wrap; gap: 12px; }
  .ab-header__logo { order: 1; }
  .ab-header__phone { order: 2; }
  .ab-header__search { order: 3; flex: 0 0 100%; }

  .ab-header__phone-icon { font-size: 24px !important; }
  .ab-header__phone-num { font-size: 12px; }
}

/* =====================================================
   7. RESPONSIVE — MÓVIL (< 576px)
   ===================================================== */

@media (max-width: 575px) {
  /* Topbar: solo muestra logo centrado y hamburguesa */
  .ab-topbar__inner.hidden-sm-down { display: none !important; }
  .ab-topbar__mobile { display: flex !important; }

  /* Cabecera: solo logo + búsqueda */
  .ab-header__phone { display: none !important; }
  .ab-header__inner { gap: 10px; }
  .ab-header__logo img { max-height: 44px; }

  /* Búsqueda full width */
  .ab-header__search .search-widget form input[type=text] { height: 40px; font-size: 13px; }
  .ab-header__search .search-widget form button[type=submit] { width: 44px; height: 40px; }

  /* Menú móvil */
  #mobile_top_menu_wrapper {
    background: #fff;
    border-top: 2px solid var(--ab-green);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
  }
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    color: var(--ab-dark);
    font-weight: 600;
    border-bottom: 1px solid var(--ab-border);
  }
}