/**
 * The notice that confirms a cart click (js/rba-sessions.cart-toast.js).
 *
 * Shown when a session goes into the cart and never when one comes back out
 * - see the JS for why.
 *
 * Styled here rather than in the theme, unlike the cart buttons: those take
 * their type and colour from whatever they sit next to, while this one is
 * pinned to the viewport and sits on the page rather than in it, so there is
 * no context to match. It follows the CI directly instead - trust maroon,
 * card radius, Bosch Sans - with fallbacks on every token, because the notice
 * also appears on pages the theme's token sheet does not reach.
 *
 * One toast per page, reused for every click, so nothing here stacks.
 */
.rba-sessions-cart-toast {
  --rba-toast-bg:     var(--trust, #550a2d);
  --rba-toast-text:   var(--white, #ffffff);
  --rba-toast-muted:  var(--trust-100, #ddced5);
  --rba-toast-accent: var(--attitude, #ffa0fa);

  /* Above the slide-in menu (z-index 500) and below Drupal's admin dialogs
     (1260): a notice must survive an open menu, but never cover a modal. */
  position: fixed;
  z-index: 600;
  right:  var(--spacing-300, 24px);
  bottom: var(--spacing-300, 24px);
  left:   var(--spacing-300, 24px);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  column-gap: var(--spacing-150, 12px);
  row-gap: var(--spacing-100, 8px);

  padding: var(--spacing-200, 16px) var(--spacing-250, 20px);
  border-radius: var(--border-radius-m, 4px);
  background-color: var(--rba-toast-bg);
  color: var(--rba-toast-text);
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);

  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';

  /* Hidden state. The JS unhides first and adds .is-visible a frame later, so
     the notice always has a painted starting point to move from. */
  opacity: 0;
  transform: translateY(var(--spacing-150, 12px));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.rba-sessions-cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The JS takes the notice out of the accessibility tree and the tab order
   between clicks; without this the display above would outrank the UA's
   [hidden] rule and it would stay on screen. */
.rba-sessions-cart-toast[hidden] {
  display: none;
}

/* From tablet up it stops being a bar and becomes a card in the corner. */
@media (min-width: 768px) {
  .rba-sessions-cart-toast {
    left: auto;
    width: min(420px, calc(100vw - 2 * var(--spacing-300, 24px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rba-sessions-cart-toast {
    transform: none;
    transition: opacity 0.01ms;
  }
}

/* A printed page is not a moment in a session - and the notice would land
   over whatever was underneath it. */
@media print {
  .rba-sessions-cart-toast {
    display: none;
  }
}

/* ── Icon ─────────────────────────────────────────────────────────────────
 * The check, drawn inline by the JS. The nudge down centres it against the
 * first line of the message rather than against the top of its box.
 */
.rba-sessions-cart-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--rba-toast-accent);
}

.rba-sessions-cart-toast__icon svg {
  width: 100%;
  height: 100%;
}

/* ── Message and count ───────────────────────────────────────────────────── */
.rba-sessions-cart-toast__body {
  /* Without this a long message would push the grid wider than the notice
     instead of wrapping inside it. */
  min-width: 0;
}

.rba-sessions-cart-toast__message {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-card-s, 15px);
  line-height: 1.4;
  color: var(--rba-toast-text);
  text-wrap: pretty;
}

.rba-sessions-cart-toast__count {
  margin: var(--spacing-050, 4px) 0 0;
  font-size: var(--text-card-xs, 14px);
  line-height: 1.4;
  color: var(--rba-toast-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Cart link ────────────────────────────────────────────────────────────
 * Its own row under the message rather than beside it: at 420px the German
 * labels leave no room for a second control on the message's line, and a link
 * that wraps to two words reads as two links.
 */
.rba-sessions-cart-toast__link {
  grid-column: 2;
  justify-self: start;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-card-s, 15px);
  line-height: 1.2;
  color: var(--rba-toast-text);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.rba-sessions-cart-toast__link:hover,
.rba-sessions-cart-toast__link:focus {
  color: var(--rba-toast-accent);
}

.rba-sessions-cart-toast__link:focus-visible {
  outline: var(--border-width-regular, 2px) solid var(--rba-toast-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-s, 2px);
}

/* ── Close ────────────────────────────────────────────────────────────────
 * Sits in the third column of the first row, so the message never runs under
 * it however long it is.
 */
.rba-sessions-cart-toast__close {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: -2px -4px 0 0;
  background: none;
  border: none;
  border-radius: var(--border-radius-s, 2px);
  color: var(--rba-toast-muted);
  cursor: pointer;
}

.rba-sessions-cart-toast__close svg {
  width: 14px;
  height: 14px;
}

.rba-sessions-cart-toast__close:hover {
  color: var(--rba-toast-text);
}

.rba-sessions-cart-toast__close:focus-visible {
  outline: var(--border-width-regular, 2px) solid var(--rba-toast-accent);
  outline-offset: 2px;
}