/* Signum Hotels & Resorts — nudge styles (site has no external stylesheet; this file is
   <link>ed on every page). Blocks: continue-booking nudge (.booking-nudge) and the
   remarketing nudge (.pi-modal, appended by remarketing-nudge/scripts/inject.mjs). */

/* Continue-booking nudge — structural CSS with design tokens.
   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: Signum Hotels & Resorts (tailwind.config palette, 24 Sep 2026) ---- */
  --cbn-surface: #ffffff;            /* surface-bright: cards are white on this site */
  --cbn-border: rgba(0, 0, 0, .12);  /* outline-variant */
  --cbn-ink: #000000;                /* signum-ink */
  --cbn-muted: #666666;              /* ink-muted rgba(0,0,0,.6) on white = 5.74:1 */
  --cbn-accent: #0074B8;             /* signum-blue-text (5.01:1 on white) */
  --cbn-accent-2: #5CA3FF;           /* signum-sky */
  --cbn-cta-bg: #00659F;             /* signum-deep: header "Book now" button */
  --cbn-cta-ink: #ffffff;            /* 6.25:1 vs --cbn-cta-bg */
  --cbn-cta-hover: #000000;          /* site CTAs hover to signum-ink */
  --cbn-font-display: 'Open Sans', system-ui, sans-serif;  /* one family only, per brand document */
  --cbn-font-body: 'Open Sans', system-ui, sans-serif;
  --cbn-radius: 16px;                /* rounded-2xl cards */
  --cbn-cta-radius: 4px;             /* rounded (0.25rem) buttons */
  --cbn-cta-transform: uppercase;    /* header CTA: uppercase, tracking-widest */
  --cbn-cta-tracking: .1em;
  --cbn-ease: cubic-bezier(.4, 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;
  left: 24px;
  right: auto;
  top: 126px; /* Signum: directly under the fixed header (110px). The hero booking bar spans the
                 width just above the fold, so any lower spot covers it on 1366x599 laptops; the
                 right side would sit on the child homepages' weather widget and the Rooms & guests
                 popover. Mobile keeps the template's right-aligned rule below. */
  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-meta { color: var(--cbn-muted); font-family: var(--cbn-font-body); font-size: 13px; font-weight: 300; line-height: 1.5; margin-top: 8px; }
.bn-meta:empty { display: none; }
.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: 320px; 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; }
}

/* == remarketing-nudge == "Get these prices emailed to you!" (namespaced .pi-)
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value from the
   target site's own CSS (SKILL.md STEP 3); the structure below is proven on The Hans
   Hotels (Sep 2026) and stays as-is. Scoped to .pi-modal — no :root pollution.

   This is the only true modal on most sites: it takes the whole screen and locks body
   scroll, so nothing else may paint above it except a skip link. Set --rmn-z above the
   site's drawer/cookie notice and below its skip link. */
.pi-modal {
  /* ---- design tokens: Signum Hotels & Resorts (tailwind.config palette, 24 Sep 2026) ---- */
  --rmn-z: 150;                                    /* above header z-50 + drawer z-60, below skip link z-200 */
  --rmn-backdrop: rgba(0, 0, 0, .62);              /* signum-ink at .62 */
  --rmn-surface: #ffffff;                          /* site dialogs are white cards (light surface) */
  --rmn-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  --rmn-ink: #000000;                              /* 21:1 on surface */
  --rmn-muted: #666666;                            /* ink-muted: 5.74:1 on surface */
  --rmn-accent: #0074B8;                           /* signum-blue-text: 5.01:1 on surface */
  --rmn-field-bg: #ffffff;
  --rmn-field-ink: #000000;
  --rmn-field-placeholder: #666666;                /* 5.74:1 on field bg */
  --rmn-cta-bg: #00659F;                           /* signum-deep: header "Book now" */
  --rmn-cta-ink: #ffffff;                          /* 6.25:1 vs cta bg */
  --rmn-cta-hover: #000000;                        /* site CTAs hover to signum-ink */
  --rmn-close-bg: rgba(0, 0, 0, .06);
  --rmn-close-hover: rgba(0, 0, 0, .12);
  --rmn-font-display: 'Open Sans', system-ui, sans-serif;   /* one family only, per brand document */
  --rmn-font-body: 'Open Sans', system-ui, sans-serif;
  --rmn-font-cta: var(--rmn-font-body);
  --rmn-display-weight: 700;                       /* headings carry hierarchy by weight on this site */
  --rmn-cta-transform: uppercase;                  /* header CTA: uppercase, tracking-widest */
  --rmn-cta-tracking: .1em;
  --rmn-radius: 16px;                              /* rounded-2xl cards */
  --rmn-field-radius: 8px;                         /* rounded-lg inputs (contact form) */
  --rmn-t: .4s cubic-bezier(.4, 0, .2, 1);
  /* ---- end tokens ---- */

  position: fixed; inset: 0; z-index: var(--rmn-z); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.pi-modal.show { display: flex; }
.pi-backdrop { position: absolute; inset: 0; background: var(--rmn-backdrop);
  opacity: 0; transition: opacity var(--rmn-t); }
.pi-modal.in .pi-backdrop { opacity: 1; }

/* A dark card reads as an offer rather than an error, and the CTA carries all the
   contrast it needs against it. */
.pi-panel { position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--rmn-surface); box-shadow: var(--rmn-shadow); border-radius: var(--rmn-radius);
  padding: 44px 44px 34px; text-align: center;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--rmn-t), transform var(--rmn-t); }
.pi-modal.in .pi-panel { opacity: 1; transform: none; }

.pi-view { display: flex; flex-direction: column; align-items: stretch; }

.pi-title { font-family: var(--rmn-font-display); font-size: 1.95rem; font-weight: var(--rmn-display-weight); line-height: 1.18;
  color: var(--rmn-ink); margin: 0 0 26px; }

.pi-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* 17px keeps iOS from zooming the viewport when the field takes focus. */
.pi-field { width: 100%; min-height: 52px; padding: 14px 18px; box-sizing: border-box;
  background: var(--rmn-field-bg); color: var(--rmn-field-ink); border: 1px solid rgba(0, 0, 0, .12); /* light surface: visible field edge, = site outline-variant */
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-body); font-size: 17px; line-height: 1.4; }
.pi-field::placeholder { color: var(--rmn-field-placeholder); }
.pi-field:focus-visible { outline: 2px solid var(--rmn-accent); outline-offset: 2px; }

.pi-error[hidden] { display: none; }
/* Muted accent, not red: it has to clear 4.5:1 on the dark surface, which a warning
   red does not. The role="alert" is what carries the urgency. */
.pi-error { font-family: var(--rmn-font-body); font-size: .78rem; line-height: 1.4;
  color: var(--rmn-muted); text-align: left; margin: -4px 0 0; }

.pi-submit { width: 100%; min-height: 52px; padding: 14px 22px;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); border: none; cursor: pointer;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .95rem;
  text-transform: var(--rmn-cta-transform); letter-spacing: var(--rmn-cta-tracking);
  transition: background var(--rmn-t); }
.pi-submit:hover, .pi-submit:focus-visible { background: var(--rmn-cta-hover); }

.pi-note { font-family: var(--rmn-font-body); font-size: .8rem; line-height: 1.4;
  color: var(--rmn-muted); margin: 16px 0 0; }

/* 44px hit area, small glyph. */
.pi-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--rmn-close-bg); border: none; border-radius: 50%;
  color: var(--rmn-ink); cursor: pointer; transition: background var(--rmn-t); }
.pi-close:hover, .pi-close:focus-visible { background: var(--rmn-close-hover); }
.pi-close svg { width: 14px; height: 14px; }

/* ---- success view ---- */
.pi-success { align-items: center; gap: 0; }
.pi-success-icon { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 18px; border-radius: 50%;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); }
.pi-success-icon svg { width: 22px; height: 22px; }
.pi-success-title { font-family: var(--rmn-font-display); font-size: 1.7rem; font-weight: var(--rmn-display-weight);
  line-height: 1.2; color: var(--rmn-ink); margin: 0 0 10px; }
.pi-success-sub { font-family: var(--rmn-font-body); font-size: .82rem; line-height: 1.5;
  color: var(--rmn-muted); margin: 0 0 6px; }
.pi-success-prop { font-family: var(--rmn-font-display); font-size: 1.22rem; font-weight: var(--rmn-display-weight);
  line-height: 1.25; color: var(--rmn-accent); margin: 0 0 24px; }
.pi-success-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 22px; box-sizing: border-box;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); text-decoration: none;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; transition: background var(--rmn-t); }
.pi-success-cta:hover, .pi-success-cta:focus-visible { background: var(--rmn-cta-hover); color: var(--rmn-cta-ink); }
.pi-success-cta svg { width: 14px; height: 14px; transition: transform var(--rmn-t); }
.pi-success-cta:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .pi-modal { padding: 16px; }
  .pi-panel { padding: 38px 24px 28px; }
  .pi-title { font-size: 1.6rem; }
  .pi-success-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-panel { transform: none; transition: opacity .3s; }
  .pi-backdrop { transition: opacity .3s; }
  .pi-submit, .pi-close, .pi-success-cta, .pi-success-cta svg { transition: none; }
  .pi-success-cta:hover svg { transform: none; }
}
/* == /remarketing-nudge == */