/* =====================================================================
   Public booking flow
   ===================================================================== */
.flow-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.flow-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.flow-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 750; font-size: 1.05rem; }
.flow-brand img { max-height: 40px; width: auto; }
.lang-switch { display: flex; gap: 2px; font-size: .85rem; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 6px; text-decoration: none; color: var(--muted); font-weight: 600; }
.lang-switch a:hover { background: var(--neutral-bg); color: var(--ink); }
.lang-switch a[aria-current="true"] { background: var(--neutral-bg); color: var(--ink); }
.flow-main { padding: 22px 0 40px; }
.embedded .flow-main { padding: 12px 0 16px; }
.flow-footer { padding: 24px 0 40px; color: var(--muted); font-size: .85rem; }
.flow-footer .container { display: flex; flex-wrap: wrap; gap: 0 6px; }
.flow-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px; margin-right: 8px; color: var(--muted); }

.steps { display: flex; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; overflow-x: auto; }
.steps li { flex: 1 1 0; min-width: 0; font-size: .8rem; color: var(--muted); font-weight: 600; padding-top: 8px; border-top: 3px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps li.done { border-top-color: color-mix(in srgb, var(--brand) 45%, var(--surface)); color: var(--ink-2); }
.steps li.current { border-top-color: var(--brand); color: var(--brand); }
.steps li form { display: contents; }
.steps .step-link { display: block; width: 100%; margin: -8px 0 0; padding: 8px 0 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps li.done:has(.step-link):hover { border-top-color: var(--brand); }
.steps .step-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  /* phones: other steps show only their number (name kept for screen readers), links stay big enough to tap */
  .steps li:not(.current) { flex: 0 0 44px; text-align: center; }
  .steps li:not(.current) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .steps li.current { flex: 1 1 auto; }
  .steps .step-link { min-height: 44px; text-align: center; }
}

.event-hero h1 { font-size: 1.9rem; }
/* "From … to …" journey choice on the booking start page */
.journey { margin: 18px 0 10px; }
.journey-title { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 0; }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.journey-arrow { color: var(--muted); }
.station-list { margin: 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; }
.station-list legend { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 6px; }
.station { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-weight: 500; cursor: pointer; margin: 0; }
.station:hover { background: var(--neutral-bg); }
.station-emblem { width: 22px; height: 26px; object-fit: contain; flex: none; }
.station.is-disabled .station-emblem { opacity: .35; }
/* names line up when only some stations have a coat of arms */
.station-list:has(.station-emblem) .station:not(:has(.station-emblem)) > span { margin-left: 32px; }
.station.is-disabled { color: var(--line-strong); cursor: not-allowed; }
.station.is-disabled:hover { background: none; }
.station:has(input:checked) { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--ink); font-weight: 650; }
.journey-summary { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink-2); }
@media (max-width: 560px) { .journey-grid { grid-template-columns: 1fr; } .journey-arrow { transform: rotate(90deg); justify-self: center; } }

/* Multi-date picker (add several departures) */
.multi-date { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.md-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.md-title { font-weight: 700; text-transform: capitalize; }
.md-nav { padding: 4px 8px; }
.md-weekdays, .md-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.md-weekdays span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); padding: 2px 0; }
.md-day { aspect-ratio: 1; min-height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; padding: 0; }
.md-day:hover:not(:disabled) { border-color: var(--brand); }
.md-day.is-today { font-weight: 800; box-shadow: inset 0 0 0 1px var(--ink-2); }
.md-day[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.md-day.is-added { background: var(--ok-bg); border-color: #b7dfc7; color: var(--ok); cursor: default; }
.md-day:disabled { color: #b9bfc4; background: none; cursor: not-allowed; }
.md-add { width: 100%; margin-top: 8px; justify-content: center; }
.md-add:disabled { opacity: .5; cursor: not-allowed; }
.md-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.md-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: .9rem; }
.md-empty { color: var(--muted); font-size: .85rem; padding: 2px 0; }
.md-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.md-remove:hover { background: var(--bad-bg, #fbeaea); color: var(--bad, #b42318); }

/* Multi-time picker: list of times and the 24-hour clock dialog */
.tp-list { margin: 0 0 8px; }
.tp-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.clock-dialog { border: 0; border-radius: 14px; padding: 20px; width: min(320px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); background: var(--surface); color: var(--ink); }
.clock-dialog::backdrop { background: rgba(20, 36, 32, .45); }
.clock-title { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.clock-display, .clock-inputs { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.clock-display[hidden], .clock-inputs[hidden] { display: none; }
.clock-part { width: 96px; height: 72px; border: 0; border-radius: 10px; background: var(--neutral-bg); color: var(--ink); font: inherit; font-size: 2.6rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.clock-part.is-active { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); }
.clock-colon { font-size: 2.2rem; font-weight: 700; color: var(--ink-2); }
.clock-inputs input { width: 96px; height: 72px; text-align: center; font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.clock-face { display: block; width: 100%; max-width: 256px; margin: 0 auto 8px; touch-action: none; user-select: none; cursor: pointer; border-radius: 50%; }
.clock-face:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.clock-bg { fill: var(--neutral-bg); }
.clock-hand { stroke: var(--brand); stroke-width: 2; }
.clock-pin, .clock-knob { fill: var(--brand); }
.clock-dot { fill: #fff; }
.clock-num { font-size: 15px; fill: var(--ink); pointer-events: none; }
.clock-num.inner { font-size: 12px; fill: var(--muted); }
.clock-num.on { fill: #fff; font-weight: 700; }
.clock-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.clock-foot .grow { flex: 1; }

/* Payment method icons (tooltip = method · provider) */
.pay-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 28px; border-radius: 6px; background: var(--neutral-bg); color: var(--ink-2); cursor: help; vertical-align: middle; }
.pay-icon.pay-mark { background: none; }
.pay-icon.pay-mark svg { display: block; }
.pay-card { background: #efedfb; color: #5b4ccf; }
.pay-bank_transfer { background: #e6f2ee; color: #1d5c4b; }
.pay-invoice { background: #fdf3dc; color: #8a5a00; }
.pay-cash { background: #e6f4ec; color: #1f7a4d; }
.pay-pos_card { background: #eef0ef; color: #4a525b; }
.pay-voucher { background: #fcebf1; color: #b0306a; }

/* Calendar: capacity dot (share of places still free) */
.cap-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: 1px; margin-right: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(0,0,0,.08); }
.cap-green { background: #22a45d; }
.cap-yellow { background: #f2c94c; }
.cap-orange { background: #f2994a; }
.cap-red { background: #d63a2f; }

/* Steam / diesel train icon with its name as tooltip on hover, focus or tap */
.traction { position: relative; display: inline-flex; align-items: center; vertical-align: middle; color: var(--ink-2); cursor: help; border-radius: 4px; }
.traction-steam { color: #3d3a36; }
.traction-diesel { color: #a1430f; }
.tip { position: relative; }
.btn-icon { padding: 0 7px; color: var(--ink-2); }
.btn-icon:hover { color: var(--brand); }
.traction::after, .tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.2; padding: 4px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 20; }
.traction:hover::after, .traction:focus-visible::after, .traction:focus::after,
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }
.tip::after { text-transform: none; letter-spacing: normal; }
.tip-below::after { bottom: auto; top: calc(100% + 6px); }
.tip-start::after { left: var(--tip-left, 0); transform: none; }  /* opens to the right, e.g. next to a heading; --tip-left: backoffice.js, near the window's edge */
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 6px; color: var(--muted); vertical-align: middle; }
.icon-link:hover, .icon-link:focus-visible { background: var(--neutral-bg); color: var(--brand); }
.icon-link-help, .icon-link-help:hover, .icon-link-help:focus-visible { width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--brand); font-family: inherit; cursor: help; vertical-align: text-bottom; }
.icon-link-help svg { stroke-width: 2.4; }
.icon-link-help.tip-start:not(:hover):not(:focus-within)::after { display: none; }  /* hidden, it would still widen the page near its edge */
.tip-wrap::after { white-space: normal; width: max-content; max-width: min(360px, 90vw); text-align: left; }
.tip-wrap:focus-within::after { opacity: 1; }
.event-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); margin-bottom: 10px; }
.event-meta span { display: inline-flex; align-items: center; gap: 6px; }

.dep-list { list-style: none; margin: 0; padding: 0; }
.dep-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dep-item:last-child { border-bottom: 0; }
.dep-closed > :not(.dep-action) { opacity: .5; }
.dep-action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dep-date { text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; background: var(--surface-2); }
.dep-date .dd { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.dep-date .mm { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: .05em; }
.dep-date .wd { font-size: .72rem; color: var(--muted); }
@media (max-width: 560px) { .dep-item { grid-template-columns: 58px 1fr; } .dep-item .dep-action { grid-column: 1 / -1; } .dep-item .dep-action .btn { width: 100%; } }
/* Chained trips: the customer's own trips stand out between the trips they can add */
.dep-item.chain-trip { background: var(--ok-bg); box-shadow: inset 4px 0 0 var(--ok); }
.dep-item.chain-trip .dep-date { background: var(--surface); border-color: #b7dfc7; }
@media (max-width: 560px) { .dep-item.chain-trip { grid-template-columns: 58px 1fr auto; } .dep-item.chain-trip .dep-action { grid-column: auto; } .dep-item.chain-trip .dep-action .btn { width: auto; } }
.sticky-foot { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 6px 24px rgba(0,0,0,.12); }

.tt-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tt-row:last-child { border-bottom: 0; }
.tt-name { font-weight: 650; }
.tt-price { font-weight: 700; white-space: nowrap; }
.tt-unavailable .tt-name, .tt-unavailable .tt-price, .tt-unavailable .stepper { opacity: .45; }
.tt-capacity { margin-top: 2px; }
.tt-persons { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.tt-persons select { width: auto; min-height: 36px; }

.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.summary-total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 1.15rem; font-weight: 800; }
.countdown { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-variant-numeric: tabular-nums; }
.countdown.low { color: var(--bad); }
.pay-countdown { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.15rem; margin: 0 0 8px; }
.pay-countdown .countdown { font-size: 1.6rem; color: var(--brand); }
.pay-countdown .countdown.low { color: var(--bad); }

.success-hero { text-align: center; padding: 26px 20px; }
/* Card payment on the booking page: Stripe's form (it sizes itself) or the simulator's page in a frame */
.card-inline { min-height: 120px; }
.card-inline-frame { display: block; width: 100%; height: 620px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.success-hero .tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: var(--ok-bg); color: var(--ok); }

/* ---------- Seat map ---------- */
.seatmap { display: flex; flex-direction: column; gap: 14px; }
.coach { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.coach-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.coach-head strong { font-size: .95rem; }
.coach-scroll { overflow-x: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
.coach svg { display: block; }  /* width set by seatmap.js: fits the box, keeps its proportions */
.seat .seat-shape { fill: var(--seat-free); stroke: var(--seat-free-line); stroke-width: 1.4; transition: fill .1s; }
.seat text { font: 600 11px var(--font); fill: var(--ink-2); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.seat.free { cursor: pointer; }
.seat.free:hover .seat-shape { fill: color-mix(in srgb, var(--brand) 18%, var(--surface)); stroke: var(--brand); }
.seat.mine .seat-shape { fill: var(--seat-mine); stroke: var(--seat-mine); }
.seat.mine text { fill: var(--brand-ink); }
.seat.held .seat-shape { fill: var(--seat-held); stroke: #7a5c00; stroke-dasharray: 4 3; }
.seat.occupied .seat-shape { fill: var(--seat-occupied); stroke: #8b9690; }
.seat-strike { stroke: #8b9690; stroke-width: 1.6; }
.seat.released .seat-strike { display: none; }  /* given up on a seat change: it has its own cross */
.seat.occupied text { fill: #4a525b; }
.seat.blocked text { fill: #ffffff; }
.seat.blocked .seat-shape { fill: var(--seat-blocked); stroke: var(--seat-blocked); }
.seat.checked .seat-shape { stroke: var(--ok); stroke-width: 2.5; }
.seat.selected-admin .seat-shape { stroke: var(--focus); stroke-width: 3; }
.seatmap[data-pick-target] .seat:not(.free), .seatmap[data-pick-target] .seat:not(.free) .seat-shape { cursor: not-allowed; }
.seat.released .seat-shape { fill: var(--seat-free); stroke: var(--bad); stroke-dasharray: 4 3; }  /* given up on a seat change */
.seat.released text { fill: var(--ink); paint-order: stroke; stroke: var(--seat-free); stroke-width: 3px; }
.seat.picked .seat-shape { fill: var(--brand); stroke: var(--brand); }  /* changing all seats: the new ones */
.seat.picked text { fill: #fff; }
.pick-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem; }
.pick-list strong { display: block; }
.seat .released-cross { stroke: var(--bad); stroke-width: 1.6; stroke-linecap: round; opacity: .55; pointer-events: none; }
/* platform system status: a traffic light per part */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.status-grid > .card { min-width: 0; }
.status-grid > .status-wide { grid-column: 1 / -1; }
.status-grid table.kv td, .status-grid .mono { overflow-wrap: anywhere; }
.status-grid .card-head h2 { display: flex; align-items: center; gap: 10px; }
.status-light { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.status-light-ok { background: var(--ok, #1f7a4d); }
.status-light-warn { background: #d4a72c; }
.status-light-bad { background: var(--bad, #b42318); }
.card.status-bad { box-shadow: inset 4px 0 0 var(--bad, #b42318); }
.card.status-warn { box-shadow: inset 4px 0 0 #d4a72c; }
/* data processing agreement: text and print view (contracts app) */
.contract-text { line-height: 1.6; max-width: 80ch; }
.contract-text p { margin: 0 0 .9em; }
body.contract-print { background: #fff; }
.contract-sheet { max-width: 820px; margin: 0 auto; padding: 32px 24px 48px; }
.contract-record { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
@media print { .contract-sheet { padding: 0; } .no-print { display: none !important; } }
/* banners from the platform team at the top of the back office (announcements app) */
.announcements { display: grid; gap: 8px; margin-bottom: 14px; }
.announcement { align-items: flex-start; margin: 0; }
.announcement form { margin: -4px -6px 0 0; }
.announcement .badge { vertical-align: 1px; margin-right: 2px; }
/* booking pages: button to the customer's upcoming bookings made on this device (booking/_my_bookings.html) */
.my-bookings { white-space: nowrap; }
.my-bookings-menu { position: relative; }
.my-bookings-menu > summary { list-style: none; cursor: pointer; }
.my-bookings-menu > summary::-webkit-details-marker { display: none; }
.my-bookings-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; margin: 0;
  padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.my-bookings-menu li a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); text-decoration: none; }
.my-bookings-menu li a:hover, .my-bookings-menu li a:focus-visible { background: var(--surface-2); }
/* picking free seats on a departure's seat map to book them (seatmap.js) */
.seat.picked .seat-shape { fill: color-mix(in srgb, var(--brand) 30%, var(--surface)); stroke: var(--brand); stroke-width: 2.6; }
.seat.picked text { fill: var(--brand); }
.seat-box { position: fixed; z-index: 55; border: 1.5px dashed var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent);
  pointer-events: none; }
body.seat-boxing, body.seat-boxing * { user-select: none; }
/* booking from seats chosen on the seat map: persons / seats on the ticket step (flow.js) */
.seat-target { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); }
.seat-target.is-over { background: var(--bad, #b42318); color: #fff; }
/* reseating: hold a booked seat and drag the person to a free one (seatmap.js) */
.seat.draggable { cursor: grab; touch-action: none; }
.seat.dragging .seat-shape { opacity: .45; }
.seat.drop-ok .seat-shape { fill: color-mix(in srgb, var(--brand) 25%, var(--surface)); stroke: var(--brand); stroke-width: 3; }
.seat.moved .seat-shape { stroke: var(--brand); stroke-width: 2.6; stroke-dasharray: 4 3; }
body.seat-dragging, body.seat-dragging * { cursor: grabbing !important; user-select: none; }
.seat-ghost { position: fixed; z-index: 60; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: #fff;
  font-size: .82rem; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; }
/* the seats of the booking under the pointer (seatmap.js) */
.seat.same-booking .seat-shape { fill: color-mix(in srgb, var(--brand) 55%, #9aa3a0); stroke: var(--brand); stroke-width: 2.6; }
.seat.same-booking text { fill: #ffffff; }.seat:focus { outline: none; }
.seat:focus-visible .seat-shape { stroke: var(--focus); stroke-width: 3; }
.seat .acc { fill: var(--info); }
.seat .win { stroke: #9db8d8; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }  /* window */
.seat .tbl { stroke: #b9a07a; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }  /* table (editor) */
.seat .back { stroke: var(--ink-2); stroke-width: 3.5; stroke-linecap: round; opacity: .45; pointer-events: none; }  /* backrest */
.layout-outline { fill: #fbfbfa; stroke: var(--line-strong); stroke-width: 1.5; }
.layout-el { fill: #eef0ef; stroke: #d5d9d7; }
.layout-line { stroke: #8a948f; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.layout-line.dotted { stroke-dasharray: 0 8; }  /* round caps of length 0: a row of dots */
.editor-canvas .line-hit { stroke: transparent; stroke-width: 16; cursor: grab; }
.editor-canvas .seat.sel .layout-line { stroke: var(--focus); }
.layout-el-text { font: 600 10px var(--font); fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 16px; border-radius: 4px; border: 1.4px solid var(--seat-free-line); display: inline-block; }
.legend i.mine { background: var(--seat-mine); border-color: var(--seat-mine); }
.legend i.held { background: var(--seat-held); border: 1.4px dashed #7a5c00; }
.legend i.occupied { background: linear-gradient(to top right, transparent 46%, #8b9690 46% 54%, transparent 54%) var(--seat-occupied); border-color: #8b9690; }
.legend i.blocked { background: var(--seat-blocked); border-color: var(--seat-blocked); }
.seat-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.seat-list label { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 400; margin: 0; }