/* ========================================
   FORMULARIO DE BÚSQUEDA - FRONTEND
   ======================================== */

.bw-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ========================================
   ⚠️ ALTURA DE LOS CONTENEDORES
   Cambia el valor de "padding" para ajustar la altura
   ======================================== */

/* Campo de palabra clave */
.bw-keywords-wrap {
    flex: 1;
    min-width: 200px;
}

#bw_keywords {
    width: 100%;
    /* ALTURA DEL CONTENEDOR: Cambia padding para más/menos altura */
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
}

/* ========================================
   ⚠️ PLACEHOLDER - COLOR Y TAMAÑO
   ======================================== */

#bw_keywords::placeholder {
    /* COLOR DEL PLACEHOLDER: Cambia este color */
    color: #999;
    /* TAMAÑO DEL PLACEHOLDER: Cambia este tamaño */
    font-size: 15px;
    opacity: 1;
}

#bw_ubicacion::placeholder {
    /* COLOR DEL PLACEHOLDER: Cambia este color */
    color: #999;
    /* TAMAÑO DEL PLACEHOLDER: Cambia este tamaño */
    font-size: 15px;
    opacity: 1;
}

/* Campo de ubicación con icono */
.bw-location-wrap {
    position: relative;
    flex: 1;
    min-width: 250px;
    display: flex;
    align-items: center;
}

.bw-location-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    fill: #00CEFF;
    pointer-events: none;
    z-index: 1;
}

#bw_ubicacion {
    width: 100%;
    /* ALTURA DEL CONTENEDOR: Cambia padding para más/menos altura */
    padding: 12px 35px 12px 38px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
}

.bw-arrow {
    position: absolute;
    right: 12px;
    pointer-events: none;
    font-size: 14px;
    color: #666;
}

/* ========================================
   ⚠️ ALTURA DEL BOTÓN BUSCAR
   Cambia el valor de "padding" para ajustar la altura
   ======================================== */

.bw-search-form button {
    background: #00CEFF;
    color: #fff;
    /* ALTURA DEL BOTÓN: Cambia padding para más/menos altura */
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.bw-search-form button:hover:not(:disabled) {
    background: #00B8E6;
}

.bw-search-form button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   LISTA DE SUGERENCIAS - FRONTEND
   ======================================== */

.ui-autocomplete {
    background: #FFFFFF !important;
    border: 1px solid #ddd !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ========================================
   ⚠️ ESPACIADO DE SUGERENCIAS - PERSONALIZACIÓN FRONTEND
   
   FOTO B: Espaciado reducido y compacto
   ======================================== */

.bw-sugg-item {
    /* ═══════════════════════════════════════════════════════════
       ⚠️ SALTO DE PÁRRAFO: Espacio entre cada sugerencia completa
       Formato: padding: ARRIBA/ABAJO IZQUIERDA/DERECHA
       Valor actual: 8px arriba/abajo (reducido desde 12px)
       ═══════════════════════════════════════════════════════════ */
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.bw-sugg-item:last-child {
    border-bottom: none;
}

.bw-sugg-item:hover {
    background: #f8f9fa;
}

.bw-sugg-name {
    /* NOMBRE DEL DISTRITO/PROVINCIA/DEPARTAMENTO */
    font-size: 15px;
    font-weight: 600;
    color: #333;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ SALTO DE LÍNEA: Espacio entre el nombre y el subtítulo
       (Ej: entre "Limabamba" y "Amazonas - Rodríguez De Mendoza")
       Valor actual: 2px (reducido desde 4px)
       ═══════════════════════════════════════════════════════════ */
    margin-bottom: 2px;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ ALTURA DE LÍNEA DEL NOMBRE
       Controla el espacio interno de cada línea de texto
       Valor actual: 1.2 (reducido desde 1.3)
       ═══════════════════════════════════════════════════════════ */
    line-height: 1.2;
}

.bw-sugg-type {
    /* TEXTO "Departamento" o "Provincia" */
    font-size: 13px;
    color: #666;
    font-style: italic;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ ALTURA DE LÍNEA DEL TIPO
       Controla el espacio interno de esta línea
       Valor actual: 1.1 (reducido desde 1.2)
       ═══════════════════════════════════════════════════════════ */
    line-height: 1.1;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ ESPACIO SUPERIOR DEL TIPO
       Espacio adicional arriba de "Departamento" o "Provincia"
       Valor actual: 0px (eliminado, antes era 2px)
       ═══════════════════════════════════════════════════════════ */
    margin-top: 0px;
}

.bw-sugg-location {
    /* TEXTO "Lima - Cañete" (departamento y provincia) */
    font-size: 13px;
    color: #888;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ ALTURA DE LÍNEA DE LA UBICACIÓN
       Controla el espacio interno de esta línea
       Valor actual: 1.1 (reducido desde 1.2)
       ═══════════════════════════════════════════════════════════ */
    line-height: 1.1;
    
    /* ═══════════════════════════════════════════════════════════
       ⚠️ ESPACIO SUPERIOR DE LA UBICACIÓN
       Espacio adicional arriba de "Lima - Cañete"
       Valor actual: 0px (eliminado, antes era 2px)
       ═══════════════════════════════════════════════════════════ */
    margin-top: 0px;
}

.ui-menu-item {
    cursor: pointer;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background: #f0f7ff !important;
    border: none !important;
}

/* ========================================
   ESTILOS DISTRITO EN PRODUCT CARD
   Personaliza aquí el icono y texto del distrito en las tarjetas de productos
   ======================================== */

.bw-icon-ubicacion.bw-card {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
}

.bw-icon-card {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-right: 6px;
    display: inline-block;
    fill: #00CEFF !important;
}

.bw-icon-card path {
    fill: #00CEFF !important;
}

.bw-text-card {
    color: #0067FF;
    font-weight: 600;
    font-size: 14px;
}

/* ========================================
   ESTILOS DISTRITO EN SINGLE PRODUCT PAGE
   Personaliza aquí el icono y texto del distrito en la página del producto
   ======================================== */

.bw-icon-ubicacion.bw-single {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

.bw-icon-single {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin-right: 6px;
    display: inline-block;
    fill: #00CEFF !important;
}

.bw-icon-single path {
    fill: #00CEFF !important;
}

.bw-text-single {
    color: #0067FF;
    font-weight: 700;
    font-size: 16px;
}

/* ========================================
   RESPONSIVE - MÓVIL
   ======================================== */

@media (max-width: 768px) {
    .bw-search-form {
        flex-direction: column;
    }
    
    .bw-keywords-wrap,
    .bw-location-wrap {
        width: 100%;
        min-width: 100%;
    }
    
    .bw-search-form button {
        width: 100%;
    }
}