/* ═══════════════════════════════════════════════════════════════════
   TERMINA — REZERVACIJA KOT LIST (rez-list.js; lastnica, 28. 10. 2026,
   nova podoba, del 3)

   Naloži se pred eleganca.css na vsaki strani, ki naloži rez-list.js.
   List je plast, ki LEBDI, zato je edina na profilu z zastorom in senco
   (--steklo-senca-plava); vsebina v njem je stran rezervacije v okvirju
   z ?list=1 in stoji na svoji atmosferi. Zastor je skupni .nadsloj
   (podoba.css): bledi v --t-small; med vlekom mu prosojnost sledi legi
   lista (--rl-zastor, rez-list.js). Gib iz žetonov podoba.css:
   prihod --t-sheet-in z --ease-drawer, odhod --t-sheet-out; od 720 px
   okno na sredini iz scale(.96); manj gibanja samo bledi.
   ═══════════════════════════════════════════════════════════════════ */

.rl-oder{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.rl-oder[hidden]{display:none}
.rl-oder.nadsloj::before{opacity:0;transition:opacity var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1))}
.rl-oder.nadsloj.odprt::before{opacity:var(--rl-zastor,1)}
/* Stran pod listom ne drsi (tudi v ovoju, kjer bi poteg drsel telo). */
html.rl-odprt,html.rl-odprt body{overflow:hidden}

/* List od spodnjega roba: lastni obseg (translateY(100%)), ne piksli.
   Višina v dvh: vh na telefonu šteje tudi skrito vrstico brskalnika. */
.rl-list{
  position:relative;display:flex;flex-direction:column;width:100%;
  height:86vh;height:86dvh;overflow:hidden;outline:none;
  background:var(--plosca);border:1px solid var(--gravura-2);border-bottom:0;
  border-radius:28px 28px 0 0;box-shadow:var(--steklo-senca-plava);
  /* okvir ne vidi varnega roba telefona: list ga pusti sam */
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(100%);
  transition:transform var(--t-sheet-out,260ms) var(--ease-drawer,cubic-bezier(.32,.72,0,1));
  will-change:transform;
}
.rl-oder.odprt .rl-list{transform:none;transition-duration:var(--t-sheet-in,420ms)}
/* Med vlekom in vzmetjo vodi lego skripta, prehodov ni. */
.rl-oder.vlece .rl-list,.rl-oder.vlece.nadsloj::before{transition:none}

/* Glava: ročaj čez zgornji rob okvirja (rezervacija v listu pusti
   zgoraj prostor zanj). Pas je tarča za palec, črtica 36 × 5 samo znak.
   Vleče sama (touch-action), da poteg ni drsenje strani. */
.rl-glava{
  position:absolute;z-index:2;top:0;left:0;right:0;height:40px;
  display:flex;align-items:flex-start;justify-content:center;
  touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;
}
.rl-rocaj{display:block;width:36px;height:5px;margin-top:9px;border-radius:3px;background:var(--rob-k);opacity:.5}
/* Zapri stoji, dokler rezervacija v okvirju ne pride (ta ima svoj gumb
   zapri); ko je pripravljena, odide, da nista dva. */
.rl-zapri{
  position:absolute;top:8px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--gravura);border-radius:50%;background:var(--plosca);color:var(--slonovina);cursor:pointer;
  transition:transform var(--t-press,140ms) var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.rl-zapri svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.rl-zapri:active{transform:scale(.94)}
.rl-zapri:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.rl-list.pripravljen .rl-zapri{display:none}
.rl-list:focus-visible{outline:none}

.rl-nalaga{position:absolute;top:50%;left:0;right:0;margin:0;text-align:center;font-family:var(--body);font-size:15px;color:var(--telo)}
.rl-list.pripravljen .rl-nalaga{visibility:hidden}
.rl-okvir{
  position:relative;z-index:1;flex:1 1 auto;display:block;width:100%;min-height:0;border:0;
  background:transparent;opacity:0;transition:opacity var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.rl-list.pripravljen .rl-okvir{opacity:1}

/* Namizje in tablica: okno na sredini, ki ne pride od roba, ampak se
   pojavi na mestu (scale(.96) → 1 z bledenjem). Ročaja ni. */
@media(min-width:720px){
  .rl-oder{align-items:center}
  .rl-list{
    width:min(480px,calc(100% - 48px));height:min(86vh,820px);height:min(86dvh,820px);
    border-bottom:1px solid var(--gravura-2);border-radius:28px;padding-bottom:0;
    transform:scale(.96);opacity:0;
    transition:transform var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1));
  }
  .rl-oder.odprt .rl-list{transform:none;opacity:1;transition-duration:var(--t-panel,240ms)}
  .rl-glava{height:0}
  .rl-rocaj{display:none}
}

/* Manj gibanja: list se ne premakne in ne raste, samo pobledi. */
@media(prefers-reduced-motion:reduce){
  .rl-list,.rl-oder.odprt .rl-list{transform:none;transition:opacity var(--t-small,200ms) ease-out}
  .rl-list{opacity:0}
  .rl-oder.odprt .rl-list{opacity:1}
  .rl-zapri,.rl-okvir{transition:none}
  .rl-zapri:active{transform:none}
}
/* Manj prosojnosti: zastor je poln. */
@media(prefers-reduced-transparency:reduce){
  .rl-oder.nadsloj::before{background:var(--ohisje);-webkit-backdrop-filter:none;backdrop-filter:none}
}