/* =============================================================================
   Booking Hero — Styles frontend
   ============================================================================= */

/* ── Variables CSS globales ──────────────────────────────────────────────── */
:root {
    --bh-height:           600px;
    --bh-max-w:            var(--global-content-width, var(--wp--style--global--wide-size));
    --bh-form-x:           50%;
    --bh-form-y:           50%;
    --bh-transition:       800ms;
    --bh-duration:         5000ms;
    --bh-bg-color:         #1a1f3c;
    --bh-overlay-opacity:  0.6;
}

/* ── Wrapper principal ───────────────────────────────────────────────────── */
.booking-hero {
    position:   relative;
    overflow:   hidden;
    width:      100%;
    height:     var(--bh-height);
    box-sizing: border-box;
}

/* Largeur boxed */
.bh-w--boxed {
    max-width:    var(--bh-max-w);
    margin-left:  auto;
    margin-right: auto;
}

/* ── Couche background ───────────────────────────────────────────────────── */
.bh-bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* Couleur unie */
.bh-bg--color .bh-bg {
    background-color: var(--bh-bg-color);
}

/* Image unique / vidéo background */
.bh-single-img,
.bh-bg-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* ── Slider ──────────────────────────────────────────────────────────────── */
.bh-slider {
    position: absolute;
    inset:    0;
}

.bh-slide {
    position:       absolute;
    inset:          0;
    opacity:        0;
    pointer-events: none;
    will-change:    opacity, transform;
}

.bh-slide--active {
    opacity:        1;
    pointer-events: auto;
}

.bh-slide-media {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* ── Effets de transition ────────────────────────────────────────────────── */

/* Fade */
.bh-slider[data-effect="fade"] .bh-slide {
    transition: opacity var(--bh-transition) ease-in-out;
}

/* Slide horizontal */
.bh-slider[data-effect="slide"] .bh-slide {
    transform:  translateX(100%);
    opacity:    1;
    transition: transform var(--bh-transition) ease-in-out;
}
.bh-slider[data-effect="slide"] .bh-slide--active {
    transform: translateX(0);
}
.bh-slider[data-effect="slide"] .bh-slide--leaving {
    transform:  translateX(-100%);
    transition: transform var(--bh-transition) ease-in-out;
}

/* Zoom (Ken Burns léger) */
.bh-slider[data-effect="zoom"] .bh-slide {
    transform:  scale(1.08);
    transition: opacity var(--bh-transition) ease-in-out,
                transform var(--bh-transition) ease-in-out;
}
.bh-slider[data-effect="zoom"] .bh-slide--active {
    transform: scale(1);
}

/* ── Voile transparent ───────────────────────────────────────────────────── */
.bh-overlay {
    position:       absolute;
    inset:          0;
    z-index:        1;
    opacity:        var(--bh-overlay-opacity);
    pointer-events: none;
}

/* ── Titre du slide courant ──────────────────────────────────────────────── */
.bh-slide-title-display {
    position:    absolute;
    bottom:      2.25rem;
    left:        50%;
    transform:   translateX(-50%);
    z-index:     3;
    color:       #fff;
    font-size:   1.375rem;
    font-weight: 600;
    text-align:  center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
    pointer-events: none;
    padding:     0 1.5rem;
    max-width:   80%;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ── Formulaire Booking Engine dans le hero ──────────────────────────────── */
.bh-has-form .bh-form-wrapper {
    position:  absolute;
    left:      var(--bh-form-x);
    top:       var(--bh-form-y);
    z-index:   10;
    max-width: var(--bh-max-w);
    width: 100%;
}

.bh-form-wrapper .be-body-form{
    padding: 0 !important;
}

/* Position centrale : centrage autour du point d'ancrage */
.bh-has-form.bh-fx--center .bh-form-wrapper,
.bh-has-form.bh-fx--custom .bh-form-wrapper {
    transform: translateX(-50%);
}
.bh-has-form.bh-fy--center .bh-form-wrapper,
.bh-has-form.bh-fy--custom .bh-form-wrapper {
    transform: translateY(-50%);
}
/* Centre total (cas le plus courant) */
.bh-has-form.bh-fx--center.bh-fy--center .bh-form-wrapper {
    transform: translate(-50%, -50%);
}
.bh-has-form.bh-fx--custom.bh-fy--custom .bh-form-wrapper {
    transform: translate(-50%, -50%);
}
.bh-has-form.bh-fx--center.bh-fy--custom .bh-form-wrapper {
    transform: translate(-50%, -50%);
}
.bh-has-form.bh-fx--custom.bh-fy--center .bh-form-wrapper {
    transform: translate(-50%, -50%);
}

/* Réinitialisation du wrapper Booking Engine pour une intégration propre */
.bh-form-wrapper .booking-engine-wrapper {
    margin: 0;
}

/* ── Navigation (dots) ───────────────────────────────────────────────────── */
.bh-dots {
    position:    absolute;
    bottom:      1.25rem;
    right:       1.5rem;
    z-index:     10;
    display:     flex;
    gap:         .5rem;
    align-items: center;
}

.bh-dot {
    width:        10px;
    height:       10px;
    border-radius: 50%;
    background:   rgba(255, 255, 255, .45);
    border:       2px solid rgba(255, 255, 255, .7);
    padding:      0;
    cursor:       pointer;
    transition:   background .25s ease, transform .25s ease;
    flex-shrink:  0;
}

.bh-dot:hover {
    background: rgba(255, 255, 255, .8);
    transform:  scale(1.2);
}

.bh-dot--active {
    background: #fff;
    transform:  scale(1.15);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .booking-hero.bh-has-form {
        height: auto !important;
        padding: 100px 0 100px 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Titre réduit et remonté au-dessus des dots */
    .bh-slide-title-display {
        font-size: 1rem;
        bottom:    3.5rem;
        max-width: 90%;
    }

    /* Formulaire dans le flux document pour s'adapter dynamiquement */
    .bh-has-form .bh-form-wrapper {
        position:  relative !important;
        left:      auto !important;
        top:       auto !important;
        bottom:    auto !important;
        transform: none !important;
        margin:    0 auto !important;
        width:     calc(100vw - 2rem);
        max-width: 100%;
        height:    auto !important;
        max-height: none !important;
    }

    /* Dots légèrement plus grands pour les doigts */
    .bh-dot {
        width:  12px;
        height: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .bh-has-form .bh-form-wrapper {
        max-width: calc(100vw - 4rem);
    }
}