/* Компоненты дизайн-системы — копия design/bundle.css. Не править: переопределения — в css зоны (public.css и др.). */
/* Евразийский мост 2026 — компоненты сервиса бронирования. Только CSS, работает с любым стеком. */
.eb-page { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.eb-display { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; color: var(--heading); margin: 0; }
.eb-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Button */
.eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6);
  font: 700 16px/24px var(--font-sans); border: 2px solid transparent; border-radius: var(--radius-0); cursor: pointer; text-decoration: none; }
.eb-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eb-btn--primary { background: var(--accent); color: var(--on-accent); }
.eb-btn--primary:hover { background: var(--heading); color: var(--bg); }
.eb-btn--secondary { background: transparent; color: var(--link); border-color: var(--link); }
.eb-btn--secondary:hover { background: var(--link); color: var(--bg); }
.eb-btn--ghost { background: transparent; color: var(--link); padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 3px; }
.eb-btn[disabled] { background: var(--surface-muted); color: var(--text-muted); border-color: transparent; cursor: not-allowed; }

/* Band — плашка раздела из кинопрограммы */
.eb-band { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--band); color: var(--on-band); padding: var(--space-2) var(--space-4); }
.eb-band__title { font: 400 24px/28px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.eb-band__sub { font: 400 14px/20px var(--font-display); text-transform: uppercase; letter-spacing: .04em; opacity: .9; }

/* Availability chip */
.eb-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; border-radius: var(--radius-pill);
  font: 700 12px/16px var(--font-sans); letter-spacing: .02em; border: 1px solid currentColor; white-space: nowrap; }
.eb-chip--open { color: var(--success); }
.eb-chip--low { color: var(--warning); }
.eb-chip--full { color: var(--danger); }
.eb-chip--closed { color: var(--text-muted); }

/* Session row */
.eb-session { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--hairline); }
.eb-session__when { font-family: var(--font-display); color: var(--heading); line-height: 1; }
.eb-session__date { font-size: 32px; display: block; }
.eb-session__time { font-size: 20px; color: var(--link); }
.eb-session__film { min-width: 0; }
.eb-session__title { font: 700 16px/22px var(--font-sans); text-transform: uppercase; margin: 0; overflow-wrap: anywhere; }
.eb-session__meta { font: 400 12px/16px var(--font-sans); color: var(--text-muted); margin: 2px 0 0; }
.eb-session__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.eb-session--full { background: var(--surface-muted); }
.eb-session--full .eb-session__title { color: var(--text-muted); }
.eb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--field-border); border-radius: var(--radius-2); }
.eb-stepper button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--link); font: 700 18px/1 var(--font-sans); cursor: pointer; }
.eb-stepper button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.eb-stepper output { min-width: 28px; text-align: center; font: 700 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .eb-session { grid-template-columns: 64px 1fr; } .eb-session__side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

/* Field */
.eb-field { display: grid; gap: var(--space-2); }
.eb-field__label { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.eb-field__input { min-height: 48px; padding: 0 var(--space-3); font: 400 16px/24px var(--font-sans); color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: var(--radius-2); }
.eb-field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eb-field__hint { font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.eb-field--error .eb-field__input { border-color: var(--danger); border-width: 2px; }
.eb-field--error .eb-field__hint { color: var(--danger); }

/* Ticket — пригласительный */
.eb-ticket { display: grid; grid-template-columns: 1fr auto; background: var(--surface); color: var(--text); border: 1px solid var(--hairline); max-width: 560px; }
.eb-ticket__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); background: linear-gradient(160deg, var(--kv-top), var(--kv-mid) 55%, var(--kv-bottom)); color: var(--eb-white); }
.eb-ticket__head img { height: 40px; width: auto; }
.eb-ticket__body { padding: var(--space-4); display: grid; gap: var(--space-2); min-width: 0; }
.eb-ticket__film { font: 400 28px/30px var(--font-display); text-transform: uppercase; color: var(--heading); margin: 0; }
.eb-ticket__seats { font: 700 16px/24px var(--font-sans); }
.eb-ticket__qr { padding: var(--space-4); border-left: 1px dashed var(--field-border); display: grid; justify-items: center; align-content: center; gap: var(--space-2); }
.eb-ticket__code { font: 700 14px/20px var(--font-sans); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.eb-ticket__note { grid-column: 1 / -1; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
@media (max-width: 480px) { .eb-ticket { grid-template-columns: 1fr; } .eb-ticket__qr { border-left: 0; border-top: 1px dashed var(--field-border); } }

/* Check-in result */
.eb-checkin { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--on-status); text-align: center; }
.eb-checkin__icon { font: 700 40px/1 var(--font-sans); }
.eb-checkin__title { font: 400 36px/38px var(--font-display); text-transform: uppercase; margin: 0; }
.eb-checkin__detail { font: 400 16px/24px var(--font-sans); margin: 0; }
.eb-checkin--ok { background: var(--success); }
.eb-checkin--partial { background: var(--warning); }
.eb-checkin--denied { background: var(--danger); }