.room-list-image {
    height: 290px !important;
}

.room-desc-div {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    height: 100px !important;
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
    /* font-family: 'helvetica'; */
}

.desc li,
.room-compare_item li,
.room-detail_overview {
    font-family: 'helvetica';
}

/* for budget */
.header_content:after {
    background-color: #ececed !important;
}

.header_logo img {
    max-height: unset !important;
    width: 100% !important;
    max-width: 160px !important;
}

.bg-studio54 {
    background-color: #996c4c !important;
}

.room-desc-div::-webkit-scrollbar {
    width: 4px;
    /* Adjust width for vertical scrollbar */
    height: 4px;
    /* Adjust height for horizontal scrollbar */
}

.room-desc-div::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Optional: scrollbar track color */
}

.room-desc-div::-webkit-scrollbar-thumb {
    background: #888;
    /* Optional: scrollbar thumb color */
    border-radius: 10px;
    /* Optional: rounded corners */
}

.error_span {
    color: yellow;
    font-size: 12px;
    font-family: 'Montserrat';
    font-style: italic;
}

.error_span_new {
    font-size: 13px;
    font-family: 'Montserrat';
}

.dropdown-menu {
    max-height: 200px !important;
    overflow-y: auto;
}

.details-image {
    height: 500px !important;
}

.details-image-thumb {
    height: 75px !important;
}

.private_person_div {
    padding-left: 0 !important;
}

.amount-details {
    font-size: 26px !important;
}

.img-height {
    height: 200px !important;
}

.error {
    color: red;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: bold;
}

#loader {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999;
    /* Sit on top */
    left: 45%;
    /* Center the loader */
    top: 50%;
    /* Center the loader */
    width: 100px;
    /* Loader size */
    height: 100px;
    /* Loader size */
    border: 16px solid #f5f0eb;
    /* Light grey border */
    border-radius: 50%;
    /* Rounded border */
    border-top: 16px solid #e21d1a;
    /* Red accent */
    animation: spin 2s linear infinite;
    /* Spin animation */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#webcam {
    width: 100%;
    height: auto;
    /* Maintains aspect ratio */
    max-width: 100%;
    /* Ensures the video does not exceed its container's width */
}

/* Optional: You can use media queries for additional responsiveness */
@media (max-width: 600px) {
    #webcam {
        width: 100%;
        height: auto;
    }
}

.rear-img {
    margin-top: 10px;
}

.margindiv {
    margin-bottom: 10px;
}

.checkbox-inline {
    display: -webkit-inline-box;
}

.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.form-check-checkbox {
    background: #f8f9fa;
    /* Light background */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

.form-check-checkbox:hover {
    background: #e9ecef;
    /* Slightly darker on hover */
}

.form-check-input:checked+.form-check-label {
    color: #495057;
    /* Active text color */
    font-weight: bold;
}



.checkbox-list .form-check {
    position: relative;
}

.checkbox-list .form-check .form-check-input:focus {
    border-color: #e1bd85;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.checkbox-list .form-check .form-check-input-new {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 8px;
    border-radius: 3px;
    background-color: #e1bd85;
    border: 1px solid #e1bd85;
    appearance: none;
    /* Remove default checkbox styling */
    -webkit-appearance: none;
    /* For Safari */
    transition: 0.6s;
    cursor: pointer;
}

.checkbox-list .form-check .form-check-input-new:checked {
    background-color: #e1bd85;
    /* Background when checked */
    border-color: #e1bd85;
}

.checkbox-list .form-check .form-check-input-new:checked::after {
    content: '✔' !important;
    /* Checkmark symbol */
    color: white !important;
    /* Checkmark color */
    font-size: 14px !important;
    /* Adjust size as needed */
    transform: translate(-50%, -50%);
    padding-left: 4px !important;
}


.checkbox-inline label {
    margin-left: 10px !important;
    cursor: pointer;
}

.vehicle-input-container,
.add-vehicle-btn {
    margin-top: 10px;
    display: flex;
}

.vehicle-input-container .remove-vehicle-btn {
    margin-left: 5px;
    border-radius: 4px !important;
}

.promotion-div {
    display: flex !important;
}

#promotion {
    margin-right: 5px;
}

#promotion-apply-btn {
    height: 40px;
    font-size: 14.12px;
    font-weight: 700;
    margin-right: 5px;
}

#promotion-remove-btn {
    height: 40px;
    font-size: 14.12px;
    font-weight: 700;
}

#promotion-error {
    font-size: 14px;
}

.success_span {
    color: green;
    font-size: 14px;
    font-family: 'Montserrat';
    font-weight: bold;
}

.totaldiv {
    margin-top: 5px !important;
}

/* Keep the label and amount on one line (title left, amount right) — the wide
   200px min-width was forcing the amount to wrap in the narrow cart column. */
.checkout_cartinfo p {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px;
}

.checkout_cartinfo p span {
    min-width: 0 !important;
}

.servicesdiv {
    font-size: 14px;
    font-family: 'Montserrat';
}

#parking_div_sub .d-none {
    display: none !important;
}

.parking_div_sub_in {
    display: flex !important;
}


.parking_div {
    /* display: none !important; */
    margin-top: 10px;
}

.add-vehicle-btn {
    margin-bottom: 10px;
}

.error-message {
    color: yellow !important;
    font-family: 'Montserrat' !important;
    font-size: 15px !important;
    font-style: italic !important;
}

.vehicle-input-error {
    font-size: 12px !important;
    font-family: 'Montserrat' !important;
    color: yellow !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
}

.error_span_js {
    color: yellow !important;
    font-size: 12px;
    font-family: 'Montserrat';
    font-style: italic !important;
}

.parking_div p {
    margin-bottom: 10px !important;
}

#addGuestModal .modal-body .form-group-div {
    margin-bottom: 20px;
}


/* .room_item-1 .desc ul li {
    height: 30px !important;
} */

.room_item-1 .img img {
    border-radius: 20px;
}

#arrival_date_datepicker,
#departure_date_datepicker {
    padding: 0 30px 0 12px !important;
    background-color: #f7f7f8 !important;
    width: 100% !important;
    border: 1px solid #d6d6d9 !important;
    border-radius: 8px !important;
    height: 44px !important;
    line-height: 42px !important;
    color: #000000 !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#arrival_date_datepicker:hover,
#departure_date_datepicker:hover {
    border-color: #b3b3b8 !important;
}

#arrival_date_datepicker:focus,
#departure_date_datepicker:focus {
    background-color: #ffffff !important;
    border-color: #e21d1a !important;
    box-shadow: 0 0 0 3px rgba(226, 29, 26, 0.15) !important;
    outline: none !important;
}

#arrival_date_datepicker::placeholder,
#departure_date_datepicker::placeholder {
    color: #000000 !important;
}

#arrival_date_datepicker_detail,
#departure_date_datepicker_detail {
    padding: 0 30px 0 10px !important;
    background-color: #fff !important;
    color: #898989 !important;
    width: 100% !important;
    border: 2px solid #333333 !important;
    border-width: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
}

#arrival_date_datepicker_detail::placeholder,
#departure_date_datepicker_detail::placeholder {
    color: #333333 !important;
}

.room-desc-div,
.desc li,
.price,
.room-detail_overview,
.text ul li,
.servicesdiv {
    font-family: Helvetica, sans-serif !important;
}


#roomBookingForm #phone,
#addGuestForm #guest_phone {
    height: 40px !important;
    /* padding-left: 85px !important; */
    /* border: 2px solid #232323 !important; */
    width: 100 !important;
}

.iti {
    width: 100% !important;
}

/* footer css */
.widget-logo img,
#footer .footer_center .widget-logo .img {
    max-width: 200px !important;
}

.footer_center {
    background-color: #c9c9cb !important;
    /* padding-bottom: 100px !important; */
    font-family: helvetica-w01-roman, sans-serif !important;
}

.footer_center .widget-title {
    font-family: helvetica-w01-roman, sans-serif !important;
    font-weight: bold;
    font-size: 18px !important;
    color: #000000 !important;
}

.footer_center .widget ul li,
.footer_center .widget ul li a {
    font-family: helvetica-w01-roman, sans-serif !important;
}

.widget-logo {
    padding-top: 0 !important;
}

.copyright {
    color: #fff !important;
}

.mb2 {
    margin-bottom: 5px !important;
}

.room_item-1 .img:before {
    border-radius: 20px !important;
}

.agb-link,
.agb-link:hover {
    color: #e1bd85 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* Modal panel background — see the checkout block at the end of this file,
   which sets these to the light surface for the new design. */

@media screen and (max-width: 1199px) {

    #footer .footer_center .widget {
        text-align: center !important;
    }

    /* Address paragraph: .wrapText is capped at 160px, so on mobile it stays
       left-pinned even though the widget is centered. Center the box and its
       text so the address lines up under the rest of the centered footer. */
    #footer .footer_center .kontakt .adresse,
    #footer .footer_center .kontakt .adresse p {
        text-align: center !important;
    }

    #footer .footer_center .kontakt .adresse .wrapText {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.section-sub-banner.bannerNew {
    height: calc(100vh - 50px);
    position: relative;
    background-color: #996c4c;
    background-image: url('../images/banner/budget-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-sub-banner.bannerNew .awe-overlay {
    position: unset !important;
    background-color: transparent !important;
}

.section-sub-banner.innerBanner {
    position: relative;
}

.sub-banner.subInner2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.sub-banner.subInner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-sub-banner.innerBanner .sub-banner,
.section-sub-banner.innerBanner .sub-banner .text {
    padding-bottom: 0px;
}

.section-sub-banner.innerBanner .sub-banner .text h2 {
    margin-top: 0;
}

.sub-banner .text h2 {
    color: #ececed !important;
    font-size: 110px !important;
    font-weight: 900;
}

.sub-banner.subInner2 .text h2 {
    font-size: 45px !important;
}

.sub-banner .text h2 span {
    font-weight: 500 !important;
}

.sub-banner.subInner .text p {
    color: rgb(192 147 84);
    font-size: 35px;
    font-weight: 900;
}

.section-room.sectionInnerBg {
    padding: 0 !important;
}

.check-availability.availabilityCustom {
    margin-top: -180px;
    position: relative;
}

/* Opaque card rather than a tinted panel: opacity here would wash out every
   field inside it, since the pseudo-element sits behind the whole form. */
.check-availability.availabilityCustom::before {
    top: 0;
    left: 50%;
    content: '';
    background: #ffffff;
    width: 104%;
    position: absolute;
    display: block;
    z-index: 0;
    height: 100%;
    transform: translateX(-50%);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.check-availability.availabilityCustom h2 {
    /* color: #e1bd85 !important; */
    font-size: 20px;
    padding-left: 50px;
}

.check-availability.availabilityCustom h2:before {
    width: 35px;
    height: 35px;
    line-height: 30px;
}

.cuastomDropSize {
    width: 170px !important;
}

.check-availability .availability-form .bootstrap-select.btn-group.awe-select .caret {
    background: url(../images/icon-select-cal-budget-motel.png) no-repeat !important;
}

/* The availability bar sits on a light card, but bootstrap-select inherits the
   dark theme's white borders and white label text. Re-tone it for the card. */
.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-toggle {
    background-color: #f7f7f8 !important;
    border: 1px solid #d6d6d9 !important;
    border-radius: 8px !important;
    height: 44px !important;
    line-height: 42px !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-toggle:hover {
    border-color: #b3b3b8 !important;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select.open .dropdown-toggle,
.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-toggle:focus {
    background-color: #ffffff !important;
    border-color: #e21d1a !important;
    box-shadow: 0 0 0 3px rgba(226, 29, 26, 0.15) !important;
    outline: none !important;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-toggle .filter-option {
    color: #000000 !important;
    font-size: 14px;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-toggle .caret {
    color: #6b6b70 !important;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-menu {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.availabilityCustom .awe-calendar-wrapper i {
    color: #e21d1a;
}

/* .radiusClass {
    border-radius: 10px !important;
} */

/* .cuastomDropSize button {
    border-radius: 10px !important;
} */

.centerClass {
    text-align: center !important;
    margin-top: 0 !important;
}

.awe-btn.awe-btn-13.awe-btnCustom {
    border: 2px solid #e21d1a;
    background-color: #e21d1a;
    color: #fff;
    border-radius: 8px !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 12px rgba(226, 29, 26, 0.3);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.awe-btn.awe-btn-13.awe-btnCustom:hover {
    background-color: #b81714 !important;
    border-color: #b81714 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(226, 29, 26, 0.4);
    transform: translateY(-2px);
}

.awe-btn.awe-btn-13.awe-btnCustom:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(226, 29, 26, 0.35);
}

/* Payment success/cancel/fail page "Back to Home" button — swap the old
   beige/gold (#e1bd85) for the theme red so it matches the rest of the site.
   Scoped to a button placed directly in .section-room .row (the message pages)
   so the deeply-nested RESERVE_NOW buttons on the room index are untouched. */
.success-div .awe-btn.awe-btn-13,
.section-room .row > .awe-btn.awe-btn-13 {
    border: 2px solid #e21d1a;
    background-color: #e21d1a;
    color: #fff;
}

.success-div .awe-btn.awe-btn-13:hover,
.success-div .awe-btn.awe-btn-13:focus,
.section-room .row > .awe-btn.awe-btn-13:hover,
.section-room .row > .awe-btn.awe-btn-13:focus {
    border-color: #b81714;
    background-color: #b81714;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .awe-btn.awe-btn-13.awe-btnCustom {
        transition: none;
    }

    .awe-btn.awe-btn-13.awe-btnCustom:hover {
        transform: none;
    }
}

.bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a {
    background-color: rgb(153 108 76) !important;
}

.bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover {
    background-color: #c09354 !important;
}

/* Booking-details (checkout) dropdowns: same grey/black highlight as the index
   availability bar and room-detail page, replacing the gold above. */
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a {
    background-color: #333333 !important;
    border-bottom-color: #333333 !important;
    color: #ffffff !important;
}

/* The option label lives in a nested span, which can keep its own dark colour —
   force white on it too so the selected row's text is readable. */
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a span,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a span,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a span,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a span {
    color: #ffffff !important;
}

/* Background belongs on the <a> only — putting it on the inline span leaves a
   white/gray gap that doesn't match the row. */
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a:hover,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a:hover,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a:hover,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a:hover {
    background-color: #f2f4f6 !important;
    border-bottom-color: #f2f4f6 !important;
    color: #333333 !important;
}

/* Text colour only on the span (no background). */
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover span,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a:hover span,
.section-checkout .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a:hover span,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover span,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a:hover span,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.active a:hover span {
    background-color: transparent !important;
    color: #333333 !important;
}

/* Calendar palette mirrors the booking widget on budget-motel.ch: dark grey for
   the chosen day, light grey for hover, no brand colour. */
.ui-datepicker .ui-datepicker-header {
    background-color: #ffffff !important;
    border: none !important;
    color: #333333 !important;
    font-weight: 600;
    padding-top: 8px;
}

.ui-datepicker .ui-datepicker-title {
    color: #333333 !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    transition: opacity .35s cubic-bezier(.3, .1, .3, 1);
}

/* The base theme colours these arrows white for a dark header; the header is
   white here, so they need the same ink as the title. */
.ui-datepicker .ui-datepicker-header .ui-corner-all .ui-icon,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: #333333 !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: transparent !important;
    border: none !important;
    opacity: .5;
}

.ui-datepicker .ui-datepicker-calendar thead th {
    background-color: transparent !important;
    color: #333333 !important;
    font-weight: 500;
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    border: 1px solid transparent !important;
    border-radius: 4px;
    text-align: center;
}

.ui-datepicker .ui-datepicker-calendar td a:hover {
    background-color: #f2f4f6 !important;
    border-color: #f2f4f6 !important;
    color: #333333 !important;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a {
    background-color: #f2f4f6 !important;
    border-color: #f2f4f6 !important;
    color: #333333 !important;
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Grey highlights for the availability bar only; the rules above stay gold for
   checkout and room detail, which share these bootstrap-select widgets. Matches
   the calendar's dark/light split so the two widgets read as one. */
.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a {
    background-color: #333333 !important;
    border-bottom-color: #333333 !important;
    color: #ffffff !important;
}

.availabilityCustom .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover {
    background-color: #f2f4f6 !important;
    border-bottom-color: #f2f4f6 !important;
    color: #333333 !important;
}

/* Room-detail booking box: same grey/black dropdown highlight as the index
   availability bar (was gold from the shared rules above). */
.room-detail_book .bootstrap-select.btn-group.awe-select .dropdown-menu ul li.selected a {
    background-color: #333333 !important;
    border-bottom-color: #333333 !important;
    color: #ffffff !important;
}

.room-detail_book .bootstrap-select.btn-group.awe-select .dropdown-menu ul li a:hover {
    background-color: #f2f4f6 !important;
    border-bottom-color: #f2f4f6 !important;
    color: #333333 !important;
}

#ui-datepicker-div {
    z-index: 10000 !important;
}

/* jQuery UI's theme paints a grey textured shell; the reference widget is a
   plain white card. */
#ui-datepicker-div.ui-datepicker,
.ui-datepicker.ui-widget-content {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    padding: 8px;
}

#ui-datepicker-div.ui-datepicker {
    max-width: calc(100vw - 24px);
}

.iamgeSection .iamgeSectionBox {
    background-image: url('../images/banner/view-img.jpg');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 500px;
    background-position: center center;
    background-size: cover;
}

.section-sub-banner.innerBanner {
    background-image: url('../images/banner/innerBanner.jpg');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 320px;
    background-position: center center;
    background-size: cover;
}

.section-checkout.bg-brown,
.section-checkout.bg-brown {
    background-color: #996c4c !important;
}

/* Room detail page now sits on white to match the room listing and checkout
   in the new design. Accent moves to the brand red on the booking box below. */
section.section-room-detail.bg-white.bg-brown {
    background-color: #ffffff !important;
}

/* Room listing sits on white; the detail and checkout pages stay brown. */
#room-section.section-room.bg-white.bg-brown {
    background-color: #ffffff !important;
}

#room-section .room_item-1 h2 a {
    color: #1f1f1f !important;
}

#room-section .room_item-1 h2 a:hover {
    color: #996c4c !important;
}

#room-section .room_item-1 .desc,
#room-section .room_item-1 .desc p,
#room-section .room_item-1 .desc div,
#room-section .room_item-1 .desc ul li {
    color: #4a4a4a !important;
}

/* Price carries the brand red so it still reads as the accent on white. */
#room-section .room_item-1 .bot .price,
#room-section .room_item-1 .bot .price .amout,
#room-section .room_item-1 .indexamount .amout {
    color: #e21d1a !important;
}

#room-section .room_item-1 .bot .price .originalprice {
    color: #8a8a8a !important;
}

#room-section .room_item-1 .desc ul li:before {
    color: #e21d1a !important;
}

#room-section .error_span_new {
    color: #e21d1a !important;
}

/* RESERVIEREN button in the room listing: base .awe-btn-13 is beige/gold, so
   repaint it in the brand red to match the rest of the new palette. Covers the
   visible card button and the "RESERVIEREN" text inside the hover popup. */
#room-section .room_item-1 .bot .awe-btn.awe-btn-13,
#room-section .room_item-1 .popup-content .awe-btn.awe-btn-13 {
    border: 2px solid #e21d1a !important;
    background-color: #e21d1a !important;
    color: #fff !important;
}

#room-section .room_item-1 .bot .awe-btn.awe-btn-13:hover,
#room-section .room_item-1 .popup-content .awe-btn.awe-btn-13:hover {
    border-color: #b81714 !important;
    background-color: #b81714 !important;
    color: #fff !important;
}

/* Booking box uses the site's light-gray panel colour, same as the footer. */
.room-detail_book {
    background-color: #c9c9cb !important;
}

/* Booking-box buttons on the gray panel: white fill with red text, invert to
   solid red on hover. */
.room-detail_book .awe-btn.awe-btn-13 {
    border: 2px solid #e21d1a !important;
    background-color: #fff !important;
    color: #e21d1a !important;
}

.room-detail_book .awe-btn.awe-btn-13:hover {
    background-color: #e21d1a !important;
    border-color: #e21d1a !important;
    color: #fff !important;
}

.checkout .checkout_cart {
    background-color: rgb(192 147 84) !important;
}

.checkout .checkout_cart {
    border-color: rgb(192 147 84) !important;
}

.header_content {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.6) !important;
}

/* Booking box sits on the light-gray panel, so its text is dark ink; the price
   amount takes the brand red as the accent. */
.room-detail_book .room-detail_form label,
.room-detail_book .room-detail_total h6,
.room-detail_book .room-detail_total h4,
.room-detail_book .room-detail_total h4 span,
.room-detail_book .room-detail_total h5,
.room-detail_book .room-detail_total .font-white {
    color: #1f1f1f !important;
}

.room-detail_book .room-detail_total .price,
.room-detail_book .room-detail_total .price .amout {
    color: #e21d1a !important;
}

/* These sit on the now-white page background, so they take the dark ink and a
   red hover accent instead of the old white-on-brown. */
.room-compare_item .text h2,
.room-compare_item .text h2 a,
.room-compare_item .text ul,
.room-detail_compare .room-compare_title {
    color: #1f1f1f !important;
}

.room-compare_item .text h2 a:hover {
    color: #e21d1a !important;
}

.checkout .checkout_head h3,
.checkout .form-label,
.servicesdiv .servicesdiv-text,
.checkout .bootstrap-select.btn-group.awe-select .dropdown-toggle .filter-option,
.checkout .field-text,
.checkout .checkout_cart .cart-item .text,
.checkout .checkout_cart .cart-item .text a,
.margindiv,
.checkout .checkout_cartinfo p,
.iti--separate-dial-code .iti__selected-dial-code,
#parkingTotal4,
#parkingTotal5,
#parkingTotal6,
.white,
.servicesdiv-text label,
.parking_div span {
    color: #fff !important;
}

/* Overview description now reads on the white detail-page background. */
.room-detail_overview,
.room-detail_overview p {
    color: #4a4a4a !important;
}

/* Tab header (OVERVIEW): active/hover text and underline were gold — move to
   the brand red. */
.room-detail_tab-header li.active a,
.room-detail_tab-header li:hover a {
    color: #e21d1a !important;
}

.room-detail_tab-header li a:before {
    background-color: #e21d1a !important;
}

/* Image slider nav arrows (main image + thumbnails): hover was gold, now red. */
.room-detail_img .owl-prev:hover,
.room-detail_img .owl-next:hover,
.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover {
    color: #333333 !important;
    border-color: #333333 !important;
}

.room-detail_thumbs .owl-prev:hover,
.room-detail_thumbs .owl-next:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #fff !important;
}

/* Thumbnail selected/hover border was gold — match the index page's dark
   selection colour instead. */
.room-detail_thumbs .owl-item.active a:before,
.room-detail_thumbs a:hover::before {
    border-color: #333333 !important;
}

.checkout .field-text::placeholder,
#addGuestModal .modal-title,
#upload-doc-modal .modal-title,
#validationModal .modal-title {
    color: #fff !important;
}

.checkout .field-text,
.checkout .bootstrap-select.btn-group.awe-select .dropdown-toggle,
#roomBookingForm #phone {
    border-color: #fff !important;
}

.awe-btn.awe-btn-default {
    border-color: #fff !important;
    color: #fff !important;
}

/* VIEW DETAILS on the compare cards now sits on the white detail page, so the
   generic white button above would vanish — give it the brand-red outline. */
.room-detail_compare .room-compare_item .awe-btn.awe-btn-default {
    border-color: #e21d1a !important;
    color: #e21d1a !important;
}

.room-detail_compare .room-compare_item .awe-btn.awe-btn-default:hover {
    background-color: #e21d1a !important;
    border-color: #e21d1a !important;
    color: #fff !important;
}

.header_mobile {
    background-color: #ececed !important;
}

.header_mobile .header_menu {
    background-color: #ececed !important;
}

.menu-bars:hover span:before,
.menu-bars:hover span:after {
    background-color: #000000 !important;
}

.header_mobile .header_menu ul li a {
    color: #000000 !important;
}

.header_mobile .header_menu ul li .sub-menu {
    background-color: #fff !important;
}

.header_mobile .header_menu ul li>.sub-menu>li>a {
    color: #000000 !important;
}

.color-red {
    color: #fff !important;
    font-weight: bolder;
}

#footer .footer_center .container {
    width: 100%;
    max-width: 1680px !important;
}

.widget-logo.footerLogo .img {
    margin-bottom: 20px !important;
}

.widget-logo.footerLogo .img a>img {
    max-width: 250px !important;
    width: 100%;
}

/* Footer nav: top-level groups sit side by side, each above its own sub-links. */
.footer_center .footerNav ul {
    padding: 0;
    list-style: none;
}

.footer_center .footerNav>ul>li {
    float: left;
    margin-right: 40px;
}

.footer_center .footerNav>ul>li>a {
    font-weight: 600;
}

.footer_center .footerNav ul li a {
    font-family: helvetica-w01-roman, sans-serif !important;
    font-size: 15px !important;
    color: #000000 !important;
}

.footer_center .footerNav ul li a:hover {
    text-decoration: underline !important;
}

.footer_center .kontakt .adresse p {
    font-family: helvetica-w01-roman, sans-serif !important;
    font-size: 15px !important;
    color: #000000 !important;
}

.footer_center .kontakt .buchenButton a {
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    background: #e21d1a;
    color: #ffffff !important;
    text-align: center;
    text-transform: uppercase;
    font-family: helvetica-w01-roman, sans-serif !important;
    font-weight: 600;
}

.footer_center .footerLegal a {
    display: block;
    font-family: helvetica-w01-roman, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #000000 !important;
}

.footer_center .footerLegal a:hover {
    text-decoration: underline !important;
}

@media screen and (max-width: 785px) {
    .footer_center .footerNav>ul>li {
        float: none;
        margin-right: 0;
    }
}

.wrapText {
    width: 100% !important;
    max-width: 160px !important;
}

/* The bullet is a '✓' glyph at zero size, so it takes its colour from
   `color`, not `background-color` as the old round dot did. */
.room_item-1 .desc ul li:before {
    width: 0 !important;
    height: 0 !important;
    color: #e1bd85 !important;
    content: '✓' !important;
    position: absolute;
    top: 0 !important;
    left: 0;
    border-radius: 0 !important;
}

.addGuestModalBtn {
    margin-bottom: 10px;
    margin-right: 10px;
}

.room-detail_book .error_span,
.form-group-div .error,
#notupload-message,
#guest-notupload-message {
    color: yellow !important;
    font-style: italic !important;
    font-weight: normal !important;
}

#upload-doc-form .col-xs-12 span {
    color: yellow !important;
    font-style: italic !important;
    font-weight: normal !important;
}

.section-room .container {
    width: 100%;
    max-width: 1400px;
}

.room_item-1 .desc ul li {
    padding-left: 15px !important;
    width: calc(33%) !important;
}

.modal-close-btn {
    color: #e21d1a !important;
    border: solid 2px #fff !important;
    padding: 5px 10px 3px 10px !important;
    opacity: 0.8 !important;
    font-size: 25px !important;
}

.date_of_birth,
#roomBookingForm .awe-calendar-wrapper .lotus-icon-calendar,
#addGuestForm .awe-calendar-wrapper .lotus-icon-calendar {
    color: #fff !important;
    border-color: #fff !important;
}

#roomBookingForm .awe-calendar-wrapper,
#addGuestForm .awe-calendar-wrapper {
    width: 100% !important;
}

.padding-left-15 {
    padding-left: 30px !important;
}

.padding-right-15 {
    padding-right: 30px !important;
}

.date_of_birth::placeholder {
    color: #d3d3d3 !important;
}

#roomBookingForm input::placeholder {
    color: #d3d3d3 !important;
}

.ui-datepicker-title:has(select) {
    display: flex;
    align-items: center;
    padding-top: 10px;
    justify-content: center;
    gap: 10px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding: 4px 5px;
    background-color: #ffffff;
    border: 1px solid #d6d6d9;
    border-radius: 4px;
    color: #333333;
}

.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {
    background-color: #fff !important;
    color: black !important;
}

.termslabel {
    cursor: default !important;
}

.upload_box {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

#customUploadTriggerBtn {
    min-width: auto !important;
}

#upload-doc-div {
    word-break: break-all;
    /* height: 43px !important; */
    vertical-align: middle !important;
    color: #fff !important;
}

.advance-deposit-note {
    font-style: italic;
    font-size: 14px;
    color: #fff !important;
    margin: 20px 0px;
}

#without_deposit,
#deposit_amount {
    font-weight: bold;
}

#with_deposit {
    font-weight: 800;
    font-size: 18px;
}



/* promotional offer css start */
.promo-btn {
    background: linear-gradient(45deg, #e1bd85, #d4a96a);
    color: #996c4c;
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.promo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
    background: linear-gradient(45deg, #d4a96a, #e1bd85);
}

#promoModal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-out;
}

#promoModal .modal-content {
    background: #ffffff;
    margin: 2% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.4s ease-out;
    position: relative;
    border-top: 4px solid #e21d1a;
}

#promoModal .modal-header {
    background: #ffffff;
    padding: 25px;
    text-align: center;
    border-radius: 4px 4px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #e21d1a;
}

#promoModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkles" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(225,189,133,0.3)"/><circle cx="18" cy="18" r="0.5" fill="rgba(225,189,133,0.2)"/><circle cx="10" cy="15" r="0.8" fill="rgba(225,189,133,0.25)"/></pattern></defs><rect width="100" height="100" fill="url(%23sparkles)"/></svg>');
    opacity: 0.3;
}

#promoModal .modal-title {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

#promoModal .modal-title .highlight,
#promoModal .modal-title strong {
    color: #e21d1a;
}

#promoModal .modal-subtitle {
    color: #555555;
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

#promoModal .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e21d1a;
    transition: all 0.3s ease;
    z-index: 2;
}

#promoModal .close:hover {
    background: #b81613;
    transform: rotate(90deg);
}

.promo-container {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.promo-card {
    background: #e2e2e4;
    border-radius: 15px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    border-color: #e21d1a;
}

.promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e21d1a;
}

.promo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.promo-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: #1a1a1a;
}

.promo-percentage {
    background: #e21d1a;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.promo-code-section {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    border: 2px dashed #e21d1a;
}

.promo-code-label {
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-code {
    font-size: 1.3rem;
    font-weight: bold;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    border: 2px solid #e2e2e4;
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.promo-code:hover {
    background: #f5f5f5;
    transform: scale(1.05);
}

.copy-btn {
    background: #e21d1a;
    color: #ffffff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.copy-btn:hover {
    background: #b81613;
    transform: scale(1.05);
}

.expired {
    opacity: 0.6;
    filter: grayscale(50%);
}

.expired .promo-percentage {
    background: #888;
}

.expired .promo-code {
    background: #f0f0f0;
    color: #888;
    border-color: #888;
}

/* header language dropdown css */

.header_content .menu>li:hover>a {
    background-color: #e21d1a !important;
    color: #fff !important;
}

.header_content .menu>li>a {
    color: #000000 !important;
}

.header_content .menu>li .sub-menu li a {
    color: #000000 !important;
    font-weight: bold !important;
}

.header_content .menu>li .sub-menu li:hover>a {
    background-color: #e21d1a !important;
    color: #FFF !important;
}

/* header language dropdown css */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

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

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@media (max-width: 768px) {

    #promoModal .close {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .padding-right-15 {
        padding-left: 0px !important;
    }

    .col-sm-6:has(.phone-input-wrapper),
    .col-sm-6:has(input[name="city"]),
    .col-sm-4:has(input[name="number"]),
    .col-sm-4:has(input[name="vat_no"]) {
        padding-left: 0px !important;
    }

    #promoModal .modal-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    #promoModal .modal-content {
        width: 95%;
        margin: 1% auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    #promoModal .modal-title {
        font-size: 1.5rem;
    }

    .promo-container {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 15px;
    }

    .promo-card {
        padding: 20px;
    }

    .promo-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .promo-name {
        font-size: 1.2rem;
    }

    .promo-code {
        font-size: 1.1rem;
        padding: 8px 12px;
    }

    .copy-btn {
        margin-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    #promoModal .main-content {
        padding: 30px 20px;
    }

    #promoModal .logo {
        font-size: 2rem;
    }

    .promo-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }

    #promoModal .modal-header {
        padding: 20px;
    }

    .promo-container {
        padding: 15px;
    }

    .promo-card {
        padding: 15px;
    }
}

/* Tooltip for copied message */
#promoModal .tooltip {
    position: relative;
    display: inline-block;
}

#promoModal .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

#promoModal .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

#promoModal .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

:root {
    --primary-color: #996c4c;
    --primary-bg-color: #e1bd85;
}

/* promotional offer css end */

.room_item-1 .bot .price .originalprice {
    font-size: 18px !important;
}

/* Promotion Modal Styles */
#promotionModal.modal {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Only show flex when modal is actually open */
#promotionModal.modal.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#promotionModal .modal-dialog {
    max-width: 95%;
    max-height: 95vh;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#promotionModal .close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060;
    color: #fff;
    font-size: 3rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-shadow: none;
    opacity: 1;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.6);
}

#promotionModal .close:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.1);
}

#promotionModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    width: 100%;
}

#promotionModal .modal-body {
    width: 100%;
    padding: 0;
}

#promotionModal .modal-body img {
    width: 100%;
    height: auto;
    max-height: 95vh;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

#promotionModal .close span {
    margin-top: 5px !important;
}


.section-check-availability {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}

/* Add breathing room above the booking form on tablet/mobile, where it
   otherwise sits flush against the banner. Desktop layout is unchanged. */
@media (max-width: 991px) {
    .section-check-availability {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .section-check-availability {
        margin-top: 30px;
    }
}

.check-availability.availabilityCustom {
    position: relative;
    z-index: 10;
}

.child-ages-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 10;
    width: 100%;
}

@media (max-width: 767px) {
    .vailability-submit {
        order: 2;
        width: 100%;
    }

    .child-ages-wrapper {
        order: 1;
    }
}


@media (max-width: 768px) {
    #promotionModal .close {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 2.5rem !important;
    }
}

/* responsive css styles */
@media (max-width:1399px) {

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 100px !important;
    }

    .check-availability .availability-form .bootstrap-select.btn-group.awe-select {
        margin-right: 15px !important;
    }

    .cuastomDropSize {
        width: 165px !important;
        margin-right: 15px !important;
    }

    .check-availability.availabilityCustom::before {
        width: 100%;
    }

    .section-sub-banner.bannerNew {
        height: calc(100vh - 80px);
    }

    .room-desc-div {
        -webkit-line-clamp: 6;
        height: 120px !important;
    }

    .child_ages_div {
        margin-top: 7px !important;
    }
}

@media (max-width:1199px) {

    .section-sub-banner.bannerNew {
        height: calc(100vh - 200px);
        padding-top: 30px;
    }

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 80px !important;
        margin-top: 0;
    }

    .awe-btn.awe-btn-13.awe-btnCustom {
        margin-top: 10px;
    }

    .check-availability.availabilityCustom {
        margin-top: -210px;
        padding: 20px 0;
    }

    .iamgeSection .iamgeSectionBox {
        min-height: 350px;
    }

}

@media (max-width:991px) {

    /* The banner's only content is absolutely positioned, so height:100% would
       collapse the section and leave the background image nowhere to paint. */
    .section-sub-banner.bannerNew {
        height: auto;
        min-height: 420px;
    }

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 60px !important;
    }

    .sub-banner.subInner .text {
        padding-bottom: 0;
    }

    .check-availability .availability-form .vailability-submit {
        margin-top: 0 !important;
    }

    .check-availability.availabilityCustom {
        margin-top: 0px;
    }

    .cuastomDropSize {
        width: 200px !important;
        margin-bottom: 10px !important;
    }

    .sub-banner.subInner2 {
        width: 100%;
    }

    .room-desc-div {
        height: 100% !important;
        overflow: visible;
        -webkit-line-clamp: none;
    }

}

@media (max-width:767px) {

    #ui-datepicker-div.ui-datepicker {
        left: 12px !important;
        width: calc(100vw - 24px) !important;
    }

    .section-sub-banner.bannerNew {
        min-height: 320px;
    }

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 45px !important;
    }

    .sub-banner.subInner .text p {
        font-size: 25px;
    }

    .sub-banner.subInner {
        width: 100%;
    }

    .centerClass {
        margin: 0 !important;
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
    }

    .check-availability .availability-form .bootstrap-select.btn-group.awe-select {
        margin-top: 0 !important;
    }

    .cuastomDropSize {
        width: 45% !important;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
    }

    .check-availability .availability-form .bootstrap-select.btn-group.awe-select {
        margin-right: 0 !important;
    }

    .iamgeSection .iamgeSectionBox {
        min-height: 350px;
    }

    .section-sub-banner.innerBanner {
        min-height: 250px;
    }

}

@media (max-width:575px) {

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 40px !important;
    }

    .sub-banner.subInner2 .text h2 {
        font-size: 25px !important;
    }

    .section-sub-banner.innerBanner {
        min-height: 220px;
    }

    .details-image {
        height: 280px !important;
        object-fit: cover;
    }

    .et_pb_column_2 {
        display: flex !important;
        justify-content: center !important;
    }

    .upload_box {
        flex-wrap: wrap;
    }

}

@media (max-width:479px) {
    .iamgeSection .iamgeSectionBox {
        min-height: 300px;
    }

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 34px !important;
    }

    .cuastomDropSize,
    .awe-btn.awe-btn-13.awe-btnCustom {
        width: 100% !important;
    }

    .sub-banner.subInner2 {
        transform: translate(-50%, -30%);
    }

    .room-list-image {
        height: 250px !important;
        object-fit: cover;
    }

    .check-availability {
        padding: 20px !important;
    }

}

@media (max-width:360px) {

    .sub-banner.subInner .text h2,
    .sub-banner .text h2 {
        font-size: 30px !important;
    }

    .sub-banner.subInner .text p {
        font-size: 20px;
    }

    .iamgeSection .iamgeSectionBox {
        min-height: 180px;
    }

    .sub-banner.subInner {
        top: 60%;
    }

    .section-sub-banner.bannerNew {
        padding-top: 60px;
    }

}

.check-availability .availability-form .awe-calendar-wrapper,
.check-availability .availability-form .bootstrap-select.btn-group.awe-select {
    margin-right: 0 !important;
}


@media (min-width:480px) {
    /* Budget Motel availability bar: give the fields breathing room between each
    other. The button keeps its own spacing via .vailability-submit. */
    .check-availability.availabilityCustom .availability-form .awe-calendar-wrapper,
    .check-availability.availabilityCustom .availability-form .bootstrap-select.btn-group.awe-select {
        margin-right: 12px !important;
    }
}

.check-availability .availability-form .awe-calendar-wrapper i,
.bootstrap-select.btn-group.awe-select .dropdown-toggle .filter-option,
.bootstrap-select.btn-group.awe-select .dropdown-toggle .caret {
    color: #000000 !important;
}

.check-availability .availability-form .vailability-submit .awe-btn {
    border-radius: 0 !important;
    background-color: #000000;
    border: 2px solid #000000;
}

/* Wins over the black default above (same specificity, declared later) so the
   availability bar keeps the brand-red CTA. Other pages stay black. */
.check-availability.availabilityCustom .availability-form .vailability-submit .awe-btn {
    border-radius: 8px !important;
    background-color: #e21d1a;
    border: 2px solid #e21d1a;
}

.check-availability.availabilityCustom .availability-form .vailability-submit .awe-btn:hover {
    background-color: #b81714;
    border-color: #b81714;
}

/* ==========================================================================
   Checkout (booking-details) — Budget Motel design language
   Mirrors the look defined inline in booking-company-details.blade.php
   ========================================================================== */

.section-checkout {
    --bm-red: #e21d1a;
    --bm-red-dark: #c01714;
    --bm-ink: #1f1f1f;
    --bm-muted: #6b6b6b;
    --bm-line: #e2e2e4;
    --bm-surface: #f6f6f6;
}

/* ---- Page surface ---- */
.section-checkout.bg-brown {
    background-color: #ffffff !important;
    font-family: 'Source Sans Pro', 'PT Sans', sans-serif;
    color: var(--bm-ink);
}

/* ---- Font family ----
   Matches .company-booking-section. Note the layout only loads Hind and
   Montserrat from Google Fonts, so on both pages this stack resolves to the
   generic sans-serif — the !important overrides below exist to beat the
   Montserrat/Helvetica rules earlier in this file, which would otherwise win. */
.section-checkout,
.section-checkout *,
#roomBookingForm,
#roomBookingForm *,
#addGuestModal,
#addGuestModal *,
#upload-doc-modal,
#upload-doc-modal *,
#scan-doc-modal,
#scan-doc-modal *,
#validationModal,
#validationModal * {
    font-family: 'Source Sans Pro', 'PT Sans', sans-serif !important;
}

/* Icon fonts must keep their own family or the glyphs break */
.section-checkout .fa,
.section-checkout [class^="fa-"],
.section-checkout [class*=" fa-"],
.section-checkout .lotus-icon-calendar,
.section-checkout [class^="lotus-icon"],
.section-checkout [class*=" lotus-icon"],
#addGuestModal .fa,
#addGuestModal [class^="lotus-icon"],
#addGuestModal [class*=" lotus-icon"],
#validationModal .fa,
.section-checkout .iti__flag,
#addGuestModal .iti__flag,
.section-checkout .caret,
#addGuestModal .caret {
    font-family: inherit;
}

.section-checkout .fa,
.section-checkout [class^="fa-"],
.section-checkout [class*=" fa-"],
#roomBookingForm .fa,
#roomBookingForm [class^="fa-"],
#roomBookingForm [class*=" fa-"],
#addGuestModal .fa,
#addGuestModal [class^="fa-"],
#addGuestModal [class*=" fa-"],
#upload-doc-modal .fa,
#scan-doc-modal .fa,
#validationModal .fa {
    font-family: FontAwesome !important;
}

/* Birthday date field: full-width wrapper with the calendar icon pinned inside
   on the right (the input itself is a plain text field). */
.section-checkout .birthday-wrapper,
#addGuestModal .birthday-wrapper {
    display: block;
    position: relative;
    width: 100%;
}

.section-checkout .birthday-wrapper .awe-calendar,
#addGuestModal .birthday-wrapper .awe-calendar {
    width: 100%;
    padding-right: 36px;
}

.section-checkout .birthday-wrapper .fa-calendar,
#addGuestModal .birthday-wrapper .fa-calendar {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--bm-muted);
    pointer-events: none;
}

/* Lotus icon set was left on `inherit` above, so its glyphs rendered as empty
   tofu boxes (e.g. calendar/arrow icons). Re-assert its own font family. */
.section-checkout .lotus-icon-calendar,
.section-checkout [class^="lotus-icon"],
.section-checkout [class*=" lotus-icon"],
#roomBookingForm [class^="lotus-icon"],
#roomBookingForm [class*=" lotus-icon"],
#addGuestModal [class^="lotus-icon"],
#addGuestModal [class*=" lotus-icon"] {
    font-family: 'Lotus Icon' !important;
}

/* ---- Panels ---- */
.section-checkout .checkout_form {
    background: #ffffff;
    border: 1px solid var(--bm-line);
    border-radius: 6px;
    padding: 30px 24px 24px;
}

.section-checkout .checkout_head h3 {
    color: var(--bm-ink) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--bm-red);
}

/* ---- Labels ---- */
.section-checkout .checkout .form-label,
.section-checkout .checkout_form label,
.section-checkout .servicesdiv .servicesdiv-text,
.section-checkout .servicesdiv-text label,
.section-checkout .margindiv,
.section-checkout .white,
.section-checkout .private,
.section-checkout .vat,
.section-checkout .parking_div span,
.section-checkout .checkout .checkout_cartinfo p {
    color: var(--bm-ink) !important;
}

.section-checkout .checkout .form-label,
.section-checkout .checkout_form>.row>.col-xs-12>label,
.section-checkout .checkout_form label.form-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

/* On mobile the half-width columns are too narrow for long single-word
   labels ("GEBURTSTAGSDATUM", "UMSATZSTEUERIDENTIFIKATION", "HAUSNUMMER"),
   which overflow their column. Allow them to wrap/break and tighten the
   type so they stay inside the field. */
@media (max-width: 767px) {

    .section-checkout .checkout .form-label,
    .section-checkout .checkout_form>.row>.col-xs-12>label,
    .section-checkout .checkout_form label.form-label {
        font-size: 13px;
        letter-spacing: 0.02em;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

    /* Paired side-by-side fields (AUSWEISNUMMER / GEBURTSTAGSDATUM,
       ADRESSE / HAUSNUMMER, etc.) have labels of different lengths, so one
       wraps and the other stays on one line — pushing their inputs out of
       alignment. Reserve a consistent height on every paired label so both
       columns' inputs start at the same baseline. The !important overrides
       the inline min-height:40px on the VAT labels, whose long label needs
       more room. */
    .section-checkout .checkout_form .col-xs-6>label.form-label,
    .section-checkout .checkout_form .col-sm-6>label.form-label,
    .section-checkout .checkout_form .col-xs-8>label.form-label,
    .section-checkout .checkout_form .col-xs-4>label.form-label,
    .section-checkout .checkout_form .col-xs-8 .form-group>label.form-label,
    .section-checkout .checkout_form .col-xs-4 .form-group>label.form-label {
        min-height: 3.4em !important;
        display: flex;
        align-items: flex-end;
    }
}

/* ---- Text inputs / selects / date fields ----
   #phone / #guest_phone are excluded here: intl-tel-input runs with
   separateDialCode, so it sets padding-left inline to clear the flag and
   dial code. An !important padding here would sit under that markup. */
.section-checkout .checkout .field-text:not(.phoneformat),
.section-checkout .field-textarea,
.section-checkout .awe-calendar,
.section-checkout .date_of_birth,
#addGuestModal .field-text:not(.phoneformat),
#upload-doc-modal .field-text {
    width: 100%;
    height: 50px !important;
    line-height: normal !important;
    border: 1px solid #c9c9cb !important;
    border-radius: 4px;
    padding: 12px 14px !important;
    font-size: 16px;
    color: var(--bm-ink) !important;
    background: #ffffff !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.section-checkout .checkout .field-text::placeholder,
.section-checkout .date_of_birth::placeholder,
#roomBookingForm input::placeholder,
#addGuestForm input::placeholder {
    color: #a0a0a0 !important;
}

.section-checkout .checkout .field-text:focus,
.section-checkout .awe-calendar:focus,
.section-checkout .field-textarea:focus,
#roomBookingForm #phone:focus,
#addGuestForm #guest_phone:focus,
#addGuestModal .field-text:focus,
#upload-doc-modal .field-text:focus {
    outline: none;
    border-color: var(--bm-red) !important;
    box-shadow: 0 0 0 3px rgba(226, 29, 26, 0.12);
}

/* Phone inputs — same look as the other fields, but padding-left is left to
   intl-tel-input's inline style so the text clears the flag + dial code. */
#roomBookingForm #phone,
#addGuestForm #guest_phone,
#addGuestModal #guest_phone {
    width: 100%;
    height: 50px !important;
    line-height: normal !important;
    border: 1px solid #c9c9cb !important;
    border-radius: 4px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 14px !important;
    font-size: 16px;
    color: var(--bm-ink) !important;
    background: #ffffff !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#roomBookingForm #phone:focus,
#addGuestForm #guest_phone:focus,
#addGuestModal #guest_phone:focus {
    outline: none;
    border-color: var(--bm-red) !important;
    box-shadow: 0 0 0 3px rgba(226, 29, 26, 0.12);
}

/* Flag + dial code block sits inside the input; keep it on the white field */
.section-checkout .iti--separate-dial-code .iti__selected-flag,
#addGuestModal .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
    border-radius: 4px 0 0 4px;
}

/* Calendar icon inside the birthday field */
#roomBookingForm .awe-calendar-wrapper .lotus-icon-calendar,
#addGuestForm .awe-calendar-wrapper .lotus-icon-calendar {
    color: var(--bm-muted) !important;
    border-color: transparent !important;
}

/* ---- Bootstrap-select dropdowns (country, child ages) ---- */
.section-checkout .checkout .bootstrap-select.btn-group.awe-select .dropdown-toggle,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-toggle {
    height: 50px !important;
    line-height: normal !important;
    border: 1px solid #c9c9cb !important;
    border-radius: 4px;
    background: #ffffff !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.section-checkout .checkout .bootstrap-select.btn-group.awe-select .dropdown-toggle .filter-option,
.section-checkout .checkout .bootstrap-select.btn-group.awe-select .dropdown-toggle .caret,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-toggle .filter-option,
#addGuestModal .bootstrap-select.btn-group.awe-select .dropdown-toggle .caret {
    color: var(--bm-ink) !important;
    font-size: 16px;
}

/* ---- Buttons ---- */
.section-checkout .awe-btn.awe-btn-13,
#addGuestModal .awe-btn.awe-btn-13,
#upload-doc-modal .awe-btn.awe-btn-13,
#scan-doc-modal .awe-btn.awe-btn-13,
#validationModal .awe-btn.awe-btn-13 {
    height: 50px !important;
    line-height: normal !important;
    border: 1px solid #e21d1a !important;
    border-radius: 4px;
    background: #e21d1a !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 26px !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* On mobile the long German labels on these action buttons
   ("FÜGEN SIE EINE WEITERE FAHRZEUGNUMMER…", "WEITEREN GAST HINZUFÜGEN
   (GAST 2)") exceed the button width. The base button has a fixed 50px
   height and no-wrap text, so the label overflows to the right. Let the
   text wrap onto two lines and grow the button height to fit. */
@media (max-width: 767px) {

    .section-checkout .add-vehicle-btn,
    .section-checkout .addGuestModalBtn,
    #addGuestModal .awe-btn.awe-btn-13 {
        height: auto !important;
        min-height: 50px;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.3 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

.section-checkout .awe-btn.awe-btn-13:hover,
.section-checkout .awe-btn.awe-btn-13:focus,
#addGuestModal .awe-btn.awe-btn-13:hover,
#addGuestModal .awe-btn.awe-btn-13:focus,
#upload-doc-modal .awe-btn.awe-btn-13:hover,
#upload-doc-modal .awe-btn.awe-btn-13:focus,
#scan-doc-modal .awe-btn.awe-btn-13:hover,
#scan-doc-modal .awe-btn.awe-btn-13:focus,
#validationModal .awe-btn.awe-btn-13:hover,
#validationModal .awe-btn.awe-btn-13:focus {
    background: #c01714 !important;
    background-color: #c01714 !important;
    border-color: #c01714 !important;
    color: #ffffff !important;
}


.section-checkout .checkout_btn .btn-order {
    width: 100%;
}

/* Promotion buttons — drop the base .awe-btn min-width:110px so they size
   to their label and leave the promo code input more room. */
#promotion-apply-btn,
#promotion-remove-btn {
    height: auto;
    min-height: 50px;
    font-size: 14px;
    min-width: auto !important;
    margin-right: 0 !important;
}

/* Promotional Offers button — replaces the gold gradient pill with the flat
   red treatment used by the other buttons. Only used on this page. */
.section-checkout .promo-btn {
    min-height: 50px;
    background: #e21d1a !important;
    border: 1px solid #e21d1a !important;
    border-radius: 4px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 26px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.section-checkout .promo-btn:hover,
.section-checkout .promo-btn:focus {
    background: #c01714 !important;
    border-color: #c01714 !important;
    color: #ffffff !important;
    transform: none;
    box-shadow: none;
}

/* ---- Cart / summary card ---- */
.section-checkout .checkout .checkout_cart {
    background-color: var(--bm-surface) !important;
    border: 1px solid var(--bm-line) !important;
    border-top: 4px solid var(--bm-red) !important;
    border-radius: 6px;
}

.section-checkout .checkout .checkout_cart .cart-item .text,
.section-checkout .checkout .checkout_cart .cart-item .text a,
.section-checkout .checkout .checkout_cart .cart-item .text p {
    color: var(--bm-ink) !important;
}

/* ---- Cart item: give the summary a clear typographic hierarchy instead of
   four identical lines. Room name = heading, price = red accent, the meta
   lines (nights/rooms, rate, dates) = smaller muted text. ---- */
.section-checkout .checkout .checkout_cart .cart-item .text {
    line-height: 1.5;
}

/* Room name */
.section-checkout .checkout .checkout_cart .cart-item .text>a.form-label {
    display: block;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    color: var(--bm-ink) !important;
}

/* Meta lines default to smaller muted text */
.section-checkout .checkout .checkout_cart .cart-item .text p.form-label {
    font-size: 13px !important;
    color: var(--bm-muted) !important;
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
}

/* First meta line holds the price — separate the "n nights - m rooms" label
   from the amount and colour the amount in the brand red. */
.section-checkout .checkout .checkout_cart .cart-item .text p.form-label:first-of-type {
    font-size: 13px !important;
}

.section-checkout .checkout .checkout_cart .cart-item .text p.form-label span {
    display: inline-block;
    color: var(--bm-muted) !important;
}

.section-checkout .checkout .checkout_cart .cart-item .text p.form-label b {
    display: inline-block;
    margin-left: 6px;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bm-red) !important;
}

.section-checkout .checkout .checkout_cartinfo p span {
    color: var(--bm-muted) !important;
}

.section-checkout .color-red {
    color: var(--bm-red) !important;
    font-weight: 700;
}

.section-checkout .servicesdiv {
    color: var(--bm-ink);
}

.section-checkout .advance-deposit-note {
    color: var(--bm-muted) !important;
    font-size: 14px;
    line-height: 1.6;
}

/* ---- Checkboxes / switches ---- */
.section-checkout .checkbox-list .form-check .form-check-input-new {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #c9c9cb;
    accent-color: var(--bm-red);
}

.section-checkout .checkbox-list .form-check .form-check-input-new:checked {
    background-color: var(--bm-red);
    border-color: var(--bm-red);
}

.section-checkout .checkbox-list .form-check .form-check-input:focus {
    border-color: var(--bm-red);
}

.section-checkout .termslabel,
.section-checkout .form-check-label {
    color: var(--bm-ink) !important;
    font-weight: 600;
}

.section-checkout .agb-link,
.section-checkout .agb-link:hover {
    color: var(--bm-red) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* Safari-safe custom checkbox rendering */
.checkbox-list .form-check .form-check-input-new,
.section-checkout .checkbox-list .form-check .form-check-input-new {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.checkbox-list .form-check .form-check-input-new:checked,
.section-checkout .checkbox-list .form-check .form-check-input-new:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.checkbox-list .form-check .form-check-input-new:checked::after,
.section-checkout .checkbox-list .form-check .form-check-input-new:checked::after {
    content: none !important;
}

.section-checkout .checkbox-list .checkbox-inline.servicesdiv-text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
    padding-left: 0 !important;
    text-align: left;
}

.section-checkout .checkbox-list .checkbox-inline.servicesdiv-text .termslabel {
    margin: 0 !important;
    text-align: left;
}

.section-checkout .checkbox-list .checkbox-inline.servicesdiv-text .form-check-input-new {
    margin: 0;
    margin-top: 3px;
}

/* ---- Validation messages ----
   Mirrors .error_span / .company-status-message on the company booking page:
   upright red #e21d1a at 14px/600, not the theme's italic yellow.
   Modals are matched explicitly — they sit outside .section-checkout. */
.section-checkout .error_span,
.section-checkout .error_span_js,
.section-checkout .error,
.section-checkout .error-message,
.section-checkout .vehicle-input-error,
.section-checkout .room-detail_book .error_span,
.section-checkout .form-group-div .error,
.section-checkout #notupload-message,
.section-checkout #promotion-error,
#roomBookingForm .error_span,
#roomBookingForm .error_span_js,
#roomBookingForm #notupload-message,
#addGuestForm .error,
#addGuestModal .error,
#addGuestModal .error_span,
#addGuestModal #guest-notupload-message,
#guest-notupload-message,
#upload-doc-modal .error,
#upload-doc-form .col-xs-12 span,
#scan-doc-modal .error,
#validationModal .error_span_js,
#validationModal #validationErrorsList,
#validationModal #validationErrorsList li,
#promotion-error {
    display: block;
    margin-top: 6px;
    color: var(--bm-red) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-family: 'Source Sans Pro', 'PT Sans', sans-serif !important;
    word-break: break-word;
}

/* ---- Loader ----
   #loader is shared with success / chennex pages, so the red is scoped to
   this page via #roomBookingForm rather than changing the base rule.
   Literal colors, not var(--bm-*): those vars are declared on
   .section-checkout and #loader sits outside it, so they'd resolve to
   nothing and border-color would fall back to the element's color (black). */
body:has(#roomBookingForm) #loader {
    border: 16px solid #e2e2e4 !important;
    border-top: 16px solid #e21d1a !important;
}

/* Birthday Date field — no top gap on its validation message */
#roomBookingForm .padding-right-15 .error_span,
#roomBookingForm .padding-right-15 .error_span_js,
#roomBookingForm #date_of_birth+.error_span,
#roomBookingForm #date_of_birth+.error_span_js,
.section-checkout .padding-right-15 .error_span,
.section-checkout .padding-right-15 .error_span_js {
    margin-top: 0;
}

/* Parking "no slots" notice — same red, sits on its own line */
.section-checkout .error-message,
.section-checkout .vehicle-input-error {
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

/* Success / confirmation messages — matches .company-status-message.success */
.section-checkout .success_span,
#promotion-success {
    display: block;
    margin-top: 6px;
    color: #2d8a45 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-family: 'Source Sans Pro', 'PT Sans', sans-serif !important;
    word-break: break-word;
}

/* Collapse empty message spans so they take no vertical space */
.section-checkout .error_span:empty,
.section-checkout .error_span_js:empty,
.section-checkout .success_span:empty,
#promotion-error:empty,
#promotion-success:empty {
    display: none;
    margin-top: 0;
}

.section-checkout #upload-doc-div {
    color: var(--bm-ink) !important;
}

/* ---- Modals ---- */
/* ---- Modals — background + text color only (no layout changes) ---- */
#addGuestModal .modal-content,
#upload-doc-modal .modal-content,
#scan-doc-modal .modal-content,
#validationModal .modal-content {
    background-color: #ffffff !important;
    color: var(--bm-ink) !important;
    border-radius: 6px;
    overflow: hidden;
}

/* Header/footer are square by default and would poke past the rounded panel */
#addGuestModal .modal-header,
#upload-doc-modal .modal-header,
#scan-doc-modal .modal-header,
#validationModal .modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#addGuestModal .modal-footer,
#upload-doc-modal .modal-footer,
#scan-doc-modal .modal-footer,
#validationModal .modal-footer {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#addGuestModal .modal-header,
#upload-doc-modal .modal-header,
#scan-doc-modal .modal-header,
#validationModal .modal-header,
#addGuestModal .modal-footer,
#upload-doc-modal .modal-footer,
#scan-doc-modal .modal-footer,
#validationModal .modal-footer {
    background-color: #ffffff !important;
    border-color: var(--bm-line) !important;
}

#addGuestModal .modal-body,
#upload-doc-modal .modal-body,
#scan-doc-modal .modal-body,
#validationModal .modal-body {
    background-color: #ffffff !important;
    color: var(--bm-ink) !important;
}

#addGuestModal .modal-title,
#upload-doc-modal .modal-title,
#scan-doc-modal .modal-title,
#validationModal .modal-title {
    color: var(--bm-ink) !important;
}

#addGuestModal .modal-body label,
#upload-doc-modal .modal-body label,
#scan-doc-modal .modal-body label,
#addGuestModal .form-label,
#upload-doc-modal .form-label,
#addGuestModal .modal-body p,
#upload-doc-modal .modal-body p,
#scan-doc-modal .modal-body p,
#addGuestModal .modal-body span:not(.error):not(.error_span):not(.error_span_js),
#upload-doc-modal .modal-body span:not(.error):not(.error_span):not(.error_span_js) {
    color: var(--bm-ink) !important;
}

/* Close button — was white for the brown panel, needs dark ink on white */

/* ---- Validation modal — text colors only ---- */
#validationModal .modal-title {
    color: #1f1f1f !important;
}

#validationErrorsList {
    padding-left: 8px;
}

#validationModal #validationErrorsList,
#validationModal #validationErrorsList li,
#validationModal .error_span_js {
    color: #e21d1a !important;
}

/* ---- Phone input ---- */
.section-checkout .iti--separate-dial-code .iti__selected-dial-code,
#addGuestModal .iti--separate-dial-code .iti__selected-dial-code {
    color: var(--bm-ink) !important;
}

.section-checkout .iti--separate-dial-code .iti__selected-flag,
#addGuestModal .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
}

/* ---- Datepicker on light surface ---- */
#roomBookingForm .ui-datepicker select.ui-datepicker-month,
#roomBookingForm .ui-datepicker select.ui-datepicker-year {
    background-color: #ffffff;
    border: 1px solid #c9c9cb;
    color: var(--bm-ink);
}

@media (max-width: 640px) {
    .section-checkout .checkout_form {
        padding: 20px;
    }
}

#roomBookingForm .add-vehicle-btn {
    font-size: 14px;
}

#roomBookingForm:has(#channex_customer_uuid) .add-vehicle-btn {
    font-size: 12px;
    padding: 12px 18px !important;
}

/* Fix for Company Name and VAT Number alignment */
.vat_inputs:not(.hidden) {
    display: inline-block !important;
    float: none !important;
    vertical-align: bottom;
}

.vat_inputs.col-xs-8 {
    width: calc(66.66666667% - 5px) !important;
}

.vat_inputs.col-xs-4 {
    width: calc(33.33333333% - 5px) !important;
}

.vat_inputs label.form-label {
    word-break: break-word;
    min-height: auto !important;
}

#preloader .preloader-dot {
    border-color: #e21d1a !important;
}

/* Room listing — image hover overlay: brand red gradient */
.room_item-1 .img:before {
    background-color: transparent !important;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fde1e1)) !important;
    background: -webkit-linear-gradient(top, transparent, #fde1e1) !important;
    background: -moz-linear-gradient(top, transparent, #fde1e1) !important;
    background: -ms-linear-gradient(top, transparent, #fde1e1) !important;
    background: -o-linear-gradient(top, transparent, #fde1e1) !important;
    background: linear-gradient(to bottom, transparent, #fde1e1) !important;
}

.room_item-1:hover .img:before {
    opacity: 0.55 !important;
    top: 0 !important;
}