/* PeedsPark Club House — matches the old ls-park-clubhouse site's blue/gold/ink theme */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

html {
  overflow-x: hidden;
}

:root {
  --coral: #E7C96B;       /* old site's gold — CTA buttons */
  --coral-dark: #B18B35;  /* old site's darker gold — hover/eyebrow accents */
  --teal: #4F83B6;        /* old site's blue — links, secondary CTAs, chips */
  --teal-dark: #315F88;   /* old site's darker blue — hover states */
  --navy: #17202A;        /* old site's ink — headings, dark backgrounds */
  --gold: #E7C96B;
  --plum: #7B4F9E; /* Phase 10: Customers tile + repeat-customer badge (admin-only) */
  --brick: #C1440E; /* Phase 12: Manager Feed tile (admin-only) */
  --cream: #F7F7F4;       /* old site's paper background */
  --white: #FFFFFF;
  --text: #17202A;
  --muted: #68727D;
  --pastel-green: #D0F6CF
  --radius: 12px;
  --shadow: 0 8px 24px rgba(23, 32, 42, 0.12);
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Guard: some component rules below set display explicitly on elements
   (e.g. .panel-form label { display:flex }), which otherwise silently
   overrides the native [hidden] behaviour and makes a hidden field show up
   anyway (this hid the single-facility Check Availability dropdown but kept
   it visible on pool/ac-hall/non-ac-hall/lawn/badminton's Guests field). This
   rule makes [hidden] always win, sitewide, regardless of what else targets
   the element. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); text-decoration: none; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; color: var(--navy); }
h1, h2 { font-family: var(--font-heading); font-weight: 700; }
h2 { color: var(--teal-dark); } /* all h2 -> dark blue, sitewide — user request */
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.25rem; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.section-heading{margin-bottom:36px}
.intro h2,.section-heading h2,.contact-section h2,.enquiry-section h2{font-size:clamp(32px,4vw,48px)}

.eyebrow { color: var(--coral-dark); font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 8px; }
.eyebrow.dark{color:#4f83b6}
/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--coral); color: #171717; }
.btn-primary:hover { background: var(--coral-dark); color: #171717; }
.btn-blue { background: var(--teal); color: var(--white); }
.btn-blue:hover { background: var(--teal-dark); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn.btn-gold-gloss {
  background: linear-gradient(180deg, #fff2b8 0%, #efd071 44%, #dbaf40 48%, #f0cb66 100%);
  color: #382a0c;
  border: 2px solid #ffe9a2;
  border-radius: 999px;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.8), inset 0 -2px 2px rgba(126,85,13,.2), 0 3px 0 #a47820, 0 6px 12px rgba(0,0,0,.2);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.btn.btn-gold-gloss:hover {
  background: linear-gradient(180deg, #fff7d4 0%, #f7dd8a 44%, #e6bd54 48%, #f5d57a 100%);
  color: #382a0c;
}
.btn.btn-gold-gloss:focus-visible { outline: 3px solid #285c5c; outline-offset: 4px; }
.btn.btn-gold-gloss:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 2px rgba(126,85,13,.2), 0 1px 0 #a47820;
}
#enquiryForm #name { scroll-margin-top: 140px; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-nav { display: none; }

/* Phase 9: availability-result holds the slot-picker list (not just a
   status message), so it needs a visible neutral background even before
   the .ok/.busy variants below are applied. */
.availability-result { background: #F7F7F7; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; gap: 16px; }

/* Brand: circular logo photo + name/tagline stack, matching the old site */
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; border: 2px solid var(--teal-dark); flex-shrink: 0; }
.brand div { display: flex; flex-direction: column; line-height: 1.2; }
.brand strong { font-size: 1.05rem; color: var(--teal-dark); font-weight: 800; }
.brand span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Plain-text logo (used only in the footer, on the dark navy background) */
.logo { font-size: 1.4rem; font-weight: 900; color: var(--white); }
.logo span { color: var(--coral); }

.main-nav { display: none; gap: 24px; }
.main-nav a { color: var(--navy); font-weight: 600; font-size: 0.85rem; padding: 6px 0; border-bottom: 3px solid transparent; }
.main-nav a:hover { color: var(--coral-dark); }
.main-nav a.active { color: var(--coral-dark); border-bottom-color: var(--coral-dark); }
.nav-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; }

@media (min-width: 860px) {
  .main-nav { display: flex; }
  .btn-nav { display: inline-block; }
  .nav-toggle { display: none; }
}

/* Multi-page nav: mobile hamburger dropdown (Phase 10 site-structure rebuild) */
.main-nav.open {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 8px 20px 14px;
}
.main-nav.open a { padding: 12px 4px; border-bottom: 1px solid #F0EBE0; }
.header-inner { position: relative; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy), var(--teal-dark));
  color: var(--white);
  padding: 64px 0 56px;
  text-align: center;
}
.hero h1 { color: var(--white); font-size: clamp(2.4rem, 6vw, 4.375rem); max-width: 900px; margin-left: auto; margin-right: auto; }
.hero-highlight { color: var(--gold); }
.hero-sub { font-size: 1.125rem; opacity: 0.9; max-width: 560px; margin: 16px auto 28px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Facility-page hero: a real photo banner instead of a plain gradient —
   mirrors the old site's per-page banner. The homepage's own hero also
   uses this (with images/background.jpeg) to match the old site's photo
   hero exactly. */
.hero.hero-photo {
  background-size: cover; background-position: center;
  position: relative; padding: 90px 0 70px;
}
.hero.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,25,27,.55), rgba(6,25,27,.25));
}
.hero.hero-photo .container { position: relative; z-index: 1; }
.clubhouse-hero .clubhouse-hero-banner {
  display: block;
  margin: 0 auto 28px;
  width: min(100%, 250px);
  height: auto;
  border: 3px solid #d6ecec;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
}
@media (max-width: 600px) {
  .clubhouse-hero .clubhouse-hero-banner {
    width: min(100%, 170px);
    margin-bottom: 20px;
  }
}
.hero.hero-photo h1 { font-size: clamp(1.875rem, 5vw, 3.25rem); max-width: 800px; }

/* Homepage hero: text on the left, quick-jump buttons to the 3 facility
   pages on the right — replaces the separate Facilities section below. */
.hero-home .hero-split {
  display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
  text-align: left;
}
.hero-home .hero-text h1,
.hero-home .hero-text .hero-sub { margin-left: 0; margin-right: 0; }
.hero-home .hero-actions { justify-content: flex-start; }
.hero-links { display: flex; flex-direction: column; gap: 10px; }
/* "Gelling" with the hero photo: a frosted-glass tint (echoes the same
   dark overlay the photo itself sits under) instead of an opaque white
   card — the buttons now read as part of the photo, not pasted on top
   of it. Colour-coding moves from a flat left stripe to a full glowing
   ring + a tinted icon badge, so each stays bold/colourful (owner's
   design direction) without breaking the frosted look. */
.hero-link-btn {
  display: flex; align-items: center; gap: 14px;
  background: rgba(23, 32, 42, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--white);
  padding: 10px 20px; border-radius: var(--radius);
  font-weight: 700; font-size: 1.0rem;
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 26px rgba(6,14,20,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.hero-link-btn .facility-icon {
  font-size: 1.1rem; width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.16);
  transition: transform 0.18s ease, background 0.18s ease;
}
.hero-link-btn span:last-child { text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.hero-link-btn:hover {
  transform: translateY(-3px) translateX(2px);
  background: rgba(23, 32, 42, 0.62);
}
.hero-link-btn:hover .facility-icon { transform: scale(1.1); }
/* Fallback for browsers without backdrop-filter support: a solid tint
   keeps the white text readable instead of going transparent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-link-btn { background: rgba(23, 32, 42, 0.82); }
}
.hero-link-teal { border-color: rgba(79,131,182,0.65); }
.hero-link-teal .facility-icon { background: rgba(79,131,182,0.4); }
.hero-link-teal:hover { border-color: var(--teal); box-shadow: 0 14px 32px rgba(79,131,182,0.4); }
.hero-link-coral { border-color: rgba(231,201,107,0.65); }
.hero-link-coral .facility-icon { background: rgba(231,201,107,0.38); }
.hero-link-coral:hover { border-color: var(--coral); box-shadow: 0 14px 32px rgba(231,201,107,0.4); }
.hero-link-gold { border-color: rgba(177,139,53,0.7); }
.hero-link-gold .facility-icon { background: rgba(177,139,53,0.4); }
.hero-link-gold:hover { border-color: var(--coral-dark); box-shadow: 0 14px 32px rgba(177,139,53,0.4); }

@media (min-width: 760px) {
  .hero-home .hero-split { grid-template-columns: 1.15fr 0.85fr; }
}

/* About */
.about { padding: 70px 0; background: var(--white); }
.about.clubhouse-welcome { background: #DCECF7; }
.clubhouse-welcome .lead { font-size: 1rem; }
.about h2 { font-size: clamp(2rem, 4vw, 3rem); }
.lead { max-width: 640px; margin: 0 auto; font-size: 1.125rem; }

/* Facilities — light blue tint, matching the old site's #dcecf7 section */
.facilities { padding: 80px 0; background: #DCECF7; }
.card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.facility-card { background: var(--white); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border-top: 6px solid var(--coral); }
.facility-card.card-teal { border-top-color: var(--teal); }
.facility-card.card-gold { border-top-color: var(--coral-dark); }
.facility-card.card-navy { border-top-color: var(--navy); }
.facility-card.card-plum { border-top-color: var(--plum); }
.facility-card.card-brick { border-top-color: var(--brick); }
.facility-icon { font-size: 2.2rem; }
.facility-card h3 { margin-top: 12px; }
.facility-card .card-cta {
  display: inline-flex; align-items: center; margin-top: 14px; font-size: 0.85rem; font-weight: 700;
  color: var(--white); background: var(--teal); padding: 8px 14px; border-radius: 7px;
}
.facility-card:hover .card-cta { background: var(--teal-dark); }
.facility-card:hover { box-shadow: 0 12px 30px rgba(23,32,42,0.18); transform: translateY(-3px); }
a.facility-card { display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }

/* Amenities — separate, smaller-emphasis row below the 3 main facility
   cards (ported from the old site's "More at PeedsPark" section, which
   deliberately keeps parking/coaching out of the main Facilities cards). */
.amenities { padding: 8px 0 56px; background: #DCECF7; } /* light blue, matching the site's Facilities/#DCECF7 tint — user request */
.amenities-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 24px auto 0; }
@media (min-width: 640px) { .amenities-grid { grid-template-columns: 1fr 1fr; } }
.amenity-card { background: var(--white); border: 2px solid #EFE6D6; border-radius: var(--radius); padding: 22px; text-align: center; }
.amenity-card .facility-icon { display: block; margin-bottom: 10px; }
.amenity-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.amenity-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* Amenity cards with a photo background (owner-supplied photos) instead
   of a plain icon card, so they read as real places on site rather than
   just icons. No icon on these — the photo carries it. Bigger photo area,
   a compact caption strip at the bottom with a stronger gradient so the
   text stays legible over any photo. */
.amenity-card.amenity-card-photo {
  position: relative; background-size: cover; background-position: center;
  border: none; overflow: hidden; min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px;
}
@media (min-width: 640px) { .amenity-card.amenity-card-photo { min-height: 440px; } }
.amenity-card-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,32,42,0.05) 0%, rgba(23,32,42,0.92) 75%);
}
.amenity-card-photo > * { position: relative; z-index: 1; }
.amenity-card-photo h3 {
  color: var(--white); margin: 0 0 5px; font-size: 1.3rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.amenity-card-photo p {
  color: var(--white); opacity: 0.96; margin: 0; font-size: 0.92rem;
  line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,0.5); max-width: 42ch;
}

/* Events chips */
.events { padding: 80px 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.chip { background: var(--white); border: 2px solid var(--teal); color: var(--teal-dark); padding: 10px 18px; border-radius: 8px; font-weight: 600; }

/* Gallery — real photos (ported from the old site's images/ folder) in a
   bento-style grid (one larger "hero" tile among smaller ones, instead of a
   flat uniform grid) with a click-to-enlarge lightbox — user request. */
.gallery { padding: 80px 0; background: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; grid-auto-flow: dense; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
/* Hero tile: first photo (Front View) — full-width banner on mobile,
   a bigger 2x2 block on desktop, so the grid isn't perfectly uniform. */
.gallery-grid figure:first-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .gallery-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery-grid figure:nth-child(8) { grid-column: span 2; } /* Swimming Pool — second accent tile, desktop only */
}
.gallery-grid figure {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; background: #EFE6D6; box-shadow: var(--shadow);
  cursor: pointer; transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.gallery-grid figure:hover, .gallery-grid figure:focus-visible {
  box-shadow: 0 14px 30px rgba(23,32,42,0.28), 0 0 0 3px var(--coral);
  transform: translateY(-3px);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.gallery-grid figure:hover img, .gallery-grid figure:focus-visible img { transform: scale(1.06); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--white);
  background: linear-gradient(to top, rgba(23,32,42,0.85), rgba(23,32,42,0));
}
/* Small expand hint, centred, fades in on hover/focus/tap to signal the
   photo is clickable — pure CSS, no image asset needed. */
.gallery-grid figure::after {
  content: "⤢"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.7);
  width: 42px; height: 42px; border-radius: 50%; background: rgba(23,32,42,0.55);
  color: var(--white); font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
.gallery-grid figure:hover::after, .gallery-grid figure:focus-visible::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Lightbox — vanilla JS, toggled via the sitewide [hidden] rule at the top
   of this file. See js/gallery-lightbox.js. */
body.lightbox-open { overflow: hidden; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 999; background: rgba(23,32,42,0.94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.lightbox-content { position: relative; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox-content img {
  display: block; margin: 0 auto; max-width: 92vw; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption { color: var(--white); font-weight: 700; letter-spacing: 0.02em; margin-top: 16px; font-size: 0.95rem; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); color: var(--white); border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--coral); color: var(--navy); transform: scale(1.08); }
.lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.4rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.6rem; }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
@media (max-width: 640px) {
  .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

/* Merged Check Availability + Book flow (facility pages) — two-column
   layout matching the old site: Check Availability (date picker + live
   slot list) on the left, the booking form / confirmation on the right.
   Mobile-first: single stacked column below 860px, side-by-side above it. */
.availability-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; margin-top: 24px; }
@media (min-width: 860px) { .availability-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.availability-left, .availability-right { min-width: 0; }

/* Placeholder shown in the right column before a slot is picked, so the
   two columns read as a matched pair from the first paint instead of the
   right side looking empty/broken. */
.availability-placeholder {
  background: var(--white); border-radius: var(--radius); padding: 32px 24px;
  box-shadow: var(--shadow); text-align: center; color: var(--muted);
  border: 2px dashed #E4E0D8; font-weight: 600;
}

.slot-picker-form { max-width: 640px; margin: 0 auto; background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
/* Layout-only wrapper — the actual card look now comes from .panel-form on
   #pageBookingForm itself, so this matches the Quick Enquiry form's single
   white-card appearance instead of nesting a second card around it. */
.booking-details-wrap { max-width: 640px; margin: 0 auto; }
.booking-details-wrap .slot-label {
  max-width: 640px; margin: 0 auto 10px; font-weight: 700; color: var(--navy);
  background: var(--white); border-radius: var(--radius) var(--radius) 0 0;
  padding: 14px 20px 0; box-shadow: var(--shadow);
}
.booking-details-wrap .panel-form { margin-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; padding-top: 4px; }
.booking-details-wrap .change-slot-link { display: inline-block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--teal-dark); }

/* Confirmation panel's facility/date/slot recap line, added so "Booking
   request sent" shows the same date+slot info as the booking step above
   it, not just a bare reference code. */
.confirmation-panel .confirm-details { font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.confirmation-panel .confirm-details strong { color: var(--teal-dark); }

/* Booking / Enquiry forms — soft blue-lilac tint on the Enquiry section,
   matching the old site's #b0c7de enquiry band */
.booking, .enquire { padding: 80px 0; }
.booking { background: var(--white); }
.enquire { background: #B0C7DE; }
.panel-form { max-width: 640px; margin: 24px auto 0; background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-row > label { min-width: 0; } /* lets a long <select> option (e.g. "Exclusive (book the whole pool for your group)") shrink to fit a narrow column instead of forcing horizontal overflow — bug found while narrowing this form into the two-column facility layout */
.panel-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 14px; }
.form-row label { margin-bottom: 0; }
.panel-form input, .panel-form select, .panel-form textarea {
  width: 100%; max-width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid #E4E0D8; font-size: 1rem; font-family: inherit;
}
.panel-form input:focus, .panel-form select:focus, .panel-form textarea:focus { outline: none; border-color: var(--teal); }
.hp-field { position: absolute; left: -9999px; }
.availability-result, .confirmation-panel { margin-top: 16px; padding: 14px; border-radius: 10px; font-weight: 600; }
.availability-result.ok, .confirmation-panel { background: #E7F5EE; color: var(--teal-dark); }
.confirmation-panel { max-width: 640px; margin: 24px auto 0; padding: 24px; background: var(--white); box-shadow: var(--shadow); }
.availability-result.busy { background: #FDECEA; color: #C0392B; }

/* Phase 10: field-level messaging, ported from the old Apps Script site's
   UX fix — an inline message under the field (red + bold for an error),
   never a native browser popup. */
.form-note { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }
.form-note-error { color: #c0392b; font-weight: 700; font-size: 0.9rem; margin: 6px 0 0; }

/* Policies (used on the Privacy Policy page for the consolidated
   Booking/Payment/Cancellation section) */
.policies { padding: 40px 0 56px; }
.policy-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 640px) { .policy-grid { grid-template-columns: 1fr 1fr; } }
.policy-card { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

/* Footer */
footer{background:#315f88;color:#ffffff;padding:25px 0}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:13px}
.footer-inner span{color:#6e8798}
.footer-link{color:#ffffff;text-decoration:underline;opacity:.85}
.footer-link:hover{opacity:1}
.contact-emails{margin:12px 0 0;line-height:1.8;overflow-wrap:anywhere}
.contact-emails a{color:inherit;text-decoration:underline}
.site-footer .footer-contact-layout{display:grid;grid-template-columns:auto auto auto;align-items:start;gap:16px 30px;line-height:1.8}
.footer-contact-layout .contact-emails{margin:0}
.whatsapp-icon{width:24px;height:24px;flex-shrink:0}
.whatsapp-hero-link{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;align-self:center}
.whatsapp-hero-link .whatsapp-icon{width:48px;height:48px}
.whatsapp-hero-link:hover{transform:scale(1.06)}
.whatsapp-hero-link:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:8px}
[data-facility-whatsapp],[data-whatsapp-number]{display:inline-flex;align-items:center;gap:8px}
@media(max-width:760px){.site-footer .footer-contact-layout{grid-template-columns:1fr;gap:16px}}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 6px 18px rgba(0,0,0,0.25); z-index: 60;
}

/* Homepage hero: "open in Google Maps" link under the CTA buttons */
.hero .location { display: inline-block; margin-top: 20px; color: var(--white); font-weight: 600; font-size: 0.9rem; opacity: 0.9; }
.hero .location:hover { text-decoration: underline; opacity: 1; }

/* Homepage Quick Enquiry: two-column layout (intro text + form) */
.enquiry-grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .enquiry-grid { grid-template-columns: 0.9fr 1.1fr; } }
.contact-mini { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; font-weight: 700; }
.contact-mini a { color: var(--navy); }

/* Check Availability & Book (facility pages) — adapted from the old site's
   layout: wording on the left, the availability/booking flow in a white
   card on the right, on the old site's medium-blue band. Reuses
   .enquiry-grid/.contact-mini from the homepage's Quick Enquiry section for
   the column split, so only the section-specific colours are added here. */
.enquire.enquire-split { background: var(--teal); }
.facility-page {
  --teal: #397777;
  --teal-dark: #285c5c;
  background: #eff8f8;
}
.facility-page .site-header,
.facility-page .main-nav.open { background: #d6ecec; }
.facility-page .about,
.facility-page .intro { background: #eff8f8; }
.facility-page .about.clubhouse-welcome,
.facility-page .facilities { background: #d6ecec; }
.facility-page .site-footer { background: #87bcbc; color: #203f3f; }
.facility-page .site-footer .footer-link { color: #203f3f; }
.facility-page .site-footer .footer-inner span { color: #2e5050; }
.facility-page .eyebrow.dark { color: var(--teal-dark); }
.facility-page .enquire.enquire-split { background: #acd9d9; }
.facility-page .enquire-split .contact-mini a { color: var(--navy); }
.enquire-split .eyebrow { color: var(--navy); }
.enquire-split .enquiry-grid > div:first-child > p { color: var(--navy); }
.enquire-split .contact-mini a { color: var(--white); }
.enquire-split .form-card {
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: 0 20px 50px rgba(49, 95, 136, 0.15);
}
/* The .form-card is roughly half the section's width, well under the
   860px viewport breakpoint that normally splits .availability-grid into
   two side-by-side columns — without this override that split still fires
   off the viewport width (not the card's actual, much narrower, width),
   squeezing the date picker and booking form into two cramped columns.
   Stack them instead, and drop the date-picker form's own card look
   (background/shadow/padding) since the white .form-card already provides
   it — otherwise it reads as a card nested inside a card. */
.enquire-split .availability-grid { grid-template-columns: 1fr; margin-top: 0; }
.enquire-split .form-card #pageAvailabilityForm.panel-form {
  max-width: none; margin: 0; background: transparent; box-shadow: none; padding: 0;
}

.intro{background:#ffffff;padding:70px 0}
.dark-section{background:#dcecf7;color:#ffffff;padding:80px 0}
.dark-section { background: var(--white); } /* "Perfect for" section on index.html — user request */

.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
@media (max-width: 759px) {
  .intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .intro { padding: 40px 0; }
  .intro-grid p { margin-bottom: 0; }
}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.uses div{border:1px solid rgba(79,131,182,.25);padding:18px;border-radius:8px;text-align:center;font-weight:600;color:var(--navy)}

/* Reviews — public "what guests say" section + Write a Review form.
   Soft gold/cream tint deliberately distinct from the white Gallery
   above and the steel-blue Enquire band below, for visual rhythm. */
.reviews { padding: 80px 0; background: #DCECF7; } /* light blue, matches .amenities' #DCECF7 tint — user request */
.reviews-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: var(--white); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow); border-top: 4px solid var(--coral);
  display: flex; flex-direction: column; gap: 10px;
}
.review-card.featured { border-top-color: var(--teal); }
.review-card .review-stars { color: var(--coral-dark); font-size: 1.15rem; letter-spacing: 2px; }
.review-card .review-text { color: var(--navy); font-style: italic; line-height: 1.55; flex-grow: 1; }
.review-card .review-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-weight: 700; color: var(--teal-dark); font-size: 0.9rem;
  border-top: 1px solid #D3E4EE; padding-top: 10px;
}
.review-card .review-meta span:last-child { font-weight: 600; color: var(--muted); font-size: 0.8rem; text-align: right; }
.reviews-empty { text-align: center; color: var(--muted); font-style: italic; margin-top: 32px; }
.reviews-cta { text-align: center; margin-top: 28px; }
.reviews .panel-form { margin-top: 24px; }

/* Star-rating picker — big tap targets (mobile-first), gold fill on
   hover/selection, no library. */
.star-picker { display: flex; gap: 4px; margin-top: 6px; }
.star-btn {
  background: none; border: none; font-size: 2.1rem; line-height: 1;
  color: #D8D2C4; cursor: pointer; padding: 4px 6px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.star-btn:hover, .star-btn:focus-visible, .star-btn.selected { color: var(--coral-dark); }
.star-btn:hover, .star-btn:focus-visible { transform: scale(1.15); }
.section-top { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; } h2 { font:700 clamp(2rem,4vw,3.5rem)/1 'Playfair Display'; letter-spacing:-.05em; margin:0; } .section-top p { max-width:370px; margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.gallery-wrap { height:530px; display:grid; place-items:center; perspective:1500px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:radial-gradient(ellipse at center,rgba(59,110,82,.3),transparent 58%); } 
.cylinder { position:relative; width:240px; height:300px; transform-style:preserve-3d; animation:spin 24s linear infinite; } 
.gallery-wrap:hover .cylinder { animation-play-state:paused; } @keyframes spin { to { transform:rotateY(360deg); } } 
.photo { position:absolute; width:210px; height:280px; left:15px; top:10px; border-radius:13px; overflow:hidden; border:1px solid rgba(255,255,255,.3); box-shadow:0 16px 36px rgba(0,0,0,.45); cursor:pointer; background:var(--pastel-green); transition:filter .25s; } .photo:hover { filter:brightness(1.18); } .photo img { width:100%; height:100%; object-fit:cover; } .photo:nth-child(1){transform:rotateY(0deg) translateZ(290px)} .photo:nth-child(2){transform:rotateY(60deg) translateZ(290px)} .photo:nth-child(3){transform:rotateY(120deg) translateZ(290px)} .photo:nth-child(4){transform:rotateY(180deg) translateZ(290px)} .photo:nth-child(5){transform:rotateY(240deg) translateZ(290px)} .photo:nth-child(6){transform:rotateY(300deg) translateZ(290px)} 
.gallery-label { position:absolute; left:35px; bottom:29px; color:var(--pastel-green); font:11px 'DM Mono'; } .gallery-label b { color:var(--lime); } .hint { position:absolute; right:35px; bottom:29px; font-size:12px; color:var(--muted); }
  .brand-banner-section {
  background: var(--white);
  padding: 40px 20px 10px;
}

.brand-banner-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(23, 32, 42, 0.08);
}

.brand-banner-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-announcement{background:#e8f5ef;border-bottom:1px solid #b8d9ca;padding:22px 0}.announcement-inner{display:flex;align-items:center;gap:24px;min-width:0}.announcement-inner>img{width:240px;max-width:35%;max-height:180px;object-fit:contain;border-radius:12px}.announcement-text{min-width:0;flex:1;overflow-wrap:anywhere}.announcement-tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:#376654}.announcement-text h2{margin:6px 0;font-size:clamp(1.25rem,3vw,1.8rem)}.announcement-text p{margin:8px 0 14px;white-space:pre-line}.announcement-text p:empty{display:none}@media(max-width:600px){.announcement-inner{flex-direction:column;align-items:stretch;gap:12px}.announcement-inner>img{width:100%;max-width:100%;max-height:220px}}

.announcement-image-content{width:100%;min-width:0}.announcement-image-content>img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin-top:12px;border-radius:12px}
.gallery-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding-top:16px;padding-bottom:16px}
.gallery-controls select,.gallery-controls button{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;max-width:100%}
.gallery-controls button:disabled{opacity:.5}
.lightbox-close,.lightbox-prev,.lightbox-next{z-index:1}
.cylinder.gallery-single{animation:none;transform:none}
.cylinder.is-paused{animation-play-state:paused}
.cylinder.gallery-single .photo{transform:none!important}