/* ============================================================================
   XtraLife — Overrides custom para el buscador del header
   Hace que se vea como imagen 4: input pill blanco + botón magnifier naranja circular
   ============================================================================ */

/* Container del search dentro del header */
.header2-search .asl_w_container,
.header2-search .asl_w_container_1 {
    width: 100% !important;
}

/* Bloque general del search */
.header2-search .asl_w {
    width: 100% !important;
    margin: 0 !important;
}

/* Probox = container del input + magnifier (layout horizontal) */
.header2-search .asl_w .probox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

/* Wrapper del input */
.header2-search .asl_w .probox .proinput {
    flex: 1 1 auto !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 999px !important;
    height: 44px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.header2-search .asl_w .probox .proinput form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Input visible */
.header2-search .asl_w .probox .proinput input.orig {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 15px !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.header2-search .asl_w .probox .proinput input.orig::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Autocomplete ghost input (oculto detrás del orig) */
.header2-search .asl_w .probox .proinput input.autocomplete {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #cccccc !important;
    font-size: 15px !important;
}

/* Magnifier — botón naranja circular */
.header2-search .asl_w .probox .promagnifier {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: var(--theme-color-2, #ff6c2c) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.header2-search .asl_w .probox .promagnifier:hover {
    background: #e85d1c !important;
}

.header2-search .asl_w .probox .promagnifier .innericon {
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.header2-search .asl_w .probox .promagnifier svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
}

/* Prosettings (oculto) y proclose */
.header2-search .asl_w .probox .prosettings,
.header2-search .asl_w .probox .proclose {
    display: none !important;
}

/* Loading spinner */
.header2-search .asl_w .probox .proloading {
    position: absolute !important;
    right: 60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Resultados dropdown */
.header2-search .wpdreams_asl_results {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    max-width: 100% !important;
    width: auto !important;
    z-index: 99999 !important;
    overflow: hidden !important;
}

.header2-search .wpdreams_asl_results .resdrg {
    background: transparent !important;
    padding: 4px 0 !important;
}

/* Make .asl_w_container position relative so results dropdown anchors correctly */
.header2-search .asl_w_container {
    position: relative !important;
}

/* ============================================================================
   Forzar transparente todos los wrappers para que solo se vea el input pill
   ============================================================================ */
.header2-search .asl_w_container,
.header2-search .asl_w_container_1,
.header2-search .asl_w,
.header2-search .asl_m,
.header2-search div.asl_w {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.header2-search .asl_w .probox {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   Igualar altura con CATEGORIES + My products (~50px)
   ============================================================================ */
.header2-search .asl_w .probox .proinput {
    height: 50px !important;
    padding: 0 24px !important;
}

.header2-search .asl_w .probox .promagnifier {
    width: 50px !important;
    height: 50px !important;
}

.header2-search .asl_w .probox .promagnifier .innericon {
    width: 24px !important;
    height: 24px !important;
}

.header2-search .asl_w .probox .promagnifier svg {
    width: 22px !important;
    height: 22px !important;
}