/* Continue-booking nudge — structural CSS with design tokens.
   Tokens derived from the site's Tailwind config (index.html):
   ivory-base #F9F7F2, ink-charcoal #1A1A1A, on-surface-variant #414845,
   jungle-deep #003333, teal-mid #336666, ocean-teal #339999,
   sunset-orange #E89B5F; EB Garamond display / Mulish body.
   CTA uses jungle-deep (13.8:1 vs white) not ocean-teal (3.4:1 — fails AA);
   hover teal-mid (6.5:1). Scoped to .booking-nudge — no :root pollution. */

.booking-nudge {
  /* ---- design tokens: Bravo Beach Resort ---- */
  --cbn-surface: #F9F7F2;            /* ivory-base card background */
  --cbn-border: rgba(0, 51, 51, .18);
  --cbn-ink: #1A1A1A;                /* ink-charcoal heading text */
  --cbn-muted: #414845;              /* on-surface-variant secondary text */
  --cbn-accent: #336666;             /* teal-mid: property name (AA 6.1:1 on ivory) */
  --cbn-accent-2: #E89B5F;           /* sunset-orange for the top strip */
  --cbn-cta-bg: #003333;             /* jungle-deep CTA background */
  --cbn-cta-ink: #ffffff;            /* AA 13.8:1 vs jungle-deep */
  --cbn-cta-hover: #336666;          /* teal-mid hover — AA 6.5:1 vs white */
  --cbn-font-display: "EB Garamond", Georgia, serif;
  --cbn-font-body: Mulish, Helvetica, Arial, sans-serif;
  --cbn-radius: 8px;                 /* site rounded-lg */
  --cbn-cta-radius: 4px;             /* site buttons use rounded (0.25rem) */
  --cbn-cta-transform: uppercase;
  --cbn-cta-tracking: .1em;          /* site tracking-widest */
  --cbn-ease: cubic-bezier(.25, .8, .25, 1);
  /* ---- end tokens ---- */

  overflow: hidden;
  background: var(--cbn-surface);
  border: 1px solid var(--cbn-border);
  border-radius: var(--cbn-radius);
  box-shadow: 0 20px 60px -16px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .06);
  display: none;
  opacity: 0;
  position: fixed;
  right: 24px;
  top: 120px; /* clears the fixed header; verified against open book-menu */
  transform: translateY(-20px);
  transition: transform .45s var(--cbn-ease), opacity .45s var(--cbn-ease);
  width: min(380px, calc(100vw - 48px));
  z-index: 45; /* above page content, below the fixed header (z-50) so the
                  open Book Now dropdown and mobile drawer (z-60) draw over it */
}
.booking-nudge.show { display: block; }
.booking-nudge.in { opacity: 1; transform: translateY(0); }

.bn-accent { background: linear-gradient(90deg, var(--cbn-accent), var(--cbn-accent-2)); height: 3px; left: 0; position: absolute; right: 0; top: 0; }

.bn-header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 20px 24px 0; }
.bn-name { color: var(--cbn-ink); font-family: var(--cbn-font-display); font-size: 22px; font-weight: 400; letter-spacing: .01em; line-height: 1.25; }
.bn-close { align-items: center; background: transparent; border: 1px solid var(--cbn-border); border-radius: 50%; color: var(--cbn-muted); cursor: pointer; display: flex; flex-shrink: 0; height: 32px; justify-content: center; transition: all .3s var(--cbn-ease); width: 32px; }
.bn-close:hover { background: var(--cbn-ink); border-color: var(--cbn-ink); color: #fff; transform: rotate(90deg); }
.bn-close svg { height: 12px; width: 12px; }

.bn-body { padding: 12px 24px 20px; }
.bn-subtitle { color: var(--cbn-muted); font-family: var(--cbn-font-body); font-size: 14px; font-weight: 300; line-height: 1.6; margin-bottom: 4px; }
.bn-property { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 18px; font-weight: 400; letter-spacing: .01em; }
.bn-price { color: var(--cbn-muted); display: none; font-family: var(--cbn-font-body); font-size: 12px; font-weight: 300; line-height: 1.5; margin-top: 8px; }
.bn-price.loaded { display: block; }
.bn-price .price-msg { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 20px; font-weight: 500; }
.bn-price .general-msg { color: var(--cbn-muted); font-size: 12px; }

.bn-actions { align-items: center; display: flex; gap: 12px; padding: 0 24px 20px; }
.bn-cta { align-items: center; background: var(--cbn-cta-bg); border: 1px solid var(--cbn-cta-bg); border-radius: var(--cbn-cta-radius); color: var(--cbn-cta-ink); display: inline-flex; font-family: var(--cbn-font-body); font-size: 12px; font-weight: 400; gap: 8px; letter-spacing: var(--cbn-cta-tracking); padding: 12px 28px; text-decoration: none; text-transform: var(--cbn-cta-transform); transition: all .35s var(--cbn-ease); }
.bn-cta:hover { background: var(--cbn-cta-hover); border-color: var(--cbn-cta-hover); }
.bn-cta:after { background: currentColor; content: ""; height: 1px; transition: width .3s var(--cbn-ease); width: 14px; }
.bn-cta:hover:after { width: 20px; }

@media (max-width: 600px) {
  .booking-nudge { border-radius: 8px; left: auto; right: 12px; top: 100px; width: calc(100vw - 24px); }
  .bn-header { padding: 16px 18px 0; }
  .bn-body { padding: 10px 18px 16px; }
  .bn-actions { padding: 0 18px 16px; }
  .bn-name { font-size: 19px; }
  .bn-property { font-size: 16px; }
}