.seat-selection { background:var(--page-background); color:var(--ink); padding:28px 24px 64px; }
.selection-header,.seat-selection .seat-page { width:100%; max-width:1160px; margin:0 auto; }
.selection-back { display:inline-block; margin-bottom:24px; color:var(--blue); font-size:14px; }
.selection-header h1 { max-width:880px; margin:8px 0 16px; font-size:clamp(25px,3vw,36px); line-height:1.25; overflow-wrap:anywhere; }
.selection-header .eyebrow { color:var(--blue); font-size:12px; margin:0; }
.selection-trip { display:flex; flex-wrap:wrap; gap:12px 28px; color:#52677a; font-size:15px; }
.selection-steps { display:flex; flex-wrap:wrap; gap:16px 36px; padding:22px 0; margin:16px 0 8px; list-style:none; font-size:14px; }
.selection-steps li { display:flex; align-items:center; gap:10px; }
.selection-steps span,.selection-step { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#e8f1fb; color:var(--blue); font-weight:700; flex-shrink:0; }
.seat-selection .seat-page { display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:0; background:#fff; border:1px solid #e1e7ed; border-radius:16px; box-shadow:0 4px 18px #17202a05; align-items:start; }
.seat-selection .seat-page > .seat-shell,.seat-selection .seat-page > .reserve-panel { width:100%; max-width:none; margin:0; padding:28px; background:transparent; border:0; border-radius:0; box-shadow:none; min-width:0; }
.seat-selection .seat-page > .reserve-panel { border-top:1px solid #e1e7ed; }
.selection-section-heading { display:flex; align-items:start; gap:12px; margin-bottom:20px; }
.selection-section-heading h2 { font-size:21px; margin:2px 0 8px; line-height:1.25; }
.selection-section-heading p { margin:0; color:#607080; font-size:14px; line-height:1.6; }
.selection-availability { width:fit-content; padding:7px 12px; border-radius:20px; background:#edf8ee; color:#27682e; font-size:13px; margin-bottom:24px; }
.seat-selection .seat-map { min-width:0; overflow:visible; }
/* The compact vertical map is only for narrow screens. */
@media(max-width:900px) {
.seat-selection .bus-body { position:relative; display:grid; grid-template-columns:48px 48px 24px 48px 48px; grid-template-rows:60px repeat(var(--seat-rows),48px); gap:12px 8px; width:fit-content; max-width:100%; height:auto; min-height:0; aspect-ratio:auto; padding:16px; margin:0 auto 24px; border:2px solid #bcc8d3; border-radius:36px 36px 18px 18px; background:#f4f7fa; box-shadow:none; overflow:visible; }
.seat-selection .bus-body::before { content:'Frente do veículo'; display:block; position:static; grid-column:1/4; grid-row:1; width:auto; height:auto; background:none; box-shadow:none; color:#647586; font-size:12px; align-self:center; }
.seat-selection .bus-cabin::before,.seat-selection .bus-cabin::after { display:none; }
.seat-selection .bus-body::after,.seat-selection .bus-aisle,.seat-selection .bus-mobile-fixtures,.seat-selection .bus-mobile-service,.seat-selection .bus-cabin__windshield,.seat-selection .bus-cabin__driver-seat { display:none; }
.seat-selection .bus-cabin { position:relative; inset:auto; width:auto; height:auto; grid-column:4/6; grid-row:1; border:0; border-radius:0; background:none; transform:none; }
.seat-selection .bus-cabin__steering-wheel { position:absolute; left:auto; right:10px; top:12px; width:30px; height:30px; }
.seat-selection .bus-body .seat { position:static; inset:auto; grid-row:var(--selection-row); grid-column:var(--selection-col); width:48px; height:48px; min-width:44px; margin:0; padding:0; align-self:center; border-radius:10px 10px 6px 6px; border:1px solid #488c37; font:inherit; font-size:14px; font-weight:700; box-shadow:inset 0 -4px #00000012; transform:none; }
}
.seat-selection .seat:focus-visible { outline:3px solid #165ec1; outline-offset:3px; }
.seat-selection .seat.is-selected { background:#1464c0; color:white; border-color:#104b90; }
.seat-selection .seat--busy { background:#e2e7ec; border-color:#c2cbd4; color:#6a7784; }
.seat-selection .legend { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:20px 0 0; font-size:12px; }
.seat-selection .selected-seats { margin:0 0 24px; padding:14px 16px; border:1px solid #d9e7f7; border-radius:10px; background:#f0f6ff; color:#245383; line-height:1.6; }
.seat-selection .reserve-panel .detail-card { padding:16px; margin:0 0 20px; border:1px solid #e1e7ed; border-radius:12px; box-shadow:none; }
.seat-selection .reserve-panel legend { padding:0 6px; font-size:15px; font-weight:700; }
.seat-selection .reserve-panel label { font-size:13px; color:#485968; }
.seat-selection .reserve-panel input,.seat-selection .reserve-panel select { width:100%; min-height:44px; margin-top:2px; background:#fff; }
.selection-checkout { border-top:1px solid #e1e7ed; padding-top:20px; margin-top:20px; }
.selection-checkout .eyebrow { font-size:11px; margin:0 0 8px; color:#607080; }
.selection-checkout .price { font-size:27px; margin:0 0 12px; }
.selection-checkout p { font-size:13px; line-height:1.6; color:#607080; }
.selection-checkout .button { min-height:48px; margin-top:10px; }
.selection-note { font-size:12px!important; }
@media(min-width:640px) {
    .seat-selection .selection-contact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
}
@media(max-width:900px) { .seat-selection .seat-page { grid-template-columns:1fr; max-width:680px; } .selection-header { max-width:680px; } }
@media(max-width:480px) { .seat-selection { padding:20px 12px 40px; } .seat-selection .seat-page > .seat-shell,.seat-selection .seat-page > .reserve-panel { padding:20px 14px; } .selection-steps { gap:12px; font-size:12px; } .selection-steps span { width:24px; height:24px; } .seat-selection .bus-body { grid-template-columns:44px 44px 16px 44px 44px; gap:10px 6px; padding:12px; } .seat-selection .bus-body .seat { width:44px; height:46px; } }

/* Desktop uses the horizontal bus and seat coordinates from responsive.css. */
@media(min-width:901px) {
    .seat-selection .seat-page { grid-template-columns:minmax(0,1fr); }
    .seat-selection .selection-contact { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .seat-selection .bus-body { max-width:1040px; margin:24px auto; }
    .seat-selection .bus-body .seat { min-width:36px; min-height:36px; font-size:15px; }
    .seat-selection .bus-cabin__steering-wheel::before,
    .seat-selection .bus-cabin__steering-wheel::after { left:calc(50% - 2px); top:0; width:4px; height:100%; }
}