/* Raw Toast Messaging. Webflow maketa toast nemá, je postavený z komponent design
   systému šablony (karta + mi-icon + tokeny). Renderuje ho plugin, do #rb-toast-root
   ho přesune assets/js/toast.js.

   Pozor na výchozí viditelnost: WC_AJAX::checkout() vypisuje validační chyby
   objednávky přes wc_print_notices(true) a checkout.js je vloží do
   .woocommerce-NoticeGroup-checkout přímo ve formuláři pokladny, mimo #rb-toast-root,
   dokud si je JS nevšimne a nepřesune. `.rb-toast` proto MUSÍ být viditelný
   by default (žádné opacity: 0 / transform v základním pravidle), jinak by zákazník
   viděl jen zaseklé tlačítko bez důvodu. Skrytý výchozí stav a enter animace platí
   jen pro toasty, které už jsou uvnitř .rb-toast-root. */
.rb-toast-root {
  position: fixed;
  top: 96px;
  right: var(--size-s);
  /* CookieScript (externí skript) injektuje fixed full-viewport backdrop s z-index
     999996-999998 (naměřeno 24. 8. 2026). Bez neodklikané lišty by toast byl pod
     tímhle poloprůhledným overlay, ztlumený do šeda a neklikatelný. 1000000 je těsně
     nad nejvyšším CookieScript z-indexem. Pozičně se s lištou nepřekrývá (toast
     vpravo nahoře, lišta dole/uprostřed). */
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  gap: var(--size-xs);
  max-width: 360px;
  pointer-events: none;
}
.rb-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--size-xs);
  padding: var(--size-s) 20px;
  border-radius: var(--size-m);
  background-color: var(--basic--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  pointer-events: auto;
}
/* Příjezd a odjezd zprava: toast přijede zpoza pravého okraje okna, lehce přejede
   a vrátí se na místo; po intervalu se nadechne doleva a odjede zpět doprava.
   Po celou jízdu je plně vidět (žádné prolínání). Třídy spíná toast.js:
   .is-visible = příjezd, .is-leaving = odjezd (450 ms = LEAVE_DURATION v JS).
   Výchozí stav v rootu je mimo obraz, server-renderované toasty mimo root zůstávají
   vidět (viz poznámka výš). */
.rb-toast-root .rb-toast {
  opacity: 0;
  transform: translateX(calc(100% + 60px));
}
.rb-toast-root .rb-toast.is-visible {
  opacity: 1;
  transform: none;
  animation: rb-toast-in .7s cubic-bezier(.22, .61, .36, 1) both;
}
.rb-toast-root .rb-toast.is-visible.is-leaving {
  animation: rb-toast-out .45s cubic-bezier(.55, .06, .68, .19) forwards;
}
@keyframes rb-toast-in {
  0%   { transform: translateX(calc(100% + 60px)); }
  65%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}
@keyframes rb-toast-out {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  100% { transform: translateX(calc(100% + 60px)); }
}
/* „Omezit pohyb": jízda zůstává, jen bez přejetí a nadechnutí. */
@keyframes rb-toast-in-plain {
  from { transform: translateX(calc(100% + 60px)); }
  to   { transform: translateX(0); }
}
@keyframes rb-toast-out-plain {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% + 60px)); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-toast-root .rb-toast.is-visible { animation: rb-toast-in-plain .45s ease-out both; }
  .rb-toast-root .rb-toast.is-visible.is-leaving { animation: rb-toast-out-plain .45s ease-in forwards; }
}
.rb-toast--success { background-color: var(--game--100); }
.rb-toast--success .rb-toast__icon { color: var(--game--500); }
.rb-toast--error .rb-toast__icon { color: var(--beef--500); }
.rb-toast--warning .rb-toast__icon { color: var(--rb--orange); }
.rb-toast--info .rb-toast__icon { color: var(--rb--purple-700); }
.rb-toast__text { flex: 1 1 auto; }
.rb-toast__close { background: none; border: 0; cursor: pointer; opacity: .5; }
.rb-toast__close:hover { opacity: 1; }
/* Desktop: kousek od okraje (2vw: 1920 → 38 px, 1440 → 29 px) a hned pod hlavičkou,
   nahoře pod navbarem (12,5vh), po scrollu pod zmenšenou hlavičkou (.header.is-scrolled,
   80 px). Delší minimální šířka, ať krátká hláška nevypadá jako odznak. */
@media (min-width: 992px) {
  .rb-toast-root {
    top: calc(12.5vh + 1vw);
    right: max(var(--size-s), 2vw);
    transition: top .2s ease;
  }
  body:has(.header.is-scrolled) .rb-toast-root { top: calc(80px + 1vw); }
  .rb-toast { min-width: 240px; }
}
/* Tablet: navbar je tu vyšší (min-height 130 / 110 px), toast pod něj. */
@media (min-width: 480px) and (max-width: 991px) {
  .rb-toast-root { top: 140px; right: 20px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .rb-toast-root { top: 120px; right: var(--size-s); }
}
@media (max-width: 479px) {
  .rb-toast-root { left: var(--size-xs); right: var(--size-xs); max-width: none; }
}
/* Tablet na výšku a na šířku se zmenšenou hlavičkou (bloky hlavičky v custom.css šablony). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  body:has(.header.is-scrolled) .rb-toast-root { top: 90px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 700px) and (orientation: landscape) {
  body .rb-toast-root,
  body:has(.header.is-scrolled) .rb-toast-root { top: 65px; }
}

/* Hlášky vypsané serverem do toku stránky (wc_print_notices, fronta z PHP). toast.js
   je po načtení přesune do fixního #rb-toast-root; formulář pokladny by pak vyskočil
   o výšku hlášky nahoru (CLS na mobilu 0,09–0,13). Tady hláška od začátku stojí tam,
   kde ji pak bude mít root, a místo v toku nezabírá. Viditelná zůstává i bez JS. */
.woocommerce > .rb-toast,
.woocommerce-notices-wrapper > .rb-toast,
.rb-toast-queue > .rb-toast {
  position: fixed;
  top: 96px;
  right: var(--size-s);
  z-index: 1000000;
  max-width: 360px;
}
@media (min-width: 992px) {
  .woocommerce > .rb-toast,
  .woocommerce-notices-wrapper > .rb-toast,
  .rb-toast-queue > .rb-toast {
    top: calc(12.5vh + 1vw);
    right: max(var(--size-s), 2vw);
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  .woocommerce > .rb-toast,
  .woocommerce-notices-wrapper > .rb-toast,
  .rb-toast-queue > .rb-toast { top: 140px; right: 20px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .woocommerce > .rb-toast,
  .woocommerce-notices-wrapper > .rb-toast,
  .rb-toast-queue > .rb-toast { top: 120px; right: var(--size-s); }
}
@media (max-width: 479px) {
  .woocommerce > .rb-toast,
  .woocommerce-notices-wrapper > .rb-toast,
  .rb-toast-queue > .rb-toast { left: var(--size-xs); right: var(--size-xs); max-width: none; }
}