/* ═══════════════════════════════════════════════════
   Soft Organic / Boutique — warm, rounded, hospitality-
   forward. Flat, calm section backgrounds, small solid-color
   "dot" markers act as recurring bullet points, pill-shaped
   badges carry every eyebrow/tag/button, and a geometric-sans +
   italic-serif pairing is used consistently for body vs. headline
   type. This is the warmest, least "gambling-serious" template —
   softer than a casino floor, closer to a boutique hotel.

   Palette tokens (--gold-flat, --accent2, --on-accent2, --c-bg,
   --c-s1..4, --md-sys-color-*, --text-*, --hairline) are injected
   per-generation by src/paletteEngine.js via {{PALETTE_STYLE}} —
   this file only defines how those tokens are USED, it never
   hard-codes a theme hex. Every further token this file needs
   (card surface, pill background, shadow) is derived
   FROM those base tokens with color-mix(), exactly the way
   editorial-minimal derives --hair/--sub/--ph1-3 from bg/ink/accent.
   ═══════════════════════════════════════════════════ */

:root {
  /* Typography — the signature mixed pairing: a geometric sans for
     body/UI copy, an italic serif reserved ONLY for headlines. */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body:    'Century Gothic', Futura, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Century Gothic', Futura, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --section-padding: 116px 0;
  --container-max:   1200px;
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 16px;

  /* Fallback defaults — always overridden per-build via PALETTE_STYLE injection */
  --c-bg: #1B2228;
  --c-s1: #202830;
  --c-s2: #262F38;
  --c-s3: #2C3540;
  --c-s4: #333D48;
  --gold-flat: #93A886;
  --accent2: #E0B08F;
  --on-accent2: #1B2228;
  --hairline: rgba(255,255,255,0.12);

  --ease: all 0.25s ease;

  /* Derived tokens — computed once, from the injected base tokens only.
     --c-s1..4 already blend the ink color into bg in rising proportion,
     which is exactly what a "card surface a shade lighter/darker than
     the page" needs in BOTH light and dark palettes without a mode flag. */
  --card: var(--c-s2);
  --card-soft: var(--c-s1);
  --pill: var(--gold-flat);
  --shadow-soft: rgba(0,0,0,0.16);
  --shadow-lift: rgba(0,0,0,0.22);
}

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

.p2elo_container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.p2elo_section { padding: var(--section-padding); position: relative; overflow: hidden; }


/* ── Pill buttons — everything rounded fully ─────────────────────── */
.p2elo_btn-filled,
.p2elo_btn-outlined,
.p2elo_btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: var(--ease);
  border: 1px solid transparent;
}
.p2elo_btn-filled {
  background: var(--gold-flat);
  color: var(--md-sys-color-on-primary, #2A231F);
  box-shadow: 0 14px 28px -12px var(--shadow-lift);
}
.p2elo_btn-filled:hover  { transform: translateY(-2px); box-shadow: 0 18px 32px -12px var(--shadow-lift); }
.p2elo_btn-filled:active { transform: translateY(0); }

.p2elo_btn-outlined {
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--hairline);
}
.p2elo_btn-outlined:hover { border-color: var(--gold-flat); color: var(--gold-flat); background: var(--card-soft); }

.p2elo_btn-text {
  background: transparent;
  color: var(--gold-flat);
  padding: 15px 6px;
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: 0;
}
.p2elo_btn-text:hover { opacity: 0.75; }

/* ── Cards — soft rounded, diffused shadow, no hard edges ────────── */
.p2elo_card-elevated {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px var(--shadow-soft);
}

/* ── Typography helpers ───────────────────────────── */
.p2elo_eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-accent2);
  background: var(--pill);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin-bottom: 18px;
}
.p2elo_section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-heading);
  margin-bottom: 20px;
  text-wrap: balance;
}
.p2elo_section-subtitle {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  opacity: 0.85;
}
.p2elo_section-body {
  font-size: 1.02rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.85;
  opacity: 0.9;
}
.p2elo_section-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Small solid-color round "dot" marker — the signature recurring bullet */
.p2elo_highlight-dot {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent2);
  margin: 0 auto 18px;
  flex-shrink: 0;
}
.p2elo_highlight-dot.p2elo_small {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin: 0 12px 0 0;
  vertical-align: middle;
}

/* ── Scroll-reveal animations ─────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════ NAVIGATION
   Desktop: a floating rounded "capsule" bar — the pill motif
   applied to the chrome itself. Mobile falls back to the shared
   full-width vertical dropdown pattern (behavioral chrome, not
   part of this template's creative differentiation). */
.p2elo_nav-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 20px 24px 0;
  transition: var(--ease);
}
.p2elo_nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 14px 12px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: var(--ease);
}
.p2elo_nav-header.scrolled .p2elo_nav-inner {
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-color: var(--hairline);
  box-shadow: 0 16px 36px -20px var(--shadow-soft);
}
.p2elo_nav-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-heading);
  white-space: nowrap;
  flex-shrink: 0;
}
.p2elo_nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 28px;
  row-gap: 6px;
  margin-left: auto;
}
.p2elo_nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--ease);
  padding: 4px 0;
  white-space: nowrap;
}
.p2elo_nav-links a:hover { color: var(--gold-flat); }

/* Burger */
.p2elo_nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.p2elo_nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-flat);
  transition: var(--ease);
}
.p2elo_nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.p2elo_nav-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.p2elo_nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════ HERO */
.p2elo_hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 0;
}
.p2elo_hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--c-bg) 74%, transparent) 0%,
    color-mix(in srgb, var(--c-bg) 48%, transparent) 45%,
    color-mix(in srgb, var(--c-bg) 80%, transparent) 100%
  );
}
.p2elo_hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p2elo_hero-copy {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p2elo_hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.5vw, 3.9rem);
  line-height: 1.12;
  color: var(--text-heading);
  margin-bottom: 20px;
  text-wrap: balance;
}
/* Sits over the hero photo — --text-heading (plain ink) instead of the
   softer --text-secondary blend, meaningfully darker on a light palette. */
.p2elo_hero-subtitle {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  color: var(--text-heading);
  max-width: 46ch;
  margin: 0 0 36px;
  line-height: 1.7;
}
.p2elo_hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.p2elo_hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-secondary);
  transition: var(--ease);
}
.p2elo_hero-scroll:hover { color: var(--gold-flat); }
.p2elo_scroll-arrow {
  display: block;
  font-size: 20px;
  animation: bounceY 2s ease-in-out infinite;
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ══════════════════════════════════ HIGHLIGHTS STRIP
   Floating rounded cards that overlap the hero's bottom seam —
   a classic boutique-hospitality device. */
.p2elo_highlights-strip {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding: 0 0 40px;
}
.p2elo_highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.p2elo_highlight-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 26px 50px -24px var(--shadow-lift);
}
.p2elo_highlight-icon {
  display: none; /* the round dot marker carries this role instead */
}
.p2elo_highlight-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.p2elo_highlight-desc {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════ ABOUT */
.p2elo_about-section { background: var(--c-bg); }
.p2elo_about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.p2elo_about-stats {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.p2elo_stat-chip {
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  flex: 1;
  min-width: 120px;
  text-align: center;
}
.p2elo_stat-number {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--gold-flat);
}
.p2elo_stat-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 6px;
  opacity: 0.85;
}
.p2elo_about-image-group { position: relative; }
.p2elo_about-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
}
.p2elo_about-image-inset {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 48%;
  aspect-ratio: 4/3;
  border: 6px solid var(--c-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 40px var(--shadow-lift);
}

/* ═══════════════════════════════════════════ ROOMS */
.p2elo_rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.p2elo_room-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.p2elo_room-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -22px var(--shadow-lift); }
.p2elo_featured-card { background: var(--card-soft); }
.p2elo_room-image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.p2elo_room-image-wrap img { transition: transform 0.6s ease; }
.p2elo_room-card:hover .p2elo_room-image-wrap img { transform: scale(1.04); }

.p2elo_room-feature-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.p2elo_room-popular-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--accent2);
  color: var(--on-accent2);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.p2elo_room-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.p2elo_room-stars { display: none; }
.p2elo_room-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.p2elo_room-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
  opacity: 0.9;
}
.p2elo_room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.p2elo_room-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-heading);
}
.p2elo_room-price small {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--text-secondary);
  font-style: normal;
}

/* ═══════════════════════════════════════════ CASINO
   A rounded framed photo beside a soft pill-tag feature list —
   organic/boutique deliberately avoids the "gambling-serious"
   full-bleed dark backdrop treatment other templates use here. */
.p2elo_casino-section { background: var(--c-bg); }
.p2elo_casino-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.p2elo_casino-image-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
}
.p2elo_casino-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 560px;
  opacity: 0.9;
}
.p2elo_casino-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.p2elo_casino-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-soft);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
}
.p2elo_cf-icon { display: none; }

/* ═══════════════════════════════════════════ DINING */
.p2elo_dining-section { background: var(--c-bg); }
.p2elo_dining-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
.p2elo_dining-image-group { position: relative; }
.p2elo_dining-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
}
.p2elo_dining-image-inset {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: 48%;
  aspect-ratio: 4/3;
  border: 6px solid var(--c-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 40px var(--shadow-lift);
}

/* ═══════════════════════════════════════ AMENITIES */
.p2elo_amenities-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.p2elo_amenities-image {
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
}
.p2elo_amenities-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.p2elo_amenities-list li {
  list-style: none;
  display: flex;
  align-items: center;
  background: var(--card-soft);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 0.98rem;
  color: var(--text-secondary);
  transition: var(--ease);
}
.p2elo_amenities-list li:hover { color: var(--text-heading); background: var(--card); transform: translateX(4px); }

/* ══════════════════════════════════ TESTIMONIALS */
.p2elo_testimonials-section { background: var(--c-bg); }

.p2elo_testimonial-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 2.1rem 2rem 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 48px -24px var(--shadow-soft);
}
.p2elo_testimonial-stars { display: none; }
.p2elo_testimonial-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-heading);
  line-height: 1.6;
  flex: 1;
}
.p2elo_testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.p2elo_testimonial-name {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.9rem;
}
.p2elo_testimonial-location {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* Swiper overrides */
.p2elo_testimonials-swiper { padding-bottom: 48px !important; padding-top: 6px !important; }
.swiper-pagination-bullet {
  background: var(--hairline);
  opacity: 1;
  width: 9px; height: 9px;
}
.swiper-pagination-bullet-active {
  background: var(--accent2);
}

/* ═══════════════════════════════ INTERLUDE (soft photo collage) */
.p2elo_interlude-section { padding: 40px 0; }
.p2elo_interlude-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p2elo_interlude-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -26px var(--shadow-soft);
}
.p2elo_interlude-tall,
.p2elo_interlude-wide,
.p2elo_interlude-square { aspect-ratio: 4/3; }
.p2elo_interlude-item img { transition: transform 0.6s ease; }
.p2elo_interlude-item:hover img { transform: scale(1.05); }

/* ═══════════════════════════════ MORE SERVICES */
.p2elo_more-services-section { background: var(--c-bg); }
.p2elo_more-services-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.p2elo_more-services-links a {
  display: inline-flex;
  align-items: center;
  background: var(--card-soft);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  transition: var(--ease);
}
.p2elo_more-services-links a:hover { background: var(--gold-flat); color: var(--md-sys-color-on-primary, #2A231F); }

/* ═══════════════════════════════════════════ CONTACT */
.p2elo_contact-section { background: var(--c-bg); }
.p2elo_contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}
.p2elo_contact-details { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; }
.p2elo_contact-item    {
  display: flex; align-items: center; gap: 14px;
  color: var(--text-secondary); font-size: 0.95rem;
  background: var(--card-soft);
  border-radius: 999px;
  padding: 12px 20px;
}
.p2elo_contact-icon    { display: none; }
.p2elo_contact-item a:hover { color: var(--gold-flat); }
.p2elo_contact-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Leaflet map — Leaflet's own CSS gives internal panes/controls z-index up to
   1000 (way above our fixed header); `isolation: isolate` contains that whole
   range inside this box so it can never render above our floating nav pill. */
.p2elo_hotel-map {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
  isolation: isolate;
}

/* Custom pin */
.p2elo_map-pin {
  width: 40px; height: 40px;
  background: var(--accent2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent2); font-size: 18px;
  border: 3px solid color-mix(in srgb, var(--c-bg) 40%, white 60%);
  box-shadow: 0 10px 22px var(--shadow-lift);
}

.leaflet-popup-content-wrapper {
  background: var(--c-s2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 16px 32px var(--shadow-soft) !important;
  color: var(--text-body) !important;
}
.leaflet-popup-content-wrapper strong { color: var(--gold-flat); }
.leaflet-popup-content-wrapper span   { font-size: 12px; color: var(--text-secondary); }
.leaflet-popup-tip-container .leaflet-popup-tip { background: var(--c-s2) !important; }
.leaflet-popup-close-button { color: var(--text-secondary) !important; }
.leaflet-popup-close-button:hover { color: var(--gold-flat) !important; }

.leaflet-bar { border-radius: 999px !important; overflow: hidden; }
.leaflet-bar a {
  background: var(--c-s2) !important;
  color: var(--gold-flat) !important;
  border-color: var(--hairline) !important;
}
.leaflet-bar a:hover { background: var(--c-s3) !important; }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--c-bg) 75%, transparent) !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* ═══════════════════════════════════════════ FOOTER */
.p2elo_footer {
  background: var(--card-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: 24px;
}
.p2elo_footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 72px 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.p2elo_footer-logo {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-heading);
  margin-bottom: 14px;
}
.p2elo_footer-brand p  { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; max-width: 240px; opacity: 0.85; }
.p2elo_footer-links h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-flat);
  margin-bottom: 18px;
}
.p2elo_footer-links ul { display: flex; flex-direction: column; gap: 12px; }
.p2elo_footer-links a  { font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); transition: var(--ease); }
.p2elo_footer-links a:hover { color: var(--gold-flat); }
.p2elo_footer-bottom {
  border-top: 1px solid var(--hairline);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.p2elo_footer-bottom p  { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); opacity: 0.85; }
.p2elo_gambling-notice  { font-size: 11px !important; }

/* ══════════════════════════════════ COOKIE BANNER
   A floating rounded card, not an edge-to-edge bar — fits the
   boutique motif of everything being an independent soft object. */
.p2elo_cookie-banner {
  position: fixed;
  bottom: 20px; left: 20px; right: 20px;
  z-index: 999;
  max-width: 900px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: 0 26px 52px -20px var(--shadow-lift);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.p2elo_cookie-banner.hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.p2elo_cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0;
}
.p2elo_cookie-banner-text {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  min-width: 240px;
  opacity: 0.9;
}
.p2elo_cookie-banner-text strong { color: var(--text-heading); opacity: 1; }
.p2elo_cookie-banner-text a { color: var(--gold-flat); text-decoration: underline; text-underline-offset: 3px; }
.p2elo_cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.p2elo_cookie-btn-accept,
.p2elo_cookie-btn-reject {
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
}
.p2elo_cookie-btn-accept {
  background: var(--gold-flat);
  color: var(--md-sys-color-on-primary, #2A231F);
}
.p2elo_cookie-btn-accept:hover { opacity: 0.86; }
.p2elo_cookie-btn-reject {
  background: var(--card-soft);
  color: var(--text-heading);
  border: 1px solid var(--hairline);
}
.p2elo_cookie-btn-reject:hover { border-color: var(--gold-flat); color: var(--gold-flat); }

/* ═══════════════════════════════ LEGAL / COMPLIANCE PAGES */
.p2elo_legal-page {
  padding: 160px 0 100px;
  min-height: 80vh;
}
.p2elo_legal-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.p2elo_legal-header h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 400;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.p2elo_legal-meta {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.85;
}
.p2elo_legal-notice {
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-bottom: 44px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.p2elo_legal-notice--warning {
  background: color-mix(in srgb, #C0524A 12%, var(--card-soft) 88%);
}
.p2elo_legal-notice--warning strong { color: #D68880; }
.p2elo_legal-warning {
  background: color-mix(in srgb, #C0524A 12%, var(--card-soft) 88%);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin: 16px 0 24px;
  font-size: 0.95rem;
  color: #D68880;
  line-height: 1.7;
}
.p2elo_legal-section {
  margin-bottom: 48px;
}
.p2elo_legal-section h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-heading);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.p2elo_legal-section h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 24px 0 12px;
}
.p2elo_legal-section p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 18px;
  opacity: 0.92;
}
.p2elo_legal-section a { color: var(--gold-flat); text-decoration: underline; text-underline-offset: 3px; }
.p2elo_legal-section a:hover { opacity: 0.8; }
.p2elo_legal-section ul,
.p2elo_legal-section ol {
  margin: 12px 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p2elo_legal-section ul { list-style: disc; }
.p2elo_legal-section ol { list-style: decimal; }
.p2elo_legal-section li { font-size: 1rem; color: var(--text-secondary); line-height: 1.75; opacity: 0.92; }
.p2elo_legal-section ul ul { margin-top: 8px; list-style: circle; }

.p2elo_legal-box {
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin: 16px 0 24px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* Legal table */
.p2elo_table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: inset -12px 0 8px -8px rgba(0,0,0,0.18); }
.p2elo_legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 24px;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-s2);
  border: 1px solid var(--hairline);
}
.p2elo_legal-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent2);
  background: var(--pill);
  border-right: 1px solid color-mix(in srgb, var(--on-accent2) 20%, transparent);
}
.p2elo_legal-table thead th:last-child { border-right: none; }
.p2elo_legal-table tbody tr { border-bottom: 1px solid var(--hairline); }
.p2elo_legal-table tbody tr:last-child { border-bottom: none; }
.p2elo_legal-table tbody td {
  padding: 14px 18px;
  color: var(--text-secondary);
  vertical-align: top;
  line-height: 1.6;
  border-right: 1px solid var(--hairline);
}
.p2elo_legal-table tbody td:last-child { border-right: none; }

/* Responsible gambling helplines */
.p2elo_helplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}
.p2elo_helpline-card {
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.p2elo_helpline-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 10px;
}
.p2elo_helpline-card p { font-family: var(--font-ui); font-size: 0.85rem; margin-bottom: 4px; color: var(--text-secondary); opacity: 0.9; }
.p2elo_helpline-card strong { color: var(--gold-flat); opacity: 1; }
.p2elo_helpline-card a { font-size: 0.85rem; color: var(--gold-flat); text-decoration: underline; }

/* Footer legal id */
.p2elo_footer-legal-id {
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
  margin-top: 8px !important;
  opacity: 0.85;
}

/* ═══════════════════════════════════ BOOKING MODAL */
.p2elo_bm {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.p2elo_bm[hidden] { display: none; }

.p2elo_bm-overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, black 78%, transparent);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.p2elo_bm.open .p2elo_bm-overlay { opacity: 1; }

.p2elo_bm-dialog {
  position: relative; z-index: 1;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 46px 42px;
  width: 100%; max-width: 460px;
  max-height: 92vh; overflow-y: auto;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
  box-shadow: 0 40px 80px -24px var(--shadow-lift);
}
.p2elo_bm.open .p2elo_bm-dialog { opacity: 1; transform: none; }

.p2elo_bm-close {
  position: absolute; top: 18px; right: 20px;
  background: var(--card-soft); border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}
.p2elo_bm-close:hover { color: var(--gold-flat); }

.p2elo_bm-header        { margin-bottom: 22px; }
.p2elo_bm-header h2     { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.7rem; color: var(--text-heading); margin-bottom: 6px; }
.p2elo_bm-subtitle      { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); opacity: 0.85; }

.p2elo_bm-room-tag {
  display: inline-block;
  background: var(--pill);
  color: var(--on-accent2);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.p2elo_bm-room-tag[hidden] { display: none; }

.p2elo_bm-field         { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.p2elo_bm-field label   { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text-secondary); opacity: 0.85; }
.p2elo_bm-field input,
.p2elo_bm-field select  {
  background: var(--card-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-ui); font-size: 0.9rem;
  color: var(--text-body); outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none; appearance: none;
}
.p2elo_bm-field input::placeholder { color: var(--text-secondary); opacity: 0.55; }
.p2elo_bm-field input:focus,
.p2elo_bm-field select:focus  { border-color: var(--gold-flat); }
.p2elo_bm-field input.error   { border-color: #C0524A; }

.p2elo_bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.p2elo_bm-submit {
  width: 100%; padding: 15px; margin-top: 8px;
  background: var(--gold-flat); color: var(--md-sys-color-on-primary, #2A231F);
  border: none; border-radius: 999px;
  font-family: var(--font-ui); font-size: 13px;
  font-weight: 700;
  cursor: pointer; transition: var(--ease);
  box-shadow: 0 14px 28px -12px var(--shadow-lift);
}
.p2elo_bm-submit:hover    { transform: translateY(-2px); }
.p2elo_bm-submit:active   { transform: translateY(0); }
.p2elo_bm-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.p2elo_bm-success       { text-align: center; padding: 16px 0; }
.p2elo_bm-success-icon  {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent2);
  color: var(--on-accent2); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.p2elo_bm-success h3    { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--text-heading); margin-bottom: 10px; }
.p2elo_bm-success p     { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 26px; opacity: 0.9; }
.p2elo_bm-close-btn {
  background: var(--card-soft); border: none;
  border-radius: 999px; color: var(--text-heading);
  padding: 11px 32px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: var(--ease);
}
.p2elo_bm-close-btn:hover { background: var(--gold-flat); color: var(--md-sys-color-on-primary, #2A231F); }

/* ═══════════════════════════════════ SERVICE PAGES */
.p2elo_service-page { padding-top: 96px; }

.p2elo_service-hero {
  position: relative;
  height: 420px;
  margin: 0 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
/* .p2elo_service-hero-content h1 already uses the strong --text-heading color, so
   this scrim doesn't need to be near-opaque to keep it legible — 88% was
   covering most of the photo behind it. */
.p2elo_service-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 55%, transparent) 0%, color-mix(in srgb, var(--c-bg) 15%, transparent) 100%);
}
.p2elo_service-hero-content {
  position: relative; z-index: 1;
  padding: 0 48px 44px;
}
.p2elo_service-hero-content h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 400; color: var(--text-heading);
  margin-top: 10px;
}

.p2elo_service-body     { padding: 64px 24px 110px; max-width: 1200px; margin: 0 auto; }
.p2elo_service-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 56px;
}
.p2elo_service-intro    { font-size: 1.08rem; color: var(--text-secondary); line-height: 1.9; opacity: 0.92; }
.p2elo_service-intro-image {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px var(--shadow-soft);
}

.p2elo_service-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.p2elo_service-feature-card {
  background: var(--card-soft);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: var(--ease);
}
.p2elo_service-feature-card:hover {
  background: var(--card);
  transform: translateY(-4px);
}
.p2elo_service-feature-icon { display: none; }
.p2elo_service-feature-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem; color: var(--text-heading); margin-bottom: 10px;
}
.p2elo_service-feature-card p { font-family: var(--font-ui); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; opacity: 0.9; }

.p2elo_service-cta-block { text-align: center; padding-top: 12px; }
.p2elo_service-cta-btn {
  display: inline-block;
  padding: 16px 44px;
  background: var(--gold-flat); color: var(--md-sys-color-on-primary, #2A231F);
  border: none; border-radius: 999px;
  font-family: var(--font-ui); font-size: 13px;
  font-weight: 700;
  cursor: pointer; transition: var(--ease);
  box-shadow: 0 16px 32px -14px var(--shadow-lift);
}
.p2elo_service-cta-btn:hover  { transform: translateY(-2px); }
.p2elo_service-cta-btn:active { transform: translateY(0); }

@media (max-width: 768px) {
  .p2elo_service-features    { grid-template-columns: 1fr 1fr; }
  .p2elo_service-intro-grid  { grid-template-columns: 1fr; gap: 32px; }
  .p2elo_service-hero        { margin: 0 12px; height: 320px; }
  .p2elo_bm-row              { grid-template-columns: 1fr; }
  .p2elo_bm-dialog           { padding: 32px 24px; }
}
@media (max-width: 480px) {
  .p2elo_service-features { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════ RESPONSIVE */
@media (max-width: 1024px) {
  .p2elo_about-grid,
  .p2elo_dining-grid,
  .p2elo_casino-grid       { grid-template-columns: 1fr; gap: 44px; }
  .p2elo_about-image-group,
  .p2elo_casino-image-frame { order: -1; }
  .p2elo_rooms-grid        { grid-template-columns: 1fr 1fr; }
  .p2elo_footer-inner      { grid-template-columns: 1fr 1fr; }
  .p2elo_highlights-grid   { gap: 20px; }
  .p2elo_amenities-layout  { grid-template-columns: 1fr; gap: 36px; }
  .p2elo_amenities-image   { order: -1; aspect-ratio: 16/9; }
  .p2elo_highlights-strip  { margin-top: -48px; }
}

@media (max-width: 768px) {
  :root { --section-padding: 72px 0; }

  .p2elo_hero { padding: 128px 0 72px; background-attachment: scroll; }

  /* Mobile nav: burger LEFT, logo CENTERED, CTA hidden — same shared
     behavioral pattern as the rest of the template family. */
  .p2elo_nav-header   { padding: 16px 16px 0; }
  .p2elo_nav-inner    { position: relative; justify-content: space-between; gap: 0; border-radius: 999px; padding: 10px 16px; }
  .p2elo_nav-burger   { display: flex; order: 0; flex-shrink: 0; }
  .p2elo_nav-logo     {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
  }
  /* .p2elo_nav-header is `position: fixed`, so it's the containing block for this
     absolutely-positioned menu — `top: 100%` docks it flush against the
     header's actual rendered height instead of a hardcoded px guess. */
  .p2elo_nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 16px; right: 16px;
    background: var(--card);
    border-radius: var(--radius-lg);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    box-shadow: 0 26px 52px -20px var(--shadow-lift);
    z-index: 199;
  }
  .p2elo_nav-links.open { display: flex; }
  .p2elo_nav-links li   { width: 100%; text-align: center; }
  .p2elo_nav-links a    { display: block; padding: 14px; }
  .p2elo_nav-cta        { display: none; }

  .p2elo_highlights-grid { grid-template-columns: 1fr; gap: 18px; }
  .p2elo_highlights-strip { margin-top: -36px; }
  .p2elo_rooms-grid      { grid-template-columns: 1fr; }
  .p2elo_contact-grid    { grid-template-columns: 1fr; }
  .p2elo_footer-inner    { grid-template-columns: 1fr 1fr; gap: 32px; }
  .p2elo_footer-bottom   { flex-direction: column; text-align: center; }
  .p2elo_casino-features { gap: 8px; }
  .p2elo_about-stats     { gap: 12px; }

  /* Absolute overlap insets risk overflowing the viewport on narrow screens —
     drop into normal flow instead, pulled up over the main image via negative
     margin (safe: no absolute positioning, nothing can spill off-screen). */
  .p2elo_about-image-inset,
  .p2elo_dining-image-inset {
    position: static;
    width: 62%;
    margin: -32px 0 0 auto;
  }

  .p2elo_interlude-grid    { grid-template-columns: 1fr 1fr; }
  .p2elo_interlude-tall,
  .p2elo_interlude-wide,
  .p2elo_interlude-square  { aspect-ratio: 4/3; }
}

/* This 768px block (tablet: 2-col helplines) must stay BEFORE the 480px
   block below — both queries are active simultaneously on phones narrower
   than 480px, and with equal specificity the one later in the file wins.
   If this were last, its "1fr 1fr" would silently override the 480px
   block's "1fr" on every phone, not just tablets. */
@media (max-width: 768px) {
  .p2elo_helplines-grid  { grid-template-columns: 1fr 1fr; }
  .p2elo_legal-page      { padding: 128px 0 64px; }
}

@media (max-width: 480px) {
  .p2elo_footer-inner    { grid-template-columns: 1fr; }
  .p2elo_interlude-grid  { grid-template-columns: 1fr; }
  .p2elo_about-stats     { flex-direction: column; }
  .p2elo_cookie-banner   { left: 12px; right: 12px; bottom: 12px; padding: 20px; }
  .p2elo_cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .p2elo_cookie-banner-actions { justify-content: stretch; }
  .p2elo_cookie-btn-accept,
  .p2elo_cookie-btn-reject { width: 100%; text-align: center; padding: 12px; }
  .p2elo_helplines-grid  { grid-template-columns: 1fr; }
  .p2elo_legal-table     { font-size: 0.8rem; min-width: 520px; }
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.table-wrap th,
.table-wrap td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

@media (max-width: 768px) {
    .table-wrap {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .table-wrap table {
        min-width: 680px;
    }

    .table-wrap th,
    .table-wrap td {
        font-size: 14px;
        line-height: 1.45;
        padding: 12px;
    }
}