/* Elimina el padding lateral dels containers Elementor a la pàgina Vera Viatge */
.elementor:has(#esim-funnel) .e-con {
    --padding-left: 0px;
    --padding-right: 0px;
}

/* Oculta les seccions estàtiques quan el funnel és al pas 2/3/4 */
body.vv-esim-step-2 .vv-static-section,
body.vv-esim-step-3 .vv-static-section,
body.vv-esim-step-4 .vv-static-section {
    display: none !important;
}

/* Oculta també el scaffolding d'Elementor al voltant de les seccions estàtiques.
   Usem .elementor-widget (no .elementor-element) per evitar ocultar els contenidors
   pare que contenen tant el hero com el funnel. */
body.vv-esim-step-2 .elementor-widget:has(.vv-static-section),
body.vv-esim-step-3 .elementor-widget:has(.vv-static-section),
body.vv-esim-step-4 .elementor-widget:has(.vv-static-section) {
    display: none !important;
}

/* Elementor aplica ".elementor img { height: auto }" que guanya sobre .h-full
   de Tailwind (0,1,1 vs 0,1,0); restaurem el comportament dins dels widgets VV */
.elementor .vv-static-section img.h-full,
.elementor #esim-funnel img.h-full {
    height: 100%;
}

/* ── Funnel: input de destinació ── */
[x-cloak] { display: none !important; }

.esim-destination-input {
    display: flex;
    align-items: center;
    height: 3rem;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    background: #fff;
    transition: border-color 0.15s;
}
.esim-destination-input.focused  { border-color: #00CB7B; }
.esim-destination-input.has-error { border-color: #FF0000; }

/* ── Carrusel de destins promoguts ── */
.esim-promo-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.esim-promo-scroll::-webkit-scrollbar { display: none; }

/* ── Input de dies ── */
.esim-days-select {
    width: 100%;
    height: 3rem;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: normal;
    color: #001D17;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.esim-days-select:focus { border-color: #00CB7B; }

/* ── Icona i text de l'input de destinació ── */
.esim-dest-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #A1A6A4;
    margin-right: 0.5rem;
}

.esim-dest-text {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: #001D17;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.esim-dest-text::placeholder { color: #A1A6A4; }
.esim-dest-text:disabled { color: #A1A6A4; cursor: wait; }

.esim-dest-clear {
    flex-shrink: 0;
    margin-left: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #A1A6A4;
    background: none;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    padding: 0;
}
.esim-dest-clear:hover { color: #001D17; }

/* ── Botó enrere ── */
.esim-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #00CB7B;
    background: none;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.esim-back-btn:hover { text-decoration: underline; }

/* ── Carrusel de passos de contractació (mòbil) ── */
.esim-steps-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.esim-steps-scroll::-webkit-scrollbar { display: none; }

/* ── Solapament targeta buscador sobre el hero (mòbil) ── */
/* La targeta del cercador puja amb -mt-[168%] per sobre del hero (e-con anterior).
   Assegurem que cap container Elementor no la retalli ni la tapi. */
@media (max-width: 639px) {
    .e-con:has(.elementor-widget-vera_viatge_hero),
    .e-con:has(.elementor-widget-vera_viatge_funnel) {
        overflow: visible !important;
    }
    .e-con:has(.elementor-widget-vera_viatge_funnel) {
        z-index: 20;
    }

    /* aspect-ratio + height:100% d'Elementor crea dependència circular al flex column → 0px.
       min-height amb vw trenca el cercle donant una alçada definitiva. */
    .elementor-widget-vera_viatge_hero section {
        min-height: calc(100vw * 1463 / 764);
    }
}