/* ================================================================
   MOBILE FIDELIZA - Estilos basados en diseño Figma
   Colores: Verde #004845 | Naranja #EC6608 | Blanco #FFFFFF
   Fuente: Poppins
   Aplica sobre: skin-yacyreta.css (capa adicional mobile)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* ----------------------------------------------------------------
   TOKENS DE DISEÑO
   ---------------------------------------------------------------- */
:root {
    --fid-green:       #004845;
    --fid-green-dark:  #003a37;
    --fid-orange:      #EC6608;
    --fid-white:       #ffffff;
    --fid-text:        #2a2a2a;
    --fid-border:      #efefef;
    --fid-font:        'Poppins', sans-serif;
    --fid-nav-height:  61px;
}

/* ----------------------------------------------------------------
   TIPOGRAFÍA GLOBAL
   ---------------------------------------------------------------- */
body,
.navbar-nav > li > a,
h1, h2, h3, h4, h5, h6,
p, .btn, label, input, select, textarea {
    font-family: var(--fid-font) !important;
}


/* ================================================================
   MOBILE ONLY  (≤ 767px)
   ================================================================ */
@media (max-width: 767px) {

    /* ---- BODY: espacio para el navbar fixed ---- */
    body {
        padding-top:  var(--fid-nav-height) !important;
        overflow-x:   hidden !important;
        max-width:    100vw !important;
    }

    html {
        overflow-x: hidden !important;
    }

    /* ---- MAIN CONTAINER: anular padding Bootstrap que desborda viewport ---- */
    .main-container,
    .main-container-wrapper {
        padding-left:  0 !important;
        padding-right: 0 !important;
        width:         100% !important;
        max-width:     100% !important;
        box-sizing:    border-box !important;
    }

    /* ---- OCULTAR barra superior (teléfono / usuario) ---- */
    .navbar-top {
        display: none !important;
    }

    /* ---- NAVBAR CONTAINER: anular padding Bootstrap que desborda viewport ---- */
    .navbar-tshop > .container {
        padding-left:  0 !important;
        padding-right: 0 !important;
        width:         100% !important;
        max-width:     100% !important;
    }

    /* ---- NAVBAR PRINCIPAL ---- */
    .navbar-tshop {
        background: linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #FFFFFF !important; /* Figma exacto */
        border-bottom: 1px solid var(--fid-border) !important;
        min-height: var(--fid-nav-height) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    /* ---- NAVBAR-HEADER: layout flex ---- */
    .navbar-header {
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        width:           100% !important;
        height:          var(--fid-nav-height) !important;
        padding:         0 16px !important;
        float:           none !important;
        flex-wrap:       nowrap !important;
        margin:          0 !important;
    }

    /* ---- LOGO (orden 1) ---- */
    .navbar-header .navbar-brand {
        order:        1 !important;
        flex:         0 0 auto !important;
        margin-right: auto !important;   /* empuja el resto hacia la derecha */
        padding:      0 !important;
        float:        none !important;
        top:          0 !important;
        position:     static !important;
        height:       auto !important;
    }

    .navbar-header .navbar-brand img {
        height: 36px !important;
        width:  auto !important;
    }

    /* ---- PUNTOS / BALANCE (★ 500) (orden 2) ---- */
    .navbar-header #btnPoints2 {
        order:           2 !important;
        flex:            0 0 auto !important;
        background:      none !important;
        border:          none !important;
        box-shadow:      none !important;
        padding:         0 8px !important;
        margin:          0 !important;
        color:           #F26522 !important;
        font-family:     var(--fid-font) !important;
        font-size:       12px !important;
        font-weight:     600 !important;
        display:         flex !important;
        align-items:     center !important;
        gap:             4px !important;
        float:           none !important;
        line-height:     1 !important;
    }

    /* SVG estrella — display flex para alinear con el texto */
    .navbar-header #btnPoints2 .fid-star-svg {
        display:        inline-block !important;
        vertical-align: middle !important;
        flex-shrink:    0 !important;
    }

    /* Número de puntos — Poppins SemiBold 12px #F26522 (exacto Figma) */
    .navbar-header #lblBalance,
    .navbar-header .fid-points-label {
        color:          #F26522 !important;
        font-family:    var(--fid-font) !important;
        font-weight:    600 !important;
        font-size:      12px !important;
        display:        inline-block !important;
        vertical-align: middle !important;
    }

    /* SVG carrito — display correcto */
    .navbar-header #btnCart2 .fid-cart-svg {
        display:        inline-block !important;
        vertical-align: middle !important;
        flex-shrink:    0 !important;
    }

    /* Quitar estilos FA residuales (ya no se usan FA icons en header) */
    .navbar-header #btnCart2 .fa-shopping-cart,
    .navbar-header #btnPoints2 i {
        display: none !important;
    }

    /* ---- CARRITO (link + botón) (orden 3) ---- */
    .navbar-header #lnkCartMobile {
        order:    3 !important;
        flex:     0 0 auto !important;
        display:  flex !important;
        float:    none !important;
    }

    .navbar-header #btnCart2 {
        background:  none !important;
        border:      none !important;
        box-shadow:  none !important;
        padding:     0 8px !important;
        margin:      0 !important;
        color:       var(--fid-text) !important;
        display:     flex !important;
        align-items: center !important;
        float:       none !important;
        position:    static !important;
    }

    /* Wrapper del ícono + badge — posición relativa para el badge absoluto */
    .navbar-header #btnCart2 .cart-icon-wrap {
        position: relative !important;
        display:  inline-flex !important;
        align-items: center !important;
    }

    .navbar-header #btnCart2 .fa-shopping-cart {
        font-size: 20px !important;
        color:     var(--fid-text) !important;   /* oscuro, igual que Figma */
    }

    /* Badge del carrito — superpuesto arriba-derecha del ícono (exacto Figma) */
    .navbar-header #btnCart2 .cart-badge {
        position:         absolute !important;
        top:              -6px !important;
        right:            -6px !important;
        background:       linear-gradient(0deg, #EC6608, #EC6608), #FE6B0C !important; /* Figma exacto */
        color:            var(--fid-white) !important;
        font-size:        11px !important;               /* Figma: 11px exacto */
        font-weight:      600 !important;
        min-width:        16px !important;
        height:           16px !important;
        line-height:      16px !important;
        padding:          0 3px !important;
        border-radius:    50% !important;
        font-family:      var(--fid-font) !important;
        display:          block !important;
        text-align:       center !important;
    }

    /* Ocultar texto "Carrito" en mobile, el badge permanece visible */
    .navbar-header #btnCart2 .cartRespons {
        display: none !important;
    }

    /* Neutralizar colorWhite en el ícono del carrito */
    .navbar-header #btnCart2 i.colorWhite,
    .navbar-header #btnCart2 .colorWhite {
        color: var(--fid-text) !important;
    }

    /* ---- HAMBURGER (orden 4) ---- */
    .navbar-header .navbar-toggle[data-target=".navbar-collapse"] {
        order:      4 !important;
        flex:       0 0 auto !important;
        background: none !important;
        border:     none !important;
        box-shadow: none !important;
        padding:    0 !important;
        margin:     0 0 0 16px !important;  /* separación respecto al carrito */
        float:      none !important;
    }

    .navbar-header .navbar-toggle[data-target=".navbar-collapse"] .icon-bar {
        background-color: #004845 !important;
        border:           none !important;
        height:           2px !important;
        width:            22px !important;
        display:          block !important;
        border-radius:    2px !important;
        margin:           4px 0 !important;
    }

    /* ---- CUPONES: oculto ---- */
    .navbar-header #btnCoupons {
        display: none !important;
    }

    /* ---- SEARCH BOX inline: oculto ---- */
    .navbar-header .search-box {
        display: none !important;
    }

    /* ================================================================
       MENÚ DESPLEGABLE (nav collapse) — Figma exacto
       Background: #004845 | Poppins 400 15px line-height 30px | opacity 0.9
       ================================================================ */
    .navbar-collapse {
        background-color: #004845 !important;
        border-top:       none !important;
        border-bottom:    none !important;
        box-shadow:       none !important;
        padding:          0 !important;
    }

    .navbar-collapse .navbar-nav {
        margin:  5px 0 !important;
        padding: 0 !important;
    }

    .navbar-collapse .navbar-nav > li {
        border-bottom: none !important;
        margin:        0 !important;
    }

    .navbar-collapse .navbar-nav > li > a {
        display:         block !important;
        color:           #FFFFFF !important;
        font-family:     'Poppins', sans-serif !important;
        font-style:      normal !important;
        font-weight:     400 !important;
        font-size:       15px !important;
        line-height:     30px !important;
        opacity:         0.9 !important;
        padding:         0 0 0 8.53% !important;
        letter-spacing:  normal !important;
        text-transform:  none !important;   /* Figma: capitalize natural, sin uppercase */
        background:      none !important;
    }

    .navbar-collapse .navbar-nav > li > a:hover,
    .navbar-collapse .navbar-nav > li > a:focus {
        background-color: rgba(255, 255, 255, 0.10) !important;
        color:            #FFFFFF !important;
        opacity:          1 !important;
    }

    /* Ocultar el bloque de íconos desktop dentro del collapse en mobile */
    .navbar-collapse .hidden-xs {
        display: none !important;
    }

    /* ================================================================
       BARRA DE BÚSQUEDA FULL-WIDTH
       ================================================================ */
    .search-full {
        background: var(--fid-green) !important;
        top:        var(--fid-nav-height) !important;
    }

    .search-full .search-input {
        background: rgba(255, 255, 255, 0.15) !important;
        color:      var(--fid-white) !important;
        border:     1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .search-full .search-input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .search-close {
        color: var(--fid-white) !important;
    }

    /* ================================================================
       BANNER / SLIDER — cancelar padding-top doble
       El body ya tiene padding-top: 61px (navbar fijo).
       El CSS base aplica padding-top: 86px al .banner en mobile → se anula.
       ================================================================ */
    .banner,
    .banner.banner-boxes,
    .header-version-2 .banner {
        padding-top: 0 !important;
        margin-top:  0 !important;
    }

    /* ================================================================
       FOOTER MOBILE — oculto en mobile (no eliminado)
       ================================================================ */
    .footer,
    .footer-bottom {
        display: none !important;
    }

    /* ================================================================
       BOTÓN PRINCIPAL (CANJEAR / acciones)
       ================================================================ */
    .btn-primary,
    .add2cartButton {
        background-color: var(--fid-green) !important;
        border-color:     var(--fid-green) !important;
        color:            var(--fid-white) !important;
        font-family:      var(--fid-font) !important;
        font-weight:      400 !important;
        letter-spacing:   2px !important;
        border-radius:    5px !important;
        text-transform:   uppercase !important;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .add2cartButton:hover {
        background-color: var(--fid-green-dark) !important;
        border-color:     var(--fid-green-dark) !important;
        color:            var(--fid-white) !important;
    }

    /* ================================================================
       BOTÓN WHATSAPP FLOTANTE
       ================================================================ */
    .float {
        bottom:  20px !important;
        right:   16px !important;
        width:   50px !important;
        height:  50px !important;
        font-size: 24px !important;
    }

    .my-float {
        margin-top: 12px !important;
    }

} /* fin @media max-width: 767px */