/**
 * ONF Buscador - Estilos CSS v1.4.3
 *
 * Layout compacto en 2 lineas:
 *   Linea 1: Input de busqueda con icono lupa
 *   Linea 2: Tabs + selector zona + botones (todo en una fila)
 * Cards minimalistas mostrando solo el nombre
 * Color primario: hereda del tema (--ast-global-color-0) con fallback
 * Colores derivados generados con color-mix() para portabilidad
 * Breakpoints Astra: 922px (tablet), 544px (mobile)
 * Especificidad reforzada para sobreescribir Astra Theme / Elementor
 */

/* ==========================================================================
   Variables CSS - Sistema de colores dinamico
   --onf-primary hereda del color primario del tema (Astra, Elementor, etc.)
   Los colores derivados se generan automaticamente con color-mix()
   ========================================================================== */

:root {
    /* --- Color primario: hereda del tema, fallback a burdeos --- */
    --onf-primary: var(--ast-global-color-0, #951c2f);
    --onf-primary-hover: color-mix(in srgb, var(--onf-primary), black 18%);
    --onf-primary-light: color-mix(in srgb, var(--onf-primary) 10%, white);
    --onf-primary-focus: color-mix(in srgb, var(--onf-primary) 12%, transparent);

    /* --- Texto --- */
    --onf-texto-oscuro: #1a1a1a;
    --onf-texto-secundario: #6b7280;
    --onf-texto-claro: #9ca3af;

    /* --- Fondos --- */
    --onf-fondo-blanco: #ffffff;
    --onf-fondo-claro: #F0F5FA;
    --onf-fondo-gris: #f9fafb;

    /* --- Bordes --- */
    --onf-borde: #e5e7eb;
    --onf-borde-hover: #d1d5db;

    /* --- Radios (border-radius) --- */
    --onf-radio-input: 28px;
    --onf-radio-tab: 20px;
    --onf-radio-card: 12px;
    --onf-radio-boton: 8px;
    --onf-radio-select: 20px;

    /* --- Sombras --- */
    --onf-sombra-suave: 0 1px 3px rgba(0, 0, 0, 0.06);
    --onf-sombra-card-hover: 0 8px 25px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);

    /* --- Transiciones --- */
    --onf-transicion: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Tipografia --- */
    --onf-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Compatibilidad con Astra Theme + Elementor
   Reset agresivo para evitar que el tema sobreescriba los estilos del plugin
   ========================================================================== */

.onf-buscador-contenedor *,
.onf-buscador-contenedor *::before,
.onf-buscador-contenedor *::after {
    box-sizing: border-box;
}

.onf-buscador-contenedor a {
    text-decoration: none;
}

/* Reset de botones - Sobreescribir Astra que aplica amarillo/dorado */
.onf-buscador-contenedor button,
.onf-buscador-contenedor button[type="button"],
.onf-buscador-contenedor button[type="submit"] {
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.5;
}

/* Reset de inputs y selects */
.onf-buscador-contenedor input[type="text"],
.onf-buscador-contenedor select {
    margin: 0;
    box-shadow: none !important;
    height: auto;
    min-height: 0;
    background-image: none !important;
}

.onf-buscador-contenedor input[type="text"]:focus,
.onf-buscador-contenedor select:focus {
    box-shadow: none !important;
    outline: none;
}

/* ==========================================================================
   Contenedor Principal
   ========================================================================== */

.onf-buscador-contenedor {
    font-family: var(--onf-fuente);
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    color: var(--onf-texto-oscuro);
    line-height: 1.6;
}

/* ==========================================================================
   Formulario - Layout compacto 2 lineas
   Linea 1: Input (100%)
   Linea 2: Tabs + zona dropdown + botones
   ========================================================================== */

.onf-buscador-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
    margin-bottom: 24px;
}

/* ==========================================================================
   Linea 1: Campo de Busqueda - Input con icono lupa
   ========================================================================== */

.onf-buscador-input-contenedor {
    position: relative;
    flex: 0 0 100%;
}

.onf-buscador-input-icono {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--onf-texto-claro);
    pointer-events: none;
    z-index: 2;
    transition: color 0.25s ease;
}

/* Icono lupa se colorea con el primario cuando el input tiene focus */
.onf-buscador-input-contenedor:focus-within .onf-buscador-input-icono {
    color: var(--onf-primary);
}

.onf-buscador-contenedor .onf-buscador-input-contenedor input[type="text"] {
    width: 100%;
    padding: 14px 20px 14px 52px !important;
    font-size: 15px;
    font-family: var(--onf-fuente);
    color: var(--onf-texto-oscuro);
    background: var(--onf-fondo-blanco) !important;
    border: 1.5px solid var(--onf-borde) !important;
    border-radius: var(--onf-radio-input);
    transition: var(--onf-transicion);
}

.onf-buscador-contenedor .onf-buscador-input-contenedor input[type="text"]::placeholder {
    color: var(--onf-texto-claro);
}

.onf-buscador-contenedor .onf-buscador-input-contenedor input[type="text"]:hover {
    border-color: var(--onf-borde-hover) !important;
}

.onf-buscador-contenedor .onf-buscador-input-contenedor input[type="text"]:focus {
    border-color: var(--onf-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--onf-primary-focus) !important;
}

/* ==========================================================================
   Dropdown de Autocompletado
   ========================================================================== */

.onf-autocompletado-lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    background: var(--onf-fondo-blanco);
    border: 1px solid var(--onf-borde);
    border-radius: var(--onf-radio-card);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.onf-autocompletado-lista.activo {
    display: block;
    animation: onf-desplegable-entrada 0.15s ease-out;
}

@keyframes onf-desplegable-entrada {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.onf-autocompletado-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--onf-transicion);
    border-bottom: 1px solid var(--onf-fondo-gris);
}

.onf-autocompletado-item:last-child {
    border-bottom: none;
}

.onf-autocompletado-item:hover {
    background-color: var(--onf-fondo-claro);
    padding-left: 20px;
}

.onf-autocompletado-item-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--onf-texto-oscuro);
    margin-bottom: 2px;
}

.onf-autocompletado-item-zona {
    font-size: 12px;
    color: var(--onf-texto-claro);
}

/* ==========================================================================
   Linea 2: Tabs + Zona + Botones (todo en una fila)
   ========================================================================== */

/* --- Tabs de Tipo de Servicio (Pills) --- */

.onf-buscador-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}

.onf-buscador-contenedor .onf-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--onf-fuente);
    color: var(--onf-texto-oscuro) !important;
    background: var(--onf-fondo-blanco) !important;
    border: 1.5px solid var(--onf-borde) !important;
    border-radius: var(--onf-radio-tab);
    cursor: pointer;
    transition: var(--onf-transicion);
    white-space: nowrap;
}

.onf-buscador-contenedor .onf-tab:hover {
    background: var(--onf-fondo-gris) !important;
    border-color: var(--onf-borde-hover) !important;
    transform: translateY(-1px);
}

.onf-buscador-contenedor .onf-tab.activo {
    background: var(--onf-primary) !important;
    color: var(--onf-fondo-blanco) !important;
    border-color: var(--onf-primary) !important;
    box-shadow: 0 2px 8px var(--onf-primary-focus) !important;
}

.onf-buscador-contenedor .onf-tab.activo:hover {
    background: var(--onf-primary-hover) !important;
    border-color: var(--onf-primary-hover) !important;
}

/* --- Fila de Filtros: Dropdown zona compacto + Botones --- */

.onf-buscador-filtros-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.onf-buscador-filtro-zona {
    position: relative;
    width: 180px;
    flex-shrink: 0;
}

.onf-buscador-contenedor .onf-buscador-filtro-zona select {
    width: 100%;
    padding: 6px 30px 6px 12px !important;
    font-size: 13px;
    font-family: var(--onf-fuente);
    color: var(--onf-texto-secundario);
    background: var(--onf-fondo-blanco) !important;
    border: 1.5px solid var(--onf-borde) !important;
    border-radius: var(--onf-radio-select);
    cursor: pointer;
    transition: var(--onf-transicion);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.onf-buscador-contenedor .onf-buscador-filtro-zona select:hover {
    border-color: var(--onf-borde-hover) !important;
}

.onf-buscador-contenedor .onf-buscador-filtro-zona select:focus {
    border-color: var(--onf-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--onf-primary-focus) !important;
}

/* Flecha personalizada del select */
.onf-buscador-filtro-zona::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--onf-texto-claro);
    pointer-events: none;
}

/* --- Botones de Accion --- */

.onf-buscador-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Boton principal "Cerca" - Color primario del tema (CTA) */
.onf-buscador-contenedor .onf-boton-buscar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--onf-primary) !important;
    color: var(--onf-fondo-blanco) !important;
    border: 1.5px solid var(--onf-primary) !important;
    border-radius: var(--onf-radio-boton);
    padding: 6px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--onf-fuente);
    cursor: pointer;
    transition: var(--onf-transicion);
    white-space: nowrap;
}

.onf-buscador-contenedor .onf-boton-buscar:hover {
    background-color: var(--onf-primary-hover) !important;
    border-color: var(--onf-primary-hover) !important;
    box-shadow: 0 4px 12px var(--onf-primary-focus) !important;
    transform: translateY(-1px);
}

.onf-buscador-contenedor .onf-boton-buscar:active {
    transform: translateY(0);
    box-shadow: none !important;
}

/* Boton secundario "Pulisci filtri" */
.onf-buscador-contenedor .onf-boton-limpiar {
    background: transparent !important;
    color: var(--onf-texto-claro) !important;
    border: none !important;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 400;
    font-family: var(--onf-fuente);
    cursor: pointer;
    text-decoration: underline;
    transition: var(--onf-transicion);
    white-space: nowrap;
}

.onf-buscador-contenedor .onf-boton-limpiar:hover {
    color: var(--onf-primary) !important;
}

/* ==========================================================================
   Contador de Resultados
   ========================================================================== */

.onf-resultados-contador {
    font-size: 14px;
    color: var(--onf-texto-claro);
    margin-bottom: 16px;
    padding-left: 2px;
}

.onf-resultados-contador #onf-resultados-total {
    color: var(--onf-texto-secundario);
    font-weight: 600;
}

/* ==========================================================================
   Spinner de Carga
   ========================================================================== */

.onf-cargando {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}

.onf-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--onf-borde);
    border-top: 3px solid var(--onf-primary);
    border-radius: 50%;
    animation: onf-girar 0.7s linear infinite;
}

@keyframes onf-girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Mensajes de Estado
   ========================================================================== */

.onf-sin-resultados,
.onf-error,
.onf-zona-requerida {
    text-align: center;
    padding: 50px 20px;
    color: var(--onf-texto-secundario);
    background: var(--onf-fondo-claro);
    border-radius: var(--onf-radio-card);
    border: 1px solid var(--onf-borde);
}

.onf-sin-resultados svg,
.onf-zona-requerida svg {
    margin-bottom: 16px;
    color: var(--onf-borde);
}

.onf-sin-resultados p,
.onf-error p,
.onf-zona-requerida p {
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.onf-error {
    background: #fef2f2;
    border-color: #fecaca;
}

.onf-error p {
    color: var(--onf-primary);
}

/* ==========================================================================
   Grid de Resultados - Cards Minimalistas
   ========================================================================== */

/* ALIGN-ITEMS: START EVITA QUE CARDS SIN IMAGEN SE ESTIREN
   PARA IGUALAR LA ALTURA DE CARDS CON IMAGEN EN LA MISMA FILA */
.onf-resultados-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

/* ==========================================================================
   Card de Resultado - Nombre + badge de categoria
   Estilo Airbnb: elevacion suave al hover, sombra progresiva
   ========================================================================== */

.onf-resultado-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--onf-fondo-blanco);
    border: 1px solid var(--onf-borde);
    border-radius: var(--onf-radio-card);
    padding: 16px 20px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--onf-texto-oscuro);
    position: relative;
}

.onf-resultado-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--onf-sombra-card-hover);
    border-color: var(--onf-borde-hover);
    color: var(--onf-texto-oscuro);
    text-decoration: none;
}

.onf-resultado-card:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Badge de categoria - esquina superior derecha */
.onf-resultado-card-tipo {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Color por tipo: Onoranze Funebri - Color primario del tema */
.onf-resultado-card-tipo.onf-tipo-onoranze-funebri {
    background: var(--onf-primary-light);
    color: var(--onf-primary);
}

/* Color por tipo: Cimiteri - Azul */
.onf-resultado-card-tipo.onf-tipo-cimiteri {
    background: #eef3fc;
    color: #2960a1;
}

/* Color por tipo: Camere Mortuorie - Ambar oscuro */
.onf-resultado-card-tipo.onf-tipo-camera-mortuoria {
    background: #f5f0e4;
    color: #7a6030;
}

.onf-resultado-card-nombre {
    font-size: 15px;
    font-weight: 600;
    color: inherit;
    line-height: 1.4;
    padding-right: 110px;
}

/* ==========================================================================
   Ubicacion (Zona + Barrio) - Visible en todos los resultados
   ========================================================================== */

.onf-resultado-card-ubicacion {
    font-size: 13px;
    color: var(--onf-texto-secundario);
    line-height: 1.4;
    display: block;
}

/* ==========================================================================
   Card con imagen - Solo los 3 primeros resultados
   Estructura: imagen arriba, contenido debajo con badge, nombre y ubicacion
   ========================================================================== */

.onf-resultado-con-imagen {
    padding: 0;
    overflow: hidden;
}

/* Contenedor de la imagen con altura fija y recorte */
.onf-resultado-card-imagen-contenedor {
    width: 100%;
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;
}

.onf-resultado-card-imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Zoom suave en la imagen al hover sobre la card */
.onf-resultado-con-imagen:hover .onf-resultado-card-imagen-contenedor img {
    transform: scale(1.05);
}

/* PLACEHOLDER PARA CARDS SIN IMAGEN (3 PRIMEROS RESULTADOS SIN FOTO)
   FONDO GRIS CLARO CON ICONO SVG CENTRADO EN LUGAR DE HUECO VACIO */
.onf-imagen-placeholder,
.onf-resultado-card-imagen-contenedor:has(.onf-imagen-placeholder-interior) {
    background: var(--onf-fondo-claro);
    display: flex;
    align-items: center;
    justify-content: center;
}

.onf-imagen-placeholder-interior {
    width: 100%;
    height: 100%;
    background: var(--onf-fondo-claro);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ICONO GENERICO SVG VIA CSS PARA EL PLACEHOLDER (SILUETA DE IMAGEN) */
.onf-imagen-placeholder-interior::after,
.onf-imagen-placeholder::after {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Contenedor de informacion debajo de la imagen */
.onf-resultado-card-info {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

/* Badge de tipo reposicionado dentro del contenedor de info */
.onf-resultado-con-imagen .onf-resultado-card-tipo {
    position: static;
    align-self: flex-start;
}

/* Nombre sin padding extra en cards con imagen (badge no esta absolute) */
.onf-resultado-con-imagen .onf-resultado-card-nombre {
    padding-right: 0;
}

/* ==========================================================================
   Boton "Carica altri" (Cargar mas)
   ========================================================================== */

.onf-cargar-mas-contenedor {
    text-align: center;
    padding: 28px 0 10px;
}

.onf-buscador-contenedor .onf-boton-cargar-mas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--onf-fondo-blanco) !important;
    color: var(--onf-primary) !important;
    border: 2px solid var(--onf-primary) !important;
    border-radius: var(--onf-radio-boton);
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--onf-fuente);
    cursor: pointer;
    transition: var(--onf-transicion);
}

.onf-buscador-contenedor .onf-boton-cargar-mas:hover {
    background: var(--onf-primary) !important;
    color: var(--onf-fondo-blanco) !important;
    box-shadow: 0 4px 12px var(--onf-primary-focus) !important;
    transform: translateY(-1px);
}

.onf-buscador-contenedor .onf-boton-cargar-mas:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.onf-buscador-contenedor .onf-boton-cargar-mas:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

/* Spinner dentro del boton "Carica altri" */
.onf-boton-cargar-mas .onf-mini-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--onf-borde);
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: onf-girar 0.7s linear infinite;
}

/* ==========================================================================
   Responsive - Tablet (< 922px) - Breakpoint Astra
   La linea 2 se parte: tabs en una fila, filtros en la siguiente
   ========================================================================== */

@media (max-width: 921px) {
    .onf-buscador-formulario {
        gap: 10px 0;
    }

    .onf-buscador-tabs {
        flex: 0 0 100%;
        flex-wrap: wrap;
    }

    .onf-buscador-filtros-fila {
        flex: 0 0 100%;
        margin-left: 0;
    }

    .onf-buscador-filtro-zona {
        flex: 1;
        width: auto;
    }

    .onf-buscador-contenedor .onf-boton-buscar {
        flex: 0 0 auto;
    }

    .onf-resultados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ==========================================================================
   Responsive - Mobile (< 544px) - Breakpoint Astra
   Todo apilado verticalmente
   ========================================================================== */

@media (max-width: 543px) {
    .onf-buscador-contenedor {
        padding: 20px 15px;
    }

    .onf-buscador-contenedor .onf-buscador-input-contenedor input[type="text"] {
        font-size: 16px !important; /* Evita zoom automatico en iOS */
        padding: 12px 16px 12px 46px !important;
    }

    .onf-buscador-tabs {
        gap: 6px;
    }

    .onf-buscador-contenedor .onf-tab {
        padding: 5px 12px;
        font-size: 12px;
    }

    /* Desactivar micro-elevacion en tabs en mobile (mejor para touch) */
    .onf-buscador-contenedor .onf-tab:hover {
        transform: none;
    }

    .onf-buscador-filtros-fila {
        flex-wrap: wrap;
        gap: 8px;
    }

    .onf-buscador-filtro-zona {
        flex: 0 0 100%;
        width: 100%;
    }

    .onf-buscador-contenedor .onf-buscador-filtro-zona select {
        font-size: 16px !important; /* Evita zoom automatico en iOS */
        padding: 8px 30px 8px 12px !important;
    }

    .onf-buscador-acciones {
        flex: 0 0 100%;
        width: 100%;
    }

    .onf-buscador-contenedor .onf-boton-buscar {
        flex: 1;
        justify-content: center;
        padding: 10px 22px;
    }

    /* Desactivar micro-elevacion en botones en mobile */
    .onf-buscador-contenedor .onf-boton-buscar:hover {
        transform: none;
    }

    .onf-buscador-contenedor .onf-boton-limpiar {
        padding: 6px 10px;
    }

    .onf-resultados-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .onf-resultado-card {
        padding: 14px 16px;
    }

    /* Cards: elevacion reducida en mobile para mejor UX tactil */
    .onf-resultado-card:hover {
        transform: translateY(-2px);
    }

    .onf-resultado-card-tipo {
        position: static;
        align-self: flex-start;
        font-size: 10px;
    }

    .onf-resultado-card-nombre {
        padding-right: 0;
    }

    /* Card con imagen en mobile: altura reducida */
    .onf-resultado-card-imagen-contenedor {
        height: 140px;
    }

    .onf-buscador-contenedor .onf-boton-cargar-mas {
        width: 100%;
        justify-content: center;
    }

    .onf-buscador-contenedor .onf-boton-cargar-mas:hover {
        transform: none;
    }
}