/* ============================================
   SULAP HOMESTAY - Luxury Theme Overrides
   Systemic rules live in main.css. This file
   holds site-specific components only.
   ============================================ */

/* ---------- Select2 dropdown (country picker) ---------- */
.select2-dropdown { background: #fff; border: 1px solid rgba(0, 0, 0, .15); }
.select2-container--default .select2-results__option { color: #000; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--accent-gold) !important;
    color: #000 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(212, 175, 55, .15);
    color: #000;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    color: #000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
}
/* Closed select box — match the luxury form controls */
.select2-container--default .select2-selection--single {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    line-height: 1.5 !important;
    padding-left: 15px !important;
    padding-right: 40px !important;
    width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
    right: 12px;
}

/* ---------- Seasonal rate breakdown ---------- */
.rate-breakdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px 22px;
    margin-top: 18px;
}
.rate-breakdown__title { font-family: var(--font-heading); font-size: 20px; color: var(--text-primary); margin-bottom: 12px; letter-spacing: .5px; }
.rate-breakdown__list { list-style: none; margin: 0; padding: 0; }
.rate-breakdown__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-color); }
.rate-breakdown__list li:last-child { border-bottom: 0; }
.rate-breakdown__label { font-size: 13px; color: var(--text-secondary); }
.rate-breakdown__label i { color: var(--accent-gold); margin-right: 6px; }
.rate-breakdown__value { font-weight: 500; font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.rate-breakdown__note { font-size: 12px; color: #6F6A63; margin: 10px 0 0; }

/* ---------- Table responsive helper ---------- */
.table-responsive--md { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive--md .table { min-width: 700px; }

/* ---------- Prevent horizontal overflow ---------- */
html, body { overflow-x: hidden; }
body { -webkit-tap-highlight-color: transparent; }

/* ============================================
   CHECKOUT — Dark Luxury Styling
   Sulap theme order/checkout flow.
   ============================================ */

.checkout-section { padding-top: 24px; } /* main.css already clears the header (72px) */

.checkout-wrapper__top { margin-bottom: var(--gap-medium); }
.checkout-wrapper__title { font-family: var(--font-heading); font-size: 30px; font-weight: 400; color: var(--text-primary); margin-bottom: 18px; letter-spacing: .5px; }
.checkout-wrapper__title-link { color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; }
.checkout-wrapper__title-link .icon { width: 40px; height: 40px; border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-luxury); }
.checkout-wrapper__title-link:hover { color: var(--accent-gold); }
.checkout-wrapper__title-link:hover .icon { border-color: var(--accent-gold); }

.checkout-wrapper__body,
.booking-information {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: var(--gap-medium);
    margin-bottom: var(--gap-medium);
}
.checkout-wrapper__bottom {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: var(--gap-medium);
}
.checkout-wrapper__bottom .title,
.checkout-wrapper__body .title,
.booking-information .title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 18px;
}

/* Booking accordion */
.checkout-wrapper .booking-accordion .accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    margin-bottom: 14px;
}
.checkout-wrapper .booking-accordion .accordion-button {
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--text-primary);
    background: var(--card-bg);
    padding: 18px 22px;
    box-shadow: none;
    border-radius: 0;
}
.checkout-wrapper .booking-accordion .accordion-button:not(.collapsed) { background: var(--bg-primary); color: var(--accent-gold); }
.checkout-wrapper .booking-accordion .accordion-button:focus { box-shadow: none; }
.checkout-wrapper .booking-accordion .accordion-body { padding: 20px 22px; color: var(--text-secondary); }

/* Add-on / order sidebar */
.addon-sidebar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: var(--gap-medium);
    position: sticky;
    top: 96px;
}
.addon-sidebar__top {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}
.addon-sidebar__top .title { font-family: var(--font-heading); font-size: 24px; color: var(--text-primary); margin: 0; letter-spacing: .5px; }
.addon-sidebar__subtitle { color: var(--text-secondary); font-size: 13px; margin: 6px 0 0; }
.addon-sidebar .sidebar-item { border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; margin-top: 16px; }
.addon-sidebar .sidebar-item .amount-list { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.addon-sidebar .sidebar-item .amount-list__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.addon-sidebar .amount-list__item--room .amount-list__title { font-size: 15px; }
.addon-sidebar .sidebar-item .amount-list__title { font-weight: 500; display: flex; align-items: center; gap: 5px; color: var(--text-primary); }
.addon-sidebar .amount-list__title.text--base { color: var(--accent-gold) !important; }
.addon-sidebar .amount-list__price,
.addon-sidebar .amount-list__number { color: var(--text-secondary); }
.addon-sidebar .amount-list__price--nightly { text-align: right; }
.addon-sidebar .amount-list__price--nightly small { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.addon-sidebar .amount-list__price--total { color: var(--text-primary); font-weight: 600; }
.addon-sidebar .amount-list__note { color: var(--text-secondary); font-size: 12px; }
.addon-sidebar .amount-list__item--subtotal,
.addon-sidebar .amount-list__item--coupon,
.addon-sidebar .amount-list__item--tax { align-items: center; }
.addon-sidebar__amount { font-size: 20px; font-family: var(--font-heading); color: var(--text-primary); }
.addon-sidebar__total-amount { font-size: 26px; font-family: var(--font-heading); color: var(--accent-gold); }
.addon-sidebar__total { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.addon-sidebar__bottom { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.addon-sidebar__vat { color: var(--text-secondary); font-size: 13px; }
.addon-sidebar .amount-list__btn { border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 14px; }

/* Sign-in button on checkout */
.cmn-btn { background: var(--text-primary); color: #000; border: 1px solid var(--text-primary); border-radius: 0; padding: 14px 30px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: var(--transition-luxury); }
.cmn-btn:hover { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }

/* Checkout fields use luxury input style already via .form--control */

/* ---------- Checkout responsive ---------- */
@media (max-width: 991px) {
    .addon-sidebar { position: static; margin-top: 24px; }
}
@media (max-width: 575px) {
    .checkout-wrapper__body,
    .booking-information,
    .checkout-wrapper__bottom,
    .addon-sidebar { padding: 18px; }
    .checkout-wrapper__title { font-size: 24px; }
    .addon-sidebar__total { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================
   CONTACT — Dark Luxury Styling
   Cinematic split layout + minimal form.
   ============================================ */

.sulap-contact { align-items: stretch; }

/* Info column */
.sulap-contact__info {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-medium);
    position: relative;
    overflow: hidden;
}
.sulap-contact__info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
}
.sulap-contact__list { list-style: none; margin: 0; padding: 0; }
.sulap-contact__list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-luxury);
}
.sulap-contact__list li:first-child { padding-top: 0; }
.sulap-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sulap-contact__icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 10px;
    background: rgba(212, 175, 55, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--accent-gold);
    transition: var(--transition-luxury);
}
.sulap-contact__list li:hover { padding-left: 6px; }
.sulap-contact__list li:hover .sulap-contact__icon {
    background: var(--accent-gold);
    color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, .3);
}
.sulap-contact__list h6 { font-family: var(--font-heading); font-size: 18px; color: var(--text-primary); margin-bottom: 5px; letter-spacing: .5px; }
.sulap-contact__list p { color: var(--text-secondary); font-size: 14px; margin: 0; word-break: break-word; line-height: 1.6; }
.sulap-contact__list a { color: var(--text-secondary); }
.sulap-contact__list a:hover { color: var(--accent-gold); }

.sulap-contact__social {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.sulap-contact__social h6 { font-family: var(--font-body); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 14px; }

/* Form column */
.sulap-contact__form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 36px 34px;
    position: relative;
    overflow: hidden;
}
.sulap-contact__form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-gold));
}
.sulap-contact__form .form-group label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.sulap-contact__form .custom-icon-field .form--control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 44px 14px 16px;
    transition: var(--transition-luxury);
}
.sulap-contact__form .custom-icon-field .form--control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    outline: none;
}
.sulap-contact__form textarea.form--control { min-height: 150px; resize: vertical; }
.sulap-contact__form .sulap-btn { border-radius: 8px; margin-top: 4px; }

/* Map */
.sulap-contact__map { padding: 0 0 var(--gap-large); }
.sulap-contact__map iframe {
    width: 100%;
    height: 420px;
    border: 0;
    border-top: 1px solid var(--border-color);
    filter: grayscale(1) invert(0.92) contrast(0.9);
    opacity: .9;
}

/* Responsive: cinematic collapses to single column on tablet/mobile */
@media (max-width: 1023px) {
    .sulap-cinematic { grid-template-columns: 1fr; }
    .sulap-cinematic > :nth-child(even) { transform: none; }
}
@media (max-width: 575px) {
    .sulap-contact__info,
    .sulap-contact__form { padding: 18px; }
    .sulap-contact__map iframe { height: 320px; }
}

.policy-signature { border-top: 1px solid var(--card-bg); padding-top: 20px; }
.policy-signature-line { border-bottom: 1px solid var(--accent-gold); height: 40px; }
.policy-signature .small { color: var(--text-secondary); }

/* ============================================
   AUTH / ACCOUNT FORMS
   ============================================ */
.auth-section__form {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.auth-section__form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
}
.auth-section__form .title {
    font-family: var(--font-heading);
    font-size: 30px;
    color: var(--text-primary);
    letter-spacing: .5px;
}
.auth-section__form .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}
.auth-section__form .form-group label {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.auth-section__form .custom-icon-field .form--control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 44px 14px 16px;
    transition: var(--transition-luxury);
}
.auth-section__form .custom-icon-field .form--control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    outline: none;
}
.auth-section__form .custom-icon-field i {
    right: 16px;
    color: var(--accent-gold);
}
.auth-section__form .input-eye {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
}
.auth-section__form .input-eye:hover { color: var(--accent-gold); }
.auth-section__form .form-check-label {
    color: var(--text-secondary);
    font-size: 14px;
}
.auth-section__form .custom--checkbox .form-check-input:checked {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.auth-section__form .btn--base {
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
}
.auth-section__form .btn--base:hover { color: var(--accent-gold); }
.auth-section__form a.text--base { color: var(--accent-gold); font-size: 14px; }
.auth-section__form a.text--base:hover { text-decoration: underline; }
.auth-section__form .verify-gcaptcha { margin-top: 22px; }
.auth-section__form .row { --bs-gutter-x: 0; }

/* ============================================
   CONFIRMATION MODAL (luxury)
   ============================================ */
.sulap-modal {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    position: relative;
    padding: 8px;
}
.sulap-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-luxury);
}
.sulap-modal__close:hover { color: var(--accent-gold); border-color: var(--accent-gold); }
.sulap-modal__body {
    text-align: center;
    padding: 44px 36px 20px;
}
.sulap-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 50%;
    color: var(--accent-gold);
    font-size: 28px;
}
.sulap-modal__icon--danger {
    background: rgba(224, 90, 90, .12);
    border-color: rgba(224, 90, 90, .4);
    color: #e05a5a;
}
.sulap-modal__title {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: .5px;
}
.sulap-modal__question {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.sulap-modal__footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 8px 24px 28px;
}
.sulap-modal__footer .sulap-btn { min-width: 130px; justify-content: center; }

/* Price breakdown (checkout) — transparent nightly pricing */
.price-breakdown {
    display: block;
    width: 100%;
    padding: 0;
}
.price-breakdown__box {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    width: 100%;
}
.price-breakdown__title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.price-breakdown__list { list-style: none; margin: 0; padding: 0; }
.price-breakdown__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.price-breakdown__meta { display: flex; align-items: center; gap: 8px; }
.price-breakdown__date { color: var(--text-secondary); }
.price-breakdown__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.price-breakdown__tag--weekend { background: rgba(212, 175, 55, .15); color: var(--accent-gold); }
.price-breakdown__tag--holiday { background: rgba(224, 90, 90, .15); color: #e05a5a; }
.price-breakdown__price { color: var(--text-primary); font-weight: 600; white-space: nowrap; }

/* ============================================
   ROOM DETAILS — Luxury Styling
   ============================================ */
.room-details-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 22px;
}
.room-details-head .title {
    font-family: var(--font-heading);
    font-size: 34px;
    color: var(--text-primary);
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.room-details-head .sulap-accom__tablet {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
}
.room-details-head .d-flex.gap-3 span {
    color: var(--text-secondary);
    font-size: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 5px 12px;
}
.price-wrapper { text-align: right; }
.price-wrapper .main-fare { font-size: 22px; }
.price-wrapper .main-fare del { color: var(--text-secondary); opacity: .7; font-size: 18px; }
.price-wrapper .fare { color: var(--accent-gold) !important; font-family: var(--font-heading); font-size: 34px; letter-spacing: .5px; }

/* Image sliders */
.room-details-thumb { overflow: hidden; border: 1px solid var(--border-color); }
.room-details-thumb img { width: 100%; height: 480px; object-fit: cover; display: block; }
.room-details-nav-thumb { border: 2px solid transparent; overflow: hidden; cursor: pointer; opacity: .6; transition: var(--transition-luxury); }
.room-details-nav-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; }
.room-details-nav-thumb:hover, .room-details-nav-slider .slick-current .room-details-nav-thumb { border-color: var(--accent-gold); opacity: 1; }

/* Info cards */
.room-details-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 26px;
}
.room-details-card > .title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: .5px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
.room-details-card > .title::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--accent-gold);
    border-radius: 2px;
}
.room-details-card .body { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.room-details-card .body span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.room-details-card .body span i { color: var(--accent-gold); font-size: 18px; }
.room-details-card .body ul { padding-left: 18px; }
.room-details-card .body li { color: var(--text-secondary); }
/* Force readable light text on raw HTML content (cancellation policy etc.) */
.room-details-card .body font,
.room-details-card .body font *,
.room-details-card .body span[style*="rgb(0,0,0)"],
.room-details-card .body span[style*="rgb(91,110,136)"],
.room-details-card .body p,
.room-details-card .body li,
.room-details-card .body ol {
    color: var(--text-secondary) !important;
}

/* Description / list content styled as a clean checklist */
.room-details-card .body ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.room-details-card .body ol li {
    padding: 2px 0;
    line-height: 1.7;
}

/* Booking sidebar */
.room-booking-sidebar { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; position: sticky; top: 96px; }
.room-booking-widget__body label.fw-bold {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.room-booking-widget__body .custom-icon-field .form--control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 13px 40px 13px 15px;
    transition: var(--transition-luxury);
}
.room-booking-widget__body .custom-icon-field .form--control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    outline: none;
}
.room-booking-widget__body .custom-icon-field i { right: 15px; color: var(--accent-gold); }
.bookingLimitationMsg { font-size: 13px; margin-top: 6px; }

/* Reserve button */
.room-booking-widget__body .btn--base {
    background: linear-gradient(135deg, var(--accent-gold), #e6c66a);
    border: 1px solid var(--accent-gold);
    color: #14120d;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 15px 20px;
}
.room-booking-widget__body .btn--base:hover { background: transparent; color: var(--accent-gold); }

/* Contact sidebar */
.content-item__top { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.content-item__title { font-family: var(--font-heading); font-size: 20px; color: var(--text-primary); margin-bottom: 8px; }
.content-item__top .text { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.info-list__item:last-child { border-bottom: 0; }
.info-list__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .3);
    color: var(--accent-gold);
    font-size: 16px;
    border-radius: 8px;
}
.info-list__body { min-width: 0; }
.info-list__title {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.info-list__text { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.info-list__text a { color: var(--text-primary); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: break-word; word-break: break-word; }
.info-list__text a i { color: #25D366; font-size: 18px; flex-shrink: 0; }
.info-list__text a:hover { color: var(--accent-gold); }

@media (max-width: 575px) {
    .room-details-head { flex-direction: column; align-items: flex-start; }
    .price-wrapper { text-align: left; }
    .room-details-thumb img { height: 260px; }
    .room-booking-sidebar { position: static; margin-top: 24px; }
}

/* Room gallery arrows */
.sulap-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 17, .6);
    border: 1px solid rgba(212, 175, 55, .5);
    border-radius: 50%;
    color: var(--accent-gold);
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: var(--transition-luxury);
}
.sulap-gallery__arrow:hover { background: var(--accent-gold); color: var(--bg-primary); }
.sulap-gallery__arrow--prev { left: 14px; }
.sulap-gallery__arrow--next { right: 14px; }
.room-details-thumb-slider { position: relative; overflow: hidden; }
.room-details-thumb-slider .room-details-thumb img { cursor: zoom-in; }

/* Room gallery lightbox */
.sulap-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: sulapFade .25s ease;
}
.sulap-lightbox img {
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.sulap-lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition-luxury);
}
.sulap-lightbox__close:hover { background: var(--accent-gold); color: var(--bg-primary); border-color: var(--accent-gold); }
@keyframes sulapFade { from { opacity: 0; } to { opacity: 1; } }

/* Amenities / Facilities grid */
.sulap-amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.sulap-amenity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 18px 12px;
    text-align: center;
    transition: var(--transition-luxury);
}
.sulap-amenity:hover {
    border-color: rgba(212, 175, 55, .5);
    transform: translateY(-3px);
}
.sulap-amenity__icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .3);
    padding: 8px;
}
/* Amenity/facility icons are uploaded files, so their colour is whatever the
   author saved — often pure black, which vanishes on this dark chip. CSS
   `color` cannot reach inside an <img>, so flatten to black then lift to the
   label colour (--text-primary) to keep icon and text consistent. */
.sulap-amenity__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.sulap-amenity__name {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}
@media (max-width: 575px) {
    .sulap-amenity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Room availability indicator */
.sulap-accom__availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin: -6px 0 16px;
    padding: 6px 12px;
    border: 1px solid;
}
.sulap-accom__availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.sulap-accom__availability--ok { color: #6cc070; border-color: rgba(108, 192, 112, .4); background: rgba(108, 192, 112, .08); }
.sulap-accom__availability--low { color: #e6b800; border-color: rgba(230, 184, 0, .4); background: rgba(230, 184, 0, .08); }
.sulap-accom__availability--none { color: #e05a5a; border-color: rgba(224, 90, 90, .4); background: rgba(224, 90, 90, .08); }

/* ============================================
   USER DASHBOARD — Luxury Styling
   ============================================ */

/* Page section titles (Booking Overview, Recent Bookings, etc.) */
.sulap-user-content h5.text--secondary {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-primary) !important;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.sulap-user-content h5.text--secondary::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--accent-gold);
    border-radius: 2px;
}

/* Dashboard stat widgets */
.widget {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-luxury);
}
.widget::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gold);
    opacity: .0;
    transition: var(--transition-luxury);
}
.widget:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, .4); }
.widget:hover::after { opacity: 1; }
.widget__header .widget__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 10px;
    font-size: 20px;
    color: var(--accent-gold);
}
.widget__title { color: var(--text-secondary); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.widget__amount { font-family: var(--font-heading); font-size: 28px; color: var(--text-primary); margin: 0; }

/* Tables */
.custom--table { background: var(--card-bg); }
.custom--table thead th {
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-color: var(--border-color);
    padding: 14px 16px;
}
.custom--table tbody td { color: var(--text-primary); border-color: var(--border-color); padding: 14px 16px; }
.custom--table tbody tr:hover { background: var(--bg-primary); }

/* User buttons */
.sulap-user-content .btn {
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.sulap-user-content .btn-outline--base,
.sulap-user-content .btn-outline--info,
.sulap-user-content .btn-outline--primary,
.sulap-user-content .btn-outline--success,
.sulap-user-content .btn-outline--danger {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.sulap-user-content .btn-outline--base:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.sulap-user-content .btn-outline--info:hover { border-color: #219ebc; color: #219ebc; }
.sulap-user-content .btn-outline--success:hover { border-color: #6cc070; color: #6cc070; }
.sulap-user-content .btn-outline--danger:hover { border-color: #e05a5a; color: #e05a5a; }
.sulap-user-content .btn--primary { background: var(--accent-gold); border-color: var(--accent-gold); color: #14120d; }
.sulap-user-content .btn--primary:hover { background: transparent; color: var(--accent-gold); }

/* Forms on user pages */
.sulap-user-content .form--control,
.sulap-user-content .form-control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 12px 15px;
    transition: var(--transition-luxury);
}
.sulap-user-content .form--control:focus,
.sulap-user-content .form-control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
}
.sulap-user-content label { color: var(--text-secondary); }

/* Cards inside user pages */
.sulap-user-content .card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.sulap-user-content .card-header { background: var(--bg-primary); border-color: var(--border-color); }
.sulap-user-content .card-title { color: var(--text-primary); }

/* Pagination */
.sulap-user-content .pagination .page-link {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.sulap-user-content .pagination .page-item.active .page-link {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #14120d;
}

/* Status badges readable on dark */
.sulap-user-content .badge { font-size: 11px; letter-spacing: .5px; }

/* ============================================
   BOOKING CONFIRMATION — Luxury Styling
   ============================================ */
.confirmation-section { padding: 100px 0 60px; }

.confirmation-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.confirmation-container__wrapper { padding: 34px 34px 10px; }

.confirmation-container__top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}
.confirmation-container__top-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 192, 112, .12);
    border: 1px solid rgba(108, 192, 112, .4);
    border-radius: 50%;
    color: #6cc070;
    font-size: 26px;
}
.confirmation-container__top-title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--text-primary);
    letter-spacing: .5px;
    margin: 0;
}
.confirmation-container__top-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 4px 0 0;
}

/* Contact info row */
.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}
.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.contact-info__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, .12);
    color: var(--accent-gold);
    font-size: 14px;
    border-radius: 6px;
}
.contact-info__text { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 0; }
.contact-info__text .link { color: var(--text-primary); }
.contact-info__text .link:hover { color: var(--accent-gold); }

/* Body: details + thumb */
.confirmation-container__body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.confirmation-container__content { display: flex; flex-direction: column; gap: 18px; }
.confirmation-details {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
}
.confirmation-details__title {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--text-primary);
    letter-spacing: .5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.confirmation-details__title::before {
    content: '';
    width: 3px;
    height: 15px;
    background: var(--accent-gold);
    border-radius: 2px;
}
.confirmation-details .info-list__item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.confirmation-details .info-list__item:last-child { border-bottom: 0; }
.confirmation-details .info-list__text { color: var(--text-secondary); font-size: 13px; }
.confirmation-details .info-list__text:first-child { color: var(--text-primary); font-weight: 500; }

.confirmation-container__thumb {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.confirmation-container__thumb img { width: 100%; height: 300px; object-fit: cover; border-radius: 6px; }
.thumb-title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--accent-gold);
    margin: 14px 0 4px;
    letter-spacing: .5px;
}

.confirmation-container__bottom {
    margin-top: 20px;
    padding: 18px 34px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 14px;
}

@media (max-width: 991px) {
    .confirmation-container__body { grid-template-columns: 1fr; }
    .contact-info { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .confirmation-container__wrapper { padding: 22px 18px 8px; }
    .confirmation-container__bottom { padding: 16px 18px; }
    .confirmation-container__top { flex-direction: column; text-align: center; }
    .confirmation-container__thumb img { height: 220px; }
}

/* Booking status badge (confirmation page) */
.sulap-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: 6px;
}
.sulap-status-badge--pending { background: rgba(230, 184, 0, .15); color: #e6b800; border: 1px solid rgba(230, 184, 0, .4); }
.sulap-status-badge--approved { background: rgba(108, 192, 112, .15); color: #6cc070; border: 1px solid rgba(108, 192, 112, .4); }

/* ============================================
   USER PAYMENT — Luxury Styling
   ============================================ */

/* Payment gateway card */
.gateway-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 26px;
}
.payment-system-list.is-scrollable {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}
.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-luxury);
}
.payment-item:hover { border-color: rgba(212, 175, 55, .5); }
.payment-item.selected {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, .06);
}
.payment-item__info { display: flex; align-items: center; gap: 10px; }
.payment-item__check {
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--transition-luxury);
}
.payment-item.selected .payment-item__check { background: var(--accent-gold); border-color: var(--accent-gold); }
.payment-item__name { color: var(--text-primary); font-size: 14px; }
.payment-item__thumb-img { max-width: 60px; height: 30px; object-fit: contain; }
.payment-item__btn {
    width: 100%;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px;
    color: var(--accent-gold);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-luxury);
}
.payment-item__btn:hover { border-color: var(--accent-gold); }

/* Deposit info panel */
.payment-system-list.p-3 { background: var(--bg-primary); border-radius: 12px; }
.deposit-info { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; }
.deposit-info__title .text { color: var(--text-secondary); font-size: 13px; }
.deposit-info__input .text { color: var(--text-primary); font-size: 14px; }
.deposit-info__input-group .deposit-info__input-group-text {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--accent-gold);
}
.deposit-info__input .form--control { background: var(--bg-primary); border: 1px solid var(--border-color); }
.deposit-info.total-amount .text { font-weight: 600; }
.payment-system-list .btn--base {
    background: linear-gradient(135deg, var(--accent-gold), #e6c66a);
    border: 1px solid var(--accent-gold);
    color: #14120d;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 15px 20px;
}
.payment-system-list .btn--base:hover { background: transparent; color: var(--accent-gold); }
.info-text .text { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* Payment history search */
.deposit_history .input-group .form-control,
.sulap-user-content .input-group .form-control { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px 0 0 6px; color: var(--text-primary); }
.sulap-user-content .input-group-text { background: var(--accent-gold); border: 1px solid var(--accent-gold); color: #14120d; }

/* ============================================
   USER SUPPORT / TICKETS — Luxury Styling
   ============================================ */
.sulap-user-content .single-reply {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
    max-width: 85%;
}
.sulap-user-content .single-reply .left {
    flex-shrink: 0;
    min-width: 120px;
}
.sulap-user-content .single-reply .left h6 { color: var(--text-primary); margin-bottom: 4px; }
.sulap-user-content .single-reply .left .text-muted,
.sulap-user-content .single-reply .left small.lead { color: var(--text-secondary) !important; }
.sulap-user-content .single-reply .right { min-width: 0; }
.sulap-user-content .single-reply .right .fs--14px { color: var(--accent-gold); }
.sulap-user-content .single-reply .right p { color: var(--text-primary); line-height: 1.7; margin: 8px 0 0; }
.sulap-user-content .single-reply .right a { color: var(--accent-gold); font-size: 13px; }
.sulap-user-content .single-reply.author-reply {
    margin-left: auto;
    background: rgba(212, 175, 55, .06);
    border-color: rgba(212, 175, 55, .25);
}
.sulap-user-content .single-reply.author-reply .right p { color: var(--text-primary); }

/* Ticket create/reply card */
.sulap-user-content .card.custom--card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.sulap-user-content .card.custom--card .card-header { background: var(--bg-primary); border-color: var(--border-color); }
.sulap-user-content .card.custom--card .card-title { color: var(--text-primary); }
.sulap-user-content .card.custom--card .form--control,
.sulap-user-content .card.custom--card select.form--control,
.sulap-user-content .card.custom--card .form-control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
}
.sulap-user-content .card.custom--card .form--control:focus,
.sulap-user-content .card.custom--card .form-control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
}
.sulap-user-content .card.custom--card select.form--control option { background: var(--card-bg); color: var(--text-primary); }
.sulap-user-content .addAttachment.btn--dark { background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; }

/* ============================================
   CHECKOUT POLICIES — Luxury Styling
   ============================================ */
.policy-item__title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.policy-item__title::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--accent-gold);
    border-radius: 2px;
}
.policy-item__content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px 34px;
}
.policy-item__top {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}
.policy-item__time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 18px;
}
.policy-item__time .text {
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.policy-item__time .time { color: var(--accent-gold); font-weight: 600; font-size: 14px; }
.policy-item__content > h6 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: .5px;
    margin-bottom: 18px !important;
}

.cancelation-policies {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.cancelation-policies:last-child { margin-bottom: 0; }
.policy-item__text { color: var(--accent-gold); font-weight: 600; margin-bottom: 12px; }

/* Force light text on raw policy HTML (hardcoded black <font> tags) */
.policy-item__content font,
.policy-item__content font *,
.policy-item__content span[style*="rgb(0,0,0)"],
.policy-item__content .desc li,
.policy-item__content .desc ul,
.policy-item__content .desc p {
    color: var(--text-secondary) !important;
    font-size: 13px;
    line-height: 1.8;
}
.policy-item__content .desc ul { list-style: none; padding-left: 0; margin: 0 0 10px; }
.policy-item__content .desc li::before {
    content: '\f00c';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: var(--accent-gold);
    margin-right: 8px;
    font-size: 12px;
}

/* Checkout acknowledgement card */
.checkout-wrapper__bottom {
    border-radius: 12px;
    padding: 32px 34px;
    margin-top: 24px;
}
.checkout-wrapper__bottom .title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.checkout-wrapper__bottom .title::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--accent-gold);
    border-radius: 2px;
}
.checkout-wrapper__bottom .form--check .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.checkout-wrapper__bottom .form-check-input:checked {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.checkout-wrapper__bottom .form--check {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.checkout-wrapper__bottom .form-check-label {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
    padding-left: 0;
    cursor: pointer;
    min-width: 0;
}

/* Confirm booking request button */
.payment-btn {
    margin-top: 24px;
}
.payment-btn .btn--base.btn--lg {
    background: linear-gradient(135deg, var(--accent-gold), #e6c66a);
    border: 1px solid var(--accent-gold);
    color: #14120d;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 18px 28px;
    width: 100%;
    transition: var(--transition-luxury);
}
.payment-btn .btn--base.btn--lg:hover {
    background: transparent;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

/* ============================================
   SULAP COLLECTION — Room/House cards polish
   ============================================ */

/* Section labels */
.sulap-collection__label {
    position: relative;
}
.sulap-collection__label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    background: var(--accent-gold);
}
.sulap-collection__label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .35);
    font-size: 20px;
}

/* Cards */
.sulap-accom {
    border-radius: 12px;
    overflow: hidden;
}
.sulap-accom__media { border-radius: 12px 12px 0 0; }
.sulap-accom__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,15,17,.35), transparent 45%);
    pointer-events: none;
}
.sulap-accom__media-inner {
    z-index: 2;
}
.sulap-accom__price { color: var(--accent-gold); }

/* Body */
.sulap-accom__title { font-size: 21px; }
.sulap-accom__desc {
    min-height: 44px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.sulap-accom__features { border-radius: 6px; }

/* Feature chips render the room type's real amenity/facility icons (uploaded
   images) rather than icon-font glyphs, so size them to match the old <i>.
   Uploads usually hardcode fill="#000000", which is invisible on the dark card,
   and CSS `color` cannot reach inside an <img>. brightness(0) flattens whatever
   colour the file has to black, then invert() lifts it to --text-secondary
   (#C9C9CF) so the icon matches the label beside it. */
.sulap-accom__features span img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(0.787);
}
.sulap-accom__features { gap: 10px 14px; }
.sulap-accom__features span { line-height: 1.4; }

/* Foot — Book This button */
.sulap-accom__foot .sulap-btn--outline {
    border-radius: 6px;
    padding: 12px 20px;
}
.sulap-accom__foot .sulap-btn--outline:hover {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, .08);
    color: var(--accent-gold);
}

/* Login modal form (checkout) */
.sulap-modal__form { margin-top: 18px; text-align: left; }
.sulap-modal__form .form-group label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.sulap-modal__form .form--control,
.sulap-modal__form .form-control {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 13px 15px;
    transition: var(--transition-luxury);
}
.sulap-modal__form .form--control:focus,
.sulap-modal__form .form-control:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    outline: none;
}
.sulap-modal__form .form--check .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    margin-top: 2px;
}
.sulap-modal__form .form-check-input:checked { background-color: var(--accent-gold); border-color: var(--accent-gold); }
.sulap-modal__form .form-check-label { color: var(--text-secondary); font-size: 14px; }
.sulap-modal__form .password-show-hide { color: var(--text-secondary); cursor: pointer; }
.sulap-modal__form .sulap-btn--block { border-radius: 8px; }

/* Password show/hide eye button */
.password-show-hide {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 15px;
    transition: var(--transition-luxury);
}
.password-show-hide:hover { color: var(--accent-gold); }
.password-show-hide.active { color: var(--accent-gold); }

/* Ensure typed text does not run under the password eye */
.position-relative:has(.password-show-hide) input[type=password],
.position-relative:has(.password-show-hide) input[type=text] { padding-right: 42px; }

/* Category filter chips (rooms page) */
.sulap-filter-categories { display: flex; flex-wrap: wrap; gap: 10px; }
.sulap-filter-chip {
    padding: 9px 22px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: .4px;
    cursor: pointer;
    transition: var(--transition-luxury);
}
.sulap-filter-chip:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.sulap-filter-chip.is-active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #14120d;
    font-weight: 600;
}

/* ============================================
   NOTICE BOARD (extension) - scrolling bar below header
   ============================================ */
.sulap-notice {
    position: fixed;
    top: var(--notice-top, 72px);
    left: 0;
    right: 0;
    z-index: 999;
    height: 26px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: linear-gradient(90deg, #18181C, #1d1d22);
    border-bottom: 1px solid rgba(99, 99, 99, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    cursor: default;
}
.sulap-notice__label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--accent-gold);
    color: #14120d;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sulap-notice__viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.sulap-notice__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: sulapNoticeScroll 30s linear infinite;
    will-change: transform;
}
.sulap-notice__text {
    display: inline-block;
    color: var(--text-primary);
    font-size: 11px;
    letter-spacing: .3px;
    line-height: 26px;
    flex-shrink: 0;
    margin-right: 36px;
}

@keyframes sulapNoticeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.sulap-notice:hover .sulap-notice__track { animation-play-state: paused; }

/* When the notice bar is shown, push the fixed-positioned content down */
body:has(.sulap-notice) .sulap-main { padding-top: calc(var(--notice-top, 72px) + 26px); }
body:has(.sulap-notice) .sulap-hero { margin-top: calc(0px - var(--notice-top, 72px) - 26px); }
body:has(.sulap-notice) .sulap-user-wrap { padding-top: calc(var(--notice-top, 72px) + 26px + 24px); }

/* ============================================
   Featured room cards — redesigned
   ============================================ */
.sulap-collection .sulap-accom {
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.sulap-collection .sulap-accom:hover {
    border-color: rgba(212, 175, 55, .5);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
    transform: translateY(-6px);
}
.sulap-collection .sulap-accom__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 15, 17, 0) 55%, rgba(15, 15, 17, .55) 100%);
    pointer-events: none;
}
.sulap-collection .sulap-accom__media-inner { z-index: 2; }

/* Gold "Check Availability" button */
.sulap-btn--gold {
    background: linear-gradient(135deg, #e6c25c 0%, var(--accent-gold) 55%, #b8912f 100%);
    border: 1px solid var(--accent-gold);
    color: #14120d;
    font-weight: 600;
    border-radius: 8px;
    padding: 14px 22px;
    box-shadow: 0 6px 20px rgba(212, 175, 55, .28);
    position: relative;
    overflow: hidden;
}
.sulap-btn--gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
}
.sulap-btn--gold:hover {
    color: #14120d;
    background: linear-gradient(135deg, #f0d478 0%, var(--accent-gold) 55%, #c9a53c 100%);
    box-shadow: 0 10px 28px rgba(212, 175, 55, .4);
    transform: translateY(-2px);
}
.sulap-btn--gold:hover::after { left: 120%; }
.sulap-btn--gold i { font-size: 16px; }
.sulap-accom__foot { margin-top: auto; }

/* Center the Check Availability button in collection cards */
.sulap-collection .sulap-accom__foot {
    justify-content: center;
}
.sulap-collection .sulap-accom__foot .sulap-btn {
    width: 100%;
}

/* ============================================
   Cookie policy card — Sulap luxury theme
   ============================================ */
.cookies-card {
    padding: 28px 26px;
    color: var(--text-primary);
    background: rgba(24, 24, 28, .92) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    max-width: 420px;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    text-align: left !important;
}
.cookies-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
    border-radius: 14px 14px 0 0;
}
.cookies-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(212, 175, 55, .14) !important;
    border: 1px solid rgba(212, 175, 55, .45);
    color: var(--accent-gold) !important;
    font-size: 26px;
    float: left;
    margin-right: 16px;
}
.cookies-card__content {
    margin: 0 0 0 68px !important;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.cookies-card__content a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookies-card__content a:hover { color: var(--text-primary); }
.cookies-card__btn {
    margin: 16px 0 0 68px !important;
    text-align: left;
}
.cookies-btn {
    padding: 10px 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e6c25c 0%, var(--accent-gold) 55%, #b8912f 100%);
    border: 1px solid var(--accent-gold);
    color: #14120d !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(212, 175, 55, .28);
    transition: var(--transition-luxury);
}
.cookies-btn:hover {
    background: linear-gradient(135deg, #f0d478 0%, var(--accent-gold) 55%, #c9a53c 100%);
    color: #14120d !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(212, 175, 55, .4);
}
@media (max-width: 575px) {
    .cookies-card { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none; }
}