/* ===================================================
   NIVASANA – RESIDENCES VADODARA  |  styles.css
   =================================================== */

/* ---- Property colour token: Nivasana Vadodara = Terracotta ---- */
:root {
    --brand:       #a01d14;
    --brand-dark:  #7a1610;
    --brand-overlay: rgba(0, 0, 0, 0.40);
    --ink:         #1a1a1a;
    --muted:       #666;
    --border:      #e2dfd8;
    /* ---- Shared page layout: one content width + one side gutter for every
       section (navbar, sub-nav, booking, content, footer) so the left/right
       margins line up throughout the site. Box is 1180 incl. 2×40 gutter,
       giving a ~1100px content area. Gutter shrinks on mobile (see @media). */
    --page-max:    1180px;
    --page-gutter: 40px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Offset in-page anchor jumps (e.g. #reviews) by the sticky header height,
   so a linked section lands below the header instead of being partly hidden. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    font-family: 'Raleway', sans-serif;
    color: #2d2d2d;
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---- Accessibility helpers ---- */
/* Visually hidden but available to screen readers (e.g. page <h1>). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Visible keyboard focus for interactive elements (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand, #a01d14);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ===================================================
   MAIN NAVIGATION
   =================================================== */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--page-gutter);
    height: 80px;
    max-width: var(--page-max);
    margin: 0 auto;
}

.nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 80px;
    width: auto;
    display: block;
}

.nav-logo-fallback {
    display: none;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #111;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 36px;
    align-items: center;
}

.nav-links a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #444;
    transition: color 0.2s;
    text-decoration: none;
}

.nav-links a:hover { color: #111; }

.nav-links .arrow {
    font-size: 8px;
    vertical-align: middle;
}

/* Desktop dropdown */
.has-dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 6px 0;
    min-width: 240px;
    z-index: 1001;
    margin-top: 0;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #2d2d2d;
    text-transform: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
    background: #faf2f1;
    color: var(--brand);
}

.mobile-group-label {
    padding: 14px 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}

.mobile-sub-item a {
    padding-left: 14px !important;
    font-size: 12.5px !important;
}

.btn-header-book {
    background: var(--brand);
    color: #fff;
    padding: 11px 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-header-book:hover { background: var(--brand-dark); }


/* ===================================================
   HERO
   =================================================== */
.hero {
    position: relative;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    min-height: 480px;
    overflow: hidden;
}

.hero-video,
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.38) 0%,
        rgba(0,0,0,0.10) 45%,
        rgba(0,0,0,0.18) 100%
    );
}

.hero-content {
    position: absolute;
    top: 36px;
    left: 50px;
    z-index: 2;
}

.hotel-name-tag {
    display: flex;
    align-items: center;
    gap: 12px;
}

.heart-icon {
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.hotel-name {
    font-family: 'Raleway', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    line-height: 1.3;
}

.hero-location {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
}


/* ===================================================
   SUB NAVIGATION
   =================================================== */
.sub-nav {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 80px;
    z-index: 999;
}

.sub-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.sub-nav ul li a {
    display: block;
    padding: 16px 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #999;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.sub-nav ul li.active a,
.sub-nav ul li a:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
}


/* ===================================================
   BOOKING WIDGET  (matches the brand homepage form)
   =================================================== */
.search-widget-wrap {
    max-width: var(--page-max);
    margin: 24px auto 0;
    padding: 0 var(--page-gutter);
    position: relative;
    z-index: 5;
}

/* While a date / Rooms & Guests popup is open, lift the whole booking widget
   above the sticky sub-nav (z 999) + header (z 1000) so the popup is never
   clipped behind them or hidden when the page is scrolled. */
.search-widget-wrap.bb-elevated {
    position: relative;
    z-index: 1100;
}

.brand-booking {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: rgba(241, 236, 227, 0.92);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 20px;
}

.bb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.15fr;
    gap: 16px;
    align-items: flex-start;
}

.bb-field,
.bb-action {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Both rows share the main row's columns: Place spans Check In + Check Out
   (1–2); Hotel spans Rooms & Guests + Promo Code (3–4); the Book Now column
   (5) stays clear above the button. */
.bb-row-top .bb-field:nth-of-type(1) { grid-column: 1 / 3; }
.bb-row-top .bb-field:nth-of-type(2) { grid-column: 3 / 5; }
.bb-row .bb-action { grid-column: 5 / -1; }
/* Persistent top-row Book Now, bottom-aligned with the Place / Hotel inputs. */
.bb-row-top .bb-action { align-self: end; }

/* Book Now lives in the top row while the form is compact. Once the extra
   fields are revealed (and the form isn't collapsed) it swaps to the bottom
   row's last column, sliding/fading in alongside the other secondary fields. */
.bb-row-extra .bb-action { align-self: end; }
.bb-action-bottom { display: none; }
.brand-booking.bb-revealed:not(.is-collapsed) .bb-action-top { display: none; }
.brand-booking.bb-revealed:not(.is-collapsed) .bb-action-bottom { display: flex; }

.bb-row-extra { display: grid; }
.bb-footer    { display: grid; }

/* Collapsing hides only the date/guest/promo inputs — Book Now stays. */
.brand-booking.is-collapsed .bb-row-extra .bb-field { display: none; }

/* --- Progressive reveal: show only Place + Hotel until both are chosen --- */
/* Pre-JS guard: keep the secondary fields hidden so the full form never
   flashes before the reveal logic is wired up. */
.brand-booking:not(.bb-ready) .bb-row-extra,
.brand-booking:not(.bb-ready) .bb-footer { display: none; }

/* Smoothly slide the secondary fields open/closed by animating an explicit
   height (set from the content's measured height in booking-form.js). Height
   is animated instead of `grid-template-rows: 0fr → 1fr` because the fr-unit
   transition is not honoured on several mobile browsers, where the form snaps
   open instantly instead of sliding. */
.bb-extra-wrap {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.bb-extra-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.brand-booking.bb-revealed .bb-extra-wrap {
    opacity: 1;
}
/* Once fully open, let the date / guests popups spill outside the wrapper. */
.bb-extra-wrap.is-open { overflow: visible; }
/* Instant open (no animation) for property pages on first paint. */
.brand-booking.bb-no-anim .bb-extra-wrap { transition: none; }

.bb-field label,
.bb-price {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #2d2d2d;
    margin-bottom: 5px;
    min-height: 15px;
    cursor: pointer;
}

.bb-price {
    font-size: 11px;
    color: #5a554c;
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

.bb-control {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bb-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--brand);
    pointer-events: none;
}

.bb-chevron {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    color: var(--brand);
    pointer-events: none;
}

.bb-control select {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    padding: 0 32px 0 38px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bb-control select:invalid,
.bb-control select option[value=""] { color: var(--muted); }
.bb-control select option { color: var(--ink); }

.bb-control input.bb-text {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    padding: 0 12px 0 38px;
    cursor: pointer;
}

.bb-control input.bb-text::placeholder { color: var(--muted); font-weight: 500; }
.bb-control input#sf-promo { cursor: text; }

.bb-control.bb-error { box-shadow: 0 0 0 1.5px #8B1A1A; }

.bb-guests-field { position: relative; }

.bb-guests-trigger {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-align: left;
    outline: none;
    padding: 0 32px 0 38px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guests-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 330px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    font-family: 'Raleway', sans-serif;
    overflow: hidden;
}

.guests-popup[hidden] { display: none; }

/* When a popup can't fit below its field, booking-form.js flips it above so it
   stays fully inside the viewport on short screens. */
.guests-popup.bb-flip-up {
    top: auto;
    bottom: calc(100% + 6px);
}
.date-picker-popup.bb-flip-up {
    top: auto;
    bottom: calc(100% + 10px);
}

.gp-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding: 13px 16px;
    border-bottom: 1px solid #ececec;
}

.gp-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.gp-total-label { font-size: 13px; color: #4a4a4a; }

.gp-room {
    padding: 12px 16px 14px;
    background: #f7f7f7;
    border-top: 1px solid #ececec;
}

.gp-room-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 10px;
}

.gp-guest-row { display: flex; gap: 18px; }
.gp-guest { flex: 1; min-width: 0; }
.gp-ages { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gp-age-field { display: flex; flex-direction: column; gap: 4px; }
.gp-age-label { font-size: 11px; color: var(--muted, #666); }
.gp-age { padding: 6px 8px; border: 1px solid var(--border, #e2dfd8); border-radius: 4px; font: inherit; font-size: 13px; background: #fff; color: var(--ink, #1a1a1a); }

.gp-guest-label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 7px;
}

.gp-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.gp-step {
    width: 30px;
    height: 30px;
    border: none;
    background: #f1f1f1;
    color: #333;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.gp-step:hover { background: #e4e4e4; }

.gp-num {
    min-width: 36px;
    padding: 0 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.gp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-top: 1px solid #ececec;
}

.gp-add {
    border: none;
    background: none;
    color: var(--brand);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.gp-add:hover { text-decoration: underline; }

.gp-done {
    border: none;
    background: var(--brand);
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 9px 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.gp-done:hover { background: var(--brand-dark); }

.bb-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 0 28px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.bb-book-btn:hover { background: var(--brand-dark); }

.bb-sublink {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    margin-top: 8px;
    align-self: flex-start;
    transition: color 0.2s;
}

.bb-sublink:hover { color: var(--brand); text-decoration: underline; }

/* Footer row: shares the row grid so each item sits under its field */
.bb-footer {
    grid-template-columns: repeat(4, 1fr) 1.15fr;
    gap: 22px;
    align-items: center;
    margin-top: 2px;
}

.bb-footer .bb-toggle { grid-column: 1; justify-self: start; }
.bb-footer .bb-why    { grid-column: 3; justify-self: start; }
.bb-footer .bb-manage { grid-column: 5; justify-self: start; }

/* The Why Book Direct? / Manage Booking links stay visible at all times,
   including the compact default phase. The Show More / Less toggle only has
   something to act on once the secondary fields are revealed, so keep just the
   toggle hidden until then. */
.brand-booking:not(.bb-revealed):not(.bb-user-collapsed) .bb-toggle { visibility: hidden; }

/* In the compact phase the wrapped date/guest fields are empty, so the doubled
   flex gap around that wrapper leaves too much space above the links. Pull the
   footer up so the links sit just below Place / Hotel. */
.brand-booking:not(.bb-revealed) .bb-footer,
.brand-booking.is-collapsed .bb-footer { margin-top: -12px; }

.bb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.2s;
}

.bb-toggle:hover { color: var(--brand); }

.bb-toggle-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}

.bb-footer .bb-sublink { margin-top: 0; align-self: center; }


/* ===================================================
   HOTEL OVERVIEW
   =================================================== */
.hotel-overview {
    padding: 40px 0 0;
}

.overview-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.overview-title {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: normal;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.3;
    margin: 0 0 28px;
}

/* Info rows */
.info-grid { margin-bottom: 32px; }

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child { border-bottom: none; }

.info-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #aaa;
    text-transform: uppercase;
    min-width: 78px;
    padding-top: 2px;
    flex-shrink: 0;
}

.info-value {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.feature-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.feature-links a {
    color: #555;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.feature-links a:hover { color: #111; }

.pipe { color: #ccc; }

.hotel-description {
    font-size: 13.5px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 0;
}


/* ---- Date picker wrapper (booking bar uses positioned popup) ---- */
.date-wrapper {
    position: relative;
}

/* ---- Book This Room CTA (used on rooms detail page) ---- */
.btn-book-large {
    display: block;
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    margin: 8px 0 18px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-book-large:hover { background: var(--brand-dark); }


/* ===================================================
   FACILITIES
   =================================================== */
.facilities-section {
    padding: 40px 0;
    background: #fff;
}

.facilities-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.section-title {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 32px;
}

.facilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
}

/* Left */
.fac-main-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.ntk-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 6px;
    margin-bottom: 22px;
}

.fac-item { margin-bottom: 20px; }

.fac-item dt {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 4px;
}

.fac-item dd {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin-left: 0;
}

/* Right */
.fac-topic { margin-bottom: 28px; }

.fac-topic h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #111;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fac-topic p {
    font-size: 13px;
    color: #555;
    line-height: 1.75;
}


/* ===================================================
   SECTION BANNERS (Food / Location / Reviews)
   =================================================== */
.section-banner {
    position: relative;
    height: 68vh;
    min-height: 420px;
    overflow: hidden;
}

.section-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: var(--brand-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-overlay h1,
.banner-overlay h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 7px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}


/* ===================================================
   FOOD & DRINK CONTENT
   =================================================== */
.fd-content {
    padding: 40px 0;
    background: #fff;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.two-col-fd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.single-col-fd {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.col h3 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.col p {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 14px;
}

.col-italic {
    font-style: italic;
    color: #777 !important;
}


/* ===================================================
   LOCATION CONTENT
   =================================================== */
.loc-content {
    padding: 40px 0;
    background: #fff;
}

.two-col {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 90px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    align-items: start;
}

.loc-address-col address {
    font-size: 13px;
    font-style: normal;
    color: #555;
    line-height: 1.85;
    margin-bottom: 28px;
}

.map-embed {
    margin-top: 4px;
}

.map-placeholder {
    display: block;
    position: relative;
    width: 100%;
    height: 140px;
    background: #e8e6e0;
    overflow: hidden;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Satellite map embed (replaces the decorative placeholder). */
.map-frame {
    display: block;
    width: 100%;
    height: 140px;
    border: 0;
    margin-bottom: 12px;
    background: #e8e6e0;
}

.map-grid { position: absolute; inset: 0; }

.map-line {
    position: absolute;
    background: #d4d0c8;
}

.map-line.h {
    left: 0; right: 0;
    height: 1px;
    top: 18%;
}

.map-line.v {
    top: 0; bottom: 0;
    width: 1px;
    left: 18%;
}

.map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-pin { font-size: 18px; }

.view-map-btn {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.view-map-btn:hover { color: var(--brand-dark); }

.loc-intro {
    font-size: 13.5px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 32px;
}

.transport-item { margin-bottom: 26px; }

.transport-item h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #111;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.transport-item p {
    font-size: 13px;
    color: #555;
    line-height: 1.75;
}


/* ===================================================
   REVIEWS SLIDER  (one review at a time)
   =================================================== */
.reviews-slider {
    background: #fff;
    padding: 40px 0;
    border-top: 1px solid #e8e3d8;
    border-bottom: 1px solid #e8e3d8;
    text-align: center;
}

.reviews-title {
    text-align: center;
    margin: 0 auto 32px;
}

.reviews-slider-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 24px;
}

.review-stage {
    position: relative;
    min-height: 220px;
    overflow: hidden;
}

.review-slide {
    position: absolute;
    inset: 0;
    text-align: center;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

.review-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.review-text {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 28px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.review-author {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand);
    position: relative;
    display: inline-block;
}

.review-author::before,
.review-author::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--brand);
    vertical-align: middle;
    margin: 0 14px;
}

.review-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d8d2c4;
    background: #fff;
    color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.review-nav:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.review-nav:active { transform: scale(0.96); }

.review-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.review-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #d4cfc1;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.review-dot:hover { background: #a89d80; }

.review-dot.is-active {
    background: var(--brand);
    transform: scale(1.25);
}



/* ===================================================
   FOOTER  (property-brand background)
   =================================================== */
.main-footer {
    background: var(--brand);
    color: #fff;
    padding-top: 24px;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px var(--page-gutter) 18px;
}

.footer-collection { text-align: left; }

.footer-collection h4 {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 8px;
}

.footer-collection a {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-collection a:hover { color: #fff; }

.footer-policy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.footer-policy a {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-policy a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 12px var(--page-gutter);
}

.footer-bottom p {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-social {
    display: flex;
    gap: 14px;
    align-items: center;
}

.social-icon {
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.social-icon:hover { color: #fff; }


/* ===================================================
   BREADCRUMB  (inner pages)
   =================================================== */
.breadcrumb {
    background: #faf7f1;
    border-bottom: 1px solid #e8e3d8;
    padding: 14px 0;
}

.breadcrumb-list {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
}

.breadcrumb-list li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-list li + li::before {
    content: '\203A';
    margin-right: 8px;
    color: #b8b1a0;
    font-size: 14px;
    line-height: 1;
}

.breadcrumb-list a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-list a:hover { color: var(--brand); }

.breadcrumb-list li[aria-current="page"] {
    color: var(--brand);
}

@media (max-width: 768px) {
    .breadcrumb              { padding: 12px 20px; }
    .breadcrumb-list         { font-size: 13px; letter-spacing: 1.2px; }
}


/* ===================================================
   ROOMS DETAIL PAGE
   =================================================== */
.rooms-intro {
    padding: 48px var(--page-gutter) 24px;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
}

.rooms-intro-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 14px;
}

.rooms-intro-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.rooms-intro-text {
    font-size: 14px;
    line-height: 1.85;
    color: #555;
}

.room-detail {
    padding: 40px 0;
}

.room-detail:nth-of-type(even) {
    background: #faf7f1;
}

.room-detail-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.room-detail--reverse .room-detail-inner {
    grid-template-columns: 1fr 1.15fr;
}

.room-detail--reverse .room-detail-gallery {
    order: 2;
}

.room-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.room-detail-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.room-detail-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.room-detail-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.room-detail-info {
    padding: 6px 0;
}

.room-detail-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}

.room-detail-name {
    font-family: 'Raleway', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.room-detail-meta {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.room-detail-desc {
    font-size: 14px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 28px;
}

.amenities-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #444;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand);
    display: inline-block;
}

.amenities-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.amenities-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #444;
}

.amenity-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--brand);
    margin-top: 1px;
}

.room-detail-info .btn-book-large {
    width: auto;
    display: inline-block;
    padding: 14px 36px;
    margin: 0;
}

@media (max-width: 1100px) {
    .rooms-intro              { padding: 56px var(--page-gutter) 16px; }
    .rooms-intro-heading      { font-size: 30px; }
    .room-detail              { padding: 48px 0; }
    .room-detail-inner,
    .room-detail--reverse .room-detail-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .room-detail--reverse .room-detail-gallery { order: initial; }
    .room-detail-name         { font-size: 30px; }
}

@media (max-width: 768px) {
    .rooms-intro              { padding: 40px var(--page-gutter) 12px; }
    .rooms-intro-heading      { font-size: 24px; }
    .rooms-intro-text         { font-size: 15px; }
    .room-detail              { padding: 36px 0; }
    .room-detail-inner        { gap: 24px; }
    .room-detail-name         { font-size: 24px; }
    .room-detail-desc         { font-size: 15px; }
    .amenities-list           { grid-template-columns: 1fr; gap: 8px; }
    .amenities-list li        { font-size: 15px; }
    .room-detail-info .btn-book-large { width: 100%; padding: 14px; }
}


/* ===================================================
   HAMBURGER / MOBILE NAV
   =================================================== */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 12px;
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #111;
    border-radius: 4px;
    transition: transform 0.25s, opacity 0.25s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 998;
    padding: 20px 24px 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.mobile-nav.open { display: block; }

.mobile-nav ul {
    list-style: none;
    margin-bottom: 20px;
}

.mobile-nav ul li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav ul li a {
    display: block;
    padding: 14px 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
}

.btn-mobile-book {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--brand);
    color: #fff;
    padding: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 8px;
}


/* ===================================================
   RESPONSIVE — TABLET  (≤ 1100px)
   =================================================== */
@media (max-width: 1100px) {
    /* Narrow the shared side gutter so every section tracks it together */
    :root                   { --page-gutter: 36px; }

    .overview-container     { grid-template-columns: 1fr; gap: 40px; }
    .facilities-grid        { grid-template-columns: 1fr; gap: 48px; }
    .three-col              { grid-template-columns: 1fr 1fr; gap: 40px; }
    .two-col-fd             { grid-template-columns: 1fr 1fr; gap: 40px; }
    .two-col                { grid-template-columns: 1fr; gap: 40px; }

    .hotel-overview,
    .facilities-section,
    .fd-content,
    .loc-content            { padding: 40px 0; }

    .banner-overlay h1,
    .banner-overlay h2,
    .section-title          { font-size: 24px; letter-spacing: 6px; }
    .reviews-title          { margin-bottom: 32px; }

    /* Booking widget */
    .search-widget-wrap        { margin-top: 24px; }
    .bb-row                    { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .bb-row-top .bb-field:nth-of-type(1),
    .bb-row-top .bb-field:nth-of-type(2) { grid-column: auto; }
    .bb-row .bb-action         { grid-column: 1 / -1; }
    .bb-book-btn               { width: 100%; }
    .bb-footer                 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
    .bb-footer .bb-toggle,
    .bb-footer .bb-why,
    .bb-footer .bb-manage      { grid-column: auto; }
    .bb-footer .bb-manage      { margin-left: auto; }
}


/* ===================================================
   RESPONSIVE — MOBILE  (≤ 768px)
   =================================================== */
@media (max-width: 768px) {

    /* Shared side gutter shrinks for phones — every section follows */
    :root                   { --page-gutter: 20px; }

    /* Header is shorter on phones, so reduce the anchor-jump offset to match */
    html                    { scroll-padding-top: 78px; }

    /* Nav */
    .main-nav               { height: 64px; }
    .nav-links,
    .btn-header-book        { display: none; }
    .nav-hamburger          { display: flex; }
    .mobile-nav             { top: 64px; }

    /* Sub-nav: horizontal scroll */
    .sub-nav                { top: 64px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sub-nav::-webkit-scrollbar { display: none; }
    .sub-nav ul             { justify-content: flex-start; flex-wrap: nowrap; min-width: max-content; padding: 0 var(--page-gutter); }
    .sub-nav ul li a        { padding: 14px 16px; font-size: 13px; white-space: nowrap; }

    /* Hero — scale the name down to fit a phone and deepen the scrim/shadow
       so the white name stays legible over bright hero imagery. */
    .hero                   { height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 420px; }
    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.5) 0%,
            rgba(0,0,0,0.18) 45%,
            rgba(0,0,0,0.28) 100%
        );
    }
    .hero-content           { left: 20px; top: 20px; right: 20px; }
    .hotel-name             { font-size: 34px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
    .hero-location          { font-size: 11px; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }

    /* Section banners */
    .section-banner         { height: 45vh; min-height: 260px; }
    .banner-overlay h1,
    .banner-overlay h2      { font-size: 22px; letter-spacing: 5px; }
    .reviews-title          { margin-bottom: 36px; }

    /* Overview */
    .hotel-overview         { padding: 48px 0; }
    .overview-container     { grid-template-columns: 1fr; gap: 32px; }
    .overview-title         { font-size: 24px; margin-bottom: 22px; }
    .hotel-description      { font-size: 15px; }

    /* Booking widget */
    .search-widget-wrap     { margin-top: 20px; }
    .brand-booking          { gap: 14px; padding: 16px; }
    .bb-row                 { grid-template-columns: 1fr; gap: 14px; }
    .bb-row-top .bb-field:nth-of-type(1),
    .bb-row-top .bb-field:nth-of-type(2),
    .bb-row .bb-action      { grid-column: auto; }
    .bb-book-btn            { width: 100%; }
    .bb-footer              { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .bb-footer .bb-manage   { margin-left: 0; }
    .btn-book-large         { padding: 13px; font-size: 11px; }

    /* Facilities */
    .facilities-section     { padding: 48px 0; }
    .facilities-grid        { grid-template-columns: 1fr; gap: 36px; }
    .section-title          { font-size: 20px; letter-spacing: 4px; margin-bottom: 36px; }

    /* Food & Drink */
    .fd-content             { padding: 48px 0; }
    .two-col-fd             { grid-template-columns: 1fr; gap: 36px; }
    .three-col              { grid-template-columns: 1fr; gap: 36px; }

    /* Location */
    .loc-content            { padding: 48px 0; }
    .two-col                { grid-template-columns: 1fr; gap: 36px; }
    .map-placeholder        { height: 180px; }

    /* Reviews marquee */
    .reviews-slider         { padding: 48px 0; }
    .reviews-slider-inner   { grid-template-columns: 36px 1fr 36px; gap: 12px; }
    .review-stage           { min-height: 260px; }
    .review-text            { font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
    .review-author          { font-size: 11px; letter-spacing: 2px; }
    .review-author::before,
    .review-author::after   { width: 16px; margin: 0 10px; }
    .review-nav             { width: 36px; height: 36px; }
    .review-nav svg         { width: 18px; height: 18px; }

    /* Footer */
    .footer-main            { flex-direction: column; gap: 18px; padding: 20px 20px 16px; }
    .footer-policy          { align-items: flex-start; gap: 10px; }
    .footer-bottom-inner    { flex-direction: column; gap: 10px; padding: 12px 20px; text-align: center; }
    .footer-social          { justify-content: center; }

    /* Mobile legibility — raise body copy & small text to readable sizes */
    body                    { font-size: 16px; }

    .info-value             { font-size: 15px; }
    .feature-links          { font-size: 15px; }
    .fac-item dd            { font-size: 15px; }
    .fac-topic p            { font-size: 15px; }
    .col p                  { font-size: 15px; }
    .loc-address-col address { font-size: 15px; }
    .loc-intro              { font-size: 15px; }
    .transport-item p       { font-size: 15px; }

    /* Mobile drawer nav */
    .mobile-nav ul li a     { font-size: 16px; }
    .mobile-sub-item a      { font-size: 15px !important; }
    .mobile-group-label     { font-size: 11.5px; }

    /* Booking bar — 16px inputs prevent iOS zoom-on-focus. The native <select>
       renders slightly larger at the same px, so the dropdowns drop 1px to read
       the same size as the date/promo placeholders. */
    .bb-control input.bb-text,
    .bb-guests-trigger      { font-size: 16px; }
    .bb-control select      { font-size: 15px; }
    /* Taller control on mobile so the 16px text sits vertically centred with the
       (top:50%) field icon, and gives a comfortable touch target. */
    .bb-control             { height: 46px; }
    .bb-field label         { font-size: 13px; }
    .bb-price               { font-size: 13px; }
    .bb-toggle              { font-size: 13px; }
    .bb-sublink             { font-size: 13px; }

    /* Rooms & Guests popup */
    .gp-total-label         { font-size: 14px; }
    .gp-room-title          { font-size: 14px; }
    .gp-guest-label         { font-size: 14px; }
    .gp-num                 { font-size: 14px; }
    .gp-add                 { font-size: 14px; }
    .gp-done                { font-size: 14px; }
}


/* ===================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   =================================================== */
@media (max-width: 480px) {
    .hero                   { height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 380px; }
    .hotel-name             { font-size: 28px; }
    .hero-location          { font-size: 10px; letter-spacing: 1px; }

    .banner-overlay h1,
    .banner-overlay h2,
    .section-title          { font-size: 18px; letter-spacing: 3px; }

    .booking-widget         { padding: 16px; }
    .form-group label       { font-size: 13px; }
    .date-input             { font-size: 16px; }

    .fac-main-heading       { font-size: 18px; }
    .fac-topic h4           { font-size: 14px; }

    .nav-logo-img           { height: 64px; }

    .footer-collection h4   { font-size: 11px; }
    .footer-collection a    { font-size: 15px; }
    .footer-policy a        { font-size: 13px; }
    .footer-bottom p        { font-size: 13px; }

    /* Date picker fits screen */
    .date-picker-popup      { width: calc(100vw - 40px); }
}


/* ===================================================
   INLINE DATE PICKER
   =================================================== */
.date-picker-popup {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #e2dfd8;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: 20px;
    font-family: 'Raleway', sans-serif;
}

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0eee8;
}

.dp-month {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #222;
    text-transform: uppercase;
}

.dp-nav {
    background: none;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}

.dp-nav:hover { background: #f5f2eb; color: #111; }

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dp-day-name {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    color: #b8b1a0;
    padding: 6px 0 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dp-day {
    background: none;
    border: none;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    padding: 9px 0;
    text-align: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.dp-day:hover:not([disabled]) { background: #f5f2eb; }

.dp-day.dp-sel {
    background: #111;
    color: #fff;
}

.dp-day.dp-past {
    color: #ccc;
    cursor: not-allowed;
}


/* ===================================================
   PHOTO GALLERY MODAL
   =================================================== */
.js-open-gallery { cursor: pointer; }
.section-banner.js-open-gallery img { transition: transform 0.6s ease; }
.section-banner.js-open-gallery:hover img { transform: scale(1.03); }

.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 60px 80px;
    box-sizing: border-box;
}

.gallery-modal.is-open {
    display: flex;
}

.gallery-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.gallery-image {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-image.is-loaded {
    opacity: 1;
}

.gallery-caption {
    color: #f0ece2;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 18px;
    text-align: center;
    font-style: italic;
}

.gallery-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 12px;
    font-family: inherit;
    transition: opacity 0.2s;
    opacity: 0.85;
}

.gallery-close:hover { opacity: 1; }

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
}

.gallery-nav:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
}

.gallery-prev { left: 28px; }
.gallery-next { right: 28px; }

.gallery-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 600;
}

body.gallery-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .gallery-modal     { padding: 50px 16px; }
    .gallery-image     { max-height: 70vh; }
    .gallery-nav       { width: 42px; height: 42px; }
    .gallery-nav svg   { width: 22px; height: 22px; }
    .gallery-prev      { left: 10px; }
    .gallery-next      { right: 10px; }
    .gallery-close     { top: 12px; right: 14px; font-size: 30px; }
    .gallery-caption   { font-size: 15px; margin-top: 12px; }
    .gallery-counter   { bottom: 14px; font-size: 11px; letter-spacing: 2px; }
}


/* ===================================================
   SCROLL-REVEAL ANIMATIONS
   Paired with scroll-reveal.js. Initial hidden state is
   gated by html.reveal-on (added in <head> before paint)
   so there is no flash of unstyled content. ".rv-done" is
   added once the entrance finishes, releasing the element
   back to its natural styles (hover transitions, etc.).
   =================================================== */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery,
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy,
    .offer-card, .contact-card
):not(.rv-done) {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
    transition-delay: var(--rv-delay, 0s);
    will-change: opacity, transform;
}

/* RISE — text & content blocks fade up with a clearing blur */
html.reveal-on :is(
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy
):not(.rv-done) {
    transform: translateY(38px);
    filter: blur(3px);
}

/* SOFT — fade only (these cards already lift on hover) */
html.reveal-on :is(.offer-card, .contact-card):not(.rv-done) {
    filter: blur(2px);
}

/* ZOOM — feature imagery settles in from a slight scale */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery
):not(.rv-done) {
    transform: scale(1.06);
}

/* Revealed states */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery,
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy
):not(.rv-done).is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

html.reveal-on :is(.offer-card, .contact-card):not(.rv-done).is-revealed {
    opacity: 1;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-on :is(
        .hero-image, .brand-card, .section-banner, .room-detail-gallery,
        .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
        .contact-heading, .hero-content, .booking-bar, .info-row,
        .hotel-description, .section-title, .fac-left, .fac-topic,
        .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
        .transport-item, .rooms-intro, .room-detail-info,
        .footer-collection, .footer-policy, .offer-card, .contact-card
    ) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ===================================================
   BACK TO TOP BUTTON
   =================================================== */
.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease,
                background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, visibility 0.25s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.back-to-top svg { display: block; }

@media (max-width: 640px) {
    /* Touch devices have no hover state, so keep the button filled (solid
       brand background, white icon) for clear visibility over page content. */
    .back-to-top {
        right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px;
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
    }
}


/* ===================================================
   SECTION SPACING — 100px between major sections
   The hero + overlapping booking bar + sticky sub-nav
   stay as one integrated assembly (no gap added there),
   as does the rooms-page top banner.
   =================================================== */
.facilities-section,
.section-banner,
.fd-content,
.loc-content,
.reviews-slider,
.rooms-intro,
.room-detail,
.main-footer { margin-top: 24px; }

/* Top banner on the rooms page is the page hero — keep it flush. */
.section-banner.rooms-page-banner { margin-top: 0; }


/* ===================================================
   LEGAL / POLICY PAGES (Terms & Conditions, Hotel Policy)
   =================================================== */
.legal-content {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px var(--page-gutter) 8px;
}

.legal-intro {
    font-size: 14px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 8px;
}

.legal-block {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}

.legal-block:last-of-type {
    border-bottom: none;
}

.legal-block h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 16px;
}

.legal-block p {
    font-size: 14px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 14px;
}

.legal-block p:last-child { margin-bottom: 0; }

.legal-block ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.legal-block ul li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.85;
    color: #555;
    margin-bottom: 10px;
}

.legal-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.legal-block ul li strong { color: var(--ink); font-weight: 600; }

.legal-contact {
    background: #faf7f1;
    padding: 28px var(--page-gutter);
    border-radius: 4px;
    margin-top: 8px;
}

.legal-contact p { margin-bottom: 6px; }

.legal-updated {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .legal-content { padding: 32px var(--page-gutter) 4px; }
    .legal-block h3 { font-size: 14px; letter-spacing: 1.5px; }
    .legal-block p, .legal-block ul li { font-size: 15px; }
    .legal-intro { font-size: 15px; }
    .legal-updated { font-size: 13px; }
}


/* Booking widget is active on the property page — the form pre-selects this
   property's location + hotel (see booking-form.js); guests fill the rest. */