/* ==========================================================================
   AG ARTISAN — counter replica ("Order OS")
   Rebuilt to match the real machine on the counter: flat colour-tile grid,
   right-hand ticket panel, dining-option selector, charge + change screens.
   Everything is namespaced .pv- so it never collides with the site styles.
   ========================================================================== */
.pv{
  --pv-bg:#252B4C;
  --pv-tilegap:#151936;
  --pv-panel:#2E3763;
  --pv-panel2:#39437A;
  --pv-head:#1D2240;
  --pv-line:#454F86;
  --pv-txt:#EDEFFA;
  --pv-dim:#A3ABD8;
  --pv-green:#2FBF71;
  --pv-green2:#229C58;
  --pv-red:#E0284A;
  background:var(--pv-bg);color:var(--pv-txt);
  border:3px solid var(--line);border-radius:14px;overflow:hidden;
  font-family:var(--font-b);position:relative;box-shadow:var(--shadow-lg);
  -webkit-user-select:none;user-select:none;
}
.pv *{box-sizing:border-box}
.pv button{font-family:inherit;cursor:pointer;border:0;color:inherit}

/* ---------- frame ---------- */
.pv-frame{display:grid;grid-template-columns:1fr 320px;min-height:560px}
@media(max-width:900px){.pv-frame{grid-template-columns:1fr;min-height:0}}

/* ---------- left: item grid ---------- */
.pv-left{display:flex;flex-direction:column;background:var(--pv-tilegap);min-width:0}
.pv-top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--pv-head);
  border-bottom:1px solid #0D1027}
.pv-ico{width:34px;height:34px;border-radius:8px;background:transparent;display:grid;place-items:center;
  font-size:17px;color:var(--pv-dim)}
.pv-ico:hover{background:#ffffff14;color:#fff}
.pv-catsel{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.pv-catsel small{color:var(--pv-dim);font-weight:500;font-size:12px}
.pv-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px;flex:1;align-content:start}
@media(max-width:1080px){.pv-tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.pv-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:470px){.pv-tiles{grid-template-columns:repeat(2,1fr)}}
.pv-tile{
  aspect-ratio:1.55/1;min-height:76px;border-radius:2px;padding:6px;display:flex;
  align-items:center;justify-content:center;text-align:center;position:relative;
  font-size:12.5px;font-weight:600;line-height:1.2;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);transition:filter .1s,transform .06s}
.pv-tile:hover{filter:brightness(1.12)}
.pv-tile:active{transform:scale(.97);filter:brightness(.9)}
.pv-tile .pv-pr{position:absolute;left:0;right:0;bottom:5px;font-family:var(--font-m);
  font-size:11px;font-weight:800;opacity:.9}
.pv-tile.haspr{padding-bottom:18px}
.pv-tile .pv-q{position:absolute;top:4px;right:5px;font-size:10px;font-weight:900;
  background:#0006;border-radius:4px;padding:0 4px}
.pv-tile.empty{background:#1B2043;cursor:default}
.pv-tile.empty:hover{filter:none}
.pv-page{text-align:center;padding:9px;font-size:12px;letter-spacing:.14em;color:var(--pv-dim);
  background:var(--pv-head);border-top:1px solid #0D1027}

/* ---------- right: ticket ---------- */
.pv-ticket{background:var(--pv-panel);display:flex;flex-direction:column;min-width:0}
.pv-thead{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;background:var(--pv-head)}
.pv-thead b{font-size:15px;font-style:italic;font-weight:600;flex:1}
.pv-dining{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--pv-line)}
.pv-dining:hover{background:#ffffff0d}
.pv-dining .pv-cav{color:var(--pv-dim);font-size:11px}
.pv-lines{flex:1;overflow:auto;padding:2px 0;min-height:120px;max-height:min(52vh,420px)}
.pv-line{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:9px 14px;cursor:pointer;
  border-bottom:1px solid #ffffff0f}
.pv-line:hover{background:#ffffff0d}
.pv-line .n{font-size:13.5px;font-weight:600}
.pv-line .a{font-family:var(--font-m);font-size:13.5px;text-align:right;white-space:nowrap}
.pv-line .m{grid-column:1/-1;font-size:11.5px;color:var(--pv-dim);padding-left:10px;line-height:1.45}
.pv-line.auto{background:#ffffff08;cursor:default}
.pv-line.auto .n:after{content:"AUTO";font-size:8.5px;font-weight:900;letter-spacing:.1em;
  background:var(--pv-green);color:#08210F;border-radius:3px;padding:1px 4px;margin-left:6px;vertical-align:1px}
.pv-empty{text-align:center;color:#7B84B8;padding:44px 14px;font-size:13px;line-height:1.7}
.pv-tot{padding:11px 14px;border-top:1px solid var(--pv-line);display:flex;justify-content:space-between;
  font-size:16px;font-weight:700}
.pv-tot .v{font-family:var(--font-m)}
.pv-sub{padding:0 14px 10px;font-size:12px;color:var(--pv-dim);display:flex;justify-content:space-between}
.pv-acts{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--pv-green2)}
.pv-acts button{padding:15px 8px;font-size:13px;font-weight:800;letter-spacing:.06em;
  background:var(--pv-green);color:#06240F}
.pv-acts button:hover{filter:brightness(1.08)}
.pv-acts button:disabled{background:#4C5588;color:#8C95C4;cursor:not-allowed}
.pv-acts button.wide{grid-column:1/-1}

/* ---------- sheets / modals ---------- */
.pv-mask{position:absolute;inset:0;background:#080B1CCC;display:grid;place-items:center;padding:14px;z-index:30}
.pv-sheet{background:var(--pv-panel);border:1px solid var(--pv-line);border-radius:10px;
  width:100%;max-width:460px;max-height:94%;overflow:auto;box-shadow:0 18px 50px #0009}
.pv-sheet.wide{max-width:760px}
.pv-sh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--pv-line)}
.pv-sh h3{margin:0;font-size:17px;font-family:var(--font-b);font-weight:700;flex:1}
.pv-sb{padding:16px}
.pv-lab{font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--pv-dim);margin:14px 0 7px}
.pv-lab:first-child{margin-top:0}
.pv-opts{display:flex;flex-wrap:wrap;gap:7px}
.pv-opt{padding:9px 14px;border-radius:7px;background:#3B4581;color:#D7DCF5;font-size:13px;font-weight:600}
.pv-opt:hover{background:#4B569A}
.pv-opt.on{background:var(--pv-green);color:#06240F}
.pv-opt.on.alt{background:#F58220;color:#2A1403}
.pv-in{width:100%;padding:10px 12px;border-radius:7px;background:#1E2340;border:1px solid var(--pv-line);
  color:var(--pv-txt);font-size:14px;font-family:var(--font-b)}
.pv-in:focus{outline:2px solid var(--pv-green)}
.pv-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pv-go{width:100%;padding:14px;border-radius:8px;background:var(--pv-green);color:#06240F;
  font-size:15px;font-weight:800;letter-spacing:.04em;margin-top:16px}
.pv-go.sec{background:#3B4581;color:var(--pv-txt);margin-top:8px}
.pv-go.danger{background:var(--pv-red);color:#fff}
.pv-qty{display:flex;align-items:center;gap:10px}
.pv-qty button{width:42px;height:42px;border-radius:8px;background:#3B4581;font-size:21px;font-weight:800}
.pv-qty button:hover{background:#4B569A}
.pv-qty .v{font-family:var(--font-m);font-size:23px;font-weight:800;min-width:44px;text-align:center}

/* ---------- numpad ---------- */
.pv-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.pv-pad button{padding:16px;border-radius:8px;background:#3B4581;font-family:var(--font-m);
  font-size:20px;font-weight:800}
.pv-pad button:hover{background:#4B569A}

/* ---------- charge / done ---------- */
.pv-pay{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
@media(max-width:820px){.pv-pay{grid-template-columns:1fr}}
.pv-payl{padding:16px;border-right:1px solid var(--pv-line);display:flex;flex-direction:column}
.pv-payr{padding:16px;display:flex;flex-direction:column}
.pv-due{text-align:center;padding:10px 0 16px}
.pv-due .k{font-size:11px;letter-spacing:.16em;color:var(--pv-dim);font-weight:800}
.pv-due .v{font-family:var(--font-m);font-size:clamp(34px,7vw,52px);font-weight:800;line-height:1}
.pv-tenders{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px}
.pv-tender{padding:15px 6px;border-radius:8px;background:#3B4581;font-family:var(--font-m);
  font-size:15px;font-weight:800}
.pv-tender:hover{background:#4B569A}
.pv-tender.exact{background:#F58220;color:#2A1403}
.pv-done{padding:18px}
.pv-donetop{display:flex;gap:26px;justify-content:flex-end;flex-wrap:wrap;padding:0 4px 14px}
.pv-donetop div{text-align:left}
.pv-donetop .v{font-family:var(--font-m);font-size:clamp(26px,5vw,40px);font-weight:800;line-height:1}
.pv-donetop .k{font-size:12px;color:var(--pv-dim);margin-top:2px}
.pv-emailrow{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--pv-line);
  padding:10px 4px;color:var(--pv-dim);font-size:14px}
.pv-linkbtn{width:100%;padding:14px;background:transparent;color:var(--pv-dim);font-size:13px;
  font-weight:700;letter-spacing:.08em;border-bottom:1px solid var(--pv-line)}
.pv-linkbtn:hover{background:#ffffff0d;color:#fff}
.pv-newsale{width:100%;padding:17px;background:var(--pv-green);color:#06240F;font-size:15px;
  font-weight:800;letter-spacing:.08em;border-radius:8px;margin-top:16px}

/* ---------- receipt ---------- */
.pv-receipt{background:#FFFDF6;color:#16130E;font-family:var(--font-m);font-size:12px;
  padding:16px;border-radius:6px;line-height:1.55;max-width:330px;margin:0 auto}
.pv-receipt .c{text-align:center}
.pv-receipt .l{display:flex;justify-content:space-between;gap:10px}
.pv-receipt hr{border:0;border-top:1px dashed #9A9384;margin:7px 0}

/* ---------- editor ---------- */
.pv-itemrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  background:#333C6E;margin-bottom:6px}
.pv-sw{width:30px;height:30px;border-radius:6px;flex:0 0 30px;border:1px solid #0004}
.pv-itemrow .nm{flex:1;font-size:13.5px;font-weight:600;min-width:0}
.pv-itemrow .nm small{display:block;color:var(--pv-dim);font-weight:500;font-size:11px}
.pv-itemrow .pr{font-family:var(--font-m);font-size:13.5px;font-weight:700}
.pv-mini{padding:6px 9px;border-radius:6px;background:#454F8C;font-size:12px;font-weight:700}
.pv-mini:hover{background:#57629F}
.pv-swatches{display:flex;flex-wrap:wrap;gap:7px}
.pv-swatch{width:38px;height:38px;border-radius:7px;border:3px solid transparent}
.pv-swatch.on{border-color:#fff}
.pv-warn{background:#4A2320;border-left:4px solid var(--pv-red);padding:9px 12px;border-radius:0 7px 7px 0;
  font-size:12.5px;color:#F6D5D5;margin:10px 0}
.pv-note{background:#1E2340;border-left:4px solid #F58220;padding:9px 12px;border-radius:0 7px 7px 0;
  font-size:12.5px;color:#D9DEF6;margin:10px 0}
.pv-unver{position:absolute;top:4px;left:5px;font-size:10px;font-weight:900;background:#0007;
  border-radius:4px;padding:0 4px;color:#FFD27A}

/* ---------- practice strip ---------- */
.pv-coach{background:#F58220;color:#2A1403;padding:8px 14px;font-size:13px;font-weight:700}
.pv-bubble{background:#EDEFFA;color:#1B2043;border-radius:12px 12px 12px 3px;padding:11px 14px;
  font-size:14.5px;font-weight:600;max-width:660px}
.pv-bubble b{background:#FFD27A;padding:0 3px;border-radius:3px}
.pv-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:7px}
.pv-score{background:#333C6E;border-radius:8px;padding:9px;text-align:center}
.pv-score .v{font-family:var(--font-m);font-size:21px;font-weight:800;color:#FFC94D}
.pv-score .k{font-size:9.5px;letter-spacing:.1em;color:var(--pv-dim);text-transform:uppercase}

@media print{.pv{display:none}}

/* ---------- phone: keep the ticket in reach ---------- */
@media(max-width:900px){
  .pv-tiles{max-height:56vh;overflow:auto}
  .pv-lines{max-height:34vh}
  .pv-acts{position:sticky;bottom:0}
}