/* ── Outer wrapper: full-width banner ── */
.main_col_wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 430px;
    margin: 0;
    overflow: hidden;
    background: #e8e8e8;
    box-sizing: border-box;
}

.main_col_wrap.paddingzero {
    padding: 0 !important;
}

/* ── Full-width background image ── */
.main_col_wrap .hide-class {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center top;
    display: block !important;
    visibility: visible !important;
    border: 0;
    z-index: 1;
}

/* ── Inner wrapper: overlaid over image ── */
.main_inn_col_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(20px, 3vw, 60px);
    box-sizing: border-box;
    z-index: 2;
}

.main_inn_col_wrap.positionabsolute {
    position: absolute;
}

/* ── Booking widget overlay ── */
.crs_ibe_box {
    width: 50%;
    max-width: 780px;   /* was 620px */
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}


/* ── iframe ── */
.iframeibebox {
    width: 100%;
    max-width: 100%;
    height: 320px;
    border: 0;
    display: block;
    background: transparent;
}

/* ─────────────────────────────────────────
   Tablet: 751px – 1024px (overlay layout)
───────────────────────────────────────── */
@media (max-width: 1024px) {
    .main_col_wrap {
        height: clamp(430px, 52vw, 520px);
    }
    .crs_ibe_box {
        width: 75%;      /* was 65% */
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────
   ≤ 750px: image hidden, engine full width
───────────────────────────────────────── */
@media (max-width: 750px) {
    .main_col_wrap {
        height: auto;
        overflow: hidden;
        background: #f4f5f6;
        display: block;
        position: relative;
        z-index: 0;
    }

    /* Hide the background image completely */
    .main_col_wrap .hide-class {
        display: none !important;
    }

    .main_inn_col_wrap,
    .main_inn_col_wrap.positionabsolute {
        position: relative !important;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        display: block;
        padding: 0;
        z-index: auto;
    }

    .crs_ibe_box {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        position: relative;
        z-index: auto;
    }

    .iframeibebox {
        height: clamp(440px, 95vw, 560px);
    }
}

/* ─────────────────────────────────────────
   ≤ 600px: fields stack, engine needs more height
───────────────────────────────────────── */
@media (max-width: 600px) {
    .iframeibebox {
        height: clamp(500px, 125vw, 640px);
    }
}

/* ─────────────────────────────────────────
   ≤ 400px: very small phones
───────────────────────────────────────── */
@media (max-width: 400px) {
    .iframeibebox {
        height: clamp(540px, 150vw, 680px);
    }
}