/* «Купить в QTickets»: date and time, contacts, then QTickets (assets/js/booking.js). Uses the site's .modal. */
.booking .modal__dialog { max-width: 560px; }
.booking__program { margin: 0 0 6px; color: var(--c-red-text, var(--c-red)); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; min-height: 1.2em; }
.booking__car { margin: 0; }

.booking__steps { display: flex; gap: 6px; margin: 18px 0 20px; padding: 0; list-style: none; font-size: .78rem; font-weight: 700; color: var(--muted); }
.booking__steps li { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; padding-top: 8px; border-top: 3px solid var(--line); line-height: 1.2; }
.booking__steps span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); font-size: .72rem; }
.booking__steps .is-current { color: var(--text); border-color: var(--c-red); }
.booking__steps .is-current span { background: var(--c-red-fill, var(--c-red)); color: #fff; }
.booking__steps .is-done { border-color: var(--c-blue); color: var(--text); }

.booking__label { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.booking__days { margin-bottom: 18px; max-width: 360px; }
.booking__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.booking__month { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.booking__nav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 1.4rem; line-height: 1; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.booking__nav:hover:not(:disabled) { background: var(--c-blue); color: #fff; }
.booking__nav:disabled { opacity: .3; cursor: default; }
.booking__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.booking__wdh { padding: 4px 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.booking__grid > span, .booking__day { display: grid; place-items: center; aspect-ratio: 1; min-height: 36px; border-radius: var(--r-xs); font-size: .95rem; }
.booking__off { color: var(--muted); opacity: .45; }
.booking__day { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 700; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; }
.booking__day:hover { border-color: var(--text); }
.booking__day.is-active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

.booking__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-height: 48px; }
.booking__time { display: grid; justify-items: center; align-content: center; min-height: 48px; padding: 6px 4px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease; }
.booking__time:hover:not(:disabled) { border-color: var(--c-red); background: var(--c-red-fill, var(--c-red)); color: #fff; }
.booking__time:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.booking__time small { font-family: inherit; font-size: .68rem; font-weight: 600; text-decoration: none; }
.booking__times.is-pending .booking__time { opacity: .7; }
.booking__empty, .booking__loading { grid-column: 1 / -1; margin: 0; padding: 12px 0; color: var(--muted); font-size: var(--fs-sm); }
.booking__note { margin: 14px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.booking__fail p { margin: 0 0 16px; }
.booking__fail[hidden], .booking__step[hidden] { display: none; }

.booking__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; }
.booking__when::first-letter { text-transform: uppercase; }
.booking__change { flex: none; color: var(--link); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.booking__lead { margin: 14px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.booking__form { --field-bg: var(--surface); --field-bd: var(--line-strong); display: grid; gap: 14px; margin-top: 16px; }
.booking__form .field.is-invalid .field__input { border-color: var(--c-red); }
.booking__form .field { gap: 6px; }
.booking__go { margin-top: 4px; }
.booking__status { margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--c-red-50, rgba(230, 24, 48, .08)); color: var(--c-red-600, var(--c-red)); font-size: var(--fs-sm); font-weight: 600; }
.booking__status[hidden] { display: none; }
.booking__skip { justify-self: center; padding: 4px 8px; color: var(--muted); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 2px; }
.booking__skip:hover { color: var(--text); }
.booking__fine { margin: 14px 0 0; color: var(--muted); font-size: .75rem; text-align: center; }

@media (max-width: 640px) {
  .booking .modal__title { font-size: 1.35rem; }
  .booking__steps { margin: 12px 0 16px; font-size: .7rem; }
  .booking__form { gap: 10px; margin-top: 12px; }
  .booking__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}