/* ============================================================
   The Majlis — booking engine skin
   Re-styles the ReservePort <booking-widget> to match the site.
   Presentation only — never changes the widget's behaviour.
   ReservePort renders everything inside a wrapper id="booking-widget".

   SCOPE NOTE: this deliberately stays to a SAFE baseline — page frame,
   typography, buttons, and the search card (the parts that render
   reliably). The room-results & checkout screens are left largely to
   ReservePort's own layout and should be polished against the LIVE
   domain, where the widget lays out correctly.
   ============================================================ */

:root{
  --bk-gold:#C9BAA9; --bk-gold-deep:#A8927B; --bk-ink:#34322D;
  --bk-paper:#FCFAF5; --bk-line:#E7E1D6; --bk-muted:#8A8479;
}

/* ---------- page framing (our HTML, fully controlled) ---------- */
.book-section{ padding-top:clamp(2.5rem,5vw,4rem); }
.book-shell{ position:relative; min-height:300px; }

.book-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:5rem 1rem; color:var(--bk-muted); font-family:"Raleway",sans-serif; letter-spacing:.04em; }
.book-loading.is-done{ display:none; }
.book-spinner{ width:38px; height:38px; border-radius:50%;
  border:2px solid var(--bk-line); border-top-color:var(--bk-gold-deep); animation:bk-spin .9s linear infinite; }
@keyframes bk-spin{ to{ transform:rotate(360deg); } }

.book-assist{ text-align:center; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--bk-line);
  font-family:"Raleway",sans-serif; color:var(--bk-muted); font-size:.95rem; }
.book-assist-contact{ margin-top:.4rem; }
.book-assist-contact a{ color:var(--bk-gold-deep); font-weight:600; }
.book-assist-contact a:hover{ color:var(--bk-ink); }
.book-assist-contact span{ margin:0 .6rem; opacity:.5; }

/* ---------- typography inside the widget ---------- */
#booking-widget p, #booking-widget span, #booking-widget label,
#booking-widget .content-body, #booking-widget .vue-content-body,
#booking-widget .vue-date-box label, #booking-widget input, #booking-widget select{
  font-family:"Inter","Raleway",sans-serif !important; color:var(--bk-ink);
}
#booking-widget h1.room-title, #booking-widget h2, #booking-widget h3,
#booking-widget .reserveport-form-wrap h3, #booking-widget .vue-side_top_card h3,
.modal-title, #modalbookingForm .modal-title{
  font-family:"Marcellus",serif !important; font-weight:500 !important; color:var(--bk-ink) !important;
}

#booking-widget a{ color:var(--bk-gold-deep); }
#booking-widget a:hover, #booking-widget .show-cp:hover,
#booking-widget .vue-show-details:hover, #booking-widget .vue-show-tc:hover,
#vue-havepromo.vue-horizontal, #booking-widget h1.room-title:hover{ color:var(--bk-gold-deep); }

/* ---------- primary actions: solid gold ---------- */
#booking-widget .btn-orange-solid, #booking-widget .btn-solid,
#booking-widget .sub-total .btn.btn-solid, #booking-widget .vue-btn-proceed,
#booking-widget #summery-submit.btn-proceed, button#submitFormBtn,
.mx-calendar-content .cell.active{
  background:var(--bk-gold-deep) !important; border:1.5px solid var(--bk-gold-deep) !important;
  color:#fff !important; border-radius:2px !important;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  font-family:"Raleway",sans-serif !important;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
#booking-widget .btn-orange-solid:hover, #booking-widget .btn-solid:hover,
#booking-widget .sub-total .btn.btn-solid:hover, #booking-widget .vue-btn-proceed:hover,
#booking-widget #summery-submit.btn-proceed:hover, button#submitFormBtn:hover{
  background:var(--bk-ink) !important; border-color:var(--bk-ink) !important; color:#fff !important;
}

/* secondary actions: quiet outline */
#booking-widget button.btn.btn-sm, #booking-widget #vue-btn-managebooking,
#booking-widget .btn.w-100, #vue-toggle_residency .vue-btn{
  background:transparent !important; border:1.5px solid var(--bk-line) !important;
  color:var(--bk-ink) !important; border-radius:2px !important;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
#vue-toggle_residency .vue-btn.active, #vue-toggle_residency .vue-btn.active:hover{
  background:var(--bk-gold) !important; border-color:var(--bk-gold) !important; color:#fff !important;
}

/* occupancy +/- steppers — narrow */
#booking-widget .vue-btnb, #booking-widget .vue-btnbb{
  width:30px !important; min-width:0 !important; padding:0 !important;
  border:1.5px solid var(--bk-line) !important; background:#fff !important; color:var(--bk-ink) !important;
  border-radius:4px !important; transition:border-color .25s ease, color .25s ease;
}
#booking-widget .vue-btnb:hover, #booking-widget .vue-btnbb:hover{
  border-color:var(--bk-gold-deep) !important; color:var(--bk-gold-deep) !important;
}

/* Once the guest is searching / booking, slim the teal "Book Your Stay" hero (and the
   book-direct panel is hidden via JS) so the rooms/checkout that load sit near the top —
   they see the content appear instead of being dumped back on the intro. */
body.mj-booking-active .page-banner{ padding-block: clamp(4.8rem,11vw,6rem) 1.3rem !important; }
body.mj-booking-active .page-banner .pb-intro{ display:none !important; }
body.mj-booking-active .page-banner .eyebrow{ margin-bottom:.4rem !important; }
body.mj-booking-active .page-banner h1.display{ font-size: clamp(1.9rem,7vw,2.7rem) !important; }

/* ---------- search form → clean, compact card ---------- */
#booking-widget .reserveport-form-wrap{
  background:#fff; border:1px solid var(--bk-line); border-radius:8px;
  box-shadow:0 18px 44px -28px rgba(40,36,30,.35); padding:clamp(1rem,2vw,1.5rem);
}
/* phones: the "Check Availability" heading wraps and crowds the Manage Booking button
   beside it — stack the button UNDER the heading (left-aligned) so the header reads cleanly */
@media (max-width:600px){
  #booking-widget .reserveport-form-wrap .d-flex.justify-content-between:has(h3){
    flex-direction:column !important; align-items:flex-start !important; gap:.6rem !important;
  }
}
/* the search "Check Availability" button — light ghost outline, like the live bar */
#booking-widget .reserveport-form-wrap .btn-orange-solid{
  background:transparent !important; color:var(--bk-gold-deep) !important;
  border:1.5px solid var(--bk-gold) !important; font-weight:600;
}
/* drop the button down so it lines up with the date/occupancy boxes (they sit below labels) */
#booking-widget .reserveport-form-wrap [class*="col-"]:has(> .btn-orange-solid){
  display:flex; flex-direction:column; justify-content:flex-end;
}
#booking-widget .reserveport-form-wrap .btn-orange-solid{ margin-bottom:16px; }
#booking-widget .reserveport-form-wrap .btn-orange-solid:hover{
  background:var(--bk-gold) !important; color:#fff !important; border-color:var(--bk-gold) !important;
}
/* keep the date/occupancy fields airy and light */
#booking-widget .reserveport-form-wrap .form-control,
#booking-widget .reserveport-form-wrap .sd{ padding:.6rem .8rem !important; height:auto !important; color:var(--bk-ink); }
/* the row wrapping the fields has no box of its own (live bar has none) */
#booking-widget .vue-date-box, #booking-widget .vue-date-box[data-v-07c68727]{
  box-shadow:none !important; border:none !important; border-radius:0 !important;
}
/* occupancy field → a proper bordered box matching the date fields */
#booking-widget .reserveport-form-wrap .vue-small_large_select{
  min-height:53px !important; display:flex !important; align-items:center;
  border:1px solid #dedede !important; border-radius:1px; padding:.6rem .8rem !important;
}
/* the occupancy summary fills the box so its chevron sits at the right edge */
#booking-widget .reserveport-form-wrap #occupancy-control{
  display:flex !important; justify-content:space-between; align-items:center; width:100%;
}
/* heading + labels — clean & minimal, matching the live bar */
#booking-widget .reserveport-form-wrap h3{ margin-bottom:1.4rem; color:var(--bk-gold) !important; font-size:1.9rem; }
#booking-widget .guest-link{ text-transform:none !important; font-size:1rem !important; font-weight:700 !important;
  letter-spacing:0 !important; color:var(--bk-ink) !important; margin-bottom:.45rem; display:inline-block; }

/* ---------- occupancy dropdown panel (native Bootstrap dropdown, refined) ---------- */
#booking-widget .dropdown-menu{
  border:1px solid var(--bk-line); border-radius:10px; padding:1rem 1.25rem;
  min-width:400px; width:max-content; max-width:min(92vw,660px);
  box-shadow:0 24px 56px -22px rgba(40,36,30,.42);
}
/* phones: the occupancy panel overflowed the right edge (Popper offsets it under the
   wide field, and its 400px min-width + touch-sized steppers pushed the +/- controls
   off-screen). Pin it flush under the field, kill Popper's transform, and cap width to
   the viewport so every stepper stays reachable. */
/* The occupancy panel overflowed the right edge on phones: Popper offsets it under the
   wide field, its containing block is inset ~68px, and ReservePort's Bootstrap stepper
   grid is intrinsically ~400px — so the +/- controls got clipped off-screen. Anchor it
   to the VIEWPORT as a full-width bottom sheet and force each row into a simple flex
   (label flexes, compact 34px steppers hug the right) so everything always fits. */
@media (max-width:600px){
  #booking-widget .dropdown-menu{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100vw !important; min-width:0 !important; max-width:100vw !important;
    transform:none !important; margin:0 !important;
    border-radius:14px 14px 0 0 !important;
    padding:1.3rem 1.1rem !important;
    max-height:80vh !important; overflow-y:auto !important;
    box-shadow:0 -12px 40px -10px rgba(40,36,30,.4) !important;
  }
  #booking-widget .dropdown-menu .vue-mobile{ width:100% !important; max-width:100% !important; float:none !important; }
  #booking-widget .dropdown-menu .vue-mobile .row{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; width:100% !important; max-width:100% !important; margin:0 0 .5rem !important; }
  #booking-widget .dropdown-menu .vue-mobile .row > *{ min-width:0 !important; float:none !important; }
  #booking-widget .dropdown-menu .vue-mobile .row > *:first-child{ flex:1 1 auto !important; width:auto !important; max-width:none !important; padding:0 !important; }
  #booking-widget .dropdown-menu .vue-mobile .row > *:last-child{ flex:0 0 auto !important; width:auto !important; max-width:62% !important; padding:0 !important; }
  #booking-widget .dropdown-menu .booking-btngrp{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:.3rem !important; }
  #booking-widget .dropdown-menu .booking-btngrp .btn,
  #booking-widget .dropdown-menu .booking-btngrp button{ width:34px !important; min-width:34px !important; max-width:34px !important; height:36px !important; padding:0 !important; flex:0 0 34px !important; }
  #booking-widget .dropdown-menu .vue-fxcount{ width:34px !important; min-width:34px !important; max-width:34px !important; flex:0 0 34px !important; text-align:center !important; }
  #booking-widget .dropdown-menu .child_ages, #booking-widget .dropdown-menu select{ max-width:100% !important; }
  /* let the long child-age helper text wrap instead of running off the sheet */
  #booking-widget .dropdown-menu label,
  #booking-widget .dropdown-menu p{ white-space:normal !important; }
}
/* iOS Safari zooms the whole page when you focus an input whose text is <16px.
   Keep every widget field at 16px on phones so tapping a date/select never zooms. */
@media (max-width:768px){
  #booking-widget input,
  #booking-widget select,
  #booking-widget textarea,
  #booking-widget .mx-input,
  #booking-widget .child_ages,
  #booking-widget .form-control{ font-size:16px !important; }
}
/* each guest-type row: label left (grows), steppers hugged right, vertically centred */
#booking-widget .vue-mobile .row{ display:flex; flex-wrap:nowrap; align-items:center; margin:0 0 .55rem; }
#booking-widget .vue-mobile .clearfix{ display:none; }
#booking-widget .vue-mobile .row > [class*="col-"]:first-child{ flex:1 1 auto; width:auto; max-width:none; padding:0; }
#booking-widget .vue-mobile .row > [class*="col-"]:last-child{ flex:0 0 auto; width:auto; max-width:none; padding:0; }
#booking-widget .vue-mobile label{ margin:0; font-weight:600; font-size:.82rem; letter-spacing:.04em; white-space:nowrap; }
#booking-widget .vue-mobile .vue-ageDiv{ margin-left:.3em; font-weight:400; color:var(--bk-muted); white-space:nowrap; }
/* the +/- group: fixed compact width so nothing overflows the panel */
#booking-widget .vue-mobile .booking-btngrp{ display:flex; flex:0 0 auto; justify-content:flex-end; align-items:center; gap:.3rem; padding-bottom:0 !important; }
#booking-widget .vue-fxcount{ width:40px !important; min-width:0 !important; flex:0 0 40px; text-align:center; padding:.25rem 0; }
/* the "Close" link at the foot of the panel */
#booking-widget .vue-mobile .row:last-child{ margin-bottom:0; }
/* keep the whole occupancy panel (incl. the child-age selectors) inside the dropdown,
   otherwise its 766px float spills out to the right over the summary */
#booking-widget .dropdown-menu .vue-mobile{ float:none !important; width:auto !important; max-width:none !important; }
#booking-widget .dropdown-menu .vue-mobile .col-md-12{ width:100% !important; max-width:100% !important; flex:0 0 100%; }
/* the child-age helper text + validation, spaced and readable */
#booking-widget .dropdown-menu .child_div ~ *,
#booking-widget .dropdown-menu .vue-mobile .col-md-12 > p{ margin-top:.5rem; font-size:.8rem; }

/* ---------- calendar & notifications ---------- */
.mx-calendar-content .cell:hover{ background:var(--bk-gold) !important; color:#fff !important; }
.mx-calendar-content .cell.today{ color:var(--bk-gold-deep) !important; }
#booking-widget .hotel .notify-container, #booking-widget .reserveport-iframe-wrap .notify-container,
#booking-widget #alert-msg.ui-pnotify.ui-pnotify-inline{ background:var(--bk-gold-deep) !important; }
#booking-widget .notify-container .fa, #booking-widget .notify-container h4.notify-title,
#booking-widget .notify-text span.timerspan, #modalbookingForm .modal-header{ color:#fff !important; }

/* ---------- gate: hide room results until "Check Availability" is pressed ---------- */
.book-prompt{ display:none; text-align:center; color:var(--bk-muted); font-family:"Raleway",sans-serif;
  font-size:1rem; letter-spacing:.01em; margin:3rem auto; max-width:38ch; }
.book-shell.mj-unsearched .book-prompt{ display:block; }
.book-shell.mj-unsearched #booking-widget .col-md-9,
.book-shell.mj-unsearched #booking-widget .vue-right-side,
.book-shell.mj-unsearched #booking-widget .residencydiv,
.book-shell.mj-unsearched #booking-widget #proof{ display:none !important; }

/* ---------- mobile: floating "view summary" nudge ----------
   On desktop the summary/continue panel is a right sidebar, always in view. On a
   phone it drops to the very bottom, so after choosing rooms guests can't see where
   to proceed. This floating pill appears once results show and the summary is still
   below the fold; tapping it scrolls to the summary (which holds the Continue path). */
.mj-summary-fab{
  position:fixed; left:50%; bottom:1.1rem; z-index:850;
  transform:translateX(-50%) translateY(160%);
  display:flex; align-items:center; gap:.55rem;
  background:var(--bk-gold-deep); color:#fff; border:none; cursor:pointer;
  font-family:"Raleway",sans-serif; font-weight:600; font-size:.9rem; letter-spacing:.02em;
  padding:.85rem 1.5rem; border-radius:999px;
  box-shadow:0 16px 36px -12px rgba(40,36,30,.6);
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.mj-summary-fab.is-shown{ transform:translateX(-50%) translateY(0); }
.mj-summary-fab .mj-fab-arrow{ font-size:1.05rem; line-height:1; }
.mj-summary-fab:active{ transform:translateX(-50%) translateY(2px); }
@media (min-width:769px){ .mj-summary-fab{ display:none !important; } }

/* ---------- room results: 2-up grid of compact cards ---------- */
/* cards fill the left column as a 2-up grid; the summary sidebar (cart + Continue)
   stays on the right — it's the proceed path for multi-room bookings */
#booking-widget .col-md-9{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; align-items:start; }
#booking-widget .col-md-9 > *:not(.vue-card-unit){ grid-column:1 / -1; }  /* headers/rows span full width */
/* phones: one card per row (two-up is too congested to read) */
@media (max-width:768px){ #booking-widget .col-md-9{ grid-template-columns:1fr; gap:1.4rem; } }

#booking-widget .vue-card-unit{
  max-width:none; margin:0; background:#fff;
  border:1px solid var(--bk-line); border-radius:10px; overflow:hidden;
  box-shadow:0 14px 40px -30px rgba(40,36,30,.4);
  display:flex; flex-direction:column;
}
/* room title — centred above the photo */
#booking-widget .vue-card-unit-title{ padding:1rem 1.2rem .3rem; }
#booking-widget .vue-card-unit-title h1.room-title{ text-align:center; font-size:1.35rem; }
/* stack ONLY the top photo+details row (photo above details); leave the nested
   per-room guest selectors with their own Bootstrap layout so they stay usable */
#booking-widget .vue-card-unit > div > .row{ display:block; margin:0; }
#booking-widget .vue-card-unit > div > .row > [class*="col-"]{ width:100%; max-width:100%; flex:0 0 100%; float:none; padding:0; }
/* the photo: large, full-width, fixed height. The image sits in an inline <a>,
   so make that anchor a full-width block first, then the image fills it. */
#booking-widget .vue-card-unit > div > .row > [class*="col-"] > a{ display:block; width:100%; }
#booking-widget .vue-card-unit img.responsive{
  width:100% !important; max-width:100% !important; height:230px; max-height:none;
  object-fit:cover; display:block; margin:0;
}
/* "view gallery" strip sits tight under the photo */
#booking-widget .vue-card-unit a.view_images{ display:block; }
/* details area — comfortable padding, left aligned */
#booking-widget .vue-card-unit .vue-pad-content,
#booking-widget .vue-card-unit .vue-card-unit-summary,
#booking-widget .vue-card-unit .vue-card-unit-footer{ padding:0 1.6rem; }
#booking-widget .vue-card-unit .vue-pad-content{ padding-top:1.3rem; }
#booking-widget .vue-card-unit .vue-card-unit-footer{ padding-top:1.2rem; padding-bottom:1.6rem; }
/* footer: price on the left, Book Now on the right, tidy row */
#booking-widget .vue-card-unit-footer .row{
  display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin:0;
}
#booking-widget .vue-card-unit-footer [class*="col-"]{ width:auto; max-width:none; flex:0 1 auto; }

/* our own card photo carousel (replaces the widget image + "View Gallery") */
#booking-widget .mj-cardcar{ position:relative; width:100%; height:230px; overflow:hidden; background:#eceae5; }
#booking-widget .mj-cardcar .mj-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
#booking-widget .mj-cardcar .mj-slide.is-active{ opacity:1; }
#booking-widget .mj-cardcar .mj-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--bk-ink); font-size:1.25rem; line-height:1;
  display:grid; place-items:center; opacity:0; transition:opacity .3s ease, background .3s ease; }
#booking-widget .vue-card-unit:hover .mj-cardcar .mj-nav{ opacity:1; }
#booking-widget .mj-cardcar .mj-nav:hover{ background:#fff; }
#booking-widget .mj-cardcar .mj-prev{ left:.6rem; }
#booking-widget .mj-cardcar .mj-next{ right:.6rem; }
#booking-widget .mj-cardcar .mj-count{ position:absolute; bottom:.6rem; left:.6rem; z-index:2;
  background:rgba(20,18,15,.6); color:#fff; font-size:.7rem; letter-spacing:.03em; padding:.15rem .55rem; border-radius:11px; }
@media (hover:none){ #booking-widget .mj-cardcar .mj-nav{ opacity:1; } }

/* checkout "You're booking" summary card (our carousel + room + dates + price) */
#booking-widget .mj-checkout-summary{ display:flex; gap:1.5rem; align-items:stretch; width:100%;
  margin:0 0 1.5rem; background:#fff; border:1px solid var(--bk-line); border-radius:10px; overflow:hidden;
  box-shadow:0 14px 40px -30px rgba(40,36,30,.4); text-align:left; }
#booking-widget .mj-checkout-summary .mj-cardcar{ width:280px; height:auto; min-height:190px; flex:0 0 280px; }
#booking-widget .mj-checkout-summary .mj-nav{ opacity:1; }
#booking-widget .mj-cosum-body{ padding:1.2rem 1.5rem 1.2rem 0; align-self:center; }
#booking-widget .mj-cosum-eyebrow{ font-family:"Raleway",sans-serif; text-transform:uppercase; letter-spacing:.16em;
  font-size:.66rem; font-weight:600; color:var(--bk-gold-deep); margin:0 0 .35rem; }
#booking-widget .mj-cosum-body h3{ font-family:"Marcellus",serif; font-size:1.45rem; color:var(--bk-ink); margin:0 0 .5rem; }
#booking-widget .mj-cosum-dates{ font-family:"Inter",sans-serif; color:var(--bk-muted); margin:0 0 .3rem; font-size:.9rem; }
#booking-widget .mj-cosum-price{ font-family:"Inter",sans-serif; color:var(--bk-ink); font-weight:600; margin:0; }
@media (max-width:620px){
  #booking-widget .mj-checkout-summary{ flex-direction:column; }
  #booking-widget .mj-checkout-summary .mj-cardcar{ width:100%; flex:0 0 auto; height:200px; }
  #booking-widget .mj-cosum-body{ padding:0 1.3rem 1.3rem; }
}

/* image sizing elsewhere (single-room slider) */
.owl-carousel .owl-item img, #booking-widget .room-full-slider img{
  max-height:420px; object-fit:cover; margin:auto;
}

/* ---------- de-clutter card footer ---------- */
/* drop Terms + Cancellation (moved to the page foot) and the separators; keep Room Details */
#booking-widget .vue-card-unit-footer .vue-show-tc,
#booking-widget .vue-card-unit-footer .sep{ display:none !important; }
#booking-widget .vue-card-unit-footer a.mj-details-link{
  color:var(--bk-gold-deep); font-weight:600; letter-spacing:.08em; font-size:.72rem; text-decoration:none;
}
#booking-widget .vue-card-unit-footer a.mj-details-link:hover{ color:var(--bk-ink); }

/* ---------- booking policies strip (before footer) ---------- */
.book-policies{ padding:1.5rem 0 3rem; text-align:center; }
.book-policies p{ font-family:"Raleway",sans-serif; font-size:.9rem; color:var(--bk-muted); margin:0; }
.book-policies a{ color:var(--bk-gold-deep); font-weight:600; }
.book-policies a:hover{ color:var(--bk-ink); }

/* ---------- child-age selectors: give them room to breathe ---------- */
#booking-widget .child_div{ display:flex; align-items:center; gap:.9rem; margin:0 0 .7rem; }
#booking-widget .child_div:first-of-type{ margin-top:.6rem; }
#booking-widget .child_div label{ margin:0; min-width:60px; font-weight:600; font-size:.82rem; white-space:nowrap; }
#booking-widget .child_ages{ padding:.4rem .7rem; border:1px solid var(--bk-line) !important; border-radius:6px; min-width:112px; background:#fff; }
#booking-widget .child_ages:focus{ outline:none; border-color:var(--bk-gold-deep) !important; }

/* ---------- summary: drop the empty "No room Selected" clip-art placeholder ---------- */
#booking-widget #no_room_selected{ display:none; }

/* ---------- summary sidebar (cart + Continue) — reskinned ---------- */
/* drop the standalone "Majlis Manda Island Resort" name box above the summary */
#booking-widget .vue-side_top_card{ display:none !important; }
/* the summary follows you as you scroll the room list */
#booking-widget .vue-right-side{ position:sticky; top:96px; }
/* the summary itself → a clean card matching the site */
#booking-widget .vue-side_bottom_card{
  background:#fff; border:1px solid var(--bk-line); border-radius:10px;
  box-shadow:0 16px 42px -30px rgba(40,36,30,.42); padding:1.5rem 1.4rem;
}
#booking-widget .vue-side_bottom_card h3{
  font-family:"Marcellus",serif !important; color:var(--bk-ink) !important; text-align:center;
  letter-spacing:.14em; font-size:1.15rem; margin:0 0 1rem; padding-bottom:.9rem; border-bottom:1px solid var(--bk-line);
}
#booking-widget .vue-side_bottom_card, #booking-widget .vue-side_bottom_card p,
#booking-widget .vue-side_bottom_card span, #booking-widget .vue-side_bottom_card td,
#booking-widget .vue-side_bottom_card th{ font-family:"Inter","Raleway",sans-serif; color:var(--bk-ink); }
/* the cart table */
#booking-widget .vue-side_bottom_card table{ width:100%; margin:.9rem 0; border-collapse:collapse; }
#booking-widget .vue-side_bottom_card table th{
  text-transform:uppercase; letter-spacing:.07em; font-size:.62rem; font-weight:600;
  color:var(--bk-muted); padding:.45rem .3rem; border-bottom:1px solid var(--bk-line); text-align:left;
}
#booking-widget .vue-side_bottom_card table td{ font-size:.82rem; padding:.55rem .3rem; border-bottom:1px solid var(--bk-line); }
/* the little bed icon in the summary — tint it to our gold instead of the default green */
#booking-widget #bedimg{ filter: brightness(0) saturate(100%) invert(63%) sepia(14%) saturate(560%) hue-rotate(350deg) brightness(90%) contrast(86%) !important; }
/* the CONTINUE / proceed button → full-width solid gold primary */
#booking-widget .vue-side_bottom_card .btn-proceed,
#booking-widget .vue-side_bottom_card .vue-btn-proceed,
#booking-widget .vue-side_bottom_card #summery-submit,
#booking-widget .vue-side_bottom_card button, #booking-widget .vue-side_bottom_card .btn{
  width:100% !important; margin-top:1rem !important; padding:.85rem 1rem !important;
  background:var(--bk-gold-deep) !important; color:#fff !important; border:1.5px solid var(--bk-gold-deep) !important;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; font-size:.74rem; border-radius:2px !important;
  transition:background .3s ease, border-color .3s ease;
}
#booking-widget .vue-side_bottom_card .btn-proceed:hover,
#booking-widget .vue-side_bottom_card .vue-btn-proceed:hover,
#booking-widget .vue-side_bottom_card #summery-submit:hover,
#booking-widget .vue-side_bottom_card button:hover, #booking-widget .vue-side_bottom_card .btn:hover{
  background:var(--bk-ink) !important; border-color:var(--bk-ink) !important; color:#fff !important;
}

/* ---------- card details row: board / price / book each on its own line ---------- */
#booking-widget .vue-card-unit .vue-border-btm > .row{ display:block; margin:0; }
#booking-widget .vue-card-unit .vue-border-btm > .row > [class*="col-"]{
  width:100% !important; max-width:100% !important; flex:0 0 100% !important; float:none;
  padding:0 !important; margin-bottom:.85rem; text-align:left !important;
}
#booking-widget .vue-card-unit .vue-border-btm > .row > [class*="col-"]:last-child{ margin-bottom:0; }
/* drop the lone guest-icon column (decorative, just adds clutter) */
#booking-widget .vue-card-unit .vue-border-btm > .row > .col-md-2{ display:none !important; }
/* price block — left aligned & readable on its own line */
#booking-widget .vue-card-unit #priceDetail{ text-align:left !important; }
#booking-widget .vue-card-unit #priceDetail strong{ font-size:1.15rem; }
/* Book Now — comfortable, not squeezed */
#booking-widget .vue-card-unit .vue-border-btm .btn-orange-solid{ width:100%; padding:.8rem 1.4rem !important; }
/* room-count stepper sits on its own line with room to show +/- */
#booking-widget .vue-card-unit .vue-border-btm .booking-btngrp{ display:inline-flex !important; flex-wrap:nowrap; align-items:center; gap:.35rem; }

/* ---------- card occupancy editor (adults/children/infants) ---------- */
/* horizontal, compact steppers */
#booking-widget .vue-card-unit .booking-btngrp{
  display:inline-flex !important; flex-wrap:nowrap; align-items:center; justify-content:center; gap:.3rem; padding:0 !important;
}
#booking-widget .vue-card-unit .vue-fxcount{ width:38px !important; min-width:0 !important; text-align:center; }

/* per-room guests: one type per line (label left, stepper right) instead of 3 cramped columns */
#booking-widget .vue-card-unit .unit-config > .row{ display:block; margin:0; }
#booking-widget .vue-card-unit .unit-config > .row > [class*="col-"]{
  width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important;
  display:flex; align-items:center; flex-wrap:wrap; gap:.1rem .5rem; margin-bottom:.75rem;
}
#booking-widget .vue-card-unit .unit-config .booking-btngrp{ margin-left:auto; }
#booking-widget .vue-card-unit .vue-card-unit-summary label{ font-size:.85rem; font-weight:600; margin:0; }
#booking-widget .vue-card-unit .vue-card-unit-summary .vue-ageDiv{ font-size:.78rem; color:var(--bk-muted); }

/* ROOM block: drop the redundant X / "close" control (the room stepper's − removes the room),
   which was overlapping the guest rows and bleeding past the card edge */
#booking-widget .vue-card-unit .close-container{ display:none !important; }
#booking-widget .vue-card-unit .roomborder-btm{ position:relative; }

/* ---------- modal / checkout ---------- */
#myModal{ background:rgba(24,21,17,.55); }
#modalbookingForm{ padding-top:4rem; }
#booking-widget .close{ padding:4px 8px; background:var(--bk-ink); opacity:1; border-radius:2px; }

/* soften off-domain "invalid property" notice (never shows on the live domain) */
#booking-widget .alert.alert-danger{
  background:var(--bk-paper); border:1px solid var(--bk-line); color:var(--bk-muted); border-radius:6px; font-size:.85rem;
}

/* ---- Show the inline date/room selector on mobile (like desktop) ----
   ReservePort hides its own inline form below 600px and pushes a floating
   "Make a reservation" popup instead — so on a phone you land on nothing and
   have to tap that button to reveal the selector. Override it: force the inline
   form visible on landing and drop the now-redundant trigger + dark popup. */
@media (max-width:768px){
  #booking-widget .reserveport-form-wrap,
  #booking-widget .vue-search-box{ display:block !important; }
  .mobile_booking_wrapper,
  #mobile_booking_triger,
  #booking-widget #vue-smallScreen{ display:none !important; }
}
/* stack the form's Bootstrap columns full-width on phones so the revealed
   desktop form doesn't sit cramped or overflow */
@media (max-width:600px){
  #booking-widget .reserveport-form-wrap [class*="col-"]{ width:100% !important; float:none !important; max-width:100% !important; }
}