/* 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; }
.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"]), .modal .form textarea{
  transition:border-color .2s var(--ease), box-shadow .24s var(--ease);
}
.modal .form input:not([type="checkbox"]):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; }
}
/* 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(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; }
}

/* 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); }

/* ---------- toast ---------- */
.toast{ transform:translate(-50%, 12px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.toast.is-on{ transform:translate(-50%, 0); transition-duration:.24s; }