/* web serif fallback: Cormorant Garamond used where Cochin isn't available */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap');

/* Minimal styles inspired by the Mamounia layout — prototype */
:root{
  --accent:#6f1d1d; /* burgundy */
  --header-bg:#3b0c0f; /* lighter, soft burgundy for header */
  --header-bg-rgba: 123,31,34; /* RGB for semi-transparent header (use with alpha) */
  --header-bg-dark:#3b0c0f; /* darker variant for overlay open state */
  --muted:#f5f3f2;
  --splash-bg: #efefec; /* soft grey similar to the original site (assumption) */
  --splash-logo-height: 220px; /* larger start size for a bolder entrance */
  --splash-logo-shadow: 0 12px 40px rgba(0,0,0,0.18);
  --text:#111;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Raleway,system-ui,Arial,sans-serif;color:var(--text);background:var(--splash-bg)}
.container{max-width:1100px;margin:0 auto;padding:2rem}

/* Splash / intro overlay */
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--splash-bg);z-index:9999;transition:opacity .6s ease}
/* start slightly bigger so the logo feels more present, while keeping the same scale animation */
.logo-wrap{height:var(--splash-logo-height);display:flex;align-items:center;justify-content:center;transform-origin:center center;will-change:transform;transform:translateZ(0) scale(1.22);background:var(--splash-bg)}
.logo-wrap img{height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block}
.splash.hidden{opacity:0;pointer-events:none;display:none}

/* Exiting state: fade out smoothly */
.splash.exiting{opacity:0;pointer-events:none}

/* Logo grow animation */
.splash.play .logo-wrap{animation:logoGrowSimple 1.25s cubic-bezier(.18,.8,.26,1) forwards}

@keyframes logoGrowSimple{
  /* start from the slightly larger baseline and scale a bit bigger than before */
  from{transform:translateZ(0) scale(1.22)}
  to{transform:translateZ(0) scale(1.70)}
}

/* Diagonal white sweep over logo */
.splash::after{content:"";position:absolute;left:-40%;top:-40%;width:180%;height:180%;pointer-events:none;transform:rotate(25deg);opacity:0;will-change:transform,opacity}
.splash.play::after{opacity:1;animation:shineMove 1.0s ease-out forwards}
@keyframes shineMove{
  0%{
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
    transform:translateX(-40%) rotate(25deg);
    opacity:.9;
  }
  100%{
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
    transform:translateX(60%) rotate(25deg);
    opacity:.9;
  }
}

/* Opening white curtain (center split) to mimic the Mamounia initial gap effect */
.curtains{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.curtain{position:relative;top:0;bottom:0;width:52%;height:100%;background:white;z-index:1000;transition:transform 1.2s cubic-bezier(.2,.9,.28,1);will-change:transform;transform:translateZ(0)}
.curtain-left{margin-right:-2%;transform:translateX(0)}
.curtain-right{margin-left:-2%;transform:translateX(0)}

.gap{width:12%;height:100%;z-index:1001;pointer-events:none}

.splash.play .curtain-left{transform:translateX(-120%)}
.splash.play .curtain-right{transform:translateX(120%)}

/* Removed the pseudo-element that created a visible horizontal line —
  the center gap is now achieved by two curtains that each cover 50% and
  slide away to reveal the logo. */

/* Make sure the curtains and logo animations coordinate */
/* The logo animation is defined earlier (1.2s). Do not override it here to avoid stutter. */


.siteHeader, .site-header{position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(var(--header-bg-rgba),0.72);backdrop-filter:blur(4px)}
.siteHeader-box{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;height:72px}

/* --- moved critical header/overlay overrides from inline into this stylesheet --- */
/* ensure header background and positioning (splash should sit above overlay while visible) */
.siteHeader, .site-header{background:var(--header-bg);color:#fff}
.splash{z-index:100050} /* splash must cover overlay until it hides */

/* left burger critical styling and slight visual tweaks */
/* Consolidated burger / menu-toggle styling */
.siteHeader-button.burgerIcon{display:flex;align-items:center;gap:1.6rem;background:transparent;border:0;color:white;padding:0.4rem 1rem 0.4rem 0;cursor:pointer;font-family:Raleway, Arial, sans-serif;font-weight:400}
.room-breadcrumb{display:flex;align-items:center;gap:.4rem;font-family:Raleway, Arial, sans-serif;font-size:16px;color:white;margin-left:.5rem}
.room-breadcrumb a{color:white;text-decoration:none;position:relative}
.room-breadcrumb a::after{content:"";position:absolute;left:50%;bottom:-5px;width:60%;height:3px;background:#d6b27a;border-radius:2px;transform:translateX(-50%) scaleX(0);transform-origin:center center;transition:transform .36s cubic-bezier(.2,.9,.28,1),opacity .18s ease;opacity:0}
.room-breadcrumb a:hover::after,.room-breadcrumb a:focus::after{transform:translateX(-50%) scaleX(1);opacity:1}
.siteHeader-button.burgerIcon:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:3px}
.burgerIcon-bars{display:inline-block;width:44px;height:36px;position:relative;pointer-events:auto;cursor:pointer}
.burgerIcon-bar{position:absolute;left:0;width:100%;height:1.5px;background:white;border-radius:2px;display:block;transition:transform .22s cubic-bezier(.2,.9,.28,1),opacity .18s ease,top .22s ease,bottom .22s ease,left .36s cubic-bezier(.2,.9,.28,1);pointer-events:none}
.burgerIcon-bar:nth-child(1){top:6px}
/* Middle bar: 20% shorter (1/5 smaller) and left-aligned by default. We'll animate "left" so it slides smoothly to the right on hover. */
.burgerIcon-bar:nth-child(2){top:50%;transform:translateY(-50%);width:80%;left:0}
.burgerIcon-bar:nth-child(3){bottom:6px}
.burgerIcon-labels{display:flex;align-items:center;pointer-events:auto}
.burgerIcon-label{font-family:Raleway, Arial, sans-serif;font-weight:400;font-size:18px;color:white;text-transform:none;letter-spacing:0.4px;pointer-events:auto}
.menu-suites-link{color:white;text-decoration:none;position:relative;display:inline-block;pointer-events:auto}
.menu-separator{color:#d6b27a;margin:0 0.3rem;pointer-events:none}
.menu-room-name{color:white;pointer-events:none}
.menu-suites-link::after{content:"";position:absolute;left:50%;bottom:-6px;width:60%;height:3px;background:#d6b27a;border-radius:2px;transform:translateX(-50%) scaleX(0);transform-origin:center center;transition:transform .36s cubic-bezier(.2,.9,.28,1),opacity .18s ease;opacity:0}
.menu-suites-link:hover::after,.menu-suites-link:focus::after{transform:translateX(-50%) scaleX(1);opacity:1}

/* Hover interaction: slide the middle bar to the right (visually right-aligned) */
.siteHeader-button.burgerIcon:hover .burgerIcon-bar:nth-child(2){left:20%;/* moves the 80% width bar so its right edge aligns with container */}

/* On the index page only: make the header fully transparent so the hero photo shows through the banner */
.siteHeader.isIndex {
  background: transparent;
  backdrop-filter: none;
  transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.siteHeader.isIndex.scrolled {
  background: #3b0c0f;
}

.siteHeader.isIndex .siteHeader-wrapperLogo {
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.7);  /* Start small */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.siteHeader.isIndex.scrolled .siteHeader-wrapperLogo {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);  /* Expand to full size */
}

.siteHeader.isIndex .siteHeader-wrapperLogo .siteHeader-logo {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* center logo visibility and sizing */
.siteHeader-wrapperLogo{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  height: 72px;
  width: 300px;  /* Fixed width to ensure consistent centering */
  pointer-events: none;  /* Allow clicks to pass through to buttons behind */
}

.siteHeader-wrapperLogo a {
  pointer-events: auto;  /* But enable clicks on the logo link itself */
}

.siteHeader-logo{height:48px;display:block;margin:0 auto} /* Added margin:0 auto for centering */

/* show only the text-only logo in the top banner to keep it perfectly centered */
.siteHeader-logoLink.isLinear{display:none}
.siteHeader-logoLink.isLogo{display:block}

/* Make the text-only PNG appear as a broken/soft white so it pops on the burgundy banner.
   This uses CSS filters — if the PNG has transparent background and dark artwork this will
   render it white. If the image has a solid non-transparent background the result may vary.
*/
.siteHeader-wrapperLogo .siteHeader-logo{
  -webkit-filter: brightness(0) invert(1) contrast(1.05);
  filter: brightness(0) invert(1) contrast(1.05);
  opacity: .98; /* slightly softened white */
}

/* overlay z-index should be lower than the splash by default, but rise when opened */
.site-overlay{z-index:5000}
.site-overlay.open{opacity:1;pointer-events:auto;transform:translateY(0);z-index:110000}

/* hide the inlined full nav used for desktop until user opens overlay */
.siteHeader-siteNav{display:none !important}

/* end moved block */

/* Burger (left) matching Mamounia look */
.siteHeader-button.burgerIcon.open{opacity:0;pointer-events:none;transition:opacity .22s ease}
.siteHeader-button.burgerIcon.open .burgerIcon-bar{opacity:0;transform:none}

/* Logo container in the centre */
.siteHeader-wrapperLogo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:0}
.siteHeader-logoLink{display:block}
.siteHeader-logo{height:36px;display:block}

.siteHeader-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.siteHeader-resalinks{display:flex;align-items:center;gap:1rem}
.siteHeader-resalinks a{color:rgba(255,255,255,0.95);text-decoration:none}

/* Center-expanding underline for header controls (Menu label and Book link) */
.siteHeader-button .burgerIcon-label,
.siteHeader-resalinks a,
.siteHeader-resalinks a span,
.isPartyLink{
  position:relative;
  display:inline-block;
}

.siteHeader-button .burgerIcon-label::after,
.siteHeader-resalinks a::after,
.isPartyLink::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px; /* adjust to sit just below text */
  width:60%;
  height:3px; /* thickness of the gold line */
  background:#d6b27a; /* warm gold */
  border-radius:2px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center center;
  transition:transform .36s cubic-bezier(.2,.9,.28,1),opacity .18s ease;
  opacity:0;
}

.siteHeader-button.burgerIcon:hover .burgerIcon-label::after,
.siteHeader-button.burgerIcon:focus .burgerIcon-label::after,
.siteHeader-resalinks a:hover::after,
.siteHeader-resalinks a:focus::after,
.isPartyLink:hover::after,
.isPartyLink:focus::after{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
}

/* Keyboard accessibility: remove native outlines and rely on visible underline + focus state */
.siteHeader-resalinks a:focus{outline:none}
.siteHeader-button.burgerIcon:focus .burgerIcon-label{outline:none}

/* Navigation panel (kept simple here) */
.siteHeader-siteNav{display:none}

/* Overlay menu styles reuse existing overlay rules */

/* Burger open -> X */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;height:72px}
.logo{height:52px}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
.center-logo img{height:34px;display:block;filter:brightness(1);}
.nav-right{display:flex;align-items:center;gap:1rem}

/* Overlay menu styles */
.site-overlay{position:fixed;inset:0;background:var(--header-bg-dark);color:white;z-index:99999;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .36s cubic-bezier(.2,.9,.28,1);transform:translateY(-6%);overflow-y:auto;-webkit-overflow-scrolling:touch}
.site-overlay.open{opacity:1;pointer-events:auto;transform:translateY(0)}

/* Scrollbar styling for the overlay menu */
.site-overlay{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.4) rgba(255,255,255,0.1)}
.site-overlay::-webkit-scrollbar{width:8px}
.site-overlay::-webkit-scrollbar-track{background:rgba(255,255,255,0.1)}
.site-overlay::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.4);border-radius:4px}
.site-overlay::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.6)}

.overlay-logo {
  text-align: center;
  padding: 60px 6% 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-logo a {
  display: inline-block;
  max-width: 100%;
}

.overlay-logo img {
  height: 96px; /* 80% of 120px */
  width: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

/* Responsive centering for overlay logo */
@media (max-width: 768px) {
  .overlay-logo {
    padding: 40px 4% 30px;
  }
}

@media (max-width: 480px) {
  .overlay-logo {
    padding: 30px 3% 20px;
  }
}

.overlay-nav{display:flex;flex-direction:column;gap:1.4rem;font-family:Raleway, Arial, sans-serif;font-size:44px;text-align:left;padding:0 6% 120px}
.overlay-nav a{color:white;text-decoration:none;padding:.2rem 0;display:inline-block}

/* Responsive font size for overlay menu on small screens */
@media (max-width: 480px) {
  .overlay-nav {
    font-size: 32px;
    gap: 1rem;
  }
}

/* Remove default browser focus ring (blue) for overlay links and provide
  a subtle, high-contrast focus indicator for keyboard users. Use
  :focus-visible so mouse clicks don't show the ring while keyboard
  navigation still gets a visible outline for accessibility. */
.overlay-nav a:focus{outline:none}
/* Make the focused menu item visually blend with the overlay background so the
  lighter focus square is not visible. We keep :focus-visible to target keyboard
  users but set the background to transparent (so the overlay's burgundy shows
  through). This removes the visible box while still allowing optional
  accessible indicators (e.g. underline) later if you want them. */
.overlay-nav a:focus-visible{box-shadow:none;background-color:transparent;border-radius:3px}
.overlay-close{position:fixed;top:20px;right:26px;background:var(--header-bg-dark);border:0;color:white;font-size:34px;line-height:1;cursor:pointer;z-index:100000;padding:8px;border-radius:4px}
.overlay-book{display:inline-block;margin-top:1rem;padding:.2rem 0;border:none;border-radius:0}

/* legacy selectors removed (consolidated into .siteHeader-button.burgerIcon rules) */
.booking-btn{background:rgba(255,255,255,0.98);border:1px solid rgba(0,0,0,0.06);padding:.6rem 1rem;border-radius:6px;font-weight:600}
.menu-btn{background:transparent;border:1px solid rgba(255,255,255,0.2);padding:.5rem 1rem;border-radius:6px;color:white}

.nav-links{gap:1rem;display:flex;align-items:center}
.nav a{color:rgba(255,255,255,0.95);text-decoration:none;padding:.25rem .5rem;border-radius:4px}
.nav a:hover{background:rgba(255,255,255,0.06)}

.hero{height:84vh;min-height:520px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:0}
.hero-slides{position:absolute;inset:0}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.hero-slides img.active{opacity:1}

/* On Art page, keep the top of the hero image fully visible (align crop to top) */
.art-page .hero-slides img{object-position:center top}

.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.35));pointer-events:none}
.hero-content{position:absolute;top:65%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2;max-width:90%;width:auto}
.hotel-name{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,'Times New Roman',serif;font-weight:700;font-size:clamp(28px,6vw,64px);letter-spacing:1px;margin:0}

.main-logo {
  position: absolute;
  top: -5vh;  /* Moved higher up to match the red X position */
  left: 50%;
  transform: translateX(-50%) scale(1);
  width: 480px;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
}

.main-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) contrast(1.2) brightness(1.1);
  -webkit-filter: brightness(0) invert(1) contrast(1.2) brightness(1.1);
}

/* Suites page: make the center logo a softer grey so it stands out without being stark white */
.suites-hero .main-logo img {
  /* Approximate the banner burgundy (#3b0c0f) using CSS filters */
  filter: invert(13%) sepia(22%) saturate(1640%) hue-rotate(338deg) brightness(90%) contrast(98%) drop-shadow(0 1px 6px rgba(0,0,0,0.18));
  -webkit-filter: invert(13%) sepia(22%) saturate(1640%) hue-rotate(338deg) brightness(90%) contrast(98%) drop-shadow(0 1px 6px rgba(0,0,0,0.18));
}

/* Add scroll transition effect with scale */
.main-logo.scrolled {
  opacity: 0;
  transform: translate(-50%, -20px) scale(0.7);
  pointer-events: none;
}

.hotel-name em{font-style:italic;font-weight:500;font-family:'Cochin LT Std',serif}
.kicker{margin-top:.6rem;font-size:1.1rem;opacity:.95}

.hero-info-section {
  background-color: #faf9f8;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(180, 150, 120, 0.15) 35px,
      rgba(180, 150, 120, 0.15) 36px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 35px,
      rgba(180, 150, 120, 0.15) 35px,
      rgba(180, 150, 120, 0.15) 36px
    );
  position: relative;
  padding: 4rem 0;
}

.hero-info-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.hero-tagline{
  font-family:'Cochin LT Std', 'Cormorant Garamond', Cochin, Arial, sans-serif;
  text-align:center;
  letter-spacing:1px;
  margin: 0 0 3rem 0;
  color:#111;
  font-weight:400;
  font-size:28px;
  position: relative;
  z-index: 1;
}

.hero-description {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  color: var(--accent);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.hero-description p {
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
}

.hero-description-intro {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, 'Times New Roman', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
}

/* Suites hero with diagonal "/" separators */
.hero-slash.suites-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--splash-bg); /* show site background color in the seams */
}

.hero-slash .slash-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: clamp(4px, 0.6vw, 8px); /* minimal vertical seams */
}

.hero-slash .slash-item {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  display: block;
}

.hero-slash .slash-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .7s ease, filter .35s ease;
  filter: brightness(0.85);
}

.hero-slash .slash-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
  pointer-events: none;
  transition: opacity .35s ease;
}

/* Suites hero captions: center the link text and raise it a bit; style like index .split-link */
.hero-slash .slash-caption{
  position:absolute;
  left:50%;
  bottom:10%; /* a little lower */
  transform:translateX(-50%);
  display:inline-block;
  /* inherit the .split-link typography but override color per request */
  color: var(--accent, #6f1d1d); /* lighter/brighter burgundy */
  text-shadow:none;
  text-align:center;
  font-size: clamp(18px, 2.4vw, 28px); /* larger, per request */
}

.hero-slash .slash-item:hover img,
.hero-slash .slash-item:focus img {
  transform: scale(1.10);
  filter: brightness(1.02);
}

.hero-slash .slash-item:hover::after,
.hero-slash .slash-item:focus::after {
  opacity: 0.6;
}

/* Suites page: change room caption color to white */
.suites-page .hero-slash .slash-caption {
  color: #fff;
}

/* Mobile / tablet: stack panels and remove skew for clarity */
@media (max-width: 900px) {
  .hero-slash .slash-track { flex-direction: column; gap: 10px; }
  .hero-slash .slash-item { height: 25vh; min-height: 140px; }
}

/* Room page hero */
.room-hero{position:relative;height:72vh;min-height:420px;overflow:hidden}
.room-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.38))}
.room-title{position:absolute;left:6%;bottom:8%;margin:0;color:#fff;font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;font-weight:400;font-size:clamp(28px,5vw,54px);letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.5)}

/* Room page full-screen hero (like index) */
.room-hero-full{height:100vh;min-height:560px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:0}
.room-hero-slides{position:absolute;inset:0}
.room-hero-slides .room-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.room-hero-slides .room-slide.active{opacity:1}
.room-hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.35));pointer-events:none}
.room-hero-content{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);text-align:center;color:#fff;z-index:2;max-width:90%;width:auto}
.room-name{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,'Times New Roman',serif;font-weight:400;font-size:clamp(36px,7vw,72px);letter-spacing:2px;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.5)}

/* Room amenities section */
.room-amenities-section{background:#faf9f8;padding:5rem 0;position:relative}
.room-amenities-section::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(180,150,120,0.15) 35px,rgba(180,150,120,0.15) 36px),repeating-linear-gradient(-45deg,transparent,transparent 35px,rgba(180,150,120,0.15) 35px,rgba(180,150,120,0.15) 36px);pointer-events:none}
.room-amenities-section::after{content:"";position:absolute;inset:0;background-color:rgba(255,255,255,0.5);pointer-events:none}
.room-amenities-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:900px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}
.amenities-layout h2,.amenities-facilities h2{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;font-weight:400;font-size:clamp(24px,3vw,32px);color:var(--accent);margin:0 0 2rem 0}
.amenities-layout ul,.amenities-facilities ul{list-style:none;padding:0;margin:0}
.amenities-layout li,.amenities-facilities li{font-size:18px;line-height:2;color:#555;padding:0.5rem 0;border-bottom:1px solid rgba(180,150,120,0.2)}
.amenities-layout li:last-child,.amenities-facilities li:last-child{border-bottom:none}
.room-book-cta{text-align:center;margin-top:3rem;position:relative;z-index:1}

/* Terms & Conditions reference on room pages */
.terms-reference {
  margin-top: 1.5rem;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.terms-reference a {
  color: var(--accent);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.terms-reference a:hover,
.terms-reference a:focus {
  color: #4a0d0d;
}

/* Room carousel section */
.room-carousel-section{background:#fff;padding:5rem 0}
.carousel-section-title{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;font-weight:400;font-size:clamp(32px,4vw,48px);color:var(--accent);text-align:center;margin:0 0 3rem 0}
.room-carousel-container{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;padding-bottom:1rem}
.room-carousel-container:active{cursor:grabbing}
.room-carousel-container::-webkit-scrollbar{height:8px}
.room-carousel-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.room-carousel-container::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}
.room-carousel-container::-webkit-scrollbar-thumb:hover{background:#4a0d0d}
.room-carousel-track{display:flex;gap:1.5rem;padding:0 max(2rem,calc((100vw - 1400px) / 2)) 2rem;min-width:min-content}
.room-carousel-item{flex:0 0 500px;height:400px;overflow:hidden;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,0.12);transition:transform 0.3s ease}
.room-carousel-item:hover{transform:translateY(-5px)}
.room-carousel-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.room-carousel-item:hover img{transform:scale(1.05)}

@media(max-width:900px){
  .room-amenities-grid{grid-template-columns:1fr;gap:3rem}
  .room-carousel-item{flex:0 0 85vw;height:320px}
  .room-hero-full{height:85vh;min-height:480px}
}

@media(max-width:600px){
  .room-carousel-item{flex:0 0 90vw;height:280px}
  .room-amenities-section{padding:3rem 0}
  .room-carousel-section{padding:3rem 0}
}

.room-content{padding-top:2rem;padding-bottom:3rem}

@media(max-width:900px){
  .hero-tagline{font-size:24px}
  .hero-description p {
    font-size: 16px;
  }
  .hero-description-intro {
    font-size: 19px;
  }
}

@media(max-width:900px){
  .hero-content{transform:translate(-50%, -50%);top:68%}
}

@media(max-width:520px){
  .hero-content{transform:translate(-50%, -50%);top:70%}
  .hotel-name{font-size:clamp(20px,6vw,40px)}
}

@media(max-width:400px){
  .hero-content{transform:translate(-50%, -50%);top:75%}
}

.booking-card{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:40;background:rgba(255,255,255,0.98);padding:1rem;border-radius:8px;box-shadow:0 10px 30px rgba(15,15,15,0.12);width:min(720px,calc(100% - 48px));display:none}
.booking-card.show{display:block}
.booking-card form{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.field-row{display:flex;flex-direction:column;min-width:120px}
.field-row label{font-size:12px;color:#444;margin-bottom:.25rem}
.field-row input,.field-row select{padding:.5rem;border:1px solid #ddd;border-radius:6px}
.primary{background:var(--accent);color:white;border:none;padding:.6rem 1rem;border-radius:6px;font-weight:700}

/* Horizontal Scrolling Carousel - Mamounia Style */
.sensory-journey {
  padding: 6rem 0 4rem;
  background: #fff;
}

.sensory-journey-intro {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  text-align: center;
}

.sensory-journey-intro h2 {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, 'Times New Roman', serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
}

.sensory-journey-intro p {
  font-size: 18px;
  line-height: 1.8;
  color: #666;
}

.carousel-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
}

.carousel-container:active {
  cursor: grabbing;
}

.carousel-container::-webkit-scrollbar {
  height: 8px;
}

.carousel-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb:hover {
  background: #4a0d0d;
}

.carousel-track {
  display: flex;
  gap: 2rem;
  padding: 0 max(2rem, calc((100vw - 1400px) / 2)) 2rem;
  min-width: min-content;
}

.carousel-item {
  flex: 0 0 600px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.carousel-item:hover {
  transform: translateY(-5px);
}

.carousel-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.carousel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.carousel-item:hover .carousel-image img {
  transform: scale(1.05);
}

.carousel-content {
  padding: 2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.carousel-content h3 {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 1rem 0;
}

.carousel-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  margin: 0 0 1.5rem 0;
  flex: 1;
}

.carousel-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.carousel-link:hover {
  color: #4a0d0d;
}

@media (max-width: 768px) {
  .sensory-journey {
    padding: 4rem 0 3rem;
  }

  .sensory-journey-intro {
    margin-bottom: 3rem;
  }

  .carousel-track {
    padding: 0 1rem 2rem;
  }

  .carousel-item {
    flex: 0 0 85vw;
  }

  .carousel-image {
    height: 300px;
  }

  .carousel-content {
    padding: 1.5rem 1rem;
  }

  .carousel-content h3 {
    font-size: 24px;
  }
}

.intro{padding:4rem 0;background:var(--muted);color:#222}

/* Split Scroller (4x 50/50 panels) */
.split-scroller {
  position: relative;
  width: 100%;
  height: 400vh; /* 4 panels, each 100vh scroll segment */
  background: #fff;
}

.split-scroller .split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* hide horizontal overflow while we translate */
}

.split-scroller .split-track {
  display: flex;
  height: 100%;
  width: 400vw; /* 4 panels side by side */
  will-change: transform;
  transition: transform 0.06s linear; /* tiny smoothing while scrolling */
}

.split-scroller .split-panel {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8%;
}

.split-text h3 {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--accent);
  margin: 0 0 1rem 0;
}

.split-text p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.8;
  color: #555;
  margin: 0 0 1.2rem 0;
}

.split-link {
  display: inline-block;
  position: relative;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-decoration: none;
}

/* Don't let the link stretch in the flex column; keep width to content */
.split-text .split-link {
  align-self: flex-start;
}

/* Match header link hover: center-expanding gold underline */
.split-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 60%;
  height: 3px;
  background: #d6b27a;
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center center;
  transition: transform .36s cubic-bezier(.2,.9,.28,1), opacity .18s ease;
  opacity: 0;
}

.split-link:hover::after,
.split-link:focus::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.split-image { position: relative; }
.split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile/tablet fallback: stack panels vertically, disable sticky scroll */
@media (max-width: 900px) {
  .split-scroller { height: auto; }
  .split-scroller .split-sticky { position: relative; height: auto; }
  .split-scroller .split-track { width: 100%; flex-direction: column; }
  .split-scroller .split-panel { width: 100%; height: auto; grid-template-columns: 1fr; }
  .split-text { padding: 2rem 6%; }
  .split-image { height: 52vh; }
}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:2rem}
.feature h3{margin-top:0}
.ghost{display:inline-block;margin-top:.6rem;border:1px solid #ddd;padding:.4rem .7rem;border-radius:6px;color:var(--text);text-decoration:none}

.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.5rem}
.room{background:white;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.room img{width:100%;height:220px;object-fit:cover}
.room h3{margin:0;padding:1rem}
.room p{padding:0 1rem 1rem;color:#444}

.gallery .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:6px}

/* Instagram Section */
.instagram-section {
  padding: 5rem 0;
  background: var(--muted);
}

.instagram-wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6%;
}

.insta-intro h3 {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, serif;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--accent);
  margin: 0 0 1rem 0;
}

.insta-intro p {
  color: #555;
  line-height: 1.8;
  margin: 0 0 1rem 0;
}

/* reuse split-link underline style for the handle link */
.insta-intro .split-link { margin-top: .25rem; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 12px;
}

.insta-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

/* shape variations for a subtle masonry feel */
.insta-item.wide { grid-column: span 2; }
.insta-item.tall { grid-row: span 2; }

.insta-item:hover img { transform: scale(1.05); }

.insta-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity .3s ease;
}

.insta-overlay img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.insta-item:hover .insta-overlay { opacity: 1; }

/* Optional third-party embed wrapper (e.g., LightWidget) */
.insta-embed { margin-top: 1.5rem; }
.insta-embed iframe { width: 100%; border: 0; overflow: hidden; display:block; min-height: 560px; }

@media (max-width: 1100px) {
  .instagram-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .insta-embed iframe { min-height: 420px; }
}

@media (max-width: 900px) {
  .insta-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
  }
}

@media (max-width: 600px) {
  .instagram-section { padding: 3rem 0; }
  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 8px;
  }
}

/* Footer */
.site-footer {
  background: var(--header-bg-dark);
  padding: 4rem 6% 1.5rem;
  color: white;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

/* Left: Socials */
.footer-socials {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
}

.footer-socials a {
  display: block;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-socials a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.footer-socials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Center: Logo */
.footer-logo {
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0 10px;
}

.footer-logo a {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 210px;
  margin: 0 auto;
}

.footer-logo a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.footer-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  display: block;
}

/* Right: Contact */
.footer-contact {
  text-align: right;
  font-family: Raleway, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.footer-contact p {
  margin: 0 0 0.8rem 0;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #d6b27a;
}

.footer-contact .vat {
  margin-top: 1.2rem;
  font-size: 12px;
  opacity: 0.7;
}

/* Responsive Footer */
@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .footer-contact {
    text-align: center;
  }

  .footer-logo {
    order: -1;
    align-items: center;
  }

  .footer-logo a {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 520px) {
  .site-footer {
    padding: 3rem 4%;
  }

  .footer-content {
    gap: 2.5rem;
  }

  .footer-socials a {
    width: 36px;
    height: 36px;
  }

  .footer-contact {
    font-size: 13px;
  }
}

@media(max-width:900px){
  .gallery .grid{grid-template-columns:repeat(2,1fr)}
  .nav{padding:1rem}
  .logo{height:44px}
  .booking-card{width:calc(100% - 32px);top:72px}
  .features{grid-template-columns:1fr}
  .room-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px){
  .hero{height:64vh}
  .gallery img{height:140px}
  .booking-card form{flex-direction:column;align-items:stretch}
}

/* Stack left header label (Suites) and the breadcrumb ONLY after scroll (header.scrolled) to avoid shift on initial load */
@media (max-width: 770px) {
  /* Initial (not scrolled): keep flex row so "Suites / Room" stays inline */
  /* Room pages: keep single line layout */
  .siteHeader.isIndex .siteHeader-box:has(.room-breadcrumb) {
    display:flex;
    padding:18px 36px;
  }
}

/* Art page: keep label in one line initially, wrap to two lines after scroll on small screens */
/* Previously page-specific label wrapping rules for art/bruges were removed.
   Titles will now display at full length on small screens since the logo
   is hidden on those pages. */

/* Contact page: make the left header label smaller only after scroll
   on mobile to avoid colliding with the centered logo */
@media (max-width: 770px) {
  .contact-page .siteHeader.isIndex.scrolled .burgerIcon-label {
    font-size: 16px; /* slightly smaller than the default 18px */
  }
}

/* ==============================
   Contact Page (Access + Form)
   ============================== */

/* Hero variant for pages that only need the big centered logo without a background image */
.hero.hero--logoOnly{height:64vh;min-height:420px;background:var(--splash-bg)}
.hero.hero--logoOnly::after{content:none}

.contact-access{
  background: #f7f4ef;
  background-image:
    radial-gradient(rgba(214,178,122,0.12) 1px, transparent 1px),
    radial-gradient(rgba(214,178,122,0.08) 1px, transparent 1px);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  padding: 4rem 0;
}

.access-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}
.access-intro{text-align:left;margin:0 0 1.25rem 0}
.access-icon{width:40px;height:40px;margin:0 0 .5rem 0;background:#d6b27a;border-radius:2px;opacity:.8}
.access-heading{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;color:var(--accent);font-weight:400;font-size:clamp(28px,4vw,44px);margin:0}

.faq{margin-top:1rem}
.faq-item{border-bottom:1px solid rgba(214,178,122,0.6);padding:.5rem 0}
.faq-item:first-child{border-top:1px solid rgba(214,178,122,0.6)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:16px;letter-spacing:.4px;color:#3b0c0f;font-weight:600;text-transform:uppercase;padding:1rem 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:#3b0c0f;font-weight:600;font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-answer{padding:0 0 1rem 0;color:#5a5252;line-height:1.7}

.access-map iframe{width:100%;height:520px;border:0;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.08)}

@media(max-width: 980px){
  .access-grid{grid-template-columns:1fr;gap:2rem}
  .access-map iframe{height:420px}
}

.contact-form-section{background:#fff;padding:4rem 0}
.contact-form-grid{display:grid;grid-template-columns:0.7fr 1.3fr;gap:3rem;align-items:start}
.contact-form-heading{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;color:var(--accent);font-weight:400;font-size:clamp(28px,4vw,40px);margin:0 0 2rem}

.contact-form .form-row{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.25rem}
.contact-form .form-row.two{grid-template-columns:1fr 1fr;gap:2rem}
.contact-form .form-field{display:flex;flex-direction:column}
.contact-form .form-field span{font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;font-style:italic;color:#6b5f5f;margin-bottom:.5rem}
.contact-form input,.contact-form textarea{border:none;border-bottom:1px solid rgba(59,12,15,0.6);padding:.6rem .2rem;background:transparent;font-size:16px;color:#222;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:var(--accent)}
.contact-form textarea{resize:vertical}
.contact-form .form-actions{margin-top:2rem}
.btn-outline{display:inline-block;width:100%;background:transparent;color:#3b0c0f;border:1px solid rgba(59,12,15,0.6);padding:1rem 1.25rem;border-radius:0;font-family:'Cochin LT Std','Cormorant Garamond',Cochin,serif;font-style:italic;font-size:18px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.contact-form .form-actions{display:block}
.btn-outline:hover{background:rgba(59,12,15,0.06);border-color:#3b0c0f}

.contact-form-image img{width:100%;height:auto;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.08);display:block}

@media(max-width:980px){
  .contact-form-grid{grid-template-columns:1fr;gap:2rem}
}

/* ========== Special Occasions Page - Mobile Responsive Layout ========== */
/* Override inline styles and reorder elements for better mobile experience */
@media(max-width:768px){
  .special-occasions-page .contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Show the flower image first (at the top) on mobile */
  .special-occasions-page .contact-form-grid .contact-form-image {
    order: -1;
  }
  
  /* Ensure text content spans full width with proper spacing */
  .special-occasions-page .contact-form-grid > div:first-child {
    order: 0;
    width: 100%;
  }
  
  /* Improve list item spacing and readability on mobile */
  .special-occasions-page .faq-item {
    padding: 0.5rem 0;
  }
  
  .special-occasions-page .faq-answer {
    padding: 0.75rem 0 !important;
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Ensure the flower image displays properly */
  .special-occasions-page .contact-form-image img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 6px;
  }
}

/* Extra small screens - optimize for compact readability */
@media(max-width:480px){
  .special-occasions-page .faq-answer {
    font-size: 15px;
    padding: 0.6rem 0 !important;
  }
  
  .special-occasions-page .contact-form-heading {
    font-size: 24px;
    margin-bottom: 1.5rem;
  }
  
  .special-occasions-page .contact-form-image img {
    max-height: 250px;
  }
}

/* ========== FastBooker Booking Overlay ========== */
.booking-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 120000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 100px 40px 20px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.booking-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.booking-overlay-content {
  position: relative;
  background: #efefec;
  border-radius: 8px;
  padding: 1.25rem 1.5rem 1rem;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  animation: bookingSlideIn 0.3s cubic-bezier(0.2, 0.9, 0.28, 1) forwards;
}

@keyframes bookingSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile: Full-screen overlay with dark background and logo */
@media (max-width: 640px) {
  .booking-overlay {
    background: rgba(59, 12, 15, 0.96);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  
  .booking-overlay-content {
    max-width: 460px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  }
  
  .booking-overlay-logo {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .booking-overlay-close {
    top: 16px;
    right: 20px;
    font-size: 36px;
    width: 32px;
    height: 32px;
  }
  
  .booking-overlay-title {
    font-size: 26px;
    margin: 0 0 1.5rem;
  }
}

.booking-overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-overlay-close:hover {
  transform: rotate(90deg);
}

.booking-overlay-logo {
  display: none;
}

.booking-overlay-logo img {
  height: 60px;
  width: auto;
}

.booking-overlay-title {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  color: var(--accent);
  text-align: center;
  margin: 0 0 0.75rem;
  letter-spacing: 0.3px;
}

#fastBookerForm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-overlay-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.booking-overlay-field label {
  font-family: 'Cochin LT Std', 'Cormorant Garamond', Cochin, serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0.3px;
}

.booking-overlay-field input {
  font-family: Raleway, Arial, sans-serif;
  font-size: 15px;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(59, 12, 15, 0.2);
  border-radius: 0;
  background: white;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.booking-overlay-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111, 29, 29, 0.1);
}

.booking-overlay-field input:hover {
  border-color: var(--accent);
}

.booking-overlay-actions {
  margin-top: 0.5rem;
}

.booking-overlay-submit {
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  font-family: Raleway, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.24s ease, transform 0.18s ease;
}

.booking-overlay-submit:hover {
  background: #8b2424;
  transform: translateY(-1px);
}

.booking-overlay-submit:active {
  transform: translateY(0);
}

/* jQuery UI datepicker customization to match The Burgundy style */
.ui-datepicker {
  font-family: Raleway, Arial, sans-serif !important;
  background: #efefec !important;
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
  position: fixed !important;
  z-index: 120001 !important;
}

.ui-datepicker-header {
  background: var(--accent) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.6rem !important;
}

.ui-datepicker-title {
  font-weight: 600 !important;
  color: white !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer !important;
  width: 2em !important;
  height: 2em !important;
  position: absolute !important;
  top: 0.3rem !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  transition: background 0.2s ease !important;
}

.ui-datepicker-prev {
  left: 0.4rem !important;
}

.ui-datepicker-next {
  right: 0.4rem !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none !important;
}

.ui-datepicker-prev::after,
.ui-datepicker-next::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 1.5em !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.ui-datepicker-prev::after {
  content: "‹" !important;
}

.ui-datepicker-next::after {
  content: "›" !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.ui-datepicker td a {
  text-align: center !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  transition: background 0.2s ease !important;
}

.ui-datepicker td a:hover,
.ui-datepicker td a.ui-state-hover {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

.ui-datepicker td a.ui-state-active {
  background: var(--accent) !important;
  color: white !important;
  font-weight: 600 !important;
}

@media (max-width: 640px) {
  .booking-overlay-content {
    padding: 2rem 1.5rem 1.5rem;
    width: 92%;
  }

  .booking-overlay-title {
    font-size: 22px;
  }

  .booking-overlay-logo img {
    height: 50px;
  }
}

/* Hide the logo in the banner when page width <= 430px to prevent it from covering the title */
@media (max-width: 430px) {
  .siteHeader-wrapperLogo {
    display: none !important;
  }
}
/* Hide the logo in the banner when page width <= 780px to prevent it from covering the title */
@media (max-width: 780px) {
  .siteHeader-wrapperLogo {
    display: none !important;
  }
}

/* Language Selector Styles */
.language-selector {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.language-selector label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.language-selector select {
  width: 100%;
  max-width: 200px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: Raleway, system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

.language-selector select:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.language-selector select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(111, 29, 29, 0.2);
}

.language-selector select option {
  background-color: var(--header-bg);
  color: #fff;
  padding: 0.5rem;
}

/* Mobile responsive adjustments for language selector */
@media (max-width: 770px) {
  .language-selector {
    text-align: center;
  }
  
  .language-selector select {
    margin: 0 auto;
  }
}

/* Scroll-to-Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 50px;
  height: 50px;
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  z-index: 9998;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

.scroll-to-top:hover {
  background: #8b2424;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.scroll-to-top:focus {
  outline: 2px solid #d6b27a;
  outline-offset: 3px;
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Mobile adjustments for scroll-to-top */
@media (max-width: 770px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 1.5rem;
    left: 1.5rem;
  }
  
  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .scroll-to-top {
    width: 42px;
    height: 42px;
    bottom: 1rem;
    left: 1rem;
  }
  
  .scroll-to-top svg {
    width: 18px;
    height: 18px;
  }
}

/* Gift Voucher CTA Section */
.gift-voucher-cta {
  background-color: var(--accent);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.gift-voucher-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: 'Cochin', serif;
}

.gift-voucher-cta p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.gift-voucher-cta .cta-button {
  display: inline-block;
  background-color: white;
  color: var(--accent);
  padding: 15px 40px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.gift-voucher-cta .cta-button:hover {
  background-color: #f8f8f8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 770px) {
  .gift-voucher-cta h2 {
    font-size: 2rem;
  }
  
  .gift-voucher-cta p {
    font-size: 1rem;
  }
  
  .gift-voucher-cta .cta-button {
    padding: 12px 30px;
    font-size: 1rem;
  }
}