/* =============================================
   Krabi La Playa Resort — Main Stylesheet
   Layout & palette follow Xcaliber design 03 exactly:
   navy #174164 (primary) + gold #C9AB69 (accent) on white / light grey,
   Montserrat throughout, colour used as accent only.
   ============================================= */

:root {
  /* Brand — design 03 */
  --brand:       #174164;   /* Xcaliber navy — primary */
  --brand-dark:  #0F2E47;
  --brand-light: #2A5F8A;

  /* Legacy aliases: stylesheet was authored with --red*; these keep every
     existing reference on-brand automatically. */
  --red:       var(--brand);
  --red-dark:  var(--brand-dark);
  --red-light: var(--brand-light);

  --cream:     #FFFFFF;     /* page background — clean white */
  --cream-dark:#F5F6F6;     /* alternating light-grey section */
  --white:     #FFFFFF;
  --dark:      #174164;     /* dark section BACKGROUNDS use design-03 navy */
  --ink:       #444444;     /* body text and headings */
  --gold:      #C9AB69;     /* Xcaliber gold accent */
  --gold-light:#DFC98E;
  --grey:      #787876;     /* design-03 body grey */
  --grey-light:#D3D3D3;
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --transition: 0.35s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---- Typography ---- */
h1,h2,h3,h4,h5 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
}
.section-label {
  font-size: 0.72rem;
  font-family: var(--font-body);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 0.6rem;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--brand);   /* design 03: navy headings */
  margin-bottom: 1rem;
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--grey);
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
}
.btn-outline:hover {
  background: var(--red);
  color: var(--white);
}
.btn-white {
  background: var(--white);
  color: var(--red);
}
.btn-white:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

/* ---- Book Now (always visible) ---- */
.book-now-fixed {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(90deg) translateX(50%);
  transform-origin: right center;
  background: var(--red);
  color: var(--white);
  padding: 0.7rem 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 999;
  transition: background var(--transition);
}
.book-now-fixed:hover { background: var(--red-dark); color: var(--white); }

/* ---- Navigation ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  /* clean, solid light bar (Pakasai-style) — dark logo + nav sit on off-white */
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(46,42,36,0.08);
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: #FFFFFF;
  box-shadow: 0 2px 20px rgba(46,42,36,0.10);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.75rem;
  max-width: 1400px;
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nav-logo-img {
  height: 66px;           /* artwork is cropped tight, so this reads larger than the number suggests */
  width: auto;
  max-width: 62vw;
  display: block;
}
.nav-logo .logo-top {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.08em;
  line-height: 1;
}
.nav-logo .logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.nav-logo .logo-at {
  color: var(--red-light);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links a {
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  transition: color var(--transition);
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 1.5px;
  background: var(--gold);
  transition: left var(--transition), right var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--brand); }
.nav-links a:hover::after,
.nav-links a.active::after { left: 0.6rem; right: 0.6rem; }
.nav-book {
  background: var(--red);
  color: var(--white) !important;
  padding: 0.55rem 1.05rem !important;
  text-shadow: none;
}
.nav-book:hover { background: var(--red-dark); }
.nav-book::after { display: none !important; }

/* Language dropdown */
.nav-lang { position: relative; }
.nav-lang-btn {
  display: flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.6rem;
}
.nav-lang-btn:hover { color: var(--brand); }
.nav-lang-menu {
  position: absolute; top: 100%; right: 0; margin: 0;
  list-style: none; padding: 0.3rem 0;
  min-width: 140px; background: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); border-radius: 4px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1000;
}
.nav-lang.open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang-menu a {
  display: block; padding: 0.55rem 1.1rem;
  font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none;
  color: var(--ink); transition: background .2s ease, color .2s ease;
}
.nav-lang-menu a::after { display: none; }
.nav-lang-menu a:hover { background: var(--cream); color: var(--red); }
.nav-lang-menu a.active { color: var(--red); font-weight: 700; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: var(--dark);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
.hero-bg.active { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.20) 45%,
    rgba(0,0,0,0.10) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 5rem 3rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 1rem;
}
.hero-content h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: var(--white);
  margin-bottom: 0.4rem;
}
.hero-content h1 .at-mark { color: var(--red-light); }
.hero-location {
  font-size: 1rem;
  color: var(--grey-light);
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
}
.hero-scroll .scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2s ease infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6); }
}

/* ---- Quick Booking Bar ---- */
.booking-bar {
  background: var(--red-dark);
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.booking-bar .bfield {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.booking-bar .bfield label,
.bk-strip-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.booking-bar .bfield input,
.booking-bar .bfield select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem 0.3rem 0;
  outline: none;
  min-width: 160px;
  cursor: pointer;
}
.booking-bar .bfield select option { background: var(--dark); color: var(--white); }
.booking-bar .bfield input:focus,
.booking-bar .bfield select:focus {
  border-bottom-color: var(--red-light);
}
.booking-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.15); }

/* ---- Sections ---- */
.section {
  padding: 6rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}
.section-center { text-align: center; }
.section-center .section-subtitle { margin: 0 auto 2.5rem; }

.bg-cream { background: var(--cream-dark); }
.bg-dark  { background: var(--dark); color: var(--white); }
.bg-dark .section-title { color: var(--white); }
.bg-dark .section-subtitle { color: var(--grey-light); }
.bg-red { background: var(--red); color: var(--white); }

/* Full-width wrapper for bg sections */
.section-wrap {
  width: 100%;
}
.section-wrap .section {
  padding: 6rem 3rem;
}

/* ---- Cards Grid ---- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.card {
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.card-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--grey-light);
  position: relative;
  overflow: hidden;
}
.card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: 1.8rem; }
.card-tag {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.card-title {
  font-family: var(--font-head);
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}
.card-text { font-size: 0.9rem; color: var(--grey); margin-bottom: 1.4rem; }
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-dark);
}
.card-price { font-family: var(--font-head); font-size: 1.3rem; }
.card-price .from { font-size: 0.7rem; color: var(--grey); display: block; }

/* ---- Feature Split ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 520px;
  align-items: stretch;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-img {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.8s ease;
}
.split:hover .split-img img { transform: scale(1.05); }
.split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  background: var(--white);
}
.split-content.dark {
  background: var(--dark);
  color: var(--white);
}
.split-content.dark .section-title { color: var(--white); }
.split-content.dark p { color: var(--grey-light); }

/* ---- Amenities Icons ---- */
.amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.amenity-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--grey);
}
.amenity-item svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }

/* ---- Gallery Grid ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 0.5rem;
}
.gallery-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23,65,100,0);
  transition: background var(--transition);
}
.gallery-item:hover::after { background: rgba(23,65,100,0.25); }

/* ---- Placeholder Images (colored blocks) ---- */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---- Stats Bar ---- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 4rem 3rem;
  background: var(--dark);
}
.stat-item {
  padding: 2rem;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-head);
  font-size: 3.5rem;
  color: var(--red-light);
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-top: 0.5rem;
  display: block;
}

/* ---- CTA Banner ---- */
.cta-banner {
  position: relative;
  padding: 7rem 3rem;
  text-align: center;
  overflow: hidden;
}
.cta-banner-bg {
  position: absolute;
  inset: 0;
  background: var(--dark);
}
.cta-banner-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cta-banner .content { position: relative; z-index: 1; }
.cta-banner h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--white);
  margin-bottom: 0.8rem;
}
.cta-banner p { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: 2rem; }

/* ---- Testimonials ---- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.testimonial {
  background: var(--white);
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  position: relative;
}
.testimonial::before {
  content: '"';
  font-family: var(--font-head);
  font-size: 6rem;
  color: var(--red);
  opacity: 0.15;
  position: absolute;
  top: 0.5rem; left: 1.5rem;
  line-height: 1;
}
.testimonial-text { font-style: italic; color: var(--grey); margin-bottom: 1.5rem; line-height: 1.8; }
.testimonial-author { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.testimonial-location { font-size: 0.75rem; color: var(--grey); }
.stars { color: #C9A84C; margin-bottom: 1rem; font-size: 0.9rem; }

/* ---- Page Header ---- */
.page-header {
  height: 420px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 65%, rgba(0,0,0,0.10) 100%);
}
.page-header-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.page-header-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--white);
}
.breadcrumb {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
}
.breadcrumb a { color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: var(--red-light); }
.breadcrumb .sep { margin: 0 0.5rem; }

/* ---- Room Detail ---- */
.room-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
.feature-box {
  background: var(--cream);
  border: 1px solid rgba(23,65,100,0.10);
  border-radius: 6px;
  padding: 1.15rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.2rem;
}
.feature-box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.55rem;
  color: var(--red);
}
.feature-box strong {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.feature-box span {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--grey);
}
/* On the dark Signature room: gold icons, lighter borders, readable text */
.split-content.dark .feature-box { border-color: rgba(255,255,255,0.14); }
.split-content.dark .feature-box .icon { color: var(--gold-light); }
.split-content.dark .feature-box strong { color: var(--white); }
.split-content.dark .feature-box span { color: rgba(255,255,255,0.6); }

/* Buttons sitting on dark green sections turn gold so they don't blend in */
.split-content.dark .btn-primary,
.bg-dark .btn-primary {
  background: var(--gold);
  color: var(--red-dark);
  border-color: var(--gold);
}
.split-content.dark .btn-primary:hover,
.bg-dark .btn-primary:hover {
  background: var(--gold-light);
  color: var(--red-dark);
}

/* ---- Map / Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}
.contact-info h3 {
  font-family: var(--font-head);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}
.contact-detail {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}
.contact-detail .icon {
  width: 40px; height: 40px;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.contact-detail p { font-size: 0.9rem; color: var(--grey); }
.contact-detail strong { color: var(--ink); display: block; margin-bottom: 0.2rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid var(--grey-light);
  background: var(--white);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--red); }
.form-group textarea { resize: vertical; min-height: 140px; }

.map-embed {
  width: 100%;
  height: 400px;
  border: none;
  margin-top: 3rem;
}

/* ---- Getting Here ---- */
.transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}
.transport-card {
  background: var(--white);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform var(--transition);
}
.transport-card:hover { transform: translateY(-4px); }
.transport-icon {
  width: 64px; height: 64px;
  background: var(--cream-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.2rem;
}
.transport-card h4 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}
.transport-card p { font-size: 0.88rem; color: var(--grey); }

/* ---- Offers ---- */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
}
.offer-card {
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform var(--transition);
}
.offer-card:hover { transform: translateY(-5px); }
.offer-badge {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  background: var(--red);
  color: var(--white);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  font-weight: 700;
}
.offer-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--grey-light); }
.offer-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.offer-card:hover .offer-img img { transform: scale(1.06); }
.offer-body { padding: 1.8rem; }
.offer-period { font-size: 0.75rem; color: var(--grey); margin-bottom: 0.4rem; letter-spacing: 0.08em; }
.offer-body h3 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 0.6rem; }
.offer-body p { font-size: 0.88rem; color: var(--grey); margin-bottom: 1.4rem; }
.offer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-dark);
}
.offer-price { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.offer-price small { font-size: 0.72rem; color: var(--grey); font-family: var(--font-body); display: block; }

/* ---- Explore Tabs ---- */
.explore-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.tab-btn {
  padding: 0.65rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--grey-light);
  background: transparent;
  color: var(--grey);
  transition: all var(--transition);
  font-family: var(--font-body);
}
.tab-btn.active, .tab-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.tab-content { display: none; }
.tab-content.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.8rem; }

/* ---- Cafe / Dining ---- */
.menu-section { margin-bottom: 3rem; }
.menu-section h3 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cream-dark);
  color: var(--red);
}
.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px dotted var(--cream-dark); gap: 1rem; }
.menu-item-name { font-weight: 600; font-size: 0.92rem; }
.menu-item-desc { font-size: 0.82rem; color: var(--grey); }
.menu-item-price { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* ---- Footer ---- */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.78);
  padding: 5rem 3rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo .logo-top {
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: var(--white);
  letter-spacing: 0.06em;
}
.footer-logo .logo-at { color: var(--red-light); }
.footer-logo p {
  font-size: 0.85rem;
  line-height: 1.8;
  margin-top: 1rem;
  color: rgba(255,255,255,0.55);
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.social-link {
  width: 36px; height: 36px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  transition: all var(--transition);
  text-decoration: none;
}
.social-link:hover {
  color: var(--gold-light);
  transform: translateY(-2px);
}
.footer-col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col ul a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--red-light); }
.footer-contact p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.6rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.footer-bottom {
  max-width: 1400px;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--red-light); }

/* ---- Lightbox ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,126,138,0.97);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 2rem;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

/* ---- Decorative Red Bar ---- */
.red-bar {
  height: 2px;
  background: var(--gold);   /* design 03: thin gold rule under headings */
  width: 60px;
  margin-bottom: 1.5rem;
}
.red-bar.center { margin-left: auto; margin-right: auto; }

/* ---- Responsive ---- */
/* Collapse the horizontal nav into the hamburger menu below 1200px */
@media (max-width: 1200px) {
  .nav-logo-img { height: 52px; }
  .nav-links { display: none; flex-direction: column; align-items: stretch; text-align: left; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; padding: 0.5rem 1.75rem 1.5rem; gap: 0; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 12px 24px rgba(46,42,36,0.18); border-top: 1px solid rgba(46,42,36,0.08); }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  /* All menu items left-aligned, dark text on white */
  .nav-links a:not(.nav-book) { display: block; text-align: left; padding: 0.95rem 0.25rem; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--ink); border-bottom: 1px solid rgba(46,42,36,0.08); text-shadow: none; white-space: normal; }
  .nav-links a:not(.nav-book)::after { display: none; }
  .nav-links a.active { color: var(--brand); font-weight: 700; }
  .nav-lang { width: 100%; }
  /* On mobile the language options show inline, so the toggle button is redundant */
  .nav-lang-btn { display: none; }
  .nav-lang-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0; min-width: 0; border-radius: 0; }
  .nav-lang-menu a { color: var(--grey); padding: 0.7rem 0.25rem 0.7rem 1.5rem; font-size: 0.9rem; border-bottom: 1px solid rgba(46,42,36,0.08); }
  .nav-lang-menu a:hover { background: var(--cream); color: var(--brand); }
  .nav-lang-menu a.active { color: var(--brand); font-weight: 700; }
  /* Book Now stays centered */
  .nav-links li:last-child { text-align: center; margin-top: 1.25rem; }
  .nav-book { display: inline-block; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse { direction: ltr; }
  .split-img { min-height: 320px; }
  .split-content { padding: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:first-child { grid-column: span 2; }
  .gallery-item:nth-child(4) { grid-column: span 1; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; padding: 0.5rem 1.5rem 1.5rem; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links a:not(.nav-book) { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(46,42,36,0.08); }
  /* Language switcher shows inline (no dropdown) inside the mobile menu */
  .nav-lang { width: 100%; }
  .nav-lang-btn { display: none; }
  .nav-lang-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0; min-width: 0; border-radius: 0; }
  .nav-lang-menu a { color: var(--grey); padding-left: 2rem; }
  .nav-lang-menu a:hover { background: var(--cream); color: var(--brand); }
  .nav-lang-menu a.active { color: var(--brand); font-weight: 700; }
  .nav-toggle { display: flex; }
  .nav-inner { padding: 1rem 1.5rem; }
  .hero-content { padding: 4rem 1.5rem; }
  .section { padding: 4rem 1.5rem; }
  .booking-bar { padding: 1.5rem; gap: 1rem; }
  .booking-divider { display: none; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.5rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .room-features { grid-template-columns: 1fr 1fr; }
  .book-now-fixed { display: none; }
  .page-header { height: 300px; }
  .cta-banner { padding: 5rem 1.5rem; }
}
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:first-child { grid-column: span 1; }
  .split-content { padding: 2rem 1.5rem; }
}

/* =============================================
   Homepage — Xcaliber design-06 style additions
   ============================================= */

/* Big "Welcome to" hero headline (light weight, wide tracking) */
.hero-welcome .hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}
.hero-welcome h1 {
  font-weight: 300;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-welcome h1 strong { font-weight: 600; }


/* Guest review cards (design-06 reviews band) */
.reviews-band { position: relative; }
.review-card {
  background: rgba(255,255,255,0.96);
  padding: 2rem 1.8rem;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
.review-card .stars { color: var(--gold); letter-spacing: 0.15em; margin-bottom: 0.8rem; }
.review-card p {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 1rem;
}
.review-card .who {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 600;
}

/* Offer strip used on the homepage */
.offer-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}
.offer-tile { position: relative; overflow: hidden; }
.offer-tile img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.6s ease; }
.offer-tile:hover img { transform: scale(1.06); }
.offer-tile .tile-body {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
  color: #fff; padding: 1.6rem 1.2rem 1.1rem;
}
.offer-tile .tile-body h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.2rem; }
.offer-tile .tile-body span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }

/* =============================================
   Thai / Chinese typography
   Montserrat has no Thai or Chinese glyphs, so those scripts fall back to a
   system font and render optically smaller than Latin at the same size.
   Montserrat stays FIRST in the stack (so Latin words like the resort name keep
   their look) and Noto picks up the Thai/Chinese characters per-glyph.
   ============================================= */
html[lang="th"] {
  --font-head: 'Montserrat', 'Noto Sans Thai', sans-serif;
  --font-body: 'Montserrat', 'Noto Sans Thai', sans-serif;
}
html[lang="zh"] {
  --font-head: 'Montserrat', 'Noto Sans SC', sans-serif;
  --font-body: 'Montserrat', 'Noto Sans SC', sans-serif;
}

/* Thai needs extra line-height for its ascenders/descenders (สระ + วรรณยุกต์) */
html[lang="th"] body { line-height: 1.85; }

/* --- Navigation: size up the non-Latin menus (there is spare room on desktop) --- */
html[lang="th"] .nav-links a,
html[lang="th"] .nav-lang-btn,
html[lang="zh"] .nav-links a,
html[lang="zh"] .nav-lang-btn {
  font-size: 0.98rem;
  font-weight: 500;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
/* uppercase does nothing for these scripts, and wide tracking hurts legibility */
html[lang="th"] .nav-links a,
html[lang="th"] .nav-lang-btn { letter-spacing: 0.01em; text-transform: none; line-height: 2; }
html[lang="zh"] .nav-links a,
html[lang="zh"] .nav-lang-btn { letter-spacing: 0.06em; text-transform: none; }

/* Book Now button keeps its emphasis */
html[lang="th"] .nav-book,
html[lang="zh"] .nav-book { font-size: 0.95rem; font-weight: 600; padding: 0.6rem 1.2rem !important; }

/* Slightly larger body copy so Thai/Chinese paragraphs read as easily as English */
html[lang="th"] .section-subtitle,
html[lang="zh"] .section-subtitle { font-size: 1.12rem; }
html[lang="th"] .card-text,
html[lang="zh"] .card-text { font-size: 0.95rem; }
html[lang="th"] .hero-location,
html[lang="zh"] .hero-location { font-size: 1.1rem; letter-spacing: 0.06em; }

/* Mobile menu items in Thai/Chinese */
@media (max-width: 1200px) {
  html[lang="th"] .nav-links a:not(.nav-book),
  html[lang="zh"] .nav-links a:not(.nav-book) { font-size: 1.02rem; }
}

/* On mid-size desktops (1200–1500px) the nav has less spare room, so ease the
   Thai/Chinese size bump slightly to keep all items on one line. */
@media (min-width: 1201px) and (max-width: 1500px) {
  html[lang="th"] .nav-links a,
  html[lang="th"] .nav-lang-btn,
  html[lang="zh"] .nav-links a,
  html[lang="zh"] .nav-lang-btn {
    font-size: 0.88rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  html[lang="th"] .nav-book,
  html[lang="zh"] .nav-book { font-size: 0.86rem; padding: 0.55rem 0.95rem !important; }
}

/* =============================================
   XCALIBER DESIGN 03 — layout language
   Matches https://xcaliberhost1.com/xcaliber-designs/design/03/
   Navy #174164 primary, gold #C9AB69 accent, Montserrat, white/light-grey base.
   ============================================= */

/* ---- Nav: design 03 (grey links, navy hover, gold-bordered BOOK NOW) ---- */
.site-header { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.site-header.scrolled { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.nav-links a { color: var(--grey); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; }
.nav-links a:hover, .nav-links a.active { color: var(--brand); }
.nav-links a::after { background: var(--gold); }
.nav-book {
  background: transparent !important;
  color: var(--brand) !important;
  border: 1px solid var(--gold);
  padding: 0.6rem 1.3rem !important;
  letter-spacing: 0.12em;
}
.nav-book:hover { background: var(--gold) !important; color: #FFFFFF !important; }

/* ---- Vertical RESERVATION tab (fixed, right edge) ---- */
.reservation-tab {
  position: fixed;
  top: 50%; right: 0;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  background: var(--gold);
  color: #FFFFFF;
  padding: 1.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  z-index: 950;
  cursor: pointer;
  border: none;
  transition: background var(--transition);
  box-shadow: -2px 0 8px rgba(0,0,0,0.12);
}
.reservation-tab:hover { background: var(--brand); }
@media (max-width: 768px) { .reservation-tab { display: none; } }

/* ---- Section headings: centred, uppercase, gold rule (design 03) ---- */
.d03-head { text-align: center; margin-bottom: 2rem; }
.d03-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-weight: 600;
}
.d03-head .rule { width: 60px; height: 2px; background: var(--gold); margin: 1rem auto 0; }
.d03-head p { color: var(--grey); max-width: 780px; margin: 1.2rem auto 0; font-size: 0.95rem; }

/* "Read More.." link */
.read-more {
  display: inline-block;
  color: var(--brand);
  border-bottom: 1px solid var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  transition: color var(--transition), border-color var(--transition);
}
.read-more:hover { color: var(--gold); border-color: var(--brand); }

/* ---- Two-column feature block (image one side, copy the other) ---- */
.d03-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.d03-split.reverse > .d03-split-img { order: 2; }
.d03-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d03-split-body h1,
.d03-split-body h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--brand);
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}
.d03-split-body .rule { width: 60px; height: 2px; background: var(--gold); margin-bottom: 1.4rem; }
.d03-split-body p { color: var(--grey); margin-bottom: 1rem; font-size: 0.95rem; }
@media (max-width: 900px) {
  .d03-split { grid-template-columns: 1fr; gap: 2rem; }
  .d03-split.reverse > .d03-split-img { order: 0; }
}

/* ---- Footer: design 03 (navy, address block + quick links + signup) ---- */
.d03-footer { background: var(--brand); color: rgba(255,255,255,0.85); padding: 3rem 2rem 0; }
.d03-footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 3rem;
}
.d03-footer h4 {
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem; font-weight: 700;
}
.d03-footer p, .d03-footer li, .d03-footer a { font-size: 0.86rem; line-height: 1.9; }
.d03-footer a:hover { color: var(--gold); }
.d03-footer-logo { height: 82px; width: auto; margin-bottom: 1rem; }
/* Address, phone, email and check-in times sit on one wrapping line instead of
   four stacked ones — the footer was running much taller than it needed to. */
.d03-footer-contact {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.1rem 0.6rem; margin-top: 0.4rem;
}
/* The separator trails its own item, so a wrap never leaves a dot stranded at
   the start of the next line. */
.d03-footer-contact span:not(:last-child)::after {
  content: ' \00b7'; color: rgba(255,255,255,0.35);
}
/* On phones every item takes its own line anyway, so the separators would just
   read as stray punctuation at the end of each line. */
@media (max-width: 600px) {
  .d03-footer-contact { display: block; }
  .d03-footer-contact span { display: block; }
  .d03-footer-contact span:not(:last-child)::after { content: none; }
}
.d03-signup { display: flex; gap: 0; margin-top: 0.8rem; max-width: 320px; }
.d03-signup input {
  flex: 1; padding: 0.7rem 0.9rem; border: none; font-family: var(--font-body); font-size: 0.85rem;
}
.d03-signup button {
  background: var(--gold); color: #fff; border: none; padding: 0.7rem 1.2rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background var(--transition);
}
.d03-signup button:hover { background: #FFFFFF; color: var(--brand); }
.d03-footer-bottom {
  max-width: 1200px; margin: 2rem auto 0; padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.76rem; color: rgba(255,255,255,0.6);
}
@media (max-width: 900px) { .d03-footer-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---- Hero, design 03: plain full-bleed carousel, no headline, no dark scrim ---- */
.hero-plain { align-items: flex-end; }
.hero-plain .hero-overlay { display: none; }
.hero-plain .hero-scroll { margin: 0 auto 2.5rem; }
/* the fixed header sits on white, so the hero starts below it */
.hero-plain { margin-top: 0; }

/* =============================================
   RESERVATION popup (design 03)
   The vertical gold tab toggles this panel: check-in / check-out / VIP code.
   ============================================= */
.reservation-panel {
  position: fixed;
  top: 110px;
  right: 60px;                 /* clear of the vertical tab */
  z-index: 960;
  width: min(560px, calc(100vw - 90px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.reservation-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

.reservation-panel .btn-close-top {
  display: block;
  margin: 0 0 0.9rem auto;
  background: var(--gold);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--transition);
}
.reservation-panel .btn-close-top:hover { background: var(--brand); }

.reservation-card {
  background: #FFFFFF;
  border: 2px solid var(--gold);
  padding: 1.8rem 2rem 2rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.reservation-card h3 {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--gold);
  margin-bottom: 1.4rem;
}
.resv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.resv-row:last-child { margin-bottom: 0; }
.resv-field { display: flex; flex-direction: column; justify-content: flex-end; }
.resv-field label {
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.resv-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid #CCCCCC;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: #FFFFFF;
}
.resv-field input:focus { outline: none; border-color: var(--gold); }
.resv-submit {
  width: 100%;
  background: var(--gold);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--transition);
}
.resv-submit:hover { background: var(--brand); }

/* screen-reader-only label */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Mobile: the vertical tab is hidden, so centre the panel if it is opened */
@media (max-width: 768px) {
  .reservation-panel {
    top: 90px; right: 16px; left: 16px;
    width: auto;
  }
  .resv-row { grid-template-columns: 1fr; }
}

/* =============================================
   Date picker — displays "21 Aug 26" (design 03 format)
   Readonly display field + hidden ISO value + popup calendar.
   ============================================= */
.dp { position: relative; }
.dp-display {
  width: 100%;
  cursor: pointer;
  background: #FFFFFF;
}
.dp-cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  width: 268px;
  background: #FFFFFF;
  border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 0.7rem;
}
.dp-cal[hidden] { display: none; }
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.dp-head span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.dp-nav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold);
  padding: 0 0.5rem;
  transition: color var(--transition);
}
.dp-nav:hover { color: var(--brand); }
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-dow {
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 0.3rem 0;
}
.dp-day {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.42rem 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink);
  transition: background var(--transition), color var(--transition);
}
.dp-day:hover:not(:disabled) { background: var(--gold); color: #FFFFFF; }
.dp-day.selected { background: var(--brand); color: #FFFFFF; font-weight: 700; }
.dp-day:disabled { color: #CFCFCF; cursor: default; }

/* the hero strip sits on a light bar — keep the calendar clear of its edge */
.booking-bar .dp-cal { top: calc(100% + 10px); }
@media (max-width: 600px) {
  .dp-cal { width: 100%; min-width: 240px; }
}

/* =============================================
   ROOM ROWS — accommodation layout (matches the Navinda Krabi build)
   Full-bleed room photo with a thumbnail strip, copy panel alongside.
   ============================================= */
.room-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 70px;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.room-row:last-child { margin-bottom: 0; }
.room-row:nth-child(even) .room-row-media { order: 2; }

.room-row-media { position: relative; min-height: 440px; overflow: hidden; }
.room-row-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.room-row-tag {
  position: absolute; top: 0; left: 0; z-index: 3;
  background: var(--gold); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.5rem 1.1rem;
}

.room-row-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 2px; padding: 2px;
  background: rgba(0,0,0,0.25);
  justify-content: flex-start;
  overflow-x: auto;            /* many photos scroll rather than squash */
  scrollbar-width: none;
}
.room-row-thumbs::-webkit-scrollbar { display: none; }
.room-row-thumbs button {
  /* Fixed 3:2 thumbs — matching the source photos — so they never stretch.
     Previously flex:1 made rooms with only 2–3 photos render 6:1 letterbox slices. */
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  aspect-ratio: 3 / 2;
  padding: 0; border: 0; cursor: pointer;
  background-size: cover; background-position: center;
  opacity: 0.55; transition: opacity 0.25s;
}
.room-row-thumbs button:hover,
.room-row-thumbs button.active { opacity: 1; }

.room-row-body {
  background: var(--white);
  padding: 44px 46px;
  display: flex; flex-direction: column; justify-content: center;
}
.room-row-body h2 {
  font-size: 1.8rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--brand); margin: 0 0 6px;
}
.room-row-body > p { font-size: 0.95rem; color: var(--grey); margin: 0 0 20px; }

.room-spec {
  display: flex; flex-wrap: wrap; gap: 0 22px;
  margin: 0 0 18px; padding: 0 0 16px;
  border-bottom: 1px solid rgba(46,42,36,0.12);
  color: var(--gold); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700;
}

.amenity-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px;
  list-style: none; margin: 0 0 20px;
}
.amenity-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.83rem; line-height: 1.6; color: var(--grey);
}
.amenity-list li svg { flex: 0 0 auto; margin-top: 5px; color: var(--gold); }

.room-occupancy { font-size: 0.83rem; color: var(--grey); margin: 0 0 20px; }
.room-occupancy strong { color: var(--brand); }

.room-row-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Thai / Chinese read better without the wide uppercase tracking */
html[lang="th"] .room-spec, html[lang="zh"] .room-spec { text-transform: none; letter-spacing: 0.02em; }
html[lang="th"] .amenity-list li, html[lang="zh"] .amenity-list li { line-height: 1.75; font-size: 0.88rem; }

@media (max-width: 900px) {
  .room-row { grid-template-columns: 1fr; margin-bottom: 46px; }
  .room-row:nth-child(even) .room-row-media { order: 0; }
  .room-row-media { min-height: 300px; }
  .room-row-body { padding: 32px 26px; }
  .room-row-thumbs button { width: 72px; height: 48px; }
  .amenity-list { grid-template-columns: 1fr; }
}

/* =============================================
   BOOK DIRECT PANEL (design 03)
   Privileges + the current special offer merged into ONE floating card, so the
   hero is not crowded by two competing boxes. Fixed bottom-LEFT, well clear of the
   vertical RESERVATION tab on the right edge. Dismissible;
   it returns on the next page load so the direct-booking message is never lost.
   ============================================= */
.direct-panel {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 941;
  width: 296px; background: var(--white);
  box-shadow: 0 12px 38px rgba(0,0,0,0.26);
  overflow: hidden;
  transition: opacity .3s ease, transform .3s ease;
}
.direct-panel[hidden] { display: none; }
.direct-panel.closing { opacity: 0; transform: translateY(14px); }

.direct-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gold); color: #fff; padding: 0.6rem 0.9rem;
}
.direct-panel-head span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.direct-panel-close {
  background: none; border: none; color: #fff; font-size: 1.15rem; line-height: 1;
  cursor: pointer; padding: 0 0 0 0.6rem; opacity: 0.85;
  transition: opacity var(--transition);
}
.direct-panel-close:hover { opacity: 1; }

.direct-panel-media { position: relative; display: block; }
.direct-panel-media img { width: 100%; height: 132px; object-fit: cover; display: block; }
.direct-panel-badge {
  position: absolute; right: 0; bottom: 0;
  background: var(--brand); color: #fff;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.32rem 0.8rem;
}

.direct-panel-body { padding: 0.95rem 1.05rem 0.9rem; }
.direct-panel-body h3 {
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.1rem;
}
.direct-panel-body .sub {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 0.7rem;
}
.direct-panel-body ul {
  display: grid; grid-template-columns: 1fr; gap: 0.22rem; list-style: none;
  margin: 0; padding: 0;
}
.direct-panel-body li {
  display: flex; gap: 0.45rem; align-items: flex-start;
  font-size: 0.75rem; line-height: 1.5; color: var(--ink);
}
.direct-panel-body li svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand); }
.direct-panel-body .note {
  margin-top: 0.6rem; font-size: 0.58rem; color: var(--grey); line-height: 1.5;
}

.direct-panel-foot {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.72rem 0.9rem;
  border-top: 1px solid rgba(46,42,36,0.10);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  transition: background var(--transition), color var(--transition);
}
.direct-panel-foot:hover { background: var(--brand); color: #fff; }

/* Thai and Chinese do not take the wide uppercase tracking gracefully */
html[lang="th"] .direct-panel-head span, html[lang="zh"] .direct-panel-head span,
html[lang="th"] .direct-panel-body h3,   html[lang="zh"] .direct-panel-body h3,
html[lang="th"] .direct-panel-body .sub, html[lang="zh"] .direct-panel-body .sub,
html[lang="th"] .direct-panel-foot,      html[lang="zh"] .direct-panel-foot {
  letter-spacing: 0.04em; text-transform: none;
}

/* Short screens: drop the image so the card never runs off the viewport */
@media (max-height: 720px) {
  .direct-panel-media { display: none; }
}

@media (max-width: 900px) {
  /* On phones a fixed card would swallow the screen — let it sit in the page
     flow below the hero instead, still dismissible. */
  .direct-panel {
    position: static; width: auto; box-shadow: none;
    border-bottom: 1px solid rgba(46,42,36,0.10);
  }
  .direct-panel-media { display: block; }
  .direct-panel-media img { height: 170px; }
}

/* =============================================
   CERTIFICATION LOGO STRIP (sustainability)
   Logos come in very different aspect ratios, so each sits in a fixed-height
   white card and is contained rather than cropped.
   ============================================= */
.cert-strip {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.2rem;
}
.cert-item {
  display: flex; flex-direction: column; align-items: center;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  padding: 1.4rem 1.3rem 1.5rem;
  width: 248px;
}
.cert-mark {
  display: flex; align-items: center; justify-content: center;
  height: 104px; width: 100%;
}
.cert-item img {
  max-width: 100%; max-height: 96px;
  width: auto; height: auto; object-fit: contain;
}
.cert-note {
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(46,42,36,0.10);
  font-size: 0.74rem; line-height: 1.6; color: var(--grey);
  text-align: center;
}
.cert-name {
  font-family: var(--font-head); font-size: 1.35rem;
  color: var(--brand); letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .cert-strip { gap: 0.9rem; }
  .cert-item { width: calc(50% - 0.45rem); padding: 1rem 0.8rem 1.1rem; }
  .cert-mark { height: 76px; }
  .cert-item img { max-height: 70px; }
  .cert-note { font-size: 0.68rem; }
}

/* WhatsApp click-to-chat QR on the contact page */
.wa-qr {
  display: inline-block; margin-top: 0.7rem;
  background: var(--white); padding: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  line-height: 0;
}
.wa-qr img { width: 120px; height: 120px; display: block; }

/* Footer email-signup status line */
.signup-msg {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gold);
}
.signup-msg[hidden] { display: none; }
.signup-msg.is-error { color: #F2B8B5; }

/* =============================================
   LEGAL / LONG-FORM TEXT (privacy policy)
   Narrow measure and generous leading — this is a long document people
   actually have to read.
   ============================================= */
.legal {
  max-width: 820px;
  margin: 0 auto;
  color: var(--grey);
  font-size: 0.94rem;
  line-height: 1.85;
}
.legal h2 {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(46,42,36,0.12);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.7rem 0 0.5rem;
}
.legal p { margin-bottom: 1rem; }
.legal ul {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.legal li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
}
.legal li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
}
.legal a { color: var(--brand); text-decoration: underline; word-break: break-word; }
.legal a:hover { color: var(--gold); }

/* Thai and Chinese need more leading and no wide tracking */
html[lang="th"] .legal, html[lang="zh"] .legal { line-height: 2; }
html[lang="th"] .legal h2, html[lang="zh"] .legal h2 {
  letter-spacing: 0.04em; text-transform: none; font-size: 1rem;
}

/* Named offer under the Book Direct panel's image. Lives outside .direct-panel-media
   so it survives on short screens, where the image is dropped. */
.direct-panel-offer {
  display: block;
  padding: 0.7rem 1.05rem 0;
  color: var(--ink);
}
.direct-panel-offer strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.direct-panel-offer span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  color: var(--grey);
}
.direct-panel-offer:hover strong { color: var(--gold); }
html[lang="th"] .direct-panel-offer strong,
html[lang="zh"] .direct-panel-offer strong {
  letter-spacing: 0.02em; text-transform: none;
}