/* Attribution Lab – the demo plaque on every demo page (C4 of the MVP plan).
   One line on desktop, two on a phone. It sits above the sticky .topbar and
   scrolls away with the page, so the topbar keeps its place once scrolled.
   Loaded after tokens.css, lab.css and booking.css. */

.demo-strip {
  padding: 6px var(--pad-x);
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.demo-strip strong {
  color: var(--text);
  font-weight: 600;
}

/* booking.nexusnode.ru inside an iframe on the brand site (embed mode):
   the host page already shows the plaque. */
body.embed .demo-strip { display: none; }

/* 360 px phones: the host badge in the topbar ("Payment · payment.nexusnode.ru")
   was the widest thing on the payment page and pushed it 9–14 px sideways.
   It now shortens with an ellipsis; at 390 px and wider nothing changes. */
@media (max-width: 380px) {
  .topbar-right { min-width: 0; }
  .topbar-right .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ======================================================================
   The demo layer of the agency pages and the booking platform (demo.js,
   guide.js; backlog 6204-2, 6204-3, e1ea-1). Everything here says "this is
   a demo", so it wears the hub's look (attribution-lab.nexusnode.ru,
   hub/src/case.css): IBM Plex from tokens.css, the hub palette with its
   violet accent, 6 px controls and 8 px cards, mono labels. What presents
   the travel agency keeps the site's look (site.css, booking.css); a dialog
   of the agency itself (privacy choices) is .dm-site and is dressed there.
   Light only, like the hub. The hub values are copied into --dm-* so a
   host's own palette never repaints the layer. */

:root {
  --dm-strip-h: 36px;
  --dm-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dm-text: #1C1917;
  --dm-muted: #78716C;
  --dm-faint: #A8A29E;
  --dm-surface: #FFFFFF;
  --dm-subtle: #F5F5F4;
  --dm-border: #E7E5E4;
  --dm-border-2: #D6D3D1;
  --dm-accent: #6E56CF;
  --dm-accent-soft: #EFEBFB;
  --dm-accent-text: #4C3BA8;
  /* the accent on the dark toast and hint */
  --dm-accent-on-dark: #B6AAE7;
  --dm-r-ctl: 6px;
  --dm-r-card: 8px;
  --dm-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------ the strip */
/* the hub's header in one line: white, a hairline under it, the mark */
.dm-strip {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--dm-strip-h);
  background: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border-2);
  color: var(--dm-text);
  font-family: var(--dm-font);
  font-size: 13px;
  line-height: 1.2;
  padding: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dm-strip-wrap {
  max-width: 1180px;
  margin: 0 auto;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
@media (min-width: 768px) { .dm-strip-wrap { padding: 0 32px; } }
.dm-strip button, .dm-strip label { font: inherit; color: inherit; }
.dm-about {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-strip .dm-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--dm-accent);
}
.dm-strip .dm-mark svg { display: block; width: 20px; height: 20px; }
.dm-about strong { color: var(--dm-text); font-weight: 600; }
.dm-about-txt { color: var(--dm-muted); overflow: hidden; text-overflow: ellipsis; }
.dm-about-more { color: var(--dm-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dm-about:hover .dm-about-more { color: var(--dm-accent); }
.dm-about:focus-visible, .dm-guide:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: 2px; border-radius: var(--dm-r-ctl); }
.dm-sp { flex: 1; }
.dm-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 8px;
  border-radius: var(--dm-r-ctl);
  border: 1px solid var(--dm-border-2);
  background: var(--dm-surface);
  font-weight: 500;
  cursor: pointer;
}
.dm-strip .dm-guide { color: var(--dm-text); }
.dm-strip .dm-guide svg { width: 12px; height: 12px; color: var(--dm-accent); }
.dm-strip .dm-guide:hover { border-color: var(--dm-accent); color: var(--dm-accent-text); }
.dm-strip .dm-guide[aria-pressed="true"] { background: var(--dm-accent); border-color: var(--dm-accent); color: #fff; }
.dm-strip .dm-guide[aria-pressed="true"] svg { color: #fff; }
.dm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.dm-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--dm-accent); cursor: pointer; }
.dm-strip .dm-check { color: var(--dm-muted); }
.dm-strip .dm-check:hover { color: var(--dm-text); }
@media (max-width: 767px) {
  .dm-strip-wrap { gap: 10px; }
  .dm-about-txt { display: none; }
  .dm-guide { padding: 0 9px 0 7px; }
}
@media (max-width: 420px) {
  .dm-guide span { display: none; }
  .dm-guide { padding: 0 7px; }
}

/* the static plaque before demo.js turns it into the strip: already the
   strip's look and height, so nothing jumps (the legacy stands keep theirs) */
.s-body #al-demo-strip.demo-strip, .bk-body #al-demo-strip.demo-strip {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--dm-strip-h);
  overflow: hidden;
  padding: 0 16px;
  background: var(--dm-surface);
  border-bottom: 1px solid var(--dm-border-2);
  color: var(--dm-muted);
  font-family: var(--dm-font);
  font-size: 13px;
  line-height: calc(var(--dm-strip-h) - 1px);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s-body #al-demo-strip.demo-strip strong, .bk-body #al-demo-strip.demo-strip strong { color: var(--dm-text); }

/* --------------------------------------------------------------- modal */
.dm-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  background: rgba(28, 25, 23, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* the page under an open modal does not scroll. On body, not html: in
   WebKit an html that was overflow:hidden leaves the sticky site header
   unstuck once the modal is closed (body's overflow-x stops propagating to
   the viewport while html has its own) */
html.dm-modal-open body { overflow: hidden; }
.dm-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--dm-surface);
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  padding: 24px 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--dm-font);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dm-modal .dm-card h2 {
  margin: 0;
  padding-right: 36px;
  font-family: var(--dm-font);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dm-text);
}
.dm-kicker {
  font-family: var(--dm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-accent-text);
}
.dm-modal .dm-body p { margin: 0 0 10px; color: var(--dm-text); }
.dm-modal .dm-body p:last-child { margin-bottom: 0; }
.dm-modal .dm-card a { color: var(--dm-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dm-modal .dm-card a:hover { color: var(--dm-accent); }
.dm-small { font-size: 13.5px; color: var(--dm-muted); }
.dm-foot { padding-top: 4px; }
.dm-check-foot { font-size: 14px; color: var(--dm-muted); }
.dm-check-foot input { accent-color: var(--dm-accent); }
.dm-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dm-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--dm-r-ctl);
  border: 1px solid var(--dm-border-2);
  background: var(--dm-surface);
  color: var(--dm-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.dm-btn:hover { border-color: var(--dm-accent); color: var(--dm-accent-text); }
.dm-btn.primary { background: var(--dm-accent); border-color: var(--dm-accent); color: #fff; }
.dm-btn.primary:hover { background: var(--dm-accent-text); border-color: var(--dm-accent-text); color: #fff; }
.dm-btn.lnk { border: 0; background: transparent; color: var(--dm-muted); padding: 0 6px; margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.dm-btn.lnk:hover { color: var(--dm-accent-text); }
.dm-btn:focus-visible, .dm-x:focus-visible { outline: 2px solid var(--dm-accent); outline-offset: 2px; }
.dm-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--dm-r-ctl);
  border: 0;
  background: transparent;
  color: var(--dm-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dm-x:hover { background: var(--dm-subtle); color: var(--dm-text); }
@media (max-width: 767px) {
  .dm-modal { padding: 12px; align-items: flex-end; }
  .dm-card { padding: 22px 20px 18px; }
  .dm-btn { flex: 1 1 auto; justify-content: center; }
  .dm-btn.lnk { flex: 0 0 100%; margin: 0; justify-content: center; }
}

/* --------------------------------------------------------------- toast */
/* the hub's toast (case.css .lang-toast), at the top: demo.js sets `top`
   under the strip and the site header */
.dm-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--dm-strip-h) + 12px);
  z-index: 80;
  transform: translate(-50%, -8px);
  display: flex;
  align-items: center;
  gap: 4px 10px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 4px 4px 4px 16px;
  border-radius: var(--dm-r-card);
  background: var(--dm-text);
  color: #fff;
  font-family: var(--dm-font);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--dm-shadow-pop);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.dm-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dm-toast-txt { min-width: 0; padding: 8px 0; }
.dm-toast .dm-toast-txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dm-toast .dm-toast-txt a:hover { color: var(--dm-accent-on-dark); }
/* two lines (e1ea-9): the plain fact, then the line for that place */
.dm-toast .dm-fact { display: block; font-weight: 600; }
.dm-toast .dm-line { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.82); }
.dm-toast .dm-quote { font-style: italic; }
.dm-toast-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--dm-r-ctl);
  background: transparent;
  color: var(--dm-border-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dm-toast-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.dm-toast :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  .dm-toast { left: 16px; right: 16px; width: auto; max-width: none; transform: translate(0, -8px); }
  .dm-toast.show { transform: translate(0, 0); }
  .dm-toast-txt { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-toast { transition: opacity 120ms ease; }
}

/* --------------------------------------------------------------- hints */
.s-guide-target { outline: 3px solid var(--dm-accent); outline-offset: 4px; border-radius: var(--dm-r-card); }
.s-callout {
  position: absolute;
  z-index: 45;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  border-radius: var(--dm-r-card);
  background: var(--dm-text);
  color: #fff;
  font-family: var(--dm-font);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  -webkit-font-smoothing: antialiased;
}
.s-callout.fixed { position: fixed; z-index: 70; }
.s-callout::before { content: ''; position: absolute; left: 28px; top: -6px; width: 12px; height: 12px; background: var(--dm-text); transform: rotate(45deg); border-radius: 2px; }
.s-callout.above::before { top: auto; bottom: -6px; }
.s-callout .step {
  margin-bottom: 6px;
  font-family: var(--dm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-accent-on-dark);
}
.s-callout h4 { margin: 0 0 6px; font-family: var(--dm-font); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.s-callout p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.s-callout .acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.s-callout .acts .sp { margin-left: auto; }
.s-callout button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--dm-r-ctl);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.s-callout button:hover { border-color: #fff; }
.s-callout button.primary { background: var(--dm-accent); border-color: var(--dm-accent); }
.s-callout button.primary:hover { background: #5B45B8; border-color: #5B45B8; }
.s-callout button.lnk { border: 0; padding: 0 4px; color: rgba(255, 255, 255, 0.65); text-decoration: underline; text-underline-offset: 3px; }
.s-callout button.lnk:hover { color: #fff; }
.s-callout button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* "Next" on a step whose action is not done yet: it still answers a press
   (a toast says what to do), so it is dimmed, not disabled */
.s-callout button.primary.off { opacity: 0.45; cursor: default; }
.s-callout button.primary.off:hover { background: var(--dm-accent); border-color: var(--dm-accent); }
.s-callout .lnk-line { margin-top: 8px; }
.s-callout .lnk-line a { color: var(--dm-accent-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.s-callout .lnk-line a:hover { color: #fff; }
@media (max-width: 767px) {
  .s-callout { position: fixed; left: 12px; right: 12px; width: auto; top: auto !important; bottom: calc(var(--drawer-h, 0px) + var(--s-cookie-h, 0px) + 74px); z-index: 70; }
  .s-callout::before { display: none; }
}

/* guide.js: the "How this works" button blinks for a few seconds after
   "Hide hints", so the visitor sees where the hints come back (Anton 26.09) */
@keyframes al-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(106, 79, 214, 0); } 50% { box-shadow: 0 0 0 5px rgba(106, 79, 214, 0.45); } }
.al-blink { animation: al-blink 1s ease-in-out 6; }
@media (prefers-reduced-motion: reduce) { .al-blink { animation: none; outline: 2px solid #6a4fd6; outline-offset: 2px; } }

/* guide.js in the embedded widget: the hint is a block at the top of the
   widget, not a sheet fixed to the bottom of a frame as tall as its content */
.s-callout.in-embed { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; max-width: none; margin: 0 0 12px; }