/*
 * Not from the original site — this port strips <script> tags (they can't
 * run via React's dangerouslySetInnerHTML anyway), so the theme's own JS
 * never fires to reveal on-scroll animations or hide the boot spinner.
 * Both default to CSS states meant to be flipped by that JS; force the
 * "already loaded / already animated in" end-state instead.
 */
#page-preloader,
.page-loading-effect {
  display: none !important;
}

.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * A "stretched" section is normally sized by Elementor's own JS (it measures
 * the real page wrapper against the viewport at runtime and injects an
 * inline width/margin-left to break the section out to full-bleed) — we
 * don't have that JS (same missing-plugin-chunk gap as the home page's
 * background slideshows), so `.elementor-section-stretched` was just sitting
 * at `width:100%` of its own (boxed, ~1140px) parent instead of the full
 * viewport, leaving equal empty margins on both sides of every "full width"
 * section on every page. The classic CSS-only full-bleed trick achieves the
 * same effect without needing to know any wrapper's actual pixel width.
 */
.elementor-section.elementor-section-stretched {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/*
 * The off-canvas nav's submenu expand/collapse (see src/nav.js) — the
 * original theme drives this with its own JS we don't have, so this defines
 * the open/closed states ourselves around the class our JS toggles.
 */
#menu-main-menu .menu-item-has-children > .sub-menu {
  display: none;
}
#menu-main-menu .menu-item-has-children.sub-menu-open > .sub-menu {
  display: block;
  position: static;
  min-width: 0;
  padding-left: 20px;
}
#menu-main-menu .menu-item-has-children.sub-menu-open > a .toggle-sub-menu {
  transform: rotate(180deg);
}

/*
 * Not from the original site — the real logo image (Clarence-house-logo-
 * LIGHT.png) 404'd on the live site itself, so this port falls back to the
 * square favicon instead. The theme's own CSS only caps logo width
 * (max-width: 150px), which was written for a wide wordmark logo, not a
 * square icon — on a square image that let it render as tall as the header
 * itself. Cap the height explicitly so it fits the navbar properly.
 */
.site-logo img {
  max-height: 44px;
  width: auto;
}

/* Not from the original site — swap the generic outline "mobile" icon for a
   proper phone-handset glyph (see fa-phone-volume swap in generated pages)
   and give it a bit more presence next to the number. */
.header-contact .fa-phone-volume {
  font-size: 18px;
  color: var(--uxper-color-accent, #b95c47);
}

/*
 * Not from the original site — the room-facilities amenity icons
 * (bathroom-hair-dryer.svg, wifi-check.svg, etc.) live on the "boutique-hotel"
 * theme-demo site's uploads, which the crawl never actually fetched, so they
 * rendered as broken images. Swapped for real Font Awesome glyphs (see
 * generated pages) — style them to match the room-facility list layout.
 */
.amenity-checked {
  display: flex;
  align-items: center;
  gap: 12px;
}
.amenity-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  color: #1a1a1a;
  flex-shrink: 0;
}

/*
 * Not from the original site — the accommodation page's room list now comes
 * from the live database (see RoomGrid.jsx) instead of the static mirror,
 * so it needs its own loading/error text since those states never existed
 * in the original crawl.
 */
.room-load-loading,
.room-load-error {
  width: 100%;
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
}
.room-load-error {
  color: #b95c47;
}

/*
 * The theme's own JS adds an ".animate" class to reveal ".grid-item" cards
 * (they default to opacity:0, meant to fade in once Elementor's masonry/
 * scroll-reveal script runs) — that script only scans the DOM once on page
 * load, before our async room fetch has mounted anything, so the cards
 * would otherwise stay invisible forever. Force the same end-state ".animate"
 * already defines, scoped to just this DB-backed grid.
 */
#accommodation-rooms-root .grid-item {
  opacity: 1 !important;
  transform: none !important;
}

/*
 * Not from the original site — the section wrapping this grid has no
 * bottom padding of its own (the original relied on Elementor's JS-driven
 * masonry container reserving a little extra height below the last row,
 * which our plain CSS-grid version doesn't do), so the cards ran straight
 * into the footer. Give the grid itself some breathing room instead.
 */
#accommodation-rooms-root {
  margin-bottom: 80px;
}

/*
 * Not from the original site — alternate photo/info sides row to row
 * (image-left/info-right, then image-right/info-left, ...) instead of the
 * "wrap-room-list" layout's default of always photo-left. The DOM order
 * (thumbnail before detail) stays the same either way, so the theme's own
 * ".room-thumbnails + .room-detail" padding rule still applies untouched —
 * only the visual order flips.
 */
#accommodation-rooms-root .grid-item:nth-child(odd) .inner-room-wrap {
  flex-direction: row-reverse;
}

/*
 * Not from the original site — the room detail page's hero banner (see
 * room-detail-template.html / RoomHero in RoomDetail.jsx) now comes from
 * the database too. While loading, or for a room with no uploaded cover
 * photo, this fills the same banner space the original 1920x650 photo did
 * instead of collapsing to nothing.
 */
.room-hero-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #dddbdd;
}

/*
 * Not from the original site — the mirrored theme has no height rule for
 * a single-photo hero at all (just the site-wide `img{height:auto}` reset),
 * so it was only ever a reasonable size because the original site's own
 * photo happened to be a very wide 1920x650 crop. A DB room's uploaded
 * photo can be any aspect ratio (portrait, square, ...), which made the
 * banner far taller than intended. Cap it to a fixed banner ratio and crop
 * with object-fit instead of trusting the source photo's own proportions.
 * Scoped to `.room-hero-single` (not the outer `.room-thumbnails` wrapper)
 * so it doesn't leak into the multi-photo gallery grid below, which has its
 * own complete sizing already built into the theme's _template.css.
 */
.room-hero-single {
  display: block;
  width: 100%;
  aspect-ratio: 11 / 4;
  overflow: hidden;
}
.room-hero-single img,
.room-hero-single .room-hero-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A fixed 11:4 crop looks fine on a wide desktop banner but crops away most
   of the photo's subject on a narrow phone screen — ease off to a taller
   (less cropped) ratio as the viewport shrinks. */
@media (max-width: 991px) {
  .room-hero-single {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 600px) {
  .room-hero-single {
    aspect-ratio: 4 / 3;
  }
}

/*
 * Not from the original site — the theme's own multi-photo gallery grid
 * (.nuss-gallery-04, see RoomGallery.jsx) styles a "See More +N" overlay
 * (.see-more, absolutely positioned) but never actually sets `position:
 * relative` on the thumbnail it's meant to cover, relying on some other
 * rule or inline style from the original theme's own widget-init JS that
 * we don't run. Set it explicitly so the overlay stays confined to its own
 * thumbnail instead of covering the whole grid.
 */
.nuss-gallery-04 .small-thumb .item {
  position: relative;
}

/*
 * Not from the original site — rooms without an uploaded cover photo yet
 * (admin hasn't added one) get a neutral placeholder instead of a broken
 * image or a stretched logo. Soft blush — the same tone the theme's own
 * date-picker uses for its "in range" highlight (.date-range-day.is-in-
 * range) — rather than a flat gray, so it reads as an intentional part of
 * the design instead of a loading skeleton.
 */
.room-thumbnail-placeholder {
  display: block;
  aspect-ratio: 510 / 360;
  background-color: #f7ece9;
}

/*
 * Not from the original site — "Additional Services" (charge types) have
 * no per-item photo in the database and admins can add arbitrary services,
 * so a fixed set of stock photos can't keep up. Use an icon badge instead,
 * matched to the label by keyword (see serviceIcons.js), sized up a bit
 * from the theme's original 100x100 .service-image photo footprint since a
 * badge that size read as too small for a bare icon. A fixed width on the
 * <i> itself (not just the badge) keeps every glyph optically centered and
 * the same visual size, since FA icons differ in intrinsic glyph width
 * (e.g. fa-shuttle-van is much wider than fa-wifi).
 */
.service-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background-color: #f7f3f1;
  border-radius: 50%;
}
.service-icon-wrap i {
  display: inline-block;
  width: 38px;
  font-size: 34px;
  line-height: 1;
  text-align: center;
  color: var(--uxper-color-accent, #b95c47);
}

/*
 * Not from the original site — the theme's own service-title (20px serif
 * heading font) and service-price (14px sans, letter-spaced) read as two
 * very different scales sitting right next to each other. Bring them
 * closer together instead of matching the original's wider contrast.
 */
.room-extra-service .service-title .entry-title {
  font-size: 17px;
}
.room-extra-service .service-price {
  font-size: 15px;
}

/*
 * Not from the original site — the theme gives this section no visual
 * containment at all (bare icon + text floating on white), unlike every
 * other boxed area on this page (booking widget, calendar, facilities
 * list). Wrap each service in a bordered card so it reads as a deliberate
 * section instead of an unfinished list.
 */
.room-extra-service .list-service {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.room-extra-service .service {
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid #eee;
  border-radius: 6px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.room-extra-service .service:hover {
  border-color: var(--uxper-color-accent, #b95c47);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.room-extra-service .service-title {
  margin-bottom: 0;
}

/*
 * Not from the original site — the theme's default swiper pagination dot
 * is a 6px mark in #d8d8d8 (very light gray), which all but disappears
 * against this page's white cards. Room cards with multiple photos (see
 * RoomImageSwiper.jsx) need their dots to actually read as "swipe for more
 * photos", so darken and size them up a bit here — scoped to just the
 * accommodation grid's cards, not every swiper on the site.
 */
#accommodation-rooms-root .nuss-swiper .swiper-pagination-bullet:before {
  width: 8px;
  height: 8px;
  background-color: #999;
}
#accommodation-rooms-root .nuss-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color: var(--uxper-color-accent, #b95c47);
}

/*
 * Not from the original site — the footer's social icons (Facebook,
 * Twitter, Instagram, Tripadvisor) are raw inline <svg> elements the crawl
 * captured with no explicit size and no fill color, both of which the real
 * site apparently sourced from Elementor's dynamic icon-font-to-SVG
 * pipeline rather than plain CSS — that pipeline isn't part of what we
 * ported, so the icons rendered at 0x0 and, size aside, defaulted to SVG's
 * black fill (invisible against the dark footer). Give them an explicit
 * size and let them inherit the link's own (light) color instead.
 */
.nuss-social-networks .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.nuss-social-networks .link-icon {
  position: static;
  transform: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/*
 * Not from the original site — the footer's Tripadvisor "Certificate of
 * Excellence" badges are raw third-party widget HTML (see the broken-path
 * fix in the generated pages) with no sizing of their own; at native
 * resolution they're several hundred pixels each, which was most of why
 * the footer ran so tall. Cap them to a normal badge size.
 */
.TA_certificateOfExcellence {
  max-width: 150px;
  margin-bottom: 16px;
}
.TA_certificateOfExcellence img {
  width: 100%;
  height: auto;
}

/*
 * Not from the original site — RoomAvailabilityCalendar.jsx. The room
 * detail page's real "Availability" section (.room-availability, real
 * captured markup) shipped with an empty `.room-availability-calendar` div
 * that the original theme's jQuery datepick plugin was meant to fill in
 * from a `data-reserved-dates` attribute that was never wired to real data
 * (one hardcoded leftover date from the crawl) — it just rendered blank.
 * This renders real `.datepick-month`/`.datepick-cmd` markup (styled
 * entirely by the theme's own already-loaded uxper-booking CSS — see
 * _general.css's `.datepick-month`/`.calendar-legend-item` rules) driven by
 * the same capacity-aware `/unavailable-dates` data the booking widgets
 * use, instead of new bespoke styling. Only the two rules below are new:
 * a plain-<button> reset (the vendor CSS assumes its own nav markup, not a
 * real interactive/keyboard-focusable <button>) and hiding the second month
 * on narrow screens, which the original desktop-oriented widget never had
 * to handle.
 */
button.datepick-cmd {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
button.datepick-cmd:disabled {
  cursor: not-allowed;
}

/*
 * Not from the original site — AccommodationSearchWidget.jsx. The header's
 * real "Check Availability" popup (#canvas-check-availabity, shared across
 * every ported page) had a dead form: no submit handler, and its quantity
 * steppers' +/- had no script behind them. This is a real, working
 * version of the same theme markup/CSS, using real <button>s for the
 * toggle and steppers (the vendor CSS assumed plain <div>s) instead of
 * unclickable-by-keyboard decorative divs — these two rules just strip the
 * default browser button chrome that plain <div>s never had.
 */
button.open-toggle,
.product-quantity button.btn-quantity {
  background: none;
  border: none;
  font-family: inherit;
  width: 100%;
  display: block;
  text-align: left;
}
.product-quantity button.btn-quantity {
  width: 25px;
}
.room-search-summary {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 10px 0;
  font-size: 14px;
  color: #7a7a7a;
}
/* Same cookie-banner-over-popup overlap as .date-range-popover above —
   the theme's own #canvas-check-availabity is only z-index 999, well under
   the growl banner's 50000, so on a short viewport the (now genuinely
   interactive) guest-count steppers could sit behind an unclickable
   cookie banner. Scoped to just this one popup, not every .nuss-popup, since
   it's the only one this session has made real steppers/buttons for. */
#canvas-check-availabity {
  z-index: 50001;
}
@media (max-width: 767px) {
  .datepick-month-row .datepick-month:not(.first) {
    display: none;
  }
  .datepick-month-row .datepick-month.first {
    border-right: 0;
  }
}

/*
 * Not from the original site — DateRangePicker.jsx, a real calendar-grid
 * date-range control shared by the room-detail sidebar widget and the
 * checkout page. Native <input type="date"> can only restrict a
 * *continuous* min/max span, so a room sold out for just a few nights
 * inside an otherwise-open month could still be typed/picked and only
 * rejected afterwards — this disables those specific days outright instead
 * (see RoomController::unavailableDates, which already only reports truly
 * full-capacity days, not every date any single unit's booking touches).
 */
.date-range-picker {
  position: relative;
}
.date-range-fields {
  display: flex;
  gap: 12px;
}
.date-range-field {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.date-range-field.active,
.date-range-field:focus-visible {
  outline: none;
  border-color: var(--uxper-color-primary, #492723);
  box-shadow: 0 0 0 3px rgba(73, 39, 35, 0.12);
}
.date-range-field-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
}
.date-range-field-value {
  font-size: 14px;
  color: #1a1a1a;
}
.date-range-popover {
  position: absolute;
  /* The theme's own cookie-consent growl banner is `position: fixed` at
     z-index 50000 (jquery.growl.min.css) — on a short mobile viewport it
     can sit visually on top of this popover. A calendar the guest just
     actively opened should win over a passive dismissible banner. */
  z-index: 50001;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 32px));
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 16px;
}
.date-range-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.date-range-nav {
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #eee;
  border-radius: 50%;
  color: #5a5a5a;
  cursor: pointer;
}
.date-range-nav:hover:not(:disabled) {
  border-color: var(--uxper-color-accent, #b95c47);
  color: var(--uxper-color-accent, #b95c47);
}
.date-range-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.date-range-hint {
  font-size: 12px;
  color: #7a7a7a;
  margin: 4px 0 10px;
}
.date-range-weekdays,
.date-range-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-range-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  padding-bottom: 6px;
}
.date-range-day {
  aspect-ratio: 1;
  min-height: 38px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.date-range-day.is-outside {
  color: #ccc;
}
.date-range-day.is-today {
  border-color: var(--uxper-color-accent, #b95c47);
}
.date-range-day.is-booked {
  color: #bbb;
  text-decoration: line-through;
}
.date-range-day.is-disabled {
  color: #ddd;
  cursor: not-allowed;
}
.date-range-day.is-in-range {
  background-color: #f7ece9;
  border-radius: 0;
}
.date-range-day.is-selected {
  background-color: var(--uxper-color-primary, #492723);
  border-color: var(--uxper-color-primary, #492723);
  color: #fff;
  font-weight: 600;
}
.date-range-day:hover:not(:disabled):not(.is-selected) {
  border-color: var(--uxper-color-accent, #b95c47);
}
.date-range-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 11px;
  color: #7a7a7a;
}
.date-range-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.date-range-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #eee;
}
.date-range-swatch.is-booked {
  background-color: #bbb;
}
.date-range-swatch.is-selected {
  background-color: var(--uxper-color-primary, #492723);
}
/* The room-detail sidebar widget's own form-group/button styling (inline
   <style> right after the widget's portal target) assumes plain label+input
   pairs; give the picker's two-field row the same rhythm without touching
   that untouched vendor-adjacent block. */
.room-booking .date-range-picker {
  margin-bottom: 15px;
}

/*
 * Not from the original site — the in-house checkout and booking-
 * confirmation pages (CheckoutPage.jsx, BookingConfirmationPage.jsx). The
 * original site never had its own checkout: the room sidebar's "Book Your
 * Room" form posted straight out to a third-party booking engine
 * (reservations.travelclick.com → an Amadeus-hosted page unrelated to this
 * site), so there's no real captured markup to inherit styling from here.
 * Built from the site's own tokens (accent color, heading font, .nuss-button,
 * .review-order/.payment-method-wrap from the theme's own unused
 * uxper-booking checkout CSS) rather than a bespoke one-off look. Colors
 * reuse the same `--uxper-color-accent`/`--uxper-color-primary` semantic
 * tokens as the rest of this file (never defined as real custom properties
 * anywhere in the ported theme — this project introduced the convention
 * itself — so every use carries its real hex as the fallback) instead of
 * hardcoding hex per rule.
 */
.checkout-page {
  padding: 40px 0 100px;
}
.checkout-page * {
  box-sizing: border-box;
}

/* 1. Secure-reservation trust bar — reuses the same warm neutral card
   background as .review-order/.checkout-policy-block and the site's own
   accent color for the icon, rather than a generic SaaS "trust green"
   outside the site's palette. */
.checkout-trust-bar {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5a5a5a;
  background-color: #faf8f7;
  border: 1px solid #eee;
  border-radius: 3px;
}
.checkout-trust-bar i {
  color: var(--uxper-color-accent, #b95c47);
}

/* 2. Checkout progress */
.checkout-progress-wrap {
  max-width: 1100px;
  margin: 0 auto 36px;
  padding: 0 20px;
}
.checkout-progress {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.checkout-progress-step {
  flex: 1;
  position: relative;
  text-align: center;
}
.checkout-progress-step:not(:last-child):after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #eee;
  z-index: 0;
}
.checkout-progress-step.is-progressed:not(:last-child):after {
  background-color: var(--uxper-color-accent, #b95c47);
}
.step-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  background-color: #fff;
  border: 2px solid #ddd;
  color: #7a7a7a;
}
.checkout-progress-step.is-current .step-marker {
  border-color: var(--uxper-color-primary, #492723);
  background-color: var(--uxper-color-primary, #492723);
  color: #fff;
}
.checkout-progress-step.is-done .step-marker {
  border-color: var(--uxper-color-accent, #b95c47);
  background-color: #fff;
  color: var(--uxper-color-accent, #b95c47);
}
.step-label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #7a7a7a;
}
.checkout-progress-step.is-current .step-label {
  color: #1a1a1a;
  font-weight: 600;
}
.checkout-progress-compact {
  display: none;
}
.checkout-progress-bar-mobile {
  height: 4px;
  border-radius: 2px;
  background-color: #eee;
  margin-top: 8px;
  overflow: hidden;
}
.checkout-progress-bar-mobile span {
  display: block;
  height: 100%;
  background-color: var(--uxper-color-primary, #492723);
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .checkout-progress-bar-mobile span {
    transition: none;
  }
}

.checkout-page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  align-items: start;
}
.checkout-page-inner.confirmation {
  grid-template-columns: 1fr;
  max-width: 700px;
}
.checkout-title {
  font-size: 34px;
  margin-bottom: 8px;
}
.checkout-subtitle {
  color: #7a7a7a;
  margin-bottom: 30px;
}
.checkout-section {
  margin-bottom: 36px;
}
.checkout-section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.checkout-field-row {
  display: flex;
  gap: 20px;
}
.checkout-field-row .checkout-field {
  flex: 1;
  min-width: 0;
}

/* 3. Form fields — label/required-mark/hint/error states */
.checkout-field {
  display: block;
  margin-bottom: 16px;
}
.checkout-field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
  margin-bottom: 6px;
}
.req-mark {
  color: var(--uxper-color-accent, #b95c47);
}
.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-field textarea {
  padding: 12px 14px;
  min-height: 90px;
}
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: var(--uxper-color-primary, #492723);
  box-shadow: 0 0 0 3px rgba(73, 39, 35, 0.12);
}
.checkout-field input:disabled,
.checkout-field select:disabled,
.checkout-field textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}
/* Reuses the same accent color the rest of this file already uses for
   error text (see .room-load-error) instead of a generic red, so an
   invalid field doesn't introduce a color outside the site's own palette. */
.checkout-field.has-error input,
.checkout-field.has-error select,
.checkout-field.has-error textarea,
.checkout-field.has-error .date-range-field {
  border-color: var(--uxper-color-accent, #b95c47);
}
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #999;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--uxper-color-accent, #b95c47);
}
.checkout-guest-cap {
  font-size: 12px;
  color: #999;
  margin: -10px 0 0;
}
.checkout-phone-group {
  display: flex;
  gap: 8px;
}
.checkout-phone-group select {
  flex: 0 0 auto;
  width: 128px;
  min-width: 0;
  padding: 0 8px;
}
.checkout-phone-group input {
  flex: 1;
  min-width: 0;
}
.checkout-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #5a5a5a;
  cursor: pointer;
  min-height: 44px;
}
.checkout-checkbox-row input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--uxper-color-primary, #492723);
}
.room-booking .button:disabled {
  background-color: #a99b98 !important;
  cursor: not-allowed;
}
.widget-guest-cap {
  font-size: 12px;
  color: #999;
  margin: -8px 0 12px;
}

/* 5. Payment section extras */
.payment-method-wrap .radio i {
  color: #7a7a7a;
}
/*
 * The vendor CSS hides the real radio input with `display: none`, which
 * pulls it out of the accessibility tree entirely (not just off-screen) —
 * keyboard/screen-reader users could see the tiles but never actually
 * select one. Swap for an off-screen-but-focusable technique instead, and
 * add a visible focus ring on the tile so keyboard navigation is visible
 * per WCAG, not just present.
 */
.payment-method-wrap .radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  display: block !important;
}
.payment-method-wrap .radio:focus-within {
  outline: 2px solid var(--uxper-color-primary, #492723);
  outline-offset: 2px;
}
.payment-method-wrap .desc .checkout-field {
  margin-top: 16px;
  margin-bottom: 12px;
}
.checkout-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #7a7a7a;
  margin: 4px 0 0;
}
.checkout-secure-note i {
  color: var(--uxper-color-accent, #b95c47);
  margin-top: 2px;
}

/* 6/7. Policies + submit */
.checkout-policy-block {
  background-color: #faf8f7;
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.checkout-policy-block h3 {
  font-size: 15px;
  margin: 0 0 6px;
}
.checkout-policy-block h3:not(:first-child) {
  margin-top: 16px;
}
.checkout-policy-block p {
  font-size: 14px;
  color: #5a5a5a;
  margin: 0;
}
.checkout-error {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkout-next-note {
  color: #7a7a7a;
  margin: 24px 0;
}
.checkout-submit {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.checkout-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.checkout-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: checkout-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .checkout-spinner {
    animation-duration: 1.6s;
  }
}
@keyframes checkout-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sidebar: "Your Stay" summary card + price breakdown */
.checkout-aside {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.checkout-summary-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 0 20px 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
.checkout-summary-card summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-summary-card summary::-webkit-details-marker {
  display: none;
}
.checkout-summary-card summary i {
  transition: transform 0.2s ease;
  font-size: 13px;
  color: #7a7a7a;
}
.checkout-summary-card[open] summary i {
  transform: rotate(180deg);
}
.summary-room {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 14px;
}
.summary-room-image {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.summary-room-name {
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 6px;
}
.summary-room-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #7a7a7a;
}
.summary-room-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.summary-room-meta svg {
  width: 14px;
  height: 14px;
}
.summary-row {
  margin-bottom: 14px;
  font-size: 14px;
  position: relative;
}
.summary-row .label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #7a7a7a;
  margin-bottom: 4px;
}
.summary-change-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  color: var(--uxper-color-accent, #b95c47);
  cursor: pointer;
  min-height: 24px;
}
.summary-amenities ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.summary-amenities li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5a5a5a;
  margin-bottom: 4px;
}
.summary-amenities li.more {
  color: #7a7a7a;
  font-style: italic;
}
.mock-note {
  font-style: italic;
  color: #999;
  font-size: 12px;
}
.summary-cancellation {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #7a7a7a;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.review-order {
  background-color: #faf8f7;
  /* The theme's own _template.css makes .review-order itself sticky (for
     pages where it's the only sidebar element) — here it shares the
     sidebar with the summary card above it, so `.checkout-aside` owns
     stickiness instead; without this override both being sticky would let
     this card detach and drift independently while scrolling. */
  position: static;
}
.review-order .entry-row span:not(.label) {
  display: block;
}
.summary-extras {
  list-style: none;
  margin: 0;
  padding: 0;
}
.summary-extras li {
  font-size: 13px;
  color: #5a5a5a;
  margin-bottom: 4px;
}
.summary-promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-promo input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  background-color: #fff;
}
.checkout-total {
  font-size: 22px;
}
.confirmation-summary {
  margin: 28px 0;
}

@media (max-width: 860px) {
  /* Single column; the form comes first in markup but the summary/price
     card should read first on a phone, so switch to flex purely to reorder
     without touching the DOM. */
  .checkout-page-inner {
    display: flex;
    flex-direction: column;
  }
  .checkout-page-inner .checkout-aside {
    order: -1;
    position: static;
  }
  .checkout-field-row {
    flex-direction: column;
    gap: 0;
  }
  .checkout-progress {
    display: none;
  }
  .checkout-progress-compact {
    display: block;
  }
}

@media (max-width: 480px) {
  .checkout-page-inner {
    padding: 0 16px;
  }
  .checkout-trust-bar,
  .checkout-progress-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .checkout-title {
    font-size: 26px;
  }
  .checkout-phone-group {
    flex-direction: column;
  }
  .checkout-phone-group select {
    width: 100%;
  }
}

/* --- Everything below this line was added after the above (already a
   complete, working stylesheet) was accidentally overwritten by a later
   commit and had to be restored from git history — new page sections built
   since then, not present in the restored file above. --- */

/* Homepage hero slider's title/description/button: rendered as a separate
   overlay (see HeroSlideText.jsx and home.html's #home-hero-text-root) that
   sits at the true left edge of the page, independent of the image's own
   column/position entirely — not a CSS reposition of something still nested
   inside the same slide as the photo. .elementor-container is already
   position:relative and full-width by default (Elementor's own CSS, for a
   .elementor-section-full_width section like this one), which is what this
   overlay's position:absolute anchors against. */
#home-hero-text-root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  max-width: 520px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 60px;
  z-index: 20;
}

#home-hero-text-root .slide-layers,
#home-hero-text-root .title,
#home-hero-text-root .description {
  text-align: left;
  color: #fff;
}

#home-hero-text-root .description {
  font-size: 29px;
  line-height: 1.6;
}

/* Same gold used by the header's own "BOOK NOW" button
   (header.site-header .header-button-02, #e7c130), for visual consistency. */
#home-hero-text-root .nuss-ele-button {
  background-color: #e7c130;
  color: #fff;
  padding: 11px 32px;
  border-radius: 3px;
}

#home-hero-text-root .button-text {
  color: #fff;
}

/* A bit more breathing room between the description and the button — the
   theme's own default here is fairly tight. Desktop-only (matches the
   .container breakpoint elsewhere in this file) since the stacked mobile
   layout wasn't part of what was asked for. */
@media (min-width: 992px) {
  #home-hero-text-root .button-wrap {
    margin-top: 24px;
  }
}

/* Top navbar: the "BOOK NOW" button's oversized vertical padding (29px
   top+bottom, theme-vars.css) was making the bar taller than necessary —
   the header itself already has 0 padding-top/bottom, and the logo's own
   height is already capped above (.site-logo img). */
header.site-header .header-button-02 a.nuss-button {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Homepage hero text overlay on narrow screens: the desktop layout (text
   beside the image, in its own reserved left strip) has nowhere near
   enough room on a phone — 40% width minus the 60px padding leaves ~90px
   on a typical 375px-wide screen, nowhere near enough for real sentences.
   The photo goes edge-to-edge here (matching how the original theme's own
   per-page CSS already resets .slide-bg to full-bleed under 992px — see
   post-600.css), so there's no reserved empty strip to put text in at all.
   Overlaying the text directly on the photo, vertically centered rather
   than anchored to the bottom, left-aligned. */
@media (max-width: 991px) {
  #home-hero-text-root {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
  }

  #home-hero-text-root .slide-layers {
    text-align: left;
  }

  #home-hero-text-root .title {
    font-size: 22px;
    text-align: left;
  }

  #home-hero-text-root .description {
    font-size: 16px;
    text-align: left;
  }

  #home-hero-text-root .button-wrap {
    margin-top: 14px;
  }
}

/* Gallery page's photo grid (see Gallery.jsx and #gallery-root in
   gallery.html) — a plain responsive CSS grid rather than the vendor
   Simply Gallery Block's own `.sgb-gallery`/`.sgb-item` classes, which only
   size a single item and never actually lay the grid out themselves; real
   positioning there came from a JS masonry library that was never part of
   the port. Card look (rounded corners, subtle shadow) matches the site's
   other image cards (e.g. room cards) rather than introducing a new style. */
#gallery-root .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

#gallery-root .gallery-grid-item {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

#gallery-root .gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

#gallery-root .gallery-grid-item:hover img {
  transform: scale(1.05);
}

/* Not from the original site — #conference-rooms-root's own parent
   (.elementor-widget-wrap) is a row flexbox, so with no width of its own
   this portal div shrinks to fit whatever's portaled into it instead of
   taking the full row width. Normally invisible (a full room list's own
   content is wide enough to fill the row anyway), but it left the paused
   notice (see RoomsPausedNotice.jsx/ConferenceRooms.jsx) with nothing to
   actually center within — its "centered" box was exactly as wide as
   itself. */
#conference-rooms-root {
  width: 100%;
}

/* Conferences page's room blocks (see ConferenceRooms.jsx and
   #conference-rooms-root in conferences.html). The original 3 hardcoded
   rooms got their typography/color/image-size styling from Elementor's own
   per-widget generated CSS (post-5860.css), keyed to each widget's one-off
   `elementor-element-<hash>` class — real values, copied from that file, but
   re-applied here as plain descendant selectors under #conference-rooms-root
   instead, since an admin-added room has no such hash to hang a rule off of
   and needs to look identical to the seeded ones. */
#conference-rooms-root .elementor-widget-image img {
  width: 100%;
  height: 510px;
  object-fit: cover;
  object-position: center center;
  border-radius: 4px;
}

#conference-rooms-root h3.elementor-heading-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.211em;
  color: #1a1a1a;
  margin: 0 0 20px;
}

#conference-rooms-root .elementor-widget-text-editor > .elementor-widget-container {
  color: #5a5a5a;
  margin: 0 0 20px;
}

#conference-rooms-root .accordion-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

#conference-rooms-root .accordion-header {
  min-height: 35px;
  cursor: pointer;
}

#conference-rooms-root .accordion-content {
  padding: 15px 0 0;
  color: #5a5a5a;
}

#conference-rooms-root .elementor-button {
  background-color: #b95c47;
  border-color: #b95c47;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.4em;
  letter-spacing: 1px;
  border-radius: 3px;
}

#conference-rooms-root .elementor-button:hover {
  background-color: #a7503d;
  border-color: #a7503d;
}

#conference-rooms-root .elementor-column:nth-child(2) > .elementor-widget-wrap {
  padding: 30px;
}

#conference-rooms-root > section:not(:last-child) {
  padding-bottom: 60px;
}

@media (max-width: 767px) {
  #conference-rooms-root .elementor-widget-image img {
    height: 280px;
  }

  #conference-rooms-root h3.elementor-heading-title {
    font-size: 28px;
  }

  #conference-rooms-root .elementor-column:nth-child(2) > .elementor-widget-wrap {
    padding: 20px 0 0;
  }
}

/* Homepage "Apartments" panel (see ApartmentsShowcase.jsx and
   #apartments-showcase-root in home.html). The original 3 hardcoded rooms
   got their photo height, text color, spacing etc. from this exact
   widget's per-page generated CSS (post-600.css, keyed to its
   elementor-element-3d80fd4 hash) — real values, re-applied here the same
   way the Conferences room blocks' styling is (see that section's own
   comment): as plain descendant selectors under #apartments-showcase-root,
   since an admin-added room has no hash to hang a rule off of. The
   containing section's own dark background (#4A2723, from its own
   elementor-element-381b156 hash) is untouched original markup/CSS — the
   white text here is for contrast against that. */
#apartments-showcase-root .swiper-container {
  position: relative;
  height: 600px;
}

#apartments-showcase-root .title,
#apartments-showcase-root .desc,
#apartments-showcase-root .entry-heading {
  color: #fff;
}

#apartments-showcase-root .entry-heading {
  text-transform: uppercase;
}

#apartments-showcase-root .swiper-pagination-container .title {
  font-size: 28px;
}

#apartments-showcase-root .swiper-pagination-container {
  padding: 50px 15px 50px 50px;
}

#apartments-showcase-root .nuss-ele-button {
  font-size: 13px;
  color: #fff;
}

/*
 * Not from the original site — broken/missing image fallback (see
 * imageFallback.js, which swaps any failed <img>'s src to a flat data-URI
 * matching this same soft blush, and the two rules below it for the
 * homepage's hero and Apartments panel specifically). Same soft tone as
 * .room-thumbnail-placeholder above, so every "no image" state on the site
 * reads as one consistent, intentional look rather than several different
 * kinds of broken.
 */
img.img-fallback {
  min-height: 80px;
  object-fit: cover;
}

/* Homepage hero: no slides configured, or the API call failed — a flat
   panel standing in for the missing photo so the hero area isn't just
   blank white space behind its text overlay. */
.hero-fallback-bg {
  background-color: #f7ece9;
}

/* Homepage "Apartments" panel: no room has a cover photo yet, or the API
   call failed — same treatment as .room-thumbnail-placeholder, sized to
   fill the same photo panel the real swiper would occupy. */
.apartments-showcase-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  background-color: #f7ece9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.apartments-showcase-placeholder p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #a7857e;
}

/*
 * Not from the original site — BackendDownPage.jsx, shown app-wide when the
 * backend/database is unreachable (see useBackendHealth.js). No real
 * captured markup to inherit from (this state never existed on the live
 * site), so built from the same tokens as the checkout page above rather
 * than a bespoke look.
 */
.backend-down-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #faf8f7;
}
.backend-down-card {
  max-width: 480px;
  text-align: center;
}
.backend-down-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: block;
}
.backend-down-card h1 {
  font-size: 28px;
  margin-bottom: 16px;
}
.backend-down-card p {
  color: #5a5a5a;
  line-height: 1.6;
  margin-bottom: 24px;
}
.backend-down-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 15px;
}
.backend-down-contact a {
  color: var(--uxper-color-accent, #b95c47);
  text-decoration: none;
}
.backend-down-contact a:hover {
  text-decoration: underline;
}

/*
 * Not from the original site — RoomsPausedNotice.jsx, shown in place of
 * room listings/detail/checkout when an admin pauses bookings (see
 * HotelSettings in the admin app + useBackendHealth.js). Lighter-weight
 * than .backend-down-page since the rest of the site stays up — sized to
 * drop into the existing room-grid/checkout layouts rather than take over
 * the whole viewport.
 */
.rooms-paused-notice {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}
.rooms-paused-title {
  font-size: 22px;
  margin-bottom: 12px;
}
.rooms-paused-notice p {
  color: #5a5a5a;
  line-height: 1.6;
}
.rooms-paused-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  font-size: 15px;
}
.rooms-paused-contact a {
  color: var(--uxper-color-accent, #b95c47);
  text-decoration: none;
}
.rooms-paused-contact a:hover {
  text-decoration: underline;
}