/* Continue-booking nudge — Kavin Hotels.
   Structure is the proven template; only the token block below was filled.
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value
   from the target site's own CSS (see SKILL.md STEP 2); the structure below
   is proven and stays as-is. Scoped to .booking-nudge — no :root pollution. */

.booking-nudge {
  /* ---- design tokens: derived from Kavin Hotels styles.css (:root + [data-theme=dark]) ---- */
  --cbn-surface: var(--surface, #ffffff);       /* site card surface; flips in dark mode */
  --cbn-border: var(--line, #e7dfd2);
  --cbn-ink: var(--fg, #151411);                /* 18.42:1 light / 15.30:1 dark */
  --cbn-muted: var(--muted, #6f6a62);           /* 5.37:1 light / 4.89:1 dark */
  --cbn-accent: #B85813;                        /* AA-safe copper for text, 4.73:1 on white */
  --cbn-accent-2: var(--copper, #F58220);       /* decorative top strip only */
  --cbn-cta-bg: var(--copper, #F58220);         /* AA WAIVED by user 2026-09-08 (2.41:1) */
  --cbn-cta-ink: #ffffff;                       /* pure white: the site's own --cream (#faf6ef) read dull at this size */
  --cbn-cta-hover: var(--ink, #151411);         /* site .btn-primary:hover goes to --ink */
  --cbn-font-display: "Playfair Display", Georgia, serif;
  --cbn-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cbn-radius: var(--radius, 14px);            /* site card radius */
  --cbn-cta-radius: 999px;                      /* site .btn is a pill */
  --cbn-cta-transform: none;                    /* site buttons are not uppercase */
  --cbn-cta-tracking: .01em;                    /* site .btn letter-spacing */
  --cbn-ease: var(--ease, cubic-bezier(0.2, 0.7, 0.2, 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: 96px; /* clears .floating-actions (60px rail at right:24px) at every viewport height */
  top: 340px;
  transform: translateY(-20px);
  transition: transform .45s var(--cbn-ease), opacity .45s var(--cbn-ease);
  width: min(380px, calc(100vw - 48px));
  z-index: 2900; /* above page chrome, below any cookie-consent overlay */
}
.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: 15px; font-weight: 500; gap: .35em; letter-spacing: var(--cbn-cta-tracking); padding: 13px 26px; 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: none; content: "\2192"; font-size: 1em; height: auto; line-height: 1; transition: transform .3s var(--cbn-ease); width: auto; }
.bn-cta:hover:after { transform: translateX(4px); }

@media (max-width: 600px) {
  /* header is 94px tall at these widths; sit just below it, above the
     bottom-anchored .floating-actions rail */
  .booking-nudge { border-radius: 8px; left: auto; right: 12px; top: 128px; 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; }
}

/* Dark mode: the site already defines a light-on-dark copper. Tokens only. */
[data-theme=dark] .booking-nudge {
  --cbn-accent: var(--copper-accessible, #FBC78A); /* 11.58:1 on dark surface */
  --cbn-cta-hover: var(--copper-dark, #C5601A);
  box-shadow: 0 20px 60px -16px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}

/* Short viewports — landscape phones included (e.g. iPhone 12 Pro at
   844x390). Two separate problems here:

   1. styles.css re-anchors .floating-actions to top:112px with
      max-height:none at this breakpoint, so the FAB rail owns the whole
      right edge and vertical separation from it is impossible. The nudge
      clears it HORIZONTALLY instead: the rail is <=60px wide at right:24px,
      so it occupies 100vw-84px .. 100vw-24px; right:96px keeps a ~12px gap,
      and the width cap keeps a left margin at narrow widths.

   2. top:340px only works when the viewport is tall. At 390px tall a
      340px offset pushed the whole card below the fold. Anchor it just
      under the header instead, and cap the height so it can never run off
      the bottom no matter how short the viewport gets (the card scrolls
      internally in the extreme case).

   Must stay AFTER the max-width block to win on 360x640-class viewports. */
@media (max-height: 640px) {
  .booking-nudge {
    right: 96px;
    width: min(380px, calc(100vw - 120px));
    top: calc(var(--header-h, 96px) + 28px);
    max-height: calc(100vh - var(--header-h, 96px) - 40px);
    overflow-y: auto;
  }
}

/* Very short viewports (landscape phones ~344-400px tall). The height cap
   above stops the card running off the bottom, but on the shortest of these
   the natural ~254px card exceeds the cap and the CTA ends up behind an
   internal scroll — and a Continue Booking button you have to scroll a popup
   to find is the one thing that must never happen. So compact the card
   instead: trim the vertical padding and type until the whole thing, CTA
   included, fits without scrolling. overflow-y:auto stays as the last-resort
   safety net for anything shorter still. */
@media (max-height: 400px) {
  .bn-header { padding: 12px 18px 0; }
  .bn-name { font-size: 18px; }
  .bn-body { padding: 6px 18px 8px; }
  .bn-subtitle { font-size: 13px; margin-bottom: 2px; }
  .bn-property { font-size: 16px; }
  .bn-price { font-size: 11px; margin-top: 4px; }
  .bn-price .price-msg { font-size: 16px; }
  .bn-actions { padding: 0 18px 12px; }
  .bn-cta { font-size: 14px; padding: 10px 20px; }
  .bn-close { height: 28px; width: 28px; }
}

/* nudge-popup-priority.js dismisses the offers toaster while the nudge is up,
   which reveals the site's "reopen offers" tab (#offersReopen / .ot-reopen,
   z-index 8999, left rail). At 360x640 that tab overlaps the nudge's left
   edge and, being the higher z-index, paints over it. Suppress it only while
   the nudge is showing — it comes back the moment the nudge is dismissed. */
html.cbn-nudge-up .ot-reopen { display: none !important; }