/* Booking flow (registration, cart, payment, confirmation). Tokens only. */

.bk-hero{padding:32px 0 8px}
@media (min-width:1200px){.bk-hero{padding:64px 0 16px}}
.bk-steps{list-style:none;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.bk-steps::-webkit-scrollbar{display:none}
.bk-steps__i{flex:none;display:flex;gap:6px;align-items:baseline;font-family:var(--font-mono)}
.bk-steps__i.is-current{color:var(--white)}
.bk-steps__i.is-done{color:var(--lilac)}
.bk-progress{height:2px;background:var(--line)}
.bk-progress i{display:block;height:100%;background:var(--violet)}

.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1024px){.bk-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}.bk-aside{position:sticky;top:calc(var(--header-h) + 24px)}}
.bk-panel{background:var(--ink-2);padding:24px}
.bk-tiers{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:768px){.bk-tiers{grid-template-columns:1fr 1fr}}

/* seat map */
.bk-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--lilac)}
.bk-legend span{display:inline-flex;align-items:center;gap:8px}
.bk-legend i{width:16px;height:16px;border-radius:3px;display:inline-block}
.bk-stage{font:500 12px/1 var(--font-mono);letter-spacing:.3em;text-align:center;color:var(--lilac);padding:12px 0;border-top:2px solid var(--violet);margin:0 auto 24px;max-width:640px}
.seat-map-tip{font:500 12px/18px var(--font-mono);letter-spacing:.04em;color:var(--mute)}
.seat-map{overflow-x:auto;padding:8px 0 16px;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.seat-row{display:flex;justify-content:center;gap:4px;margin-bottom:4px;min-width:max-content;margin-inline:auto}
.seat{position:relative;width:30px;height:30px;flex:none;border-radius:4px 4px 2px 2px;border:1px solid var(--line-strong);background:var(--ink-2);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast)}
.seat[data-premium="true"]{border-color:var(--lilac)}
.seat:hover{background:var(--ink-3)}
.seat.is-selected{background:var(--violet);border-color:var(--violet)}
.seat.booked{background:var(--ink-3);border-color:transparent;color:var(--mute);cursor:not-allowed;opacity:.55}
.seat .seat-number{font:500 8px/1 var(--font-mono);letter-spacing:0;pointer-events:none}
.seat:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.exit-label{width:30px;flex:none;font:500 8px/30px var(--font-mono);color:var(--signal);text-align:center}
@media (min-width:1024px){.seat{width:34px;height:34px}.seat .seat-number{font-size:9px}}
.selection-summary{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));margin:0 calc(-1 * var(--gutter));background:var(--ink-2);border-top:1px solid var(--line)}
.selection-summary[hidden]{display:none}
.bk-sel{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

/* tabs (new / existing booking) */
.bk-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.bk-tab{position:relative;height:48px;background:none;border:0;color:var(--mute);font:500 15px/1 var(--font-sans);cursor:pointer;padding:0}
.bk-tab.active{color:var(--white)}
.bk-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violet)}
#existingBookingForm{display:none}
#existingBookingForm.active{display:flex}
#bookingContent.hidden{display:none}

/* cart */
.cart-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item-info{display:flex;gap:10px;align-items:baseline}
.cart-item-qty{font:500 13px/1 var(--font-mono);color:var(--lilac)}
.cart-item-price{font:500 15px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0}
.cart-total-amount{font:500 32px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.bk-phone{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.bk-prefix{height:48px;display:flex;align-items:center;padding:0 12px;background:var(--ink-3);border-radius:var(--radius-control);font:500 15px/1 var(--font-mono)}
.bk-otp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.bk-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

/* payment */
.detail-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.detail-row{grid-template-columns:160px minmax(0,1fr);align-items:baseline}}
.detail-label{font:500 12px/16px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac)}
.detail-value{display:flex;align-items:center;gap:12px;font-size:17px}
.iban-value{font:500 18px/1.2 var(--font-mono);letter-spacing:.04em;word-break:break-all}
.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;padding:32px 24px;border:1px dashed var(--line-strong);border-radius:var(--radius-control);text-align:center;cursor:pointer;color:var(--lilac);transition:border-color var(--dur-fast),background var(--dur-fast)}
.upload-area:hover,.upload-area.dragover{border-color:var(--lilac);background:var(--ink-2)}
.upload-area:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.file-preview{display:none;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--ink-2);border-radius:var(--radius-control)}
.file-preview.active{display:flex}
.file-name{font:500 14px/20px var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fileInput{display:none}

/* confirmation ticket */
.bk-ticket .nfs-ticket__top{gap:12px}
.bk-ticket dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.bk-ticket .bk-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px}
.bk-ticket dt{font:500 11px/20px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.bk-ticket dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.bk-id{font:500 22px/1.2 var(--font-mono);letter-spacing:.04em;overflow-wrap:anywhere}

/* Seat shapes (from the original seat map): armchair = premium, chair = regular. */
.seat{background:none;border:0;border-radius:0;width:32px;height:32px;padding:0;color:rgba(201,166,255,.55)}
.seat svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.seat--premium{color:var(--violet)}
.seat:hover{background:none;color:var(--lilac)}
.seat--premium:hover{color:#9b3dff}
.seat.is-selected{color:var(--white)}
.seat.is-selected .seat-number{color:var(--ink)}
.seat.booked{background:none;color:var(--ink-3);opacity:1;cursor:not-allowed}
.seat.booked .seat-number{color:var(--mute)}
.seat .seat-number{position:relative;z-index:1;top:-2px;font-size:7px;color:var(--white);font-weight:600}
.seat.seat--regular .seat-number{color:var(--ink)}
.seat.seat--regular.booked .seat-number{color:var(--mute)}
@media (min-width:1024px){.seat{width:36px;height:36px}.seat .seat-number{font-size:8px}}
.bk-legend .seat{position:relative;display:inline-block;width:22px;height:22px;cursor:default}
.bk-legend i.seat{border:0;border-radius:0}