/* search block */

/* Recent searches - horizontal tags */
.mqvsearch-recent-searches {
    width: 100%;
    padding: 30px 45px 0px 45px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mqvsearch-recent-searches__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #b0b0b0;
}

.mqvsearch-clear-all-searches {
    font-size: 12px !important;
    color: #0077ff;
    padding: 0;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 4px;
}

.mqvsearch-clear-all-searches:hover {
    text-decoration: underline;
    color: #0077ff;
}

.mqvsearch-recent-search-tag {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #b0b0b0;
    border-radius: 20px;
    padding: 2px 12px 2px 14px;
    font-size: 13px;
    color: #b0b0b0;
    transition: all 0.2s ease;
}

.mqvsearch-recent-search-tag:hover {
    border-color: #0077ff;
}

.mqvsearch-recent-search-tag:hover .mqvsearch-recent-search-link,
.mqvsearch-recent-search-tag:hover .mqvsearch-remove-search {
    color: #0077ff !important;
}

.mqvsearch-recent-search-link {
    color: #333333 !important;
    text-decoration: none;
    margin-right: 6px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mqvsearch-recent-search-link:hover {
    color: #0077ff !important;
    text-decoration: none;
}

.mqvsearch-remove-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0 4px;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    transition: color 0.2s ease;
}

.mqvsearch-remove-search:hover {
    color: #0077ff !important;
}

/* Popular searches mobile section - same style as recent searches */
.mqvsearch-popular-searches-mobile {
    display: none; /* Hidden by default (desktop) */
}

@media (max-width: 767px) {
    /* Show popular searches on mobile */
    .mqvsearch-popular-searches-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        width: 100%;
        padding: 15px 28px;
        background-color: #fff;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
    }
    
    /* Mobile layout adjustments */
    .mqvsearch-popular-searches-mobile .mqvsearch-recent-searches__title {
        margin-bottom: 8px;
        width: 100%;
    }
    
    /* Wrapper for popular search tags - horizontal layout */
    .mqvsearch-popular-searches-tags-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    
    /* Adjust recent searches for mobile - column layout */
    .mqvsearch-recent-searches {
        padding-left: 28px !important;
        padding-right: 28px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .mqvsearch-recent-searches .mqvsearch-recent-searches__title {
        margin-bottom: 8px;
        width: 100%;
    }
    
    /* Wrapper for recent search tags - horizontal layout */
    .mqvsearch-recent-searches-tags-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
}

/* block top search */
#search_block_top {
    position: absolute;
    right: 26%;
    top: 34px;
    width: 400px;
}

#search_block_top p {
    padding: 0;
}

#search_block_top #search_query_top {
    padding: 0 5px;
    height: 23px;
    width: 250px;
    /* 310 */
    border: 1px solid #666;
    border-right: 0 !important;
    color: #666;
    background: url(../img/bg_search_input.png) repeat-x 0 0 #fff;
    float: left;
}


#search_block_top .button {
    border: none;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    background: url(../img/bg_search_submit.png) repeat-x 0 0 #101010;
    float: left;
    height: 25px;
}


form#searchbox {
    padding-top: 5px
}

form#searchbox label {
    color: #333;
    margin-bottom: 1px
}

form#searchbox input#search_query_block {
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    height: 18px;
    margin-top: 10px;
}

form#searchbox input#search_button {
    padding: 1px 4px;
}

/* Search term banner */
.search-term-banner {
    display: block !important;
    margin: 0 0 20px 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.search-term-banner img {
    display: block !important;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
}

/* Owl Carousel controls positioning */
#mqvsearch-products-carrusel .owl-stage-outer {
    padding-bottom: 0px
}

#control-mqvsearch-products-carrusel .carousel-control-next,
#control-mqvsearch-products-carrusel .carousel-control-prev {
    width: 41px;
    height: 114px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    margin-top: -22rem;
    top: auto;
    bottom: auto;
    background-color: #fff;
    z-index: 10;
    border: 1px solid #eee !important;
}

#control-mqvsearch-products-carrusel .carousel-control-next {
    border-radius: 16px 0 0 16px;
}

#control-mqvsearch-products-carrusel .carousel-control-prev {
    border-radius: 0 16px 16px 0;
}

#control-mqvsearch-products-carrusel .carousel-control-next-icon {
    transform: scaleX(-1);
}

#control-mqvsearch-products-carrusel .owl-prev,
#control-mqvsearch-products-carrusel .owl-next {
    margin: 0px !important;
    padding: 0px !important;
}

#control-mqvsearch-products-carrusel .custom-nav {
    height: 0px;
}

#control-mqvsearch-products-carrusel .custom-nav.owl-nav {
    margin-top: 0px;
}

@media (min-width: 1248px) {
    #control-mqvsearch-products-carrusel .custom-nav.owl-nav {
        position: relative;
    }

    #control-mqvsearch-products-carrusel .custom-nav.owl-nav .carousel-control-prev {
        left: -3rem;
        border-radius: 16px 0 0 16px;
    }

    #control-mqvsearch-products-carrusel .custom-nav.owl-nav .carousel-control-next {
        right: -3rem;
        border-radius: 0 16px 16px 0;
    }
}

@media (max-width: 991px) {
    #control-mqvsearch-products-carrusel {
        display: none;
    }
}

/*Button*/
.ui-mqvsearch .not-stock {
    font-size: 12px !important;
    width: 100% !important;
    font-weight: 700 !important;
    font-family: 'Poppins' !important;
}

/* Close button for search modal */
.ui-autocomplete.ui-mqvsearch .mqvsearch-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    z-index: 1000;
    transition: opacity 0.2s ease;
}

.ui-autocomplete.ui-mqvsearch .mqvsearch-close:hover {
    opacity: 1;
}

/* Header de productos con botón de más resultados */
.mqvsearch-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.mqvsearch-products-header h4 {
    margin: 0;
}

.mqvsearch-more-results-btn {
    display: block !important;
    text-transform: uppercase;
    letter-spacing: normal;
    font-weight: 700 !important;
    border-radius: 0 !important;
    color: #fff !important;
}

/* Ocultar búsquedas populares en móvil */
@media (max-width: 767px) {
    .mqvsearch-filter {
        display: none !important;
    }

    .mqvsearch-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Custom select styles for mobile - matching .select-cantidad style */
@media (max-width: 767px) {
    /* Allow overflow for styled-select to show custom dropdown */
    .mqvsearch-products-mobile-grid .styled-select,
    .ui-mqvsearch .styled-select {
        overflow: visible !important;
        background-color: white;
        background-repeat: no-repeat;
        background-position: 95% 12px;
        position: relative;
    }
    
    .custom-select-wrapper {
        position: relative;
        width: 100%;
        pointer-events: auto !important;
    }
    
    .custom-select-display {
        font-size: 11px;
        color: #333;
        padding: 6px 25px 5px 7px;
        border-radius: 0px;
        border: solid 1px #a3b8d370;
        height: auto;
        -webkit-appearance: none;
        text-align: center;
        font-weight: 400;
        cursor: pointer;
        position: relative;
        background-image: url(../img/flecha-selecctor-negro.svg);
        background-color: white;
        background-repeat: no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 10px;
    }
    
    .custom-select-options {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        border: solid 1px #a3b8d370 !important;
        border-top: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .custom-select-options.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .custom-select-options li {
        padding: 6px 7px 5px 7px;
        cursor: pointer;
        font-size: 11px;
        color: #333;
        font-weight: 400;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
        background: white;
    }
    
    .custom-select-options li:hover {
        background: #f5f5f5;
    }
    
    .custom-select-options li.selected {
        background: #fff;
        color: #333;
        font-weight: 600;
    }
    
    .custom-select-options li:last-child {
        border-bottom: none;
    }
    
    /* Truncar texto de opciones a máximo 13 caracteres (10 + "...") solo en modal móvil */
    .ui-mqvsearch .custom-select-display,
    .mqvsearch-products-mobile-grid .custom-select-display,
    .ui-mqvsearch .custom-select-options li,
    .mqvsearch-products-mobile-grid .custom-select-options li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 14em;
    }
}

/* No results found styles */
.no-results-found {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 8px;
    margin: 20px 0;
}

.no-results-found .no-results-icon {
    margin-bottom: 20px;
}

.no-results-found .no-results-icon i {
    font-size: 48px !important;
    color: #ccc !important;
    opacity: 0.7;
}

.no-results-found .no-results-title h4 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.no-results-found .no-results-message p {
    color: #666;
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

.no-results-found .mqvsearch-post {
    display: none;
    /* Hide the original message */
}

.buscador .form-control {
    background-color: #fff !important;
}

/* Overlay oscuro cuando el buscador o modal están abiertos */
.search-block-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-block-overlay.active {
    display: block;
    opacity: 1;
}

/* Ajustar z-index para que estén sobre el overlay */
.search-block {
    position: relative;
    z-index: 999;
}

.search-block.showed {
    z-index: 999;
}

/* Input de búsqueda por encima del overlay */
.search-block input[data-autocomplete],
.search-block input[name=s],
.search-block form,
#search_widget {
    position: relative;
    z-index: 999;
}

.ui-autocomplete.ui-mqvsearch {
    z-index: 1000 !important;
}

#mqvsearch_mobile_modal {
    z-index: 1001 !important;
}

@media (max-width: 992px) {
    .search-block.showed {
        position: static !important;
        transform: none !important;
        top: auto !important;
    }

    /* Evitar que el header oculte el buscador cuando está abierto */
    #sticky-header.not-animate-stickied .search-block.showed,
    #sticky-header.animate-stickied .search-block.showed {
        position: static !important;
        transform: none !important;
        top: auto !important;
    }
}

/* Ocultar el botón X predeterminado del navegador en inputs de tipo search */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Botón de limpiar (X) - Estilos globales para móvil y desktop */
.search-block-clear-btn {
    display: none !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.64961 10.0001C2.64961 14.0594 5.94032 17.3501 9.99961 17.3501C14.0589 17.3501 17.3496 14.0594 17.3496 10.0001C17.3496 5.9408 14.0589 2.6501 9.99961 2.6501C5.94032 2.6501 2.64961 5.9408 2.64961 10.0001ZM9.99961 18.6501C5.22235 18.6501 1.34961 14.7774 1.34961 10.0001C1.34961 5.22283 5.22235 1.3501 9.99961 1.3501C14.7769 1.3501 18.6496 5.22283 18.6496 10.0001C18.6496 14.7774 14.7769 18.6501 9.99961 18.6501Z" fill="%23212529"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.53989 6.54038C6.28605 6.79422 6.28605 7.20578 6.53989 7.45962L12.5399 13.4596C12.7937 13.7135 13.2053 13.7135 13.4591 13.4596C13.713 13.2058 13.713 12.7942 13.4591 12.5404L7.45913 6.54038C7.20529 6.28654 6.79373 6.28654 6.53989 6.54038Z" fill="%23212529"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.53994 13.4598C6.79378 13.7137 7.20534 13.7137 7.45918 13.4598L13.4592 7.45982C13.713 7.20597 13.713 6.79442 13.4592 6.54058C13.2053 6.28674 12.7938 6.28674 12.5399 6.54058L6.53994 12.5406C6.2861 12.7944 6.2861 13.206 6.53994 13.4598Z" fill="%23212529"></path></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    pointer-events: auto !important;
    outline: none !important;
}

.search-block-clear-btn.active {
    display: block !important;
}

.search-block-clear-btn:hover {
    opacity: 0.7 !important;
}

.search-block-clear-btn:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Estilos específicos para desktop */
@media (min-width: 768px) {
    .search-block form {
        position: relative !important;
    }

    .search-block .input-group {
        position: relative !important;
    }

    .search-block input[type="text"],
    .search-block input[type="search"],
    .search-block input[name="s"] {
        padding-right: 45px !important;
    }

    .search-block-clear-btn {
        right: 8px !important;
        margin-top: 2px;
    }
}

@media (max-width: 767px) {
    .ui-menu .product-miniature .card-title a {
        min-height: 57px !important;
    }

    .search-block-clear-btn {
       right: -2px !important;
       margin-top: 2px;
    }

    /* Search block oculto por defecto en móvil */
    .search-block {
        display: none;
    }

    /* Bloquear scroll del body cuando la modal está abierta en móvil */
    body.mqvsearch-on {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Search block fijo en la parte superior cuando se muestra */
    body.mqvsearch-on .search-block,
    .search-block.showed {
        display: flex !important;
        align-items: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 52px !important;
        z-index: 999 !important;
        background: #fff !important;
        padding: 0 15px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-bottom: 2px solid #4dabf7 !important;
    }

    /* Flecha de retroceso para cerrar en móvil */
    body.mqvsearch-on .search-block::before,
    .search-block.showed::before {
        content: '←' !important;
        font-size: 24px !important;
        color: #000 !important;
        margin-right: 15px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    /* El form ocupa el resto del espacio */
    body.mqvsearch-on .search-block form,
    .search-block.showed form {
        flex: 1 !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Ocultar el botón de búsqueda (lupa) en móvil */
    body.mqvsearch-on .search-block .input-group-prepend,
    .search-block.showed .input-group-prepend {
        display: none !important;
    }

    /* Ajustar el input group */
    body.mqvsearch-on .search-block .input-group,
    .search-block.showed .input-group {
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
    }

    /* Asegurar que el input dentro del search-block esté bien posicionado */
    body.mqvsearch-on .search-block input[type="text"],
    body.mqvsearch-on .search-block input[type="search"],
    .search-block.showed input[type="text"],
    .search-block.showed input[type="search"] {
        position: relative !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 8px 40px 8px 0 !important;
        font-size: 16px !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Placeholder con color gris claro */
    body.mqvsearch-on .search-block input::placeholder,
    .search-block.showed input::placeholder {
        color: #999 !important;
    }

    /* Posicionar el dropdown debajo del search-block */
    body.mqvsearch-on .ui-autocomplete.ui-mqvsearch {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - 52px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}