/* Manage booking: change seats, cancel dialog with refund timeline, find my booking. */

/* ---------------------------------------------------------------- change seats */
.seats-page { padding-block: 24px 140px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-primary); margin-block-end: 16px; }
.seats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.seats-head .lead { margin-top: 6px; font-size: 16px; }
.seats-page .alert { margin-block-end: 16px; }

.seat-legs { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.seat-leg { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--c-ink); text-align: start; }
.seat-leg .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg-soft); border: 1px solid var(--c-line-2); font-weight: 700; font-size: 13px; color: var(--c-ink-2); }
.seat-leg .t { display: flex; flex-direction: column; line-height: 1.3; }
.seat-leg small { color: var(--c-muted); font-size: 12.5px; }
.seat-leg.is-active { border-color: var(--c-primary); background: #F2F4FF; }
.seat-leg.is-active .n { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.seats-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.seats-main { min-width: 0; }
.seats-side { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1180px) {
  .seats-layout { grid-template-columns: minmax(0, 1fr); }
  .seats-side { position: static; order: -1; }
}

.seat-trainline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink-2); margin-block-end: 12px; }

.coach-picker { margin-block-end: 14px; }
.coach-picker-head { display: flex; align-items: center; gap: 8px; margin-block-end: 8px; font-size: 13px; font-weight: 700; color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .08em; }
html[lang="ar"] .coach-picker-head { letter-spacing: 0; }
.coach-picker-head .spacer { flex: 1; }
.coach-picker-head .icon-btn { width: 36px; height: 36px; }
.coach-list { display: flex; gap: 10px; overflow-x: auto; padding-block-end: 6px; scroll-snap-type: x proximity; }
.coach-btn { flex: 0 0 auto; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 150px; padding: 10px 14px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: #fff; font: inherit; text-align: start; color: var(--c-ink); }
.coach-btn .num { grid-row: span 2; font-size: 22px; font-weight: 800; }
.coach-btn .cls { font-size: 13px; font-weight: 700; }
.coach-btn .free { font-size: 12px; color: var(--c-muted); }
.coach-btn .guests { grid-column: 1 / -1; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--c-violet); }
.coach-btn.is-active { border-color: var(--c-primary); background: #F2F4FF; }
.coach-btn:hover { border-color: var(--c-line-3); }

.coach-map { padding: 20px; }
.coach-map-head { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; }
.coach-num { min-width: 48px; height: 48px; padding-inline: 6px; border-radius: var(--r-sm); background: var(--c-ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.coach-map-head strong { display: block; font-size: 16px; }
.coach-map-head small { color: var(--c-muted); font-size: 13px; }

.seat-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 0; font-size: 12.5px; color: var(--c-ink-2); }
.seat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid; }
.sw.s-free { background: #fff; border-color: #C9D0E0; }
.sw.s-cur { background: var(--c-primary-soft); border-color: var(--c-primary); }
.sw.s-new { background: var(--c-primary); border-color: var(--c-primary); }
.sw.s-other { background: var(--c-lilac-soft); border-color: #B9A8FB; }
.sw.s-taken { background: #F2F4FA; border-color: var(--c-line); }

/* The coach is drawn along the train on wide screens (rows → columns, like the design) and upright on phones.
   --r = position along the coach, --c = seat column across the coach. Track sizes come from the page (--rows, --cols). */
.seat-scroller { overflow-x: auto; padding-block: 4px 8px; }
.seat-grid {
  --seat-long: 46px; --seat-wide: 40px; --seat-gap: 16px; --seat-aisle: 22px;
  display: grid; gap: 6px; width: max-content; margin-inline: auto;
  grid-template-columns: var(--rows); grid-template-rows: var(--cols);
  padding: 14px 18px; border: 2px solid var(--c-line); border-radius: 28px; background: linear-gradient(var(--c-bg-soft), #fff);
}
.seat { grid-column: var(--r); grid-row: var(--c); position: relative; display: grid; place-items: center; border: 1.5px solid #C9D0E0; border-radius: 9px 9px 7px 7px; background: #fff; color: var(--c-ink-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .08s, background .12s; }
.seat .ini { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; min-width: 20px; height: 18px; padding-inline: 3px; border-radius: 999px; font-size: 10px; line-height: 18px; background: inherit; border: 1.5px solid currentColor; display: none; }
.seat .ini:not(:empty) { display: block; }
.seat[data-win="1"].s-free { border-color: #9CC0FF; box-shadow: inset 0 0 0 1px #DCE9FF; }
.seat.s-free:hover:not(:disabled) { border-color: var(--c-primary); transform: translateY(-1px); }
.seat.s-cur { background: var(--c-primary-soft); color: var(--c-primary); border-color: var(--c-primary); }
.seat.s-new { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--shadow-primary); }
.seat.s-new .ini { background: #fff; color: var(--c-primary); }
.seat.s-other { background: var(--c-lilac-soft); color: var(--c-violet); border-color: #B9A8FB; }
.seat.s-taken { background: #F2F4FA; color: #B3B9C9; border-color: var(--c-line); cursor: not-allowed; }
.seat.dim { opacity: .3; }
.seat:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.seat-divider { grid-column: var(--r); grid-row: 1 / -1; border-inline: 2px dashed var(--c-line-2); border-radius: 4px; }

@media (max-width: 700px) {
  .seat-grid { grid-template-columns: var(--cols); grid-template-rows: var(--rows); border-radius: 22px; padding: 14px; }
  .seat { grid-column: var(--c); grid-row: var(--r); }
  .seat-divider { grid-row: var(--r); grid-column: 1 / -1; border-inline: 0; border-block: 2px dashed var(--c-line-2); }
  .coach-map { padding: 16px; }
}

.guests-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.guests-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.guests-head h2 { font-size: 17px; }
.guest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guest-list li { position: relative; }
.guest { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: #fff; font: inherit; text-align: start; color: var(--c-ink); cursor: pointer; }
.guest .avatar { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 800; font-size: 13px; }
.guest .who { display: flex; flex-direction: column; min-width: 0; }
.guest .who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest .who small { font-size: 12px; color: var(--c-muted); }
.guest .where { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--c-ink-2); }
.guest .where .new { color: var(--c-primary); font-weight: 700; }
.guest.has-new .where .cur { text-decoration: line-through; color: var(--c-muted-2); }
.guest.is-active { border-color: var(--c-primary); background: #F2F4FF; }
.guest.is-active .avatar { background: var(--c-primary); color: #fff; }
.guest.is-infant { cursor: default; opacity: .75; }
.guest.is-infant .avatar { background: var(--c-bg-muted); color: var(--c-muted); }
.guest:disabled { cursor: default; }
.undo { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; border: 0; background: none; color: var(--c-primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.seat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seat-filters .lbl { font-size: 12.5px; font-weight: 700; color: var(--c-muted); margin-inline-end: 2px; }
.seat-filters .pill { height: 32px; padding-inline: 12px; }
.seat-filters .pill[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.guests-card .hint { font-size: 12.5px; color: var(--c-muted); margin: 0; }

.seat-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--c-line); box-shadow: 0 -10px 30px -18px rgba(7,19,45,.35); }
.seat-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.seat-bar-text { display: flex; flex-direction: column; }
.seat-bar-text small { color: var(--c-muted); font-size: 12.5px; }
.seat-bar-actions { display: flex; gap: 10px; }
.seats-page.has-changes .seat-bar-text strong { color: var(--c-primary); }
/* Keep messages above the sticky bar so they never cover "Confirm". */
body:has(.seat-bar) .toasts { bottom: 112px; }
@media (max-width: 640px) { body:has(.seat-bar) .toasts { bottom: 150px; inset-inline: 16px; } }
@media (max-width: 640px) {
  .seat-bar-in { padding-block: 10px; gap: 8px; }
  .seat-bar-text small { display: none; }
  .seat-bar-actions { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .seat-bar-actions .btn { height: auto; min-height: 48px; padding-block: 10px; white-space: normal; line-height: 1.25; }
  .seat-bar-actions .btn-lg { font-size: 15px; }
}

/* ---------------------------------------------------------------- cancel dialog */
.cancel-panel { max-width: 560px; }
.cancel-panel .modal-body { display: flex; flex-direction: column; gap: 16px; }
.cx-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.cx-sum { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--c-bg-soft); border: 1px solid var(--c-line); font-size: 14px; }
.cx-sum div { display: flex; justify-content: space-between; gap: 12px; }
.cx-sum .refund { padding-top: 8px; border-top: 1px dashed var(--c-line-2); font-size: 16px; font-weight: 800; color: var(--c-success); }
.cx-sum .refund.none { color: var(--c-danger); }
.cx-timeline { display: flex; flex-direction: column; gap: 10px; }
.cx-timeline h3 { font-size: 14px; }
.cx-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-tier { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 13px; }
.cx-tier .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-3); }
.cx-tier .when { color: var(--c-ink-2); }
.cx-tier .amt { text-align: end; font-weight: 700; white-space: nowrap; }
.cx-tier .amt small { display: block; font-weight: 500; color: var(--c-muted); }
.cx-tier.is-past { opacity: .5; }
.cx-tier.is-current { border-color: var(--c-primary); background: #F2F4FF; }
.cx-tier.is-current .dot { background: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.cx-tier .now { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; }
.cx-wallet { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--c-primary); border-radius: var(--r-md); background: #F2F4FF; font-size: 14px; }
.cx-wallet small { display: block; color: var(--c-muted); font-size: 12.5px; }
.cx-dest { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-dest legend { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.cx-dest-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); font-size: 14px; cursor: pointer; }
.cx-dest-opt small { display: block; color: var(--c-muted); font-size: 12.5px; }
.cx-dest-opt input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--c-primary); }
.cx-dest-opt > svg { flex: none; color: var(--c-primary); }
.cx-dest-opt:has(input:checked) { border-color: var(--c-primary); background: #F2F4FF; }
.cx-dest-opt:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.cx-note { font-size: 12.5px; color: var(--c-muted); margin: 0; }
.cx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .cx-actions { grid-template-columns: 1fr; } }

/* confirmation page: seats on the passes, refund line */
.pass-seat { margin-top: 8px; }
.pass-seat.is-set { display: inline-flex; align-items: center; gap: 6px; color: var(--c-primary); font-weight: 700; }
.refund-line { color: var(--c-success); }
.cx-working { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 8px; text-align: center; }
.cx-progress { width: 100%; height: 6px; border-radius: 999px; background: var(--c-line); overflow: hidden; }
.cx-progress span { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--c-primary); animation: cx-move 1.2s ease-in-out infinite; }
@keyframes cx-move { from { margin-inline-start: -40%; } to { margin-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .cx-progress span { animation: none; width: 100%; } }

/* ---------------------------------------------------------------- find my booking */
.find-page { max-width: 560px; padding-block: 48px 96px; }
.find-page h1 { margin-block: 14px 8px; }
.find-page form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.find-page .alt { margin-top: 24px; font-size: 14px; color: var(--c-muted); }

/* ---------------------------------------------------------------- booking details page (/account/bookings/{id}, design: bkd) */
.bkd-top { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); }
.bkd-top .container { padding-block: 24px 32px; }
.bkd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 32px; flex-wrap: wrap; }
.bkd-title { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 760px; }
.bkd-title .lead { font-size: 15px; color: var(--c-ink-2); line-height: 1.55; }
.bkd-pnr { margin-top: 6px; }
.bkd-pnr b { color: var(--c-ink); letter-spacing: .06em; }
.bkd-body { padding-block: 28px 96px; display: flex; flex-direction: column; gap: 20px; }

.bkd-pax { border-top: 1px solid var(--c-line); }
.bkd-pax-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto; gap: 12px 16px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--c-line); font-size: 14px; }
.bkd-pax-row:first-child { border-top: 0; }
.bkd-pax-th { background: var(--c-bg-soft); padding-block: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.bkd-pax .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bkd-pax .who b { display: block; overflow-wrap: anywhere; }
.bkd-pax .who small { display: block; color: var(--c-muted); font-size: 12.5px; }
.bkd-pax .avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.bkd-pax .lbl { display: none; }
.bkd-pax [dir="ltr"] { font-variant-numeric: tabular-nums; }

.bkd-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.bkd-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bkd-facts dt { color: var(--c-muted); }
.bkd-facts dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.bkd-cancel p { font-size: 14px; color: var(--c-ink-2); margin-bottom: 12px; }

@media (max-width: 760px) {
  .bkd-pax-th { display: none; }
  .bkd-pax-row { grid-template-columns: 1fr 1fr; padding-inline: 18px; }
  .bkd-pax .who { grid-column: 1 / -1; }
  .bkd-pax .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 2px; }
}