/* Conversion popups — continue-booking nudge (#bookingNudge) + price mailer (.price-mailer).
   Tokens from assets/shared/css/design-system.css (--ds-*). The site's booking CTA gold (#9D8345 on white,
   about 3.6:1) fails WCAG AA, so both popups use a darkened gold #806A36 (about 5.2:1) for the CTA and accent text.
   Layers: nudge 65 (above .site-header 60, below the menu overlay 70 and the booking popup 9000);
   mailer 100010 (above the site's highest layer, the collage lightbox 100000; far below reCAPTCHA's 2000000000). */

/* ---------- continue-booking nudge (structure from the skill template; token block filled) ---------- */
.booking-nudge {
  --cbn-surface: #FFFFFF;            /* --ds-paper */
  --cbn-border: #E3D9C3;             /* --ds-line */
  --cbn-ink: #2A2823;                /* --ds-ink */
  --cbn-muted: #5A554C;              /* --ds-ink-soft (7.4:1 on white) */
  --cbn-accent: #806A36;             /* site gold, darkened for AA */
  --cbn-accent-2: #C8A968;           /* --vv-gold (decorative strip only) */
  --cbn-cta-bg: #806A36;
  --cbn-cta-ink: #FFFFFF;
  --cbn-cta-hover: #6B5A2E;
  --cbn-font-display: 'Playfair Display', 'Times New Roman', serif;
  --cbn-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cbn-radius: 0px;                 /* --ds-radius */
  --cbn-cta-radius: 0px;
  --cbn-cta-transform: uppercase;
  --cbn-cta-tracking: .24em;         /* 2.88px at 12px, as .vbk-submit */
  --cbn-ease: cubic-bezier(.25, .8, .25, 1);

  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: 140px; /* under the fixed header (0-118px); clear of the floating call stack at the bottom right */
  transform: translateY(-20px);
  transition: transform .45s var(--cbn-ease), opacity .45s var(--cbn-ease);
  width: min(380px, calc(100vw - 48px));
  z-index: 65;
}
.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:focus-visible, .bn-cta:focus-visible { outline: 2px solid var(--cbn-ink); outline-offset: 2px; }
.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: 400; 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: 400; 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: 700; 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); color: var(--cbn-cta-ink); }
.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 { left: auto; right: 12px; top: 84px; 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; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-nudge, .bn-close, .bn-cta, .bn-cta:after { transition: none; }
  .bn-close:hover { transform: none; }
}

/* ---------- exit / delay-intent price mailer (markup built by assets/js/price-mailer.js) ---------- */
.price-mailer {
  align-items: center; background: rgba(42, 40, 35, .62); display: flex; inset: 0; justify-content: center;
  padding: 16px; position: fixed; z-index: 100010;
}
.price-mailer__panel {
  background: #FFFFFF; border-top: 3px solid #806A36; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .4);
  color: #2A2823; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  max-height: calc(100vh - 32px); max-width: 460px; overflow: auto; padding: 40px 36px 32px; position: relative; width: 100%;
}
.price-mailer__close {
  align-items: center; background: transparent; border: 1px solid #E3D9C3; border-radius: 50%; color: #5A554C; cursor: pointer;
  display: flex; font-size: 22px; height: 36px; justify-content: center; line-height: 1; padding: 0; position: absolute; right: 14px; top: 14px; width: 36px;
}
.price-mailer__close:hover { background: #2A2823; border-color: #2A2823; color: #FFFFFF; }
/* base.css sets p { font-family: var(--fd) } (the display serif): name the body face on each paragraph class */
.price-mailer__eyebrow, .price-mailer__sub, .price-mailer__dates, .price-mailer__msg, .price-mailer__fine {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.price-mailer__eyebrow {
  color: #806A36; font-size: 12px; font-weight: 700; letter-spacing: .24em; line-height: 18px; margin: 0 0 10px; text-transform: uppercase;
}
.price-mailer__title {
  color: #2A2823; font-family: 'Playfair Display', 'Times New Roman', serif; font-size: 28px; font-weight: 400; line-height: 36px; margin: 0 0 12px;
}
.price-mailer__sub { color: #5A554C; font-size: 14px; line-height: 22px; margin: 0 0 16px; }
.price-mailer__dates {
  border-bottom: 1px solid #ECE4D0; border-top: 1px solid #ECE4D0; color: #2A2823; font-size: 14px; font-weight: 600; line-height: 22px; margin: 0 0 20px; padding: 10px 0;
}
.price-mailer__form { display: flex; flex-direction: column; }
.price-mailer__form label { color: #2A2823; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 6px; text-transform: uppercase; }
.price-mailer__form input {
  background: #FFFFFF; border: 1px solid #8F887C; border-radius: 0; color: #2A2823; font: inherit; font-size: 15px; height: 48px; padding: 0 14px; width: 100%;
}
.price-mailer__form input:focus { border-color: #2A2823; outline: 2px solid #2A2823; outline-offset: 1px; }
.price-mailer__msg { font-size: 13px; line-height: 1.3; margin: 6px 0 0; min-height: 17px; }
.price-mailer__msg--error { color: #B3261E; }
.price-mailer__submit {
  align-items: center; background: #806A36; border: 1px solid #806A36; border-radius: 0; color: #FFFFFF; cursor: pointer; display: inline-flex;
  font-family: inherit; font-size: 12px; font-weight: 700; height: 48px; justify-content: center; letter-spacing: .24em; margin-top: 14px;
  padding: 0 28px; text-decoration: none; text-transform: uppercase; width: 100%;
}
.price-mailer__submit:hover { background: #6B5A2E; border-color: #6B5A2E; color: #FFFFFF; }
.price-mailer__submit:disabled { cursor: progress; opacity: .8; }
.price-mailer__submit:focus-visible, .price-mailer__close:focus-visible { outline: 2px solid #2A2823; outline-offset: 2px; }
.price-mailer__fine { color: #5A554C; font-size: 12px; line-height: 18px; margin: 14px 0 0; }
@media (max-width: 600px) {
  .price-mailer { align-items: flex-end; padding: 0; }
  .price-mailer__panel { max-height: 92vh; max-width: none; padding: 32px 20px 24px; }
  .price-mailer__title { font-size: 24px; line-height: 32px; }
}
