/* Load after the parent and child styles: no JavaScript needed for mobile layout. */
#mewsForm { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
#mewsForm .input-wrapper { display: flex; flex-direction: column; text-align: center; flex-grow: 1; min-width: 0; }
#mewsForm .input-wrapper label { padding: 5px 0; font-weight: 600; font-size: 14px; cursor: pointer; }
#mewsForm input { width: 100%; min-height: 44px; padding-right: 10px; padding-left: 10px; border-radius: 0; }
#mewsForm input:not([type="submit"]) { border: 1px solid #da0046; }
.roodeschuur-booking.container { width: 100%; max-width: 100%; padding: 0; }
.roodeschuur-booking > .row { margin-right: 0; margin-left: 0; }
@media (min-width: 800px) {
    #mewsForm { align-items: flex-end; flex-direction: row; }
}
@media (max-width: 991.98px) {
    .rooms .rooms-row {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        height: auto !important;
        margin: 0 !important;
    }
    .rooms .rooms-row::before, .rooms .rooms-row::after { display: none; }
    .rooms .rooms-row > .rooms-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        float: none;
        width: calc((100% - 24px) / 2);
        height: auto !important;
        margin: 0;
        padding: 0;
        transform: none !important;
    }
    .rooms .room-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
    .rooms .room-img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .rooms .room-inner {
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 100% !important;
    }
    .rooms .room-center {
        display: block;
        width: 100%;
        padding: 24px 16px;
        visibility: visible;
        opacity: 1;
        transform: none;
    }
    .rooms .room-overlay, .rooms .rooms-item:hover .room-overlay {
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%; height: 100%; opacity: 1;
        background: linear-gradient(to bottom, transparent 35%, rgba(22, 28, 30, 0.78));
    }
    .rooms .room-title { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
    .rooms .room-center .pricing-cost { margin: 0; font-size: 28px; line-height: 1.2; }
}

@media (max-width: 991.98px) {
    /* Keep the original header in normal flow; only desktop uses a sticky clone. */
    header.banner.navbar:not(.headhesive--clone) {
        display: block !important;
        position: relative !important;
        top: auto; width: 100%; background: #252b2d;
    }
    header.banner.headhesive--clone { display: none !important; }
    header.banner > .container { width: 100%; padding: 0 20px; }
    header.banner .navbar-header {
        display: flex; align-items: center; justify-content: space-between;
        min-height: 76px; margin: 0;
    }
    header.banner .navbar-header::before, header.banner .navbar-header::after { display: none; }
    header.banner #logo {
        position: static !important; order: 1; flex: 0 0 64px;
        width: 64px; height: 64px; margin: 0 !important; padding: 0;
    }
    header.banner #logo img {
        width: 64px !important; height: 64px !important;
        max-height: none !important; margin: 0;
    }
    header.banner #logo .logo-trans { display: none; }
    header.banner #logo .logo-main { display: block; }
    header.banner .navbar-toggle { display: block; order: 2; float: none; min-width: 44px; min-height: 44px; margin: 0; }
    header.banner .navbar-collapse.collapse:not(.in) { display: none !important; }
    header.banner .navbar-collapse.in { display: block !important; max-height: 70vh; overflow-y: auto !important; }
    header.banner .navbar-nav { float: none; margin: 10px 0; }
    header.banner .navbar-nav > li { float: none; }
    header.banner .navbar-nav > li > a { margin: 0; padding: 12px 15px; }
    header.banner .navbar-nav .dropdown-menu { position: static; float: none; width: 100%; }
    header.banner .navbar-nav .dropdown:not(.open) .dropdown-menu { display: none; }
    header.banner .navbar-nav .dropdown.open > .dropdown-menu { display: block; }
    header.banner .top-nav .container { width: 100%; padding: 0 20px; }
    header.banner .top-nav { padding: 0; }
    header.banner .top-nav-text, header.banner .top-nav-icon-blocks .icon-block span { display: none; }
    header.banner .top-nav .row { width: 100%; margin: 0; padding: 0; }
    header.banner .top-nav-icon-blocks { display: flex; justify-content: flex-end; margin: 0; }
    header.banner .top-nav-icon-blocks .icon-block { padding: 0; }
    header.banner .top-nav-icon-blocks .icon-block p { margin: 0; }
    header.banner .top-nav-icon-blocks .icon-block a {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 36px;
    }
    #home-slider #main-flex-slider .slider-bg {
        position: relative; display: flex; align-items: center;
        min-height: 360px;
        min-height: clamp(360px, 58svh, 520px);
        padding: 48px 0 !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        background-size: cover;
    }
    #home-slider #main-flex-slider .container { width: 100%; max-width: 640px; padding: 0 24px; }
    #home-slider #main-flex-slider .slider-bg::before { top: 0; left: 0; }
    #home-slider #main-flex-slider .slider-content {
        float: none; width: 100%; margin: 0; padding: 0 15px !important; text-align: center;
    }
    #home-slider #main-flex-slider .slides .slider-title {
        margin: 0 0 18px; font-size: 34px; font-size: clamp(30px, 6vw, 40px);
        line-height: 1.1; overflow-wrap: break-word;
    }
    #home-slider #main-flex-slider .slider-subtitle h3,
    #home-slider #main-flex-slider .slider-subtitle p {
        margin: 0 0 22px; font-size: 20px; font-size: clamp(18px, 3.8vw, 24px); line-height: 1.4;
    }
    #home-slider #main-flex-slider .slider-subtitle h3:empty { display: none; }
    #home-slider #main-flex-slider .page-title-button { margin: 0; }
    #home-slider #main-flex-slider .slider-scroll-down { display: none; }
    .rooms > .container, #booking-tool .container {
        width: 100%; max-width: 768px; padding-right: 24px; padding-left: 24px;
    }
}
@media (max-width: 767.98px) {
    .rooms .rooms-row > .rooms-item { width: 100%; }
    .rooms .room-title { font-size: 26px; }
}