/* Fit the checkout to the viewport while keeping every section readable. */
html,body{max-width:100%;margin:0}
main{width:100%;max-width:1600px;padding:18px 24px 24px}
header{height:64px;padding:0 24px;position:sticky;top:0;z-index:100}
.steps{margin-bottom:14px;font-size:13px}
.performance-bar{margin-bottom:14px;max-width:420px}
.performance-bar .date-label{font-size:12px;margin-bottom:4px}
.performance-bar #performance{min-height:38px;padding:7px 10px;font-size:14px}
.show-times{font-size:12px;margin-top:5px}
.layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px;margin-top:12px;align-items:start}
.layout>*{min-width:0;max-width:100%}
.scroll{overflow:visible;padding:0 14px 14px}
.theater{min-width:0;width:100%;max-width:100%}
.row{gap:4px;margin:7px 0}
.rowlabel{flex:0 0 16px;width:16px;font-size:11px}
.seats{min-width:0;gap:clamp(2px,.35vw,7px)}
.seat{flex:1 1 0;width:auto;min-width:0;max-width:40px;height:clamp(25px,3.7vh,36px);font-size:clamp(9px,.8vw,12px);padding:0}
.stage{height:36px;padding-top:8px;margin:0 7% 16px;font-size:12px}
.maphead{padding:13px 18px}.maphead strong{font-size:18px}
.legend{font-size:12px;padding:12px 18px;gap:16px}
.accessnote{font-size:12px;line-height:1.5;padding:13px 18px}
.exits{font-size:9px;padding:12px 4px 0}
aside{width:100%;padding:18px;position:static}
.event-poster{width:100%;max-width:min(100%,200px);max-height:24vh;height:auto;object-fit:contain;margin:0 auto 14px}
aside h2{font-size:20px;margin-bottom:12px}
.sample{font-size:10px;margin-bottom:6px}
.event strong{font-size:23px;line-height:1.15;margin-bottom:8px}
.event small{font-size:12px;line-height:1.5}
.event{padding-bottom:12px;margin-bottom:12px}
aside>div:has(>#count){font-size:13px!important;margin-bottom:8px!important}
.empty{font-size:13px;padding:4px 0}
.bill{padding-top:10px;margin-top:12px}
.bill div{font-size:12px;line-height:1.4;margin:7px 0;gap:8px}
.bill .total{font-size:22px;margin:12px 0}
.primary{font-size:11px;min-height:44px;padding:12px 10px}
#dateDialog{width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px}
#dateDialog h2{font-size:28px;margin-bottom:18px}
.date-option{padding:16px}.date-option strong{font-size:17px}
.code-row,.ticket-line{max-width:100%}
main{position:relative}
.layout{align-items:start}
.layout>.panel{align-self:start;min-height:var(--default-panel-height,0px)}
.hold-clock{position:absolute;top:62px;right:364px;min-width:140px;padding:8px 14px;text-align:right;border-left:3px solid #111;background:#f5f5f5}
.hold-clock[hidden]{display:none}
.hold-clock span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#555}
.hold-clock strong{display:block;font-size:27px;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:.03em}
.hold-clock.urgent,.hold-clock.expired{border-color:#b42318;color:#b42318;background:#fff1f0}
#timeoutPanel{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:320px}
#timeoutPanel .primary{width:auto;min-width:150px;margin-top:12px}
@media(min-width:1400px){.hold-clock{right:394px}}
@media(max-width:900px){.hold-clock{right:24px;top:62px}.performance-bar{max-width:calc(100% - 165px)}.layout>.panel{align-self:auto}}
@media(max-width:520px){.hold-clock{right:10px;top:60px;min-width:100px;padding:6px 8px}.hold-clock strong{font-size:23px}.hold-clock span{font-size:9px}.performance-bar{max-width:calc(100% - 115px)}}
#stripeCheckout{width:100%;min-height:360px;margin-top:20px}
#stripeCheckout[hidden]{display:none}
#stripeHold{font-size:13px;line-height:1.5;margin:16px 0;color:#555}
#stripeCheckout + .back{display:block;margin-top:20px}
#stripeCheckout + .back[hidden]{display:none}
.payment-tests{margin:20px 0;padding:18px;border:1px solid #d9d9d9;background:#fafafa}
.payment-tests[hidden]{display:none}
.payment-tests h3{margin:0 0 8px;font-size:16px;font-weight:600}
.payment-tests p{font-size:13px;line-height:1.5;margin:6px 0 12px}
.payment-test-actions{display:flex;flex-wrap:wrap;gap:10px}
.payment-test-actions button{padding:10px 14px;border:1px solid #555;background:white;color:#111;font:inherit;font-size:13px}
.payment-test-actions button:hover{background:#eee}
.payment-test-result{margin-top:14px;padding:14px;border:1px solid}
.payment-test-result[hidden]{display:none}
.payment-test-result[data-outcome=success]{background:#edf8ef;border-color:#75aa7d;color:#174b29}
.payment-test-result[data-outcome=declined]{background:#fff1f0;border-color:#d9948e;color:#8a231b}
.payment-test-result p{color:inherit;margin-bottom:0}
/* Seat availability colors, including accessible spaces. */
.seat,.seat.access{background:#d7efdc;color:#174b29;border-color:#72ad80;border-bottom-color:#438755}
.seat:hover:not(:disabled){background:#b6dfbf}
.seat.chosen,.seat.chosen:hover{background:#000;color:#fff;border-color:#000}
.seat.unavailable,.seat.unavailable:hover,.seat:disabled{background:#eeeeef;color:#999;border-color:#d4d4d7;border-bottom-color:#bfc0c4;opacity:1;cursor:not-allowed;transform:none}
.dot{background:#d7efdc;border-color:#72ad80}
.dot.selected{background:#000;border-color:#000}
.dot.taken{background:#eeeeef;border-color:#c8c8cc}
.dot.access{background:#d7efdc;border-color:#438755;border-style:dashed}
@media(min-width:1400px){.layout{grid-template-columns:minmax(0,1fr) 350px}.event-poster{max-width:220px}}
@media(min-width:901px) and (max-height:780px){header{height:54px}main{padding-top:12px}.steps{margin-bottom:10px}.performance-bar{margin-bottom:10px}.event-poster{max-height:19vh;margin-bottom:10px}.row{margin:5px 0}.seat{height:27px}.legend{padding-top:9px;padding-bottom:9px}.event{margin-bottom:8px;padding-bottom:8px}.bill{margin-top:8px}.bill .total{margin:8px 0}}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}aside{max-width:100%}.event-poster{max-width:220px;max-height:none}.seat{height:32px;font-size:11px}.row{margin:7px 0}}
@media(max-width:520px){header{height:66px;padding:0 12px}.wordmark{font-size:25px}.brand-name{font-size:8px}.demo{font-size:8px;padding:5px}main{padding:16px 10px 24px}.steps{font-size:11px;gap:12px}.steps span{width:22px;height:22px;margin-right:4px}.legend{font-size:10px;gap:10px;padding:12px 10px}.maphead{padding:12px 10px}.scroll{padding:0 5px 12px}.row{gap:2px;margin:6px 0}.rowlabel{flex-basis:9px;width:9px;font-size:9px}.seats{gap:2px}.seat{height:27px;font-size:8px;border-bottom-width:2px}.accessnote{padding:12px;font-size:11px}.exits{font-size:8px;letter-spacing:0}.stage{margin-bottom:12px}aside{padding:18px}.form{padding:20px}}

/* Retain comfortable seat targets inside a horizontal mobile map. */
@media(max-width:900px){#mapPanel .scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 14px 16px;scrollbar-width:thin}#mapPanel .theater{min-width:940px;width:940px;max-width:none}#mapPanel .row{gap:6px;margin:8px 0}#mapPanel .seats{gap:6px}#mapPanel .seat{flex:0 0 42px;width:42px;max-width:42px;height:42px;font-size:12px}#mapPanel .rowlabel{flex:0 0 18px;width:18px;font-size:12px}#mapPanel .stage{margin-left:7%;margin-right:7%}#mapPanel .legend{flex-wrap:wrap;line-height:1.6}#mapPanel .scroll:focus-visible{outline:2px solid #000;outline-offset:-2px}.map-scroll-hint{font-size:12px;color:#555;padding:0 18px 12px;margin:0}}
@media(min-width:901px){.map-scroll-hint{display:none}}

#reviewPanel .cancel-payment{display:block;font-size:12px;line-height:1.5;margin:16px auto 8px;padding:4px 8px;text-align:center}.payment-preview-button{display:block;margin:8px auto 0;padding:9px 14px;font:inherit;font-size:12px;background:#fff;border:1px solid #aaa;color:#333}.payment-preview-button[hidden],.cancel-payment[hidden]{display:none!important}

#successPanel #paymentTitle{font-size:clamp(30px,3vw,44px);line-height:1.15;font-weight:600;letter-spacing:-.035em;color:#18733b;margin:10px 0 28px}.confirmation-date{margin:0 0 10px;font-size:16px;line-height:1.6}.confirmation-venue{display:inline-block;color:#06c;font-size:14px;line-height:1.7;text-decoration:underline}.confirmation-email{margin-top:30px;padding:30px 24px;border:1px solid #d9d9d9;background:#fafafa}.confirmation-email h3{margin:0;font-size:clamp(21px,2.2vw,29px);font-weight:500;letter-spacing:-.025em;line-height:1.35}.confirmation-email p{margin:12px 0 0}.confirmation-order{font-size:12px;color:#555}

.steps>*{color:#777;font-weight:400}.steps>*>span{background:#fff;color:#777;border:1px solid #d9d9d9}.steps>.is-current{color:#000;font-weight:600}.steps>.is-current>span{background:#000;color:#fff;border-color:#000}.steps>.is-complete{color:#555}.steps>.is-complete>span{background:#f2f2f2;color:#555;border-color:#bdbdbd}

#successPanel #restart[hidden]{display:none!important}.confirmation-confetti{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}.confirmation-confetti i{position:absolute;top:-20px;width:9px;height:15px;opacity:0;animation-name:ticket-confetti-fall;animation-timing-function:cubic-bezier(.2,.65,.55,1);animation-fill-mode:forwards}.confirmation-confetti i:nth-child(3n){border-radius:50%;width:9px;height:9px}@keyframes ticket-confetti-fall{0%{opacity:1;transform:translate3d(0,-15px,0) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),105vh,0) rotate(var(--spin))}}@media(prefers-reduced-motion:reduce){.confirmation-confetti{display:none}}

.payment-loading{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#555;font-size:13px}.payment-loading[hidden]{display:none!important}.payment-loading-wheel{width:40px;height:40px;border:3px solid #e2e2e2;border-top-color:#111;border-radius:50%;animation:payment-wheel-spin .8s linear infinite}@keyframes payment-wheel-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.payment-loading-wheel{animation-duration:2s}}