/* ═══════════════════════════════════════════════════════
   Belvedere Apts & Spa — Guest App Stylesheet
   Loaded via class-frontend.php as wp_enqueue_style
═══════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap');

/* ── Page background — prevents black flash on section switch ── */
html,
body {
  background: #f7f4ee !important;
}

/* ── Stable scrollbar — prevents layout shift on section switch ── */
html {
  scrollbar-gutter: stable;
}

/* ── CSS Variables ────────────────────────────────── */
:root {
  --gold: #c9a96e;
  --gold-lt: rgba(201, 169, 110, 0.12);
  --gold-md: rgba(201, 169, 110, 0.25);
  --navy: #1a1a2e;
  --navy-lt: rgba(26, 26, 46, 0.96);
  --cream: #f7f4ee;
  --warm-gray: #7a6a52;
  --border: #e0d9ce;
  --white: #ffffff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
}

/* ── Base reset for app ────────────────────────────── */
#belvedere-app-root *,
.blv-checkin-overlay * {
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════
   CHECK-IN OVERLAY
══════════════════════════════════════════════════════ */
.blv-checkin-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4e 50%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.blv-checkin-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.blv-checkin-logo {
  text-align: center;
  margin-bottom: 28px;
}

.blv-checkin-logo-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 14px;
}

.blv-checkin-logo h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.blv-checkin-logo p {
  font-size: 14px;
  color: var(--warm-gray);
  margin: 0;
}

.blv-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 6px;
  margin-top: 16px;
}

.blv-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--navy);
  background: #faf8f4;
  outline: none;
  transition: border-color .15s;
}

.blv-input:focus {
  border-color: var(--gold);
  background: #fff;
}

.blv-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--warm-gray);
  user-select: none;
}

.blv-remember-check {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

.blv-btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
  padding: 14px 24px;
  background: var(--gold);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}

.blv-btn-gold:hover {
  opacity: 0.9;
}

.blv-btn-gold:active {
  transform: scale(0.98);
}

.blv-btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.blv-error {
  background: #fef3f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #dc2626;
  margin-bottom: 4px;
}

.blv-hint {
  font-size: 12px;
  color: #b0a898;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════
   BOARD-TYPE BANNER (BB included / RR charged)
══════════════════════════════════════════════════════ */
.blv-banner {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.blv-banner--included {
  background: #f0faf4;
  border: 1.5px solid #6ab04c;
  color: #2d6a1f;
}

.blv-banner--charge {
  background: #fffbf0;
  border: 1.5px solid #c9a96e;
  color: #7a4f00;
}

/* ══════════════════════════════════════════════════════
   OUTLINE BUTTON (secondary action)
══════════════════════════════════════════════════════ */
.blv-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.blv-btn-outline:hover {
  background: var(--gold-lt);
}

.blv-btn-extra-drink {
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   MODAL OVERLAY + CARD (shared by extra drink + my bill)
══════════════════════════════════════════════════════ */
.blv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.blv-modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.20);
}

/* ══════════════════════════════════════════════════════
   MY BILL FLOATING ACTION BUTTON
══════════════════════════════════════════════════════ */
.blv-mybill-fab {
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 9999;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .3px;
}

.blv-mybill-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
}

/* ══════════════════════════════════════════════════════
   SIDEBAR POLISH
══════════════════════════════════════════════════════ */
#belvedere-sidebar {
  font-family: 'Inter', system-ui, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

#belvedere-sidebar::-webkit-scrollbar {
  width: 3px;
}

#belvedere-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* Nav item hover state */
[id^="nav-"] {
  transition: background .15s, border-radius .15s;
}

[id^="nav-"]:hover {
  background: rgba(201, 169, 110, 0.12) !important;
  border-radius: 8px;
  cursor: pointer;
}

[id^="nav-"]:hover .bricks-text-basic,
[id^="nav-"]:hover .brxe-text-basic {
  color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════
   HEADER POLISH
══════════════════════════════════════════════════════ */
#belvedere-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ══════════════════════════════════════════════════════
   SECTION TRANSITIONS — opacity only (no transform to avoid scrollbar flash)
══════════════════════════════════════════════════════ */
[id^="section-"] {
  animation: sectionFadeIn .15s ease;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════
   TIME SLOT BUTTONS
══════════════════════════════════════════════════════ */
.blv-time-slot {
  transition: all .15s !important;
}

.blv-time-slot:hover {
  border-color: var(--gold) !important;
  background: var(--gold-lt) !important;
}

/* ══════════════════════════════════════════════════════
   BREAKFAST CARD PHOTO OVERLAY
══════════════════════════════════════════════════════ */
#bk-card-cretan .bricks-div:first-child,
#bk-card-vegan .bricks-div:first-child,
#bk-card-childrens .bricks-div:first-child
#bk-card-package .bricks-div:first-child {
  position: relative;
}

/* ══════════════════════════════════════════════════════
   BREAKFAST CATEGORY CARDS — consistent layout
   Bricks _cssCustom rules handle the gradient background.
   These rules enforce consistent outer sizing, fix the
   Children's align-items:baseline quirk, add hover lift,
   and make any Bricks image element inside the photo area
   fill the full 110px height with object-fit:cover.
══════════════════════════════════════════════════════ */

/* Outer card: stretch children, prevent Bricks quirks */
#bk-card-cretan,
#bk-card-vegan,
#bk-card-childrens,
#bk-card-package {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;  /* fixes Children's baseline bug */
  overflow: hidden !important;
  transition: transform 0.15s, border-color 0.15s !important;
}
#bk-card-cretan:hover,
#bk-card-vegan:hover,
#bk-card-childrens:hover,
#bk-card-package:hover {
  transform: translateY(-2px);
}

/* Photo div: consistent 110px, clipped */
#bk-card-cretan > div:first-child,
#bk-card-vegan > div:first-child,
#bk-card-childrens > div:first-child,
#bk-card-package > div:first-child {
  height: 110px !important;
  min-height: 110px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

/* Bricks image element (.brxe-image) inside photo area:
   stretch to fill the 110px block with object-fit:cover.
   This fixes the Package card when the user swaps the photo
   in the Bricks editor — the image now fills properly instead
   of rendering at its natural (possibly tiny) size.          */
#bk-card-cretan > div:first-child .brxe-image,
#bk-card-vegan > div:first-child .brxe-image,
#bk-card-childrens > div:first-child .brxe-image,
#bk-card-package > div:first-child .brxe-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#bk-card-cretan > div:first-child .brxe-image img,
#bk-card-vegan > div:first-child .brxe-image img,
#bk-card-childrens > div:first-child .brxe-image img,
#bk-card-package > div:first-child .brxe-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Label div: consistent white strip */
#bk-card-cretan > div:nth-child(2),
#bk-card-vegan > div:nth-child(2),
#bk-card-childrens > div:nth-child(2),
#bk-card-package > div:nth-child(2) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════
   OPTION PILLS — ACTIVE STATE (via JS .active class)
══════════════════════════════════════════════════════ */
.blv-pill-active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════
   CHAT WINDOW
══════════════════════════════════════════════════════ */
#chat-messages {
  scroll-behavior: smooth;
}

#chat-input {
  transition: border-color .15s;
}

#chat-input:focus {
  outline: none;
  border-color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════
   FLIGHTS
══════════════════════════════════════════════════════ */
#flights-list>div {
  transition: box-shadow .15s, transform .1s;
}

#flights-list>div:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════ */
#blv-toast-container {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════
   ADMIN PANEL POLISH
══════════════════════════════════════════════════════ */
.belvedere-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.belvedere-status--pending {
  background: #fef3c7;
  color: #92400e;
}

.belvedere-status--preparing {
  background: #dbeafe;
  color: #1e40af;
}

.belvedere-status--delivered {
  background: #d1fae5;
  color: #065f46;
}

.belvedere-status--done {
  background: #d1fae5;
  color: #065f46;
}

.belvedere-status--cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.belvedere-status--in_progress {
  background: #dbeafe;
  color: #1e40af;
}

/* ══════════════════════════════════════════════════════
   BRICKS BUILDER ICON FIX
   Bricks renders FA icons as <i class="fas fa-xxx brxe-icon">
   The brxe-icon class is ON the <i> element itself (not a parent).
   Bricks global CSS overrides font-family, so we must force
   Font Awesome font-family with high specificity.
══════════════════════════════════════════════════════ */

/* Force Font Awesome font-family on all icon elements */
i.brxe-icon.fas,
i.brxe-icon.fa-solid,
i.brxe-icon.far,
i.brxe-icon.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

i.brxe-icon.fab,
i.brxe-icon.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fallback: target any element with fa- class inside brxe wrappers */
.brxe-icon i,
.brxe-button i {
  font-style: normal !important;
}

/* Sidebar nav icons — gold tint */
[id^="nav-"] i.fas,
[id^="nav-"] i.fab {
  color: rgba(201, 169, 110, 0.7) !important;
  font-size: 15px !important;
}

[id^="nav-"]:hover i.fas,
[id^="nav-"]:hover i.fab,
[id^="nav-"].blv-nav-active i.fas,
[id^="nav-"].blv-nav-active i.fab {
  color: #c9a96e !important;
}

/* Header chip icons */
#belvedere-header i.brxe-icon {
  font-size: 11px !important;
}

/* ══════════════════════════════════════════════════════
   BRICKS GRID LAYOUT FIXES
   Ensure grids render as multi-column even when Bricks
   defaults to single-column flexbox.
══════════════════════════════════════════════════════ */

/* Pillow cards: 3-col grid, 5 cards total — items 4 & 5 centred on row 2 */
#pil-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

/*
 * Cards 4 & 5 left-aligned — default grid auto-placement:
 *   Row 1: [Soft]    [Firm]      [Memory]
 *   Row 2: [Shape]   [Cotton]    [empty]
 * No explicit grid-column rules needed.
 */

/* Hotel Info section grids — target by Bricks element IDs */
[id$="_grid"],
.brxe-div[style*="grid-template-columns"] {
  display: grid !important;
}

/* ══════════════════════════════════════════════════════
   BREAKFAST CARDS — 4-IN-A-ROW LAYOUT
   All four cards (Cretan, Vegan, Children's, Package) sit
   inside #brxe-f66996 as a 4-column grid.  Package card
   width is governed by the grid track — no manual calc.
   Breakpoints: ≤1024px → 2 col, ≤768px → 2 col.
══════════════════════════════════════════════════════ */
/* 4-col grid on desktop */
#brxe-f66996 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
/* Package card: let the grid control width */
#bk-card-package {
  width: auto !important;
  max-width: none !important;
}

/* ══════════════════════════════════════════════════════
   BRICKS CONTAINER OVERFLOW FIX
   Prevents horizontal scrolling on all sections.
══════════════════════════════════════════════════════ */
.brxe-section,
.brxe-container,
#belvedere-main,
#belvedere-main .brxe-section,
#belvedere-main .brxe-container {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════
   DESKTOP LAYOUT — Main content offset for fixed sidebar
   Uses `body #belvedere-main` (specificity 1-0-1) to beat
   Bricks inline CSS which uses `#belvedere-main` (1-0-0)
   with !important at several breakpoints.
   Also sets width: calc(100% − sidebar) so the main area
   never overflows the viewport (Bricks sets width:100%
   which, combined with margin-left, would push content
   200px off the right edge of the screen).
══════════════════════════════════════════════════════ */
body #belvedere-main {
  margin-left: 220px !important;
  width: calc(100% - 220px) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #belvedere-sidebar {
    width: 200px !important;
  }

  #belvedere-header {
    left: 200px !important;
  }

  body #belvedere-main {
    margin-left: 200px !important;
    width: calc(100% - 200px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #belvedere-sidebar {
    display: flex !important;
    flex-direction: row !important;
  }

  /* ── iPad / tablet: sidebar is 200px → ~620px content area ── */
  /* 3 columns is too narrow (~190px each), switch to 2 columns  */
  #pil-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

  /* Sidebar becomes bottom tab bar */
  #belvedere-sidebar {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000;
    scrollbar-width: none;
  }

  #belvedere-sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Header goes full-width and scrolls horizontally on mobile */
  #belvedere-header {
    left: 0 !important;
    height: 50px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #belvedere-header::-webkit-scrollbar {
    display: none;
  }

  /* Chips must not shrink so the header actually scrolls */
  #belvedere-header > *,
  #belvedere-header .belvedere-header-chip,
  #belvedere-header [class*="brx-global-class-blv009"],
  #header-room-chip,
  #header-clock-chip,
  #header-dates-chip,
  #header-temp-chip,
  #header-demo-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Main content — no sidebar offset, full width, pad for header + bottom bar */
  body #belvedere-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 90px !important;
    overflow-x: hidden !important;
  }

  /* Content sections — tighter padding like reference */
  [id^="section-"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Force all Bricks inner containers to be full width on mobile */
  [id^="section-"]>.brxe-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* All nested divs/containers in sections — no extra padding on mobile */
  [id^="section-"] .brxe-container,
  [id^="section-"] .brxe-div {
    max-width: 100% !important;
  }

  /* Sidebar logo area hidden on mobile */
  .belvedere-logo-area {
    display: none !important;
  }

  /* Sidebar inner container — horizontal layout */
  #belvedere-sidebar>.brxe-container {
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Nav buttons wrapper — Bricks fires its row layout only at ≤767px,
     so 768px (iPad mini) misses it by 1px. Force row here to close the gap. */
  #brxe-ab68bb {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #brxe-3fac0b {
    display: none !important;
  }

  #brxe-0adabb {
    display: none !important;
  }


  /* Nav items horizontal — icons above label */
  [id^="nav-"] {
    flex-direction: column !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 72px !important;
    height: 80px !important;
    border-radius: 0 !important;
  }

  /* Nav icon sizing in bottom bar */
  [id^="nav-"] i.brxe-icon {
    font-size: 22px !important;
    width: auto !important;
    line-height: 1 !important;
  }

  /* Nav text labels */
  [id^="nav-"] .brxe-text-basic {
    font-size: 11px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Header chips — keep ALL chip text visible on mobile (header scrolls) */
  #belvedere-header .brxe-text-basic {
    display: inline !important;
  }

  #header-room-text {
    font-size: 12px !important;
  }

  /* Pillow cards: 1 per line on mobile, reset explicit column placement */
  #pil-cards {
    grid-template-columns: 1fr !important;
  }

  /* Complex Map floor columns — force 2-col on mobile (matches reference) */
  #brxe-341655 {
    grid-template-columns: 1fr 1fr !important;
  }

  .blv-checkin-card {
    padding: 28px 20px;
  }

  /* ── Breakfast section ─────────────────────────────── */

  /* Category cards: 2 per line on mobile (phones ≤768px) */
  #brxe-f66996 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Package card: inside the 2-col grid — let the grid control width */
  #bk-card-package {
    width: auto !important;
    max-width: none !important;
  }

  /* White card container: tighter padding on mobile */
  #brxe-4b77c7 {
    padding: 14px !important;
  }

  /* Card image blocks: slightly shorter to save vertical space */
  #bk-card-cretan .bricks-div:first-child,
  #bk-card-vegan .bricks-div:first-child,
  #bk-card-childrens .bricks-div:first-child,
  #bk-card-package .bricks-div:first-child{
    height: 200px !important;
  }

  /* Cards are rebuilt by JS _normalizeCards() — no extra mobile override needed */

  /* Drink select: ensure it doesn't overflow its container */
  #bk-drink-select {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Bread/filling/extra pill rows: allow wrapping */
  #brxe-119b09,
  #brxe-94d87d,
  #brxe-85f6ae {
    flex-wrap: wrap !important;
  }

  /* Submit/cancel button row: allow stacking if needed */
  #brxe-b5eee9 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE PORTRAIT (≤ 478px)
══════════════════════════════════════════════════════ */
@media (max-width: 478px) {
  #belvedere-sidebar {
    height: 64px !important;
  }

  [id^="nav-"] {
    padding: 6px 8px !important;
    min-width: 64px !important;
    height: 80px !important;
  }

  [id^="nav-"] .brxe-text-basic {
    font-size: 10.5px !important;
  }

  [id^="nav-"] .brxe-icon i {
    font-size: 20px !important;
  }

  #belvedere-header {
    padding: 0 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  body #belvedere-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-bottom: 76px !important;
  }

  /* Pillow cards: 1 per line on portrait phones, reset explicit column placement */
  #pil-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Extras grid: 2-col on very small phones (was 3-col) */
  #brxe-42e881 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Breakfast cards: 1 per line on portrait phones */
  #brxe-f66996 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Package card: grid controls width */
  #bk-card-package {
    width: auto !important;
    max-width: none !important;
  }

  /* White card: even tighter on portrait phones */
  #brxe-4b77c7 {
    padding: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════
   PRINT (receipt-style for admin)
══════════════════════════════════════════════════════ */
@media print {

  #belvedere-sidebar,
  #belvedere-header {
    display: none !important;
  }

  body #belvedere-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SELF-RENDERED APP CLASSES (used when shortcode builds the HTML)
══════════════════════════════════════════════════════════════════════════ */
.blv-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  color: rgba(255, 255, 255, .65);
  font-size: 13px;
  font-weight: 400;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
}

.blv-nav-btn:hover {
  background: rgba(201, 169, 110, .1);
  color: rgba(255, 255, 255, .9);
}

.blv-nav-btn.active {
  background: rgba(201, 169, 110, .18);
  color: #fff;
  font-weight: 600;
}

.blv-nav-icon {
  font-size: 14px;
  color: rgba(201, 169, 110, .7);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.blv-nav-btn.active .blv-nav-icon,
.blv-nav-btn:hover .blv-nav-icon {
  color: var(--gold);
}

.blv-hdr-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .07);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

.blv-hdr-room {
  background: rgba(201, 169, 110, .15) !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
}

.blv-hdr-clickable {
  cursor: pointer;
  transition: background .15s;
}

.blv-hdr-clickable:hover {
  background: rgba(255, 255, 255, .12) !important;
}

.blv-section {
  animation: sectionFadeIn .15s ease;
}

.blv-sec-head {
  margin-bottom: 22px;
}

.blv-sec-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}

.blv-sec-sub {
  font-size: 13.5px;
  color: var(--warm-gray);
  line-height: 1.5;
}

.blv-sec-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin: 16px 0 9px;
}

.blv-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  margin-bottom: 16px;
}

.blv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.blv-pill {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 13px;
  color: var(--warm-gray);
  cursor: pointer;
  transition: all .15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.blv-pill:hover {
  border-color: var(--gold);
  background: var(--gold-lt);
}

.blv-pill.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 600;
}

.blv-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 5px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  color: var(--warm-gray);
  transition: all .15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.blv-extra.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 600;
}

.blv-qty-btn {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--navy);
  font-weight: 700;
  transition: all .15s;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
}

.blv-qty-btn:hover {
  border-color: var(--gold);
  background: var(--gold-lt);
}

.blv-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--navy);
  background: #faf8f4;
  resize: vertical;
  min-height: 68px;
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  transition: border-color .15s;
}

.blv-textarea:focus {
  border-color: var(--gold);
  background: #fff;
}

.blv-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.blv-btn-gold:hover {
  opacity: .88;
}

.blv-btn-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: transparent;
  color: var(--warm-gray);
  font-weight: 500;
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Inter', system-ui, sans-serif;
}

.blv-btn-out:hover {
  border-color: var(--gold);
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION VISIBILITY — CSS-level hide/show
   Hides all content sections by default. JS overrides with inline style
   or injects a <style id="blv-section-style"> tag for !important control.
   This ensures sections are hidden even before JS runs.
══════════════════════════════════════════════════════════════════════════ */
#section-breakfast,
#section-pillows,
#section-spa,
#section-concierge,
#section-weather,
#section-flights,
#section-whatsapp {
  display: none !important;
}

/* Show ALL sections inside Bricks editor so you can visually edit them.
   Must use ID selectors to beat specificity of the hide rules above (1-0-0). */
body[data-builder-mode] #section-hotel-info,
body[data-builder-mode] #section-breakfast,
body[data-builder-mode] #section-pillows,
body[data-builder-mode] #section-spa,
body[data-builder-mode] #section-concierge,
body[data-builder-mode] #section-weather,
body[data-builder-mode] #section-flights,
body[data-builder-mode] #section-whatsapp {
  display: block !important;
}

/* Hotel info is visible by default — JS overrides when switching */
#section-hotel-info {
  display: block !important;
}

/* After JS runs, it injects #blv-section-style which takes over completely */
/* These rules are only active before JS has initialised */
#section-hotel-info[data-blv-visible="0"] {
  display: none !important;
}

#section-breakfast[data-blv-visible="1"],
#section-pillows[data-blv-visible="1"],
#section-spa[data-blv-visible="1"],
#section-concierge[data-blv-visible="1"],
#section-weather[data-blv-visible="1"],
#section-flights[data-blv-visible="1"],
#section-whatsapp[data-blv-visible="1"] {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BRICKS GLOBAL CLASS FALLBACKS
   When Bricks global classes are not registered, Bricks renders elements
   with attribute: brx-global-class-blvXXX
   We target BOTH the class name AND the brx attribute as fallback.
   This means styling works whether or not global classes are imported.
══════════════════════════════════════════════════════════════════════════ */

/* blv005 — belvedere-card — white card with shadow */
.belvedere-card,
[class*="brx-global-class-blv005"],
#bk-card-cretan,
#bk-card-vegan,
#bk-card-childrens,
#bk-card-package,
#bk-card-cretan>.brxe-div,
#bk-card-vegan>.brxe-div,
#bk-card-childrens>.brxe-div,
#bk-card-package>.brxe-div,
#pil-soft,
#pil-firm,
#pil-memory,
#pil-change,
#pil-feather,
#pil-antiallerg,
#inf_phones,
#inf_rules {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 14px !important;
}

/* blv006 — belvedere-btn-gold — gold action button */
.belvedere-btn-gold,
[class*="brx-global-class-blv006"],
#bk-submit-btn,
#pil-submit-btn,
#pil-change-btn {
  background: #c9a96e !important;
  color: #1a1a2e !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  margin-top: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.belvedere-btn-gold *,
[class*="brx-global-class-blv006"] *,
#bk-submit-btn *,
#pil-submit-btn *,
#pil-change-btn * {
  color: #1a1a2e !important;
  font-weight: 600 !important;
}

.belvedere-btn-gold:hover,
[class*="brx-global-class-blv006"]:hover,
#bk-submit-btn:hover,
#pil-submit-btn:hover {
  opacity: 0.88 !important;
}

/* blv007 — belvedere-section-h — Playfair Display heading */
.belvedere-section-h,
[class*="brx-global-class-blv007"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.belvedere-section-h *,
[class*="brx-global-class-blv007"] * {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
}

/* blv008 — belvedere-logo-area */
.belvedere-logo-area,
[class*="brx-global-class-blv008"] {
  padding: 20px 16px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* blv009 — belvedere-header-chip — header pill badges */
.belvedere-header-chip,
[class*="brx-global-class-blv009"],
#header-room-chip,
#header-clock-chip,
#header-dates-chip,
#header-lang-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  white-space: nowrap !important;
}

#header-room-chip {
  background: rgba(201, 169, 110, 0.18) !important;
  color: #c9a96e !important;
  font-weight: 600 !important;
}

/* blv011 — belvedere-badge — small uppercase label */
.belvedere-badge,
[class*="brx-global-class-blv011"] {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #7a6a52 !important;
}

/* blv012 — belvedere-section-sub — subtitle */
.belvedere-section-sub,
[class*="brx-global-class-blv012"] {
  font-size: 13.5px !important;
  color: #7a6a52 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

.belvedere-section-sub *,
[class*="brx-global-class-blv012"] * {
  font-size: 13.5px !important;
  color: #7a6a52 !important;
}

/* ── Section content padding ── */
#section-hotel-info>*,
#section-breakfast>*,
#section-pillows>*,
#section-spa>*,
#section-concierge>*,
#section-weather>*,
#section-flights>*,
#section-whatsapp>* {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* ── Section top spacing ── */
#section-hotel-info,
#section-breakfast,
#section-pillows,
#section-spa,
#section-concierge,
#section-weather,
#section-flights,
#section-whatsapp
/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — COMPREHENSIVE SECTION FIXES v2.0
   Covers all 8 sections: hotel-info, breakfast, pillows, spa,
   concierge (AI chat), weather, flights, whatsapp.
   Breakpoints: 1024px (tablet), 768px (mobile), 478px (portrait phone)
══════════════════════════════════════════════════════════════════════════ */

/* ── Global always-on: keep all content in viewport ── */
[id^="section-"] {
  overflow-x: hidden !important;
  word-break: break-word !important;
}

[id^="section-"] img,
[id^="section-"] video {
  max-width: 100% !important;
  height: auto !important;
}

/* All flex rows inside sections: wrap by default */
[id^="section-"] .brxe-div,
[id^="section-"] .brxe-container {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Time slot grid wraps naturally at any width */
#bk-slots-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Flights list: cards never overflow */
#flights-list>div {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════
   TABLET (≤ 1024px)
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Headings: slightly smaller ── */
  .belvedere-section-h,
  [class*="brx-global-class-blv007"],
  .belvedere-section-h *,
  [class*="brx-global-class-blv007"] * {
    font-size: 22px !important;
  }

  /* ── Breakfast: 2×2 grid on tablet ── */
  #brxe-f66996 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  #bk-card-package {
    width: auto !important;
    max-width: none !important;
  }

  /* ── Chat: limit window height on landscape tablet ── */
  #chat-messages {
    max-height: 55vh !important;
    overflow-y: auto !important;
  }

  /* ── Weather & Spa: 2-col grids on tablet ── */
  #section-spa [style*="grid-template-columns: repeat(3"],
  #section-weather [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════
   WHATSAPP — DESKTOP FIX
   Bricks emits two conflicting grid-template-columns
   rules for #brxe-wa210; the second wins and collapses
   it to 1 col. We restore 2 cols here (desktop only —
   mobile/tablet override is in their own blocks below).
══════════════════════════════════════════════════════ */
#brxe-wa210 {
  grid-template-columns: 1fr 1fr !important;
}

/* ══════════════════════════════════════════════════════
   MOBILE (≤ 768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── CORE LAYOUT FIX: belvedere-app-root has 22px L/R padding (Bricks).
     On mobile this constrains all sections to only 370px of a 414px viewport.
     Zero it out so sections fill the full width. Bricks already adds 14px L/R
     to each section at ≤767px, which provides the correct breathing room. ── */
  #belvedere-app-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Remove the extra 22px L/R padding our CSS adds to section children.
     On desktop this centres content under max-width: 860px. On mobile it
     double-pads and wastes precious horizontal space. ── */
  #section-hotel-info>*,
  #section-breakfast>*,
  #section-pillows>*,
  #section-spa>*,
  #section-concierge>*,
  #section-weather>*,
  #section-flights>*,
  #section-whatsapp>* {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section top spacing: tighter on mobile */
  [id^="section-"] {
    padding-top: 18px !important;
  }

  /* ── Headings: mobile size ── */
  .belvedere-section-h,
  [class*="brx-global-class-blv007"],
  .belvedere-section-h *,
  [class*="brx-global-class-blv007"] * {
    font-size: 20px !important;
  }

  .belvedere-section-sub *,
  [class*="brx-global-class-blv012"] * {
    font-size: 13px !important;
  }

  /* ── Cards: tighter padding on mobile ── */
  .blv-card,
  .belvedere-card,
  [class*="brx-global-class-blv005"],
  #inf_phones,
  #inf_rules,
  #pil-soft,
  #pil-firm,
  #pil-memory,
  #pil-change,
  #pil-feather,
  #pil-antiallerg {
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  /* ─────────── HOTEL INFO ─────────────────────────── */

  /* Stack all multi-column grids to 1-col */
  #section-hotel-info [style*="grid-template-columns"],
  #section-hotel-info .brxe-div[style*="columns"] {
    grid-template-columns: 1fr !important;
    columns: 1 !important;
  }

  /* Flex rows wrap */
  #section-hotel-info .brxe-div {
    flex-wrap: wrap !important;
  }

  /* Phone / rule list items: full width */
  #inf_phones,
  #inf_rules {
    width: 100% !important;
  }

  /* ─────────── BREAKFAST ──────────────────────────── */

  /* Time slot pills: smaller on mobile */
  .blv-time-slot {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-width: 52px !important;
  }

  /* Dynamic panel: full width */
  #bk-dynamic-panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Drink select: full width */
  #bk-drink-select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  /* Option pill groups: always wrap */
  #bk-options-section>div>div {
    flex-wrap: wrap !important;
  }

  /* Submit / cancel buttons row */
  #brxe-b5eee9 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Bread / filling / extra pill rows */
  #brxe-119b09,
  #brxe-94d87d,
  #brxe-85f6ae {
    flex-wrap: wrap !important;
  }

  /* ─────────── PILLOWS ────────────────────────────── */

  /* Pillow card: tighter, always readable */
  #pil-soft>*,
  #pil-firm>*,
  #pil-memory>*,
  #pil-change>*,
  #pil-feather>*,
  #pil-antiallerg>* {
    font-size: 13px !important;
  }

  /* Quantity row: allow wrap on narrow screens */
  #section-pillows .brxe-div {
    flex-wrap: wrap !important;
  }

  /* ─────────── SPA ────────────────────────────────── */

  /* Spa treatment grids: 1 column */
  #section-spa [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Spa flex layouts: wrap */
  #section-spa .brxe-div {
    flex-wrap: wrap !important;
  }

  /* Spa cards: full width */
  #section-spa .brxe-div[style*="border-radius"],
  #section-spa .belvedere-card,
  #section-spa .blv-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Spa price/details row */
  #section-spa [style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ─────────── Belvedere (CHAT) ────────────────── */

  /* Chat messages window: proper height on mobile */
  #chat-messages {
    min-height: 200px !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Chat input: full width */
  #chat-input {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  /* Send button: full width below input on mobile */
  #chat-send-btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 6px !important;
    padding: 10px 16px !important;
  }

  /* Chat input row wraps on mobile */
  #section-concierge .brxe-div {
    flex-wrap: wrap !important;
  }

  /* Suggestion chips: smaller and wrapping */
  #chat-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #chat-chips button,
  #cs-pool,
  #cs-beach,
  #cs-restaurant,
  #cs-taxi,
  #cs-wifi {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* Chat bubbles: max 88% wide */
  #chat-messages>div {
    max-width: 100% !important;
  }

  #chat-messages>div>div:last-child {
    max-width: 85% !important;
  }

  /* ─────────── WEATHER ────────────────────────────── */

  /* Weather grids and flex: stack vertically */
  #section-weather [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  #section-weather .brxe-div {
    flex-wrap: wrap !important;
  }

  /* Big temperature number: scale down */
  #section-weather [style*="font-size:6"],
  #section-weather [style*="font-size: 6"] {
    font-size: 48px !important;
  }

  /* ─────────── FLIGHTS ────────────────────────────── */

  /* Flight rows: tighter gap and padding */
  #flights-list>div {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Flight emoji: smaller, fixed width */
  #flights-list>div>div:first-child {
    font-size: 18px !important;
    width: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
  }

  /* Flight number: slightly smaller */
  #flights-list>div div:nth-child(2)>div:first-child {
    font-size: 13px !important;
  }

  /* Flight time: smaller */
  #flights-list>div>div:last-child>div:first-child {
    font-size: 14px !important;
  }

  /* Filter buttons row: wrap */
  #section-flights .brxe-div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Individual filter buttons: auto width */
  #section-flights .brxe-button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ─────────── WHATSAPP ───────────────────────────── */

  /* Main cards: Bricks hardcodes width:860px — override to fill screen */
  #brxe-wa100,
  #brxe-wa200 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Quick Numbers grid: 2 compact columns on mobile */
  #brxe-wa210 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Message textarea: ≥16px prevents iOS Safari auto-zoom */
  #wa-message {
    font-size: 16px !important;
  }

  /* CTA section: stack content vertically */
  #section-whatsapp .brxe-div {
    flex-wrap: wrap !important;
  }

  /* Center text on mobile */
  #section-whatsapp .brxe-text-basic {
    text-align: center !important;
  }

  /* WhatsApp button: centered, reasonable max-width */
  #section-whatsapp .brxe-button {
    width: auto !important;
    min-width: 200px !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
  }

  /* ── iOS AUTO-ZOOM FIX: inputs must be ≥16px so iOS Safari doesn't zoom ── */
  .blv-input,
  #chat-input,
  .blv-textarea,
  select,
  #bk-drink-select {
    font-size: 16px !important;
  }

  /* ── TOAST: above bottom nav bar ── */
  #blv-toast-container {
    bottom: 78px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100% - 24px) !important;
  }

  #blv-toast-container>div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════
   PORTRAIT PHONE (≤ 478px) — fine-tuning
══════════════════════════════════════════════════════ */
@media (max-width: 478px) {

  /* Headings: smallest readable size */
  .belvedere-section-h,
  [class*="brx-global-class-blv007"],
  .belvedere-section-h *,
  [class*="brx-global-class-blv007"] * {
    font-size: 18px !important;
  }

  /* All cards: maximum padding compression */
  .blv-card,
  .belvedere-card,
  [class*="brx-global-class-blv005"] {
    padding: 12px !important;
  }

  /* Breakfast: time slot pills even smaller */
  .blv-time-slot {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-width: 46px !important;
  }

  /* Chat: slightly less height so keyboard doesn't hide send button */
  #chat-messages {
    max-height: 36vh !important;
    min-height: 160px !important;
  }

  #chat-input {
    font-size: 16px !important;
    /* 16px prevents iOS auto-zoom on input focus */
  }

  /* Flights: tighter */
  #flights-list>div {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  #flights-list>div>div:first-child {
    font-size: 15px !important;
    width: 22px !important;
    min-width: 22px !important;
  }

  /* Weather: single column on portrait phones */
  #section-weather [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* WhatsApp button: full width on tiny screens */
  #section-whatsapp .brxe-button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Toast: above bottom nav on portrait */
  #blv-toast-container {
    bottom: 74px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRICKS HARDCODED PIXEL-WIDTH FIX  (≤ 1024px)
   Bricks stores element widths as px in the DB (e.g. 342px → 298px → 266px).
   max-width:100% alone can't override an inline width:266px — we also need
   width:100% !important.
   Sections that work fine already (hotel-info, breakfast, pillows, spa) are
   excluded to avoid disturbing their existing grid/flex layouts.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Sections whose <section> element itself has a hardcoded px width */
  #section-concierge,
  #section-weather,
  #section-flights,
  #section-whatsapp {
    width: 100% !important;
  }

  /* WhatsApp cards: Bricks hardcodes width:860px — override for tablet
     so they don't overflow. At desktop (>1024px) the 860px value is
     fine and stays centred within the max-width:860px container. */
  #brxe-wa100,
  #brxe-wa200 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* All Bricks layout containers inside the affected sections */
  #section-concierge .brxe-container,
  #section-concierge .brxe-div,
  #section-weather .brxe-container,
  #section-weather .brxe-div,
  #section-flights .brxe-container,
  #section-flights .brxe-div,
  #section-whatsapp .brxe-container,
  #section-whatsapp .brxe-div {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 22px !important;
  padding-right: 22px !important;
  }

  /* Flights list: allow JS-rendered cards to expand */
  #flights-list {
    width: 100% !important;
  }

  #flights-list>div {
    width: 100% !important;
    max-width: 100% !important;
  }
}