/* fx/cart-order.css - modul cart-order
   „Môj výber“ ako spodný panel (<=600px), žijúce riadky a súčty,
   záväzná objednávka ako list, vlastná validácia polí, potvrdenie, toast.
   Nič tu nie je skryté bez JS: všetky počiatočné stavy vznikajú až
   otvorením dialógu (drawer/modal sú bez JS nedostupné) alebo cez WAAPI. */

/* ---------- scrim ---------- */
.scrim{ transition:opacity .42s var(--ease); }

/* ---------- riadky výberu a súčty ---------- */
.drawer__foot{ flex:none; }
/* nízke okno (mobil naležato): pätička zásuvky len so súčtom a tlačidlom, aby zoznam kurzov ostal čitateľný */
@media (max-height:480px){
  .drawer__foot .nudge, .drawer__foot > p.muted, .drawer__foot .total__row{ display:none; }
  .drawer__foot .total{ margin:0 0 .5rem !important; }
}
.drawer__foot > .total:first-child{ border-top:0; padding-top:0; margin-top:0; }
.drawer.is-dragging{ transition:none; }
.total b{ font-variant-numeric:tabular-nums; min-width:5ch; text-align:right; }
.citem__price b{ font-variant-numeric:tabular-nums; }
.citem__rm[aria-disabled="true"]{ pointer-events:none; }

/* ---------- mobil: spodný panel ---------- */
@media (max-width:600px){
  .drawer{
    top:auto; left:0; right:0; bottom:0; width:100%;
    max-height:min(88vh, calc(100vh - 40px));
    max-height:min(88svh, calc(100svh - 40px));
    border-radius:26px 26px 0 0; overflow:hidden;
    transform:translate3d(0, 100%, 0);
    transition:transform .48s var(--ease), visibility 0s .48s;
  }
  .drawer.is-on{ transform:none; box-shadow:0 -30px 60px -30px rgba(0,0,0,.3); }
  .drawer.is-dragging{ transition:none; }
  .drawer__head{ position:relative; padding:1.6rem 1.1rem .95rem 1.4rem; touch-action:none; }
  .drawer__head::before{
    content:""; position:absolute; top:8px; left:50%; width:36px; height:4px; margin-left:-18px;
    border-radius:2px; background:#d2d2d7; pointer-events:none;
  }
  .drawer__body{ flex:1 1 auto; min-height:0; padding:1rem 1.4rem; }
  .drawer__foot{ padding:1rem 1.4rem calc(1rem + env(safe-area-inset-bottom)); }
  .drawer__foot .total{ margin:.3rem 0 .8rem; }
}

/* ---------- objednávka: pozadie ako samostatná vrstva (animuje sa len opacity) ---------- */
.modal{ opacity:1; background:transparent; transition:none; }
.modal:not(.is-open){ pointer-events:none; }
.modal::before{
  content:""; position:absolute; inset:0; background:rgba(29,31,29,.5);
  opacity:0; transition:opacity .32s var(--ease);
}
.modal.is-open::before{ opacity:var(--co-back, 1); }
.modal:not(.is-open)::before{ transition-duration:.24s; }
.modal.is-dragging::before{ transition:none; }

/* desktop: karta sa zjaví a skutočne odíde */
.modal__card{
  z-index:1; opacity:0; transform:translate3d(0, 20px, 0) scale(.98);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.modal.is-open .modal__card{ opacity:1; transform:none; }
.modal:not(.is-open) .modal__card{ transition-duration:.24s; }
.modal.is-dragging .modal__card{ transition:none; }

/* mobil: list zospodu */
@media (max-width:600px){
  .modal{ align-items:flex-end; padding:0; }
  .modal__card{
    width:100%; max-height:94vh; max-height:94dvh; border-radius:26px 26px 0 0;
    opacity:1; transform:translate3d(0, 100%, 0);
    transition:transform .52s var(--ease);
  }
  .modal.is-open .modal__card{ transform:none; }
  /* bez modulového JS jadro skryje dialóg po 260 ms, odchod sa do toho zmestí;
     s ním (IA.orderCloseDelay 400) plynulejších .36 s */
  .modal:not(.is-open) .modal__card{ transition-duration:.26s; }
  .fx-validate .modal:not(.is-open) .modal__card{ transition-duration:.36s; }
  .modal.is-dragging .modal__card{ transition:none; }
  /* zatváracie tlačidlo ostáva hore aj pri posúvaní listu */
  .modal__close{ position:sticky; top:.6rem; margin:.6rem .6rem -46px auto; z-index:3; }
  /* nad posunutým obsahom dostane tlačidlo tichý okraj (tieňová vrstva, animuje sa len opacity) */
  .modal__close::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 14px -6px rgba(0,0,0,.18);
    opacity:0; transition:opacity .2s var(--ease);
  }
  .modal__card.co-scrolled .modal__close::before{ opacity:1; }
  .modal__card::before{
    content:""; position:absolute; top:8px; left:50%; width:36px; height:4px; margin-left:-18px;
    border-radius:2px; background:#d2d2d7; pointer-events:none;
  }
  .modal__body{ padding-top:2rem; }
  /* otvorená klávesnica: dialóg sa prispôsobí viditeľnej časti okna */
  .modal.kb-open{ top:var(--vvt, 0px); bottom:auto; height:var(--vvh, 100%); }
  .modal.kb-open .modal__card{ max-height:100%; }
}

/* ---------- formulár ---------- */
.form .fgroup{ position:relative; display:grid; align-content:start; min-width:0; }
/* rovnaký rytmus všetkých polí: hlásenie povinného poľa leží pod ním (mimo toku), riadky majú miesto */
.modal .form{ row-gap:1.75rem; }
.modal .form > label:not(.check){ align-content:start; }
.form .fgroup.full{ grid-column:1 / -1; }
.field{ position:relative; display:block; }
.field > input, .field > textarea{ display:block; width:100%; }
.fgroup .field > input{ padding-right:2.5rem; }
.field__ok{
  position:absolute; right:.9rem; top:50%; width:16px; height:16px; margin-top:-8px;
  fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0; pointer-events:none;
  transition:stroke-dashoffset .24s var(--ease), opacity .12s linear;
}
.field.is-valid .field__ok{ stroke-dashoffset:0; opacity:1; }
.modal .form input:not([type="checkbox"]):not([type="radio"]), .modal .form textarea{
  transition:border-color .2s var(--ease), box-shadow .24s var(--ease);
}
.modal .form input:not([type="checkbox"]):not([type="radio"]):focus, .modal .form textarea:focus{ box-shadow:0 0 0 4px rgba(58,170,55,.14); }
.field.is-error > input, .field.is-error > textarea{ border-color:#b9432f; }
.modal .form .field.is-error > input:focus{ border-color:#b9432f; box-shadow:0 0 0 4px rgba(185,67,47,.1); }
.field__err{
  display:block; min-height:1.2em; margin-top:.3rem; font-size:.74rem; line-height:1.2; font-weight:500; color:#b9432f;
  opacity:0; transform:translate3d(0, -3px, 0); transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.field__err.is-on{ opacity:1; transform:none; }
.fgroup > .field__err{ position:absolute; left:0; right:0; top:calc(100% + .3rem); min-height:0; margin:0; }
.form .check + .field__err{ grid-column:1 / -1; margin-top:-.45rem; padding-left:1.6rem; }
.form .check.is-error input{ outline:1.5px solid #b9432f; outline-offset:2px; border-radius:3px; }

/* lišta s tlačidlom je vždy na dosah */
.modal .form__actions{
  position:sticky; bottom:0; z-index:2;
  margin:.2rem -2.2rem -2.2rem; padding:.9rem 2.2rem calc(1.1rem + env(safe-area-inset-bottom));
  background:linear-gradient(rgba(255,255,255,0), #fff 30%);
}
@media (max-width:600px){
  .modal .form__actions{ margin:.2rem -1.2rem -1.6rem; padding:.8rem 1.2rem calc(.6rem + env(safe-area-inset-bottom)); }
  .modal .form__actions .btn{ flex:1 1 auto; }
}
/* nízke okno (mobil naležato, malý notebook): karta sa posúva, krížik ostane hore pripnutý ako na mobile */
@media (min-width:601px) and (max-height:759px){
  .modal__close{ position:sticky; top:.6rem; margin:.6rem .6rem -50px auto; z-index:3; }
}
/* desktop: karta nechá hlavičku celú (stlmenú) nad sebou; tlačidlo nasleduje až za súhlasom */
@media (min-width:961px) and (min-height:760px){
  .modal__card{ max-height:min(92vh, calc(100vh - 2 * var(--top-h) - 8px)); max-height:min(92svh, calc(100svh - 2 * var(--top-h) - 8px)); }
}
@media (min-width:961px){
  .modal .form textarea{ min-height:64px; }
  .modal .form__actions{ position:static; margin:.2rem 0 0; padding:0; background:none; }
}
/* desktop: celá objednávka (súhrn, polia, otázka, súhlas, tlačidlo) sa zmestí na obrazovku bez rolovania
   (Dominik 18. 10. 2026). Hustejší rytmus, fakturačné údaje a poznámka vedľa seba; ak je okno nižšie, karta sa posúva ako doteraz. */
@media (min-width:961px) and (min-height:600px){
  .modal__card{ max-height:calc(100vh - 1rem); max-height:calc(100svh - 1rem); }
  .modal__body{ padding:1.15rem 2rem 1.05rem; }
  .modal__body h2{ font-size:1.65rem; margin:.2rem 0 .25rem; }
  .modal__body > p.muted{ font-size:.8rem; line-height:1.5; max-width:none; }
  .order__sum{ margin-top:.7rem; padding:.6rem 1.05rem; font-size:.86rem; }
  .order__sum li{ padding:.13rem 0; }
  .order__sum li.total-row{ margin-top:.25rem; padding-top:.4rem; }
  .modal .form{ margin-top:.7rem; row-gap:1.3rem; }
  .fgroup > .field__err{ top:calc(100% + .15rem); }
  .modal .form input:not([type="checkbox"]):not([type="radio"]), .modal .form textarea{ padding:.55rem .9rem; }
  .modal .form textarea{ min-height:50px; }
  .modal .form > label.full:has(> .field > textarea), .modal .form > label.full:has(> textarea){ grid-column:auto; align-content:end; }
  .modal .form .check{ font-size:.78rem; }
  .form .check + .field__err:empty{ display:none; }
  /* doplňujúca otázka na jednom riadku s popisom, aby sa dialóg zmestil aj po jej zobrazení */
  .form .src{ gap:.45rem; }
  .form .src legend{ margin-bottom:0; }
  .modal .form label.src__more:not([hidden]){ display:flex; align-items:center; gap:.7rem; white-space:nowrap; }
  .modal .form label.src__more:not([hidden]) > .field, .modal .form label.src__more:not([hidden]) > input{ flex:1; min-width:0; }
  .modal .form .src__more input:not([type="radio"]){ padding:.3rem .8rem; font-size:.86rem; }
  .modal .form div.src__more:not([hidden]){ display:flex; align-items:center; gap:.7rem; }
  .modal .form div.src__more .src__opts{ flex:1; }
  .modal .form:has(.src__more:not([hidden])){ row-gap:.95rem; }
  .modal .form:has(.src__more:not([hidden])) textarea{ min-height:44px; }
}

/* odosielanie: tenký krúžok vľavo od textu */
.form button[type="submit"].is-busy{ cursor:progress; }
.form button[type="submit"].is-busy::before{
  content:""; flex:none; width:16px; height:16px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:coSpin .8s linear infinite, coFade .24s var(--ease) both;
}
@keyframes coSpin{ to{ transform:rotate(1turn); } }
@keyframes coFade{ from{ opacity:0; } }

/* ---------- potvrdenie: konečný stav je nakreslený, WAAPI kreslí od nuly ---------- */
.done__svg circle{ stroke:var(--green); stroke-width:2.5; fill:none; stroke-dasharray:1; stroke-dashoffset:0; }
.done__svg path{ stroke-dasharray:1; stroke-dashoffset:0; }
.done .serif{ color:var(--ink); }
/* potvrdenie s tlačidlom kalendára (course-page): obe tlačidlá na stred, s medzerou */
.done > .tool--cart, .done > .tool--cart ~ .btn{ vertical-align:middle; margin:0 .25rem .8rem; }

/* ---------- toast ---------- */
.toast{ transform:translate(-50%, 12px); transition:opacity .2s var(--ease), transform .2s var(--ease); width:max-content; max-width:calc(100vw - 32px); text-align:center; }
.toast.is-on{ transform:translate(-50%, 0); transition-duration:.24s; }

/* „Ako ste sa o nás dozvedeli?“ - jedna odpoveď ako pilulky, doplňujúce pole pod vybranou možnosťou */
.form .src{ grid-column:1 / -1; border:0; margin:0; padding:0; min-width:0; display:grid; gap:.5rem; }
.form .src legend{ padding:0; margin-bottom:.15rem; font-size:.8rem; font-weight:500; color:var(--muted); }
.src__opts{ display:flex; flex-wrap:wrap; gap:.3rem; }
.form label.src__opt{ position:relative; display:inline-flex; gap:0; font-size:inherit; color:inherit; cursor:pointer; }
.form .src__opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.src__opt span{
  display:inline-block; padding:.34rem .68rem; white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:.76rem; line-height:1.3; color:var(--ink); transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .src__opt:hover span{ border-color:#c9cdc8; } }
.src__opt input:checked + span{ border-color:var(--green); background:var(--green-soft); color:var(--green-ink); }
.src__opt input:focus-visible + span{ border-color:var(--green); box-shadow:0 0 0 4px rgba(58,170,55,.22); }
.src.is-error > .src__opts .src__opt span{ border-color:#b9432f; }
.src__more{ display:grid; gap:.3rem; font-size:.8rem; font-weight:500; color:var(--muted); }
.src__more[hidden]{ display:none; }
.src__sub{ font-size:.8rem; font-weight:500; color:var(--muted); }
.form .src > .field__err{ margin-top:-.2rem; }
.form .src > .field__err:empty{ display:none; }
@media (max-width:460px){ .src__opt span{ padding:.4rem .74rem; font-size:.78rem; } }
/* na dotyku väčšia (neviditeľná) plocha na ťuknutie, pilulka ostáva malá */
@media (pointer:coarse){ .form label.src__opt::after{ content:""; position:absolute; inset:-3px -2px; } }