/* ==========================================================
   CASA MIXTECO
   CMX-25C · HEADER MÓVIL · BUSCADOR · DISEÑO

   CONTROLA:
   - Buscador del Header Móvil
   - Ancho
   - Altura
   - Campo
   - Bordes
   - Placeholder
   - Integración visual con FiboSearch
   - Overlay móvil de FiboSearch

   NO CONTROLA:
   - Buscador PC
   - Logo móvil
   - Hamburguesa
   - Carrito móvil
   - Resultados AJAX
   - Barra inferior
   ========================================================== */


/* ==========================================================
   01 · CONTENEDOR PRINCIPAL
   ========================================================== */

#cmx-buscador-mobile {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ==========================================================
   02 · WRAPPER GENERAL FIBOSEARCH
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-search-wrapp {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   03 · FORMULARIO
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-sf-wrapp {

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 8px !important;

    background:
        var(--cmx-blanco, #FFFFFF) !important;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.16) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   04 · CAMPO
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-search-input {

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;

    margin: 0 !important;

    padding:
        0
        48px
        0
        14px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background:
        var(--cmx-blanco, #FFFFFF) !important;

    color:
        var(--cmx-texto, #333333) !important;

    font-family:
        var(--cmx-fuente, Arial, sans-serif) !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: normal !important;

    outline: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* ==========================================================
   05 · PLACEHOLDER
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-search-input::placeholder {

    color: #777777 !important;

    font-weight: 400 !important;

    opacity: 1 !important;
}


/* ==========================================================
   06 · LUPA DEL BUSCADOR
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-ico-magnifier {

    color:
        var(--cmx-azul, #0000A6) !important;

    fill:
        var(--cmx-azul, #0000A6) !important;
}


/* ==========================================================
   07 · BOTÓN DE BÚSQUEDA
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-search-submit {

    color:
        var(--cmx-azul, #0000A6) !important;

    background:
        transparent !important;

    border: 0 !important;
}


/* ==========================================================
   08 · FOCO
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-sf-wrapp:focus-within {

    box-shadow:
        0 0 0 2px var(--cmx-amarillo, #FFEE00),
        0 1px 3px rgba(0, 0, 0, 0.15) !important;
}


/* ==========================================================
   09 · PRELOADER
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-preloader {

    right: 44px !important;
    left: auto !important;
}


/* ==========================================================
   10 · BOTÓN CERRAR / LIMPIAR
   ========================================================== */

#cmx-buscador-mobile
.dgwt-wcas-close {

    right: 44px !important;
    left: auto !important;
}


/* ==========================================================
   11 · SOLO MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    #cmx-buscador-mobile {
        display: block !important;

        width: 100% !important;
    }

}


/* ==========================================================
   12 · OCULTAR EN PC
   ========================================================== */

@media (min-width: 769px) {

    #cmx-buscador-mobile {
        display: none !important;
    }

}