/* A compact, app-like booking surface; subsequent screens stay out of the layout. */
body[data-booking-screen]{background:#f5f7fa;color:#15233b}
body[data-booking-screen] [hidden]{display:none!important}
body[data-booking-screen=route] [data-booking-panel]:not([data-booking-panel=route]){display:none!important}
body[data-booking-screen]:not([data-booking-screen=route]) .ep-pwa-strip{display:none!important}
body[data-booking-screen]:not([data-booking-screen=route])>.app-nav{display:none!important}
.flow-error{max-width:810px;margin:12px auto;padding:12px 16px;color:#982526;background:#fff1f1;border-radius:12px;font-size:14px;line-height:1.5}
body[data-booking-screen] main{max-width:850px;margin:0 auto;padding:20px 20px 120px;min-height:65dvh}
body[data-booking-screen] .panel{border:1px solid #e3e8ef;border-radius:20px;box-shadow:0 4px 22px #15233b05;margin:0 0 18px;padding:28px;background:#fff}
body[data-booking-screen] .booking-route-title{font-size:30px;line-height:1.2;margin:0 0 24px;color:#15233b;letter-spacing:-.6px}
body[data-booking-screen] .steps{position:static;top:auto;max-width:810px;margin:0 auto;padding:18px 4px 10px;background:transparent;display:flex;justify-content:space-between;gap:8px;overflow:visible}
body[data-booking-screen] .steps i{flex:1;height:1px;max-width:30px;background:#d7dfe9}
body[data-booking-screen] .steps>span{font-size:14px;cursor:pointer;white-space:nowrap;gap:5px}
body[data-booking-screen] .steps>span.active{color:#15233b;font-weight:800}
body[data-booking-screen] .steps>span.done{color:#466d5b}
.booking-top{max-width:850px;padding:8px 22px 0;margin:auto;display:flex;align-items:center;gap:18px}
.booking-back{border:0;background:none;color:#15233b;font:inherit;font-weight:650;display:flex;align-items:center;gap:7px;min-height:44px;cursor:pointer;padding:0 8px 0 0}
.booking-back>span:first-child{font-size:28px}
html[dir=rtl] .booking-back>span:first-child{transform:rotate(180deg)}
.booking-itinerary{display:grid;min-width:0;gap:4px;font-size:14px;line-height:1.4}
.booking-itinerary>span{max-width:650px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#66758b}
body[data-booking-screen] .route-grid{gap:14px}
body[data-booking-screen] input,body[data-booking-screen] textarea{font-size:16px!important;min-height:50px;border-radius:10px}
body[data-booking-screen] .route-primary-counters{display:block}
body[data-booking-screen] .route-primary-counters>div{display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;padding:0}
body[data-booking-screen] .route-passenger-block{margin-top:18px;padding:18px 0 0;border-top:1px solid #e7ebf0}
body[data-booking-screen] .counter{min-width:132px;height:44px}
body[data-booking-screen] .counter button{width:44px;min-height:42px;font-size:20px}
.included-bags{font-size:14px;line-height:1.6;color:#506178;margin:12px 0 0}
.bag-size-note{font-size:14px;line-height:1.6;color:#64748b;margin:14px 0}
body[data-booking-screen] .accessories-more{margin-top:10px;border:0}
body[data-booking-screen] .accessories-more>summary{font-size:14px;padding:10px 0;color:#355b79}
body[data-booking-screen] .primary-continue{margin-top:22px;width:100%;min-height:52px;font-size:16px}
body[data-booking-screen] .home-routes-hero{background:transparent;padding:20px 0;border:0;margin:0}
body[data-booking-screen] .home-routes-title small,body[data-booking-screen] .home-routes-title p{display:none}
body[data-booking-screen] .home-routes-title h1{font-size:22px;letter-spacing:-.3px;color:#15233b}
body[data-booking-screen] .home-routes-title a{font-size:14px}
body[data-booking-screen] .home-routes-rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:14px;padding-bottom:14px}
body[data-booking-screen] .popular-route-card{min-width:240px;width:240px;flex:0 0 240px;scroll-snap-align:start;border-radius:16px;box-shadow:none}
body[data-booking-screen] .popular-route-card img{height:135px;object-fit:cover}
body[data-booking-screen] .vehicle-panel{display:block}
body[data-booking-screen] .cars{display:grid;grid-template-columns:1fr 1fr;gap:18px;overflow:visible;padding:0;margin-top:20px}
body[data-booking-screen] .cars .car{min-width:0;max-width:none;width:100%;border:2px solid #e4e9f0;border-radius:16px;padding:20px;position:relative;box-shadow:none;display:flex;flex-direction:column;background:white}
body[data-booking-screen] .cars .car.selected{border-color:#244a76;background:#f2f7fd;box-shadow:0 0 0 1px #244a7610}
body[data-booking-screen] .cars .car.unavailable{display:none}
body[data-booking-screen] .cars:has(.car.unavailable){grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto}
body[data-booking-screen] .cars .car img{width:100%;height:130px;object-fit:contain;margin:10px 0 8px}
body[data-booking-screen] .cars .car h3{font-size:22px;line-height:1.25;margin:4px 0 7px}
body[data-booking-screen] .cars .car p{font-size:14px;line-height:1.5;min-height:42px;color:#617088;margin:0 0 12px}
body[data-booking-screen] .car .caps{font-size:14px;gap:15px;flex-wrap:wrap;margin:0 0 12px}
.car-benefits{font-size:14px;line-height:1.6;color:#506178;margin:2px 0 16px}
body[data-booking-screen] .car .from{margin-top:auto;padding-top:12px;border-top:1px solid #dde5ef;font-size:14px;display:flex;justify-content:space-between;align-items:center}
body[data-booking-screen] .car .from b{font-size:24px;color:#15233b}
body[data-booking-screen] .car .select{width:100%;font-size:15px;min-height:44px;margin-top:12px;border-radius:10px}
body[data-booking-screen] .trip-recommended{background:#244a76;color:white;font-size:12px;border-radius:6px;padding:5px 9px;position:absolute;top:12px;inset-inline-start:14px}
body[data-booking-screen] #vehicleFilterHint{font-size:14px;line-height:1.6;margin:12px 0;color:#506178;background:none;border:0;padding:0}
body[data-booking-screen] .bottom-summary{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,850px);z-index:50;background:#fff;border-radius:18px 18px 0 0;border:1px solid #dfe6ee;color:#15233b;padding:16px 24px max(16px,env(safe-area-inset-bottom));box-shadow:0 -5px 25px #15233b0a;gap:18px;margin:0}
body[data-booking-screen] .bottom-summary strong{font-size:25px;color:#15233b}
body[data-booking-screen] .bottom-summary span{font-size:12px;color:#627188}
body[data-booking-screen] .bottom-summary .cta{min-height:50px;font-size:15px;flex:0 1 55%;white-space:normal}
body[data-booking-screen=route] .bottom-summary,body[data-booking-screen=details] .bottom-summary,body[data-booking-screen=payment] .bottom-summary,body[data-booking-screen=confirmation] .bottom-summary{display:none!important}
body[data-booking-screen] .sightseeing-panel{display:block}
body[data-booking-screen] .sightseeing-hero{background:none;padding:0 0 18px;color:#15233b}
body[data-booking-screen] .sightseeing-hero h2{font-size:26px;line-height:1.25;color:#15233b}
body[data-booking-screen] .sightseeing-kicker,body[data-booking-screen] .sightseeing-route-note,body[data-booking-screen] .sightseeing-hero>p,body[data-booking-screen] .sightseeing-footer{display:none}
body[data-booking-screen] .sightseeing-content{padding:0}
body[data-booking-screen] .sightseeing-grid{grid-template-columns:1fr 1fr;gap:16px}
body[data-booking-screen] .sight-card{border-radius:14px}
body[data-booking-screen] .trip-more{margin-top:20px}
body[data-booking-screen] #recalculateStops{margin:14px;width:calc(100% - 28px);font-size:15px}
body[data-booking-screen]:not([data-booking-screen=route])>footer,body[data-booking-screen]:not([data-booking-screen=route])>.legal-footer{display:none}
body[data-booking-screen] .trip-summary,body[data-booking-screen] .policy-box{display:none!important}
body[data-booking-screen] .panel-head h2,body[data-booking-screen] .section-title-row h2{font-size:26px}
@media(max-width:620px){
 body[data-booking-screen] main{padding:14px 14px 135px;min-height:70dvh}
 body[data-booking-screen] .panel{padding:20px 16px;border-radius:16px}
 body[data-booking-screen] .booking-route-title{font-size:27px;margin-bottom:20px}
 body[data-booking-screen] .steps{padding:15px 16px 5px;gap:6px;align-items:center}
 body[data-booking-screen] .steps>span{font-size:13px;display:flex;flex-direction:column;gap:3px}
 body[data-booking-screen] .steps>span b{font-size:12px;font-weight:600;max-width:68px;white-space:normal;text-align:center}
 body[data-booking-screen] .steps i{max-width:16px}
 .booking-top{padding:10px 16px 0;gap:12px}.booking-itinerary{font-size:13px}
 body[data-booking-screen] .cars{grid-template-columns:1fr;gap:14px}
 /* Replace the legacy three-column grid completely, including its named areas. */
 body[data-booking-screen] .cars .car{padding:16px;display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr)!important;grid-template-areas:'badge badge' 'image title' 'image subtitle' 'caps caps' 'benefits benefits' 'price price' 'choose choose';grid-template-rows:none;gap:10px 14px;align-items:center}
 body[data-booking-screen] .cars .car img{grid-area:image;width:100%!important;height:112px!important;object-fit:cover;margin:0;padding:0}
 body[data-booking-screen] .cars .car h3{grid-area:title;margin:0;font-size:21px;align-self:end;text-align:start;overflow-wrap:anywhere}
 body[data-booking-screen] .cars .car p{grid-area:subtitle;min-height:0;margin:0;text-align:start;align-self:start;line-height:1.5}
 body[data-booking-screen] .car .caps{grid-area:caps;gap:12px;margin:2px 0;justify-content:flex-start;line-height:1.5}
 body[data-booking-screen] .car-benefits{grid-area:benefits;margin:0;overflow-wrap:anywhere}
 body[data-booking-screen] .car .from{grid-area:price;width:100%;margin:0;padding-top:12px;gap:10px;flex-wrap:wrap;text-align:start}
 body[data-booking-screen] .car .select{grid-area:choose;margin:0;align-self:stretch;padding:12px;line-height:1.4;color:#244a76}
 body[data-booking-screen] .car.selected .select{color:#fff}
 body[data-booking-screen] .trip-recommended{position:static;grid-area:badge;width:fit-content;max-width:100%;font-size:12px;padding:4px 8px;white-space:normal;line-height:1.4}
 body[data-booking-screen] .bottom-summary{padding:13px 16px max(14px,env(safe-area-inset-bottom));border-radius:0;gap:12px}
 body[data-booking-screen] .bottom-summary strong{font-size:23px}
 body[data-booking-screen] .sightseeing-grid{grid-template-columns:1fr}
 body[data-booking-screen] .sight-card-media img{height:190px}
 body[data-booking-screen] .section-actions .cta{font-size:14px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){body[data-booking-screen] *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
