/* Self-service ticket entry. Palette follows the selected POS theme. */
:root{--ticket-ink:#162039;--ticket-muted:#657086;--ticket-border:#e3e7ef;--ticket-accent:var(--skin-accent,#c99a24);--ticket-navy:var(--skin-side,#19194f);--ticket-top:var(--skin-top,#0c0d2b)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 24px;background:#eff1f6;background-image:radial-gradient(ellipse at 15% 0%,#dfe3f0 0%,transparent 55%);color:var(--ticket-ink);font:16px/1.5 'Segoe UI',Arial,sans-serif}
.ticket-shell{min-width:0;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(380px,1.2fr);width:100%;max-width:1040px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 24px 70px #1a23451a,0 2px 8px #1a234508;border:1px solid #ffffff}
.ticket-intro{display:flex;flex-direction:column;padding:36px 34px;background:linear-gradient(155deg,var(--ticket-navy),var(--ticket-top));color:#fff;position:relative;border-top:4px solid var(--ticket-accent)}
.ticket-brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:750;letter-spacing:-.6px}
.ticket-brand img{max-width:100%;max-height:90px;object-fit:contain;object-position:left}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff33;border-radius:12px;color:var(--ticket-accent);font-size:27px}
.brand-accent{color:var(--ticket-accent)}
.ticket-intro-copy{margin:auto 0;padding:46px 0}
.ticket-eyebrow,.panel-eyebrow{display:block;font-size:11px;font-weight:750;letter-spacing:2px;text-transform:uppercase}
.ticket-eyebrow{color:var(--ticket-accent)}
h1{font-size:clamp(26px,3vw,36px);line-height:1.18;letter-spacing:-1px;margin:16px 0;overflow-wrap:anywhere}
.ticket-intro-copy>p{color:#d2d5e6;font-size:17px;line-height:1.65;margin:0 0 32px}
.ticket-steps{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.ticket-steps li{display:flex;align-items:center;gap:14px}
.step-number{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff30;color:#b9bfd4;font-size:12px;font-weight:700}
.current .step-number{background:var(--ticket-accent);border-color:var(--ticket-accent);color:#12162c;box-shadow:0 0 0 5px #ffffff06}
.ticket-steps strong{display:block;font-size:14px;font-weight:600;color:#e7e9f2}
.ticket-steps small{display:block;font-size:12px;color:#b4bbd1;margin-top:2px}
.staff{display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff20;padding-top:20px;color:#e3e6f0;text-decoration:none;font-size:13px;font-weight:600}
.staff span{margin-left:auto}.staff:hover{color:var(--ticket-accent)}
.ticket-panel{padding:36px 42px 24px;display:flex;flex-direction:column;min-width:0}
.panel-eyebrow{color:#7e8799;letter-spacing:1.5px}
h2{font-size:clamp(23px,2.6vw,29px);font-weight:750;letter-spacing:-.8px;line-height:1.25;margin:10px 0}
.panel-description{font-size:14px;color:var(--ticket-muted);margin:0 0 24px;max-width:400px}
#ticket-form{margin:0;display:flex;flex-direction:column;flex:1}
label{font-size:13px;font-weight:650;display:block;margin:0 0 8px}
#phone{width:100%;height:66px;border:1.5px solid #cfd6e4;border-radius:12px;background:#fafbfe;color:var(--ticket-ink);padding:12px 16px;font:600 28px/1.2 'Segoe UI',Arial,sans-serif;letter-spacing:1px;transition:border-color .15s,box-shadow .15s}
#phone::placeholder{font-weight:400;font-size:20px;color:#929aab;letter-spacing:0}
#phone:focus{outline:none;border-color:var(--ticket-accent);box-shadow:0 0 0 4px #c99a2418;background:white}
.phone-hint{font-size:12px;color:#7a8497;display:block;margin:8px 0 16px}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.keypad button{display:flex;align-items:center;justify-content:center;min-height:82px;border:1px solid var(--ticket-border);border-bottom:3px solid #d9dfeb;border-radius:12px;background:linear-gradient(#fff,#f7f8fc);color:var(--ticket-ink);font:600 32px/1 'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:0 2px 3px #18254d05;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.keypad button:hover{border-color:var(--ticket-accent);background:#fff9e9;box-shadow:0 3px 9px #c99a2415}
.keypad button:active{transform:translateY(2px);border-bottom-width:1px;background:#f6edcf}
.keypad .key-action{background:#eef1f7;border-color:#e0e5ee;color:#657086;font-size:16px;gap:9px}
.keypad .key-action:hover{color:var(--ticket-ink);background:#e5eaf3;border-color:#b6bfd2}
.submit,.next{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:76px;padding:20px 24px;border:1px solid var(--ticket-navy);border-radius:12px;background:var(--ticket-navy);color:#fff;box-shadow:0 5px 12px #17174720;font:650 19px/1.3 'Segoe UI',Arial,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s}
.submit:hover,.next:hover{background:var(--ticket-top);box-shadow:0 7px 16px #17174730}.button-arrow{font-size:24px;color:var(--ticket-accent)}
.submit:disabled{opacity:.6;cursor:wait}
button:focus-visible,a:focus-visible{outline:3px solid var(--ticket-accent);outline-offset:3px}
.ticket-assistance{text-align:center;margin-top:16px;color:#8991a1;font-size:12px}
.support{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding:15px 24px;background:#f8f9fc;border-top:1px solid var(--ticket-border);color:#8a92a3;font-size:11px}.support strong{font-weight:600;color:#626e83}
.error{background:#fff0f0;color:#a6303c;border:1px solid #f3cdd2;border-radius:10px;padding:12px 14px;font-size:14px;margin:0 0 16px}
.number{font-size:100px;line-height:1.2;font-weight:800;color:var(--ticket-navy);margin:24px 0}.ticket-panel>p{color:var(--ticket-muted)}
@media(min-width:721px) and (max-height:760px){body{padding:16px}.ticket-panel{padding:24px 34px 20px}.ticket-intro{padding:28px}.ticket-intro-copy{padding:24px 0}.keypad button{min-height:66px}.panel-description{margin-bottom:16px}.phone-hint{margin-bottom:12px}.ticket-assistance{margin-top:12px}}
@media(max-width:720px){body{padding:14px}.ticket-shell{max-width:480px;grid-template-columns:minmax(0,1fr);border-radius:18px}.ticket-intro{min-width:0;padding:18px 22px;flex-direction:row;align-items:center;gap:16px}.ticket-brand{font-size:18px}.ticket-brand img{max-height:48px;max-width:120px}.brand-mark{width:32px;height:32px;font-size:23px}.ticket-intro-copy{min-width:0;padding:0;flex:1}.ticket-eyebrow,.ticket-intro-copy>p,.ticket-steps{display:none}h1{font-size:16px;margin:0;letter-spacing:0}.staff{border:0;padding:0;font-size:0}.staff svg{width:22px;height:22px}.staff span{display:none}.ticket-panel{padding:25px 22px 20px}h2{font-size:25px}.support{flex-direction:column;text-align:center;gap:3px;padding:12px}.panel-description{margin-bottom:20px}.keypad button{min-height:76px}}
@media(max-width:380px){body{padding:8px}.ticket-panel{padding:20px 16px}.ticket-intro{padding:16px;gap:10px}.ticket-brand{font-size:16px}.keypad{gap:8px}#phone{font-size:25px}h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{body{background:white;padding:0}.ticket-shell{display:block;box-shadow:none;border:0}.ticket-intro,.staff,.support,.next,.ticket-assistance{display:none}.ticket-panel{padding:20px}.number{text-align:center}}

/* Strong outlines and high contrast for kiosk actions. */
.keypad button{border:2px solid var(--ticket-navy);border-bottom:5px solid var(--ticket-navy);background:linear-gradient(145deg,#ffffff18 0%,transparent 45%,#bd921e38 100%),var(--ticket-navy);color:var(--skin-text,#fff);font-weight:750;box-shadow:0 4px 0 #0c0d2b20}
.keypad button:hover{background:linear-gradient(145deg,#ffffff20 0%,transparent 40%,#bd921e55 100%),var(--ticket-top);border-color:var(--ticket-accent);box-shadow:0 0 0 3px #c99a2425}
.keypad button:active{background:linear-gradient(145deg,transparent,#bd921e45),var(--ticket-top);border-bottom-width:3px}
.keypad .key-action{border:2px solid var(--ticket-accent);border-bottom:5px solid var(--ticket-accent);background:linear-gradient(180deg,#fff9e8,#ffe7a0);color:var(--ticket-navy);font-weight:750}
.keypad .key-action:hover{background:#ffe7a0;border-color:var(--ticket-navy);color:var(--ticket-navy)}
.submit,.next{border:3px solid var(--ticket-accent);border-bottom-width:5px;background:linear-gradient(145deg,#ffffff14 0%,transparent 40%,#bd921e40 100%),var(--ticket-navy);color:var(--skin-text,#fff);font-weight:750;box-shadow:0 5px 0 #0c0d2b15,0 8px 16px #17174720}
.submit:hover,.next:hover{border-color:var(--ticket-accent);background:linear-gradient(145deg,#ffffff18 0%,transparent 40%,#bd921e55 100%),var(--ticket-top);box-shadow:0 0 0 4px #c99a2425,0 8px 16px #17174725}
.controls button:focus-visible,.controls a:focus-visible{outline-offset:5px}

.phone-validation-error{display:block;color:#a6303c;font-size:12px;line-height:1.4;margin:-7px 0 14px}.phone-validation-error[hidden]{display:none}#phone[aria-invalid="true"]{border-color:#bd394b;box-shadow:0 0 0 3px #bd394b14}

/* Visible gold shading across every keypad key. */
.keypad button,.keypad .key-action{background:linear-gradient(180deg,#fffdf6 0%,#fff2c7 48%,#f1d277 100%);color:var(--ticket-navy);border:2px solid var(--ticket-accent);border-top:5px solid var(--ticket-navy);border-bottom:4px solid var(--ticket-accent);box-shadow:0 4px 7px #18204020,inset 0 0 0 2px #ffffff80}
.keypad button:hover,.keypad .key-action:hover{background:linear-gradient(180deg,#fff9e6 0%,#ffe9a0 48%,#e8c15b 100%);color:var(--ticket-navy);border-color:var(--ticket-accent);border-top-color:var(--ticket-navy);box-shadow:0 5px 12px #18204025,inset 0 0 0 2px #ffffff80}
.keypad button:active{background:linear-gradient(180deg,#ffefb8,#e8c15b);border-bottom-width:2px}

/* Dark particle backdrop and bold, high-contrast kiosk surfaces. */
body{background:#070b18;background-image:radial-gradient(ellipse at 12% 15%,#19284b 0%,transparent 55%),radial-gradient(ellipse at 90% 85%,#342a15 0%,transparent 50%);color:#f5f7ff;isolation:isolate}
#ticket-particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
#ticket-particles canvas{display:block;width:100%;height:100%}
.ticket-shell{position:relative;background:#10182a;border:1px solid #8fa4d044;box-shadow:0 30px 90px #0009,0 0 50px #d4a72c0d}
.ticket-intro{background:linear-gradient(155deg,#172442eb,#090e1bea);border-top-width:6px}
.ticket-brand{font-weight:850;font-size:26px}
.ticket-intro-copy h1{font-size:clamp(30px,3.4vw,44px);font-weight:850;letter-spacing:-1.2px}
.ticket-intro-copy>p{color:#e0e6f5;font-size:19px;font-weight:500}
.ticket-steps strong{font-weight:750;font-size:15px}
.ticket-steps small{color:#c1cce2}
.ticket-panel{background:linear-gradient(145deg,#172136,#101728);border-top:6px solid var(--ticket-accent)}
.panel-eyebrow{color:#f2cb69;font-weight:800}
h2{color:#fff;font-weight:850;font-size:clamp(26px,2.8vw,33px)}
.panel-description,.ticket-panel>p{color:#bdc9df}
label{color:#f4f6fc;font-size:15px;font-weight:750}
#phone{background:#080e1d;border:2px solid #657799;color:#fff;font-weight:750;box-shadow:inset 0 2px 8px #0003}
#phone::placeholder{color:#9baac4}
#phone:focus{background:#080e1d;box-shadow:0 0 0 4px #e9ba4826;border-color:#e9ba48}
.phone-hint,.ticket-assistance{color:#b5c2d9}
.keypad button,.keypad .key-action{font-weight:850;box-shadow:0 5px 0 #0005,inset 0 0 0 2px #ffffff80}
.submit,.next{background:linear-gradient(135deg,#f9d776,#d6a32d);color:#111a2d;border-color:#f2cb69;box-shadow:0 5px 0 #0004,0 8px 24px #d6a32d20;font-weight:850}
.submit:hover,.next:hover{background:linear-gradient(135deg,#ffe6a0,#e9ba48);color:#111a2d;box-shadow:0 0 0 4px #e9ba4826,0 8px 24px #d6a32d30}
.button-arrow{color:#111a2d;font-weight:800}
.support{background:#080e1e;border-color:#8fa4d033;color:#aab8d0}
.support strong{color:#e3e9f5}
.number{color:#f2cb69;text-shadow:0 0 35px #e9ba4833}
.phone-validation-error{color:#ffabb5}
@media(max-width:720px){.ticket-brand{font-size:18px}.ticket-intro-copy h1{font-size:17px;letter-spacing:0}.ticket-panel{border-top-width:3px}h2{font-size:27px}}
@media(max-width:380px){.ticket-brand{font-size:16px}h2{font-size:24px}}
@media print{#ticket-particles{display:none}body,.ticket-shell,.ticket-panel{background:white;color:#162039}.ticket-panel{border:0}.ticket-panel h2,.ticket-panel>p,.number{color:#162039;text-shadow:none}}

/* Crisp cream keys and black-and-gold framing, matching the POS entry screen. */
body{background:#030405;background-image:radial-gradient(ellipse at 15% 20%,#151515 0%,transparent 55%)}
.ticket-shell{background:transparent;border:0;border-radius:0;overflow:visible;gap:18px;box-shadow:none}
.ticket-intro{background:#00000065;border:1px solid #a5832c;border-radius:4px;padding:32px}
.ticket-panel{background:#f7f6f0;color:#0c1032;border:1px solid #c8ab61;border-radius:6px;padding:30px}
.panel-eyebrow{color:#796019}
h2{color:#0c1032;letter-spacing:-.7px}
.panel-description,.ticket-panel>p{color:#51566b}
label{color:#0c1032;font-weight:800}
#phone{background:#fff;color:#0c1032;border:1px solid #b59846;border-top:5px solid #19194f;border-radius:2px;box-shadow:none;height:74px;font-size:30px}
#phone::placeholder{color:#7a7a80;font-weight:650}
#phone:focus{background:#fff;border-color:#a5832c;border-top-color:#19194f;box-shadow:0 0 0 3px #c9a13230}
.phone-hint,.ticket-assistance{color:#606478}
.keypad{gap:12px}
.keypad button,.keypad .key-action{min-height:90px;border:1px solid #b8942d;border-top:6px solid #19194f;border-bottom:2px solid #b8942d;border-radius:0;background:linear-gradient(180deg,#fffef9,#ffecaf);color:#0c1032;font-size:36px;font-weight:800;box-shadow:0 3px 5px #0002,inset 0 0 0 1px #fff}
.keypad button:hover,.keypad .key-action:hover{background:linear-gradient(180deg,#fff9e5,#ffe18a);border-color:#a5832c;border-top-color:#19194f;box-shadow:0 3px 6px #0003}
.keypad button:active{background:#f5d77f;border-bottom-width:2px;transform:translateY(2px)}
.keypad .key-action{font-size:18px}
.keypad [data-key="Back"]{background:#a00e3b;color:#fff;border-color:#a00e3b;border-top-color:#a00e3b;box-shadow:0 3px 5px #0002}
.keypad [data-key="Back"]:hover{background:#850b31;color:#fff;border-color:#850b31}
.submit,.next{border:1px solid #b8942d;border-top:6px solid #19194f;border-bottom:2px solid #b8942d;border-radius:0;background:linear-gradient(180deg,#fffef9,#ffecaf);color:#0c1032;box-shadow:0 3px 5px #0002;font-size:21px}
.submit:hover,.next:hover{background:linear-gradient(180deg,#fff9e5,#ffe18a);color:#0c1032;border-color:#a5832c;border-top-color:#19194f;box-shadow:0 3px 6px #0003}
.button-arrow{color:#0c1032}
.support{background:#0009;border:1px solid #a5832c55;border-radius:2px}
.number{color:#19194f;text-shadow:none}
.error{border-radius:2px}.phone-validation-error{color:#a00e3b}
.brand-mark,.step-number{border-radius:2px}
@media(min-width:721px) and (max-height:760px){.keypad button{min-height:66px}.ticket-panel{padding:24px 30px}#phone{height:66px}}
@media(max-width:720px){.ticket-shell{gap:12px}.ticket-intro{padding:18px 22px}.ticket-panel{padding:24px 22px}.keypad button{min-height:76px}.keypad{gap:10px}}
@media(max-width:380px){.ticket-panel{padding:20px 16px}.keypad{gap:8px}#phone{font-size:25px}}
@media print{.ticket-intro,.support{display:none}.ticket-panel{background:white;border:0}}