/* Komponenty wspólne dla wielu scen: przyciski, plakietki, pola, chip pakietu, znacznik ✓ */

/* przyciski w kształcie pigułki */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 16px/1 var(--f-sans);padding:14px 24px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn-blue:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn-ghost{background:transparent;color:var(--on-night);border-color:color-mix(in srgb,var(--on-night) 35%,transparent)}
.btn-ghost:hover{border-color:var(--on-night)}
.btn-sm{padding:9px 16px;font-size:15px}

/* plakietka pakietu */
.pkg{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--mist-2);color:var(--ink-2)}
.pkg.pro{background:var(--blue-wash);color:var(--blue-deep)}

/* znacznik ✓ w kółku */
.tick{width:22px;height:22px;border-radius:50%;background:var(--blue-wash);display:grid;place-items:center}
.tick::before{content:"";width:8px;height:4.5px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-1px) rotate(-45deg)}
.scene.night .tick{background:color-mix(in srgb,var(--blue-bright) 16%,transparent)}
.scene.night .tick::before{border-color:var(--blue-bright)}

/* pole formularza */
label.f{display:grid;gap:7px;font-size:14.5px;color:var(--ink-2)}
label.f input{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-field);color:var(--ink);font:16px var(--f-sans);padding:12px 14px;width:100%}
label.f input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-wash)}

/* chip wybranego pakietu */
.plan-pick{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:14.5px;background:var(--blue-wash);color:var(--blue-deep);border-radius:999px;padding:5px 6px 5px 14px}
.plan-pick[hidden]{display:none}
.plan-pick b{font-weight:600}
.plan-clear{border:0;background:transparent;color:inherit;font:500 18px/1 var(--f-sans);width:28px;height:28px;border-radius:50%;cursor:pointer}
.plan-clear:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)}

/* plakietka nad tytułem na granacie */
.kicker{display:inline-flex;align-items:center;gap:10px;justify-self:start;font-size:15px;color:var(--on-night-2);padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--on-night) 5%,transparent);border:1px solid var(--night-line)}

/* kolor stanu stolika przekazywany przez --c (jasne tło); na granacie nadpisuje pokaz.css */
.is-free{--c:var(--st-free)}
.is-seated{--c:var(--st-seated)}
.is-menu{--c:var(--st-menu)}
.is-ordered{--c:var(--st-ordered)}
.is-served{--c:var(--st-served)}
.is-bill{--c:var(--st-bill)}
.is-clean{--c:var(--st-clean)}

/* motyw „kamera widzi” (js/camera-frame.js): zasłona, linia skanu i narożniki ramki ze znaku */
.cam-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}   /* linia skanu na końcu nie wystaje poza element (pasek przewijania w planie) */
.cam-veil{position:absolute;inset:0;background:var(--night)}
.cam-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--blue-bright);
  box-shadow:0 0 18px 3px color-mix(in srgb,var(--blue-bright) 45%,transparent)}
.cam-corner{position:absolute;width:22px;height:22px;border:0 solid var(--blue-bright)}
.cam-corner.tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.cam-corner.tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.cam-corner.bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.cam-corner.br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}
/* narożniki wokół małego elementu (frameCorners): ramka 10 px poza krawędzią, mniejsze ramiona */
.cam-around{inset:-10px}
.cam-around .cam-corner{width:12px;height:12px;border-color:var(--blue)}
.cam-around .cam-corner.tl,.cam-around .cam-corner.tr{top:0}
.cam-around .cam-corner.bl,.cam-around .cam-corner.br{bottom:0}
.cam-around .cam-corner.tl,.cam-around .cam-corner.bl{left:0}
.cam-around .cam-corner.tr,.cam-around .cam-corner.br{right:0}

/* element prowadzący (motion.js, T-032): cztery narożniki płynące między nagłówkami sekcji; tylko transform */
.lead-frame{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0}
.lead-frame i{position:absolute;left:0;top:0;width:22px;height:22px;border:0 solid var(--blue);will-change:transform}
.lead-frame .tl{border-top-width:2px;border-left-width:2px}
.lead-frame .tr{border-top-width:2px;border-right-width:2px}
.lead-frame .bl{border-bottom-width:2px;border-left-width:2px}
.lead-frame .br{border-bottom-width:2px;border-right-width:2px}