/**
 * Ozado V2 - Buscador AJAX (estilos)
 *
 * Replica medidas exactas del CSS interno de Ajax Search Lite
 * (style.basic.css) para que el look final, junto con las reglas de
 * custom.css (#masthead .probox / div.asl_w .probox), sea idéntico al
 * original. También añade el dropdown propio con imagen pequeña.
 */

/* -------- Reset/box-sizing como el plugin original -------- */
div.asl_w.ozado-asl,
div.asl_w.ozado-asl * {
    box-sizing: content-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
    text-decoration: none;
    text-align: left;
    letter-spacing: normal;
}

/* -------- Wrapper + probox (estructura del plugin) -------- */
div.asl_w.ozado-asl {
    width: 100%;
    height: auto;
    position: relative;
    overflow: visible;
    z-index: 200;
}
div.asl_w.ozado-asl .probox {
    width: auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* -------- Proinput (entrada de texto) -------- */
div.asl_w.ozado-asl .probox .proinput {
    width: 1px;
    height: 100%;
    margin: 0 0 0 10px;
    padding: 0 5px;
    position: relative;
    flex: 1 1 auto;
    order: 5;
}
div.asl_w.ozado-asl .probox .proinput form {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    max-width: unset !important;
}
div.asl_w.ozado-asl .probox .proinput input {
    height: 28px;
    border: 0;
    background: transparent;
    width: 100%;
    margin: -1px;
    padding: 0;
    line-height: normal !important;
    display: block;
    min-height: unset;
    max-height: unset;
    outline: 0;
    box-shadow: none;
}
div.asl_w.ozado-asl .proinput input.orig {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10;
    position: relative;
}
div.asl_w.ozado-asl .proinput input.autocomplete {
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: .2;
    width: 100%;
    margin-top: -28px !important;
    position: relative;
    z-index: 9;
}
div.asl_w.ozado-asl .probox .proinput input::-webkit-input-placeholder { opacity: .85; }
div.asl_w.ozado-asl .probox .proinput input::-moz-placeholder { opacity: .85; }
div.asl_w.ozado-asl input[type="search"]::-webkit-search-cancel-button { display: none; }

/* -------- Iconos (lupa, settings, loader, close) -------- */
div.asl_w.ozado-asl .probox .promagnifier,
div.asl_w.ozado-asl .probox .prosettings,
div.asl_w.ozado-asl .probox .proloading,
div.asl_w.ozado-asl .probox .proclose {
    width: 20px;
    height: 20px;
    background: none;
    text-align: center;
    flex: 0 0 auto;
    z-index: 100;
    cursor: pointer;
}
div.asl_w.ozado-asl .probox .promagnifier { order: 10; }
div.asl_w.ozado-asl .probox .prosettings  { order: 1; display: none !important; }
div.asl_w.ozado-asl .probox .proloading,
div.asl_w.ozado-asl .probox .proclose     { order: 6; display: none; }

div.asl_w.ozado-asl .probox .promagnifier .innericon,
div.asl_w.ozado-asl .probox .proclose .innericon {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    overflow: hidden;
}
div.asl_w.ozado-asl .probox .promagnifier .innericon svg {
    height: 100%;
    width: 22px;
    vertical-align: baseline;
    display: inline-block;
}

/* Spinner cuando la búsqueda está corriendo. */
div.asl_w.ozado-asl.is-loading .proloading {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.asl_w.ozado-asl .asl_loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.asl_w.ozado-asl .asl_loader-inner.asl_simple-circle {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ozado-asl-spin 0.7s linear infinite;
}
@keyframes ozado-asl-spin {
    to { transform: rotate(360deg); }
}

/* -------- Dropdown de resultados -------- */
.ozado-asl-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid #e8ebef;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
    max-height: 70vh;
    overflow-y: auto;
    display: none;
    padding: 6px;
    box-sizing: border-box;
}
div.asl_w.ozado-asl.is-open .ozado-asl-results {
    display: block;
}

.ozado-asl-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: #1f2937;
    text-decoration: none;
    border-radius: 10px;
    border: 0;
    transition: background 0.15s ease, transform 0.12s ease;
    margin: 0;
}
.ozado-asl-item + .ozado-asl-item {
    margin-top: 2px;
}
.ozado-asl-item:hover,
.ozado-asl-item:focus,
.ozado-asl-item.is-active {
    background: #f4f7fa;
    color: var(--theme-color-1, #005b77);
    text-decoration: none;
}
.ozado-asl-item__img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f9fb;
    border: 1px solid #eef1f4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ozado-asl-item__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ozado-asl-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.ozado-asl-item__title {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    color: inherit;
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* El precio aparece con S/0.00 cuando no está configurado; lo ocultamos.
   Si en algún futuro hay precios reales, quita esta regla. */
.ozado-asl-item__price {
    display: none !important;
}

.ozado-asl-empty {
    padding: 18px 14px;
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
}
.ozado-asl-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-color-1, #005b77);
    background: #f4f7fa;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ozado-asl-more::after {
    content: "→";
    font-size: 1.05rem;
    line-height: 1;
}
.ozado-asl-more:hover {
    background: #e8eff3;
    color: var(--theme-color-1, #005b77);
    text-decoration: none;
}

/* Scrollbar más sutil en el dropdown. */
.ozado-asl-results::-webkit-scrollbar { width: 8px; }
.ozado-asl-results::-webkit-scrollbar-track { background: transparent; }
.ozado-asl-results::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
.ozado-asl-results::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Modal móvil: dropdown como bloque normal (no absoluto). */
#search-mobile .ozado-asl-results {
    position: static;
    margin-top: 10px;
    max-height: none;
    box-shadow: none;
    border-color: #e8ebef;
}

/* Responsive: en móvil (< 480px) el dropdown es más compacto. */
@media (max-width: 479.98px) {
    .ozado-asl-item__img {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }
    .ozado-asl-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .ozado-asl-item__title {
        font-size: 0.88rem;
    }
}