@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ==========================================================================
   Buscador de la Home (Destinos + Actividades) - estilo Civitatis
   Vista: Home/Index
   Autocontenido: define sus propios tokens sobre .ct-buscador-home para no
   depender del sistema de diseno de Destinos (Destinos.css). --theme-color
   proviene del tema (assets/themeForest/css/main.css).
   ========================================================================== */

/* En Home ocultamos el texto del hero: el banner aloja solo el buscador, centrado */
.hero-4 .hero-items {
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 40px;
}

.hero-4 .hero-items .hero-content {
    display: none;
}

.hero-section.hero-4 {
    position: relative;
    z-index: 30;
}

.ct-buscador-home {
    --ctb-text: #1a2535;
    --ctb-muted: #64748b;
    --ctb-accent: #e8622a;
    --ctb-radius: 2.5rem;
    --ctb-bottom-radius: 0.5rem;
    --ctb-shadow: 0 24px 64px rgba(5,13,24,.14);
    /* Centrado horizontal y verticalmente dentro del banner */
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 12px;
    font-family: 'DM Sans', sans-serif;
}

.ct-buscador-box {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--ctb-radius);
    box-shadow: var(--ctb-shadow);
}

.ct-buscador-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-buscador-icon {
    position: absolute;
    left: 22px;
    color: var(--theme-color, var(--ctb-accent));
    font-size: 18px;
    pointer-events: none;
}

.ct-buscador-input {
    width: 100%;
    font-size: 20px;
    color: var(--ctb-text);
    padding: 3% 2% 3% 10%;
    border: 3px solid transparent;
    border-radius: var(--ctb-radius);
    outline: none;
    background: #fff;
    font-family: 'DM Sans', sans-serif;
    transition: border-color .2s ease,
                border-radius .42s cubic-bezier(.34, 1.56, .64, 1);
}

    .ct-buscador-input::placeholder {
        color: var(--ctb-muted);
    }

.ct-buscador-box.is-open .ct-buscador-input,
.ct-buscador-input:focus {
    border-color: var(--theme-color, var(--ctb-accent));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Panel de resultados: aparece con una transicion suave (desvanecido + ligero deslizamiento) */
.ct-buscador-resultados {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 330px;
    overflow-y: auto;
    background: #fff;
    border: 2px solid var(--theme-color, var(--ctb-accent));
    border-top: none;
    border-bottom-left-radius: var(--ctb-bottom-radius);
    border-bottom-right-radius: var(--ctb-bottom-radius);
    box-shadow: var(--ctb-shadow);
    opacity: 0;
    transform: translateY(-14px) scale(.96);
    transform-origin: top center;
    clip-path: inset(0 0 100% 0 round 0 0 var(--ctb-bottom-radius) var(--ctb-bottom-radius));
    transition: opacity .25s ease,
                transform .42s cubic-bezier(.34, 1.56, .64, 1),
                clip-path .42s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.ct-buscador-resultados.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round 0 0 var(--ctb-bottom-radius) var(--ctb-bottom-radius));
    pointer-events: auto;
}

/* Estado de carga */
.ct-buscador-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 20px;
    color: var(--ctb-muted);
    font-size: 14px;
}

.ct-buscador-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid #e6eaef;
    border-top-color: var(--theme-color, var(--ctb-accent));
    animation: ctb-spin .7s linear infinite;
}

@keyframes ctb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Desvanecido del contenido al sustituir el spinner por los resultados */
.ct-buscador-contenido {
    padding: 10px 20px;
    animation: ctb-fade-in .22s ease;
}

/* Entrada escalonada de cada resultado para un despliegue mas vistoso */
.ct-buscador-contenido > * {
    opacity: 0;
    animation: ctb-item-in .34s cubic-bezier(.22, 1, .36, 1) forwards;
}

.ct-buscador-contenido > *:nth-child(1) { animation-delay: .03s; }
.ct-buscador-contenido > *:nth-child(2) { animation-delay: .06s; }
.ct-buscador-contenido > *:nth-child(3) { animation-delay: .09s; }
.ct-buscador-contenido > *:nth-child(4) { animation-delay: .12s; }
.ct-buscador-contenido > *:nth-child(5) { animation-delay: .15s; }
.ct-buscador-contenido > *:nth-child(6) { animation-delay: .18s; }
.ct-buscador-contenido > *:nth-child(7) { animation-delay: .21s; }
.ct-buscador-contenido > *:nth-child(8) { animation-delay: .24s; }
.ct-buscador-contenido > *:nth-child(9) { animation-delay: .27s; }
.ct-buscador-contenido > *:nth-child(n+10) { animation-delay: .3s; }

@keyframes ctb-item-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ctb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ct-buscador-grupo-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-color, var(--ctb-accent));
    /*padding: 14px 20px 6px;*/
    margin: 0;
}

.ct-buscador-item {
    display: flex;
    align-items: center;
    gap: 14px;
    /*padding: 10px 20px;*/
    margin-bottom: 10px;
    color: var(--ctb-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

    .ct-buscador-item:hover,
    .ct-buscador-item.is-active {
        background: #f8f5ef;
        color: var(--ctb-text);
        text-decoration: none;
    }

.ct-buscador-item-icono {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #eef0f4 center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color, var(--ctb-accent));
    font-size: 16px;
    overflow: hidden;
}

.ct-buscador-item-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.ct-buscador-item-titulo {
    display: block;
    font-size: 15px;
    line-height: normal;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-buscador-item-meta {
    display: block;
    font-size: 12.5px;
    line-height: normal;
    color: var(--ctb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-buscador-item-precio {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-color, var(--ctb-accent));
    white-space: nowrap;
}

.ct-buscador-vacio {
    padding: 26px 20px;
    text-align: center;
    color: var(--ctb-muted);
    font-size: 14px;
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .ct-buscador-resultados {
        transition: opacity .15s ease;
        transform: none;
        clip-path: none;
    }

    .ct-buscador-resultados.is-visible {
        transform: none;
        clip-path: none;
    }

    .ct-buscador-contenido,
    .ct-buscador-contenido > * {
        animation: none;
        opacity: 1;
    }

    .ct-buscador-spinner {
        animation-duration: 1.4s;
    }
}

@media (max-width: 767px) {
    .hero-4 .hero-items {
        min-height: 80vh;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .ct-buscador-input {
        font-size: 15px;
        padding: 16px 18px 16px 48px;
    }
}