/* flyx-bus-booking.css */
:root{--bx-ink:#071b31;--bx-muted:#65758a;--bx-blue:#086dde;--bx-green:#07875f;--bx-line:#dce6f0;--bx-shadow:0 20px 60px rgba(11,41,77,.13)}
@media(min-width:769px){.fxbus-page{padding-top:var(--flyx-desktop-header-offset,76px)}}
*{box-sizing:border-box}.fxbus-page{min-height:80vh;color:var(--bx-ink);background:radial-gradient(circle at 5% 5%,#ddecff,transparent 28rem),linear-gradient(#f8fbff,#eef4fb 45%,#f8fafc);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.fxbus-wrap{width:min(1180px,calc(100% - 28px));margin:auto}.fxbus-hero{position:relative;padding:55px 0 80px;overflow:hidden}.fxbus-hero:before{content:"";position:absolute;inset:16px max(14px,calc((100vw - 1220px)/2));border-radius:36px;background:linear-gradient(128deg,#061d3b,#074374 58%,#087968);box-shadow:0 30px 80px #082d5240}.fxbus-hero-copy{position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:25px;padding:0 36px 22px;color:#fff}.fxbus-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #ffffff38;border-radius:30px;background:#ffffff14;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.fxbus-kicker i{width:7px;height:7px;border-radius:50%;background:#46e3a4;box-shadow:0 0 0 5px #46e3a422}.fxbus-hero h1{margin:13px 0 5px;font-size:clamp(30px,4.2vw,54px);letter-spacing:-.045em;line-height:1.03}.fxbus-hero-copy p{max-width:560px;margin:0;color:#d6e6f5;font-size:14px;line-height:1.6}.fxbus-trust{white-space:nowrap;color:#ddfaef;font-size:11px;font-weight:800}.fxbus-search{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr 52px 1.15fr .8fr auto;gap:9px;align-items:center;margin:0 36px;padding:12px;border:1px solid #ffffffa3;border-radius:23px;background:#fffffff5;box-shadow:0 24px 60px #001b3e4d;backdrop-filter:blur(15px)}.fxbus-field{position:relative;display:flex;align-items:center;gap:11px;min-height:67px;padding:9px 13px;border:1px solid #e0e8f1;border-radius:16px;background:#fff}.fxbus-field:focus-within{border-color:#5ba4ee;box-shadow:0 0 0 4px #0c72dd12}.fxbus-field>b{display:grid;width:35px;height:35px;flex:0 0 35px;place-items:center;border-radius:11px;color:#0871df;background:#edf6ff}.fxbus-field>div{position:relative;width:100%}.fxbus-field label,.fxbus-input label,.fxbus-select label{display:block;margin-bottom:3px;color:#7a899c;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.fxbus-field input{width:100%;border:0;outline:0;color:var(--bx-ink);background:transparent;font-size:15px;font-weight:850}.fxbus-swap{width:44px;height:44px;border:1px solid #d8e4f0;border-radius:14px;color:#0871df;background:#fff;font-size:18px;font-weight:900;cursor:pointer;transition:.25s}.fxbus-swap:hover{color:#fff;background:#0871df;transform:rotate(180deg)}.fxbus-search-btn{height:67px;padding:0 25px;border:0;border-radius:16px;color:#fff;background:linear-gradient(135deg,#ff761a,#ef3f18);box-shadow:0 12px 25px #f4511e40;font-size:14px;font-weight:950;cursor:pointer}.fxbus-search-btn:disabled{opacity:.55}.fxbus-suggest{position:absolute;z-index:70;top:52px;left:-12px;right:-12px;max-height:280px;overflow:auto;padding:7px;border:1px solid #dce6ef;border-radius:15px;background:#fff;box-shadow:0 22px 45px #0b2d521f}.fxbus-suggest[hidden]{display:none}.fxbus-suggest button{display:block;width:100%;padding:11px;border:0;border-radius:10px;color:#17304b;background:#fff;text-align:left;font-size:12px;font-weight:800;cursor:pointer}.fxbus-suggest button:hover{background:#edf6ff}.fxbus-suggest small{display:block;margin-top:2px;color:#8b98a8}.fxbus-content{padding:34px 0 70px}.fxbus-alert{margin-bottom:18px;padding:14px 16px;border:1px solid #fecaca;border-radius:13px;color:#a61e1e;background:#fff2f2;font-weight:750}.fxbus-empty{padding:45px 20px;border:1px dashed #c9d8e7;border-radius:22px;background:#fff;text-align:center}.fxbus-empty b{display:block;margin-bottom:7px;font-size:18px}.fxbus-empty span{color:var(--bx-muted);font-size:13px}.fxbus-inspire{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fxbus-inspire[hidden]{display:none}.fxbus-inspire-card{position:relative;min-height:205px;margin:0;overflow:hidden;border:1px solid #ffffffb8;border-radius:22px;background:#092849;box-shadow:0 16px 40px #102f5024;isolation:isolate}.fxbus-inspire-card:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(3,13,29,.9) 100%)}.fxbus-inspire-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}.fxbus-inspire-card--road img{object-position:left center}.fxbus-inspire-card--sleeper img{object-position:center center}.fxbus-inspire-card--city img{object-position:right center}.fxbus-inspire-card:hover img{transform:scale(1.045)}.fxbus-inspire-card div{position:absolute;z-index:2;left:18px;right:18px;bottom:17px;color:#fff}.fxbus-inspire-card small{display:block;margin-bottom:5px;color:#cce8ff;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.fxbus-inspire-card b{display:block;font-size:18px;line-height:1.12;text-shadow:0 2px 12px #000}.fxbus-status{display:flex;align-items:center;justify-content:center;gap:11px;padding:35px;color:#5e7085;font-weight:750}.fxbus-status i{width:25px;height:25px;border:3px solid #d8e8f9;border-top-color:#0871df;border-radius:50%;animation:fxspin .8s linear infinite}@keyframes fxspin{to{transform:rotate(360deg)}}.fxbus-results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.fxbus-results-head h2{margin:0;font-size:24px;letter-spacing:-.03em}.fxbus-results-head p{margin:4px 0 0;color:var(--bx-muted);font-size:12px;font-weight:650}.fxbus-results-head nav{display:flex;gap:7px}.fxbus-results-head button{padding:9px 12px;border:1px solid #d8e3ee;border-radius:30px;color:#55677c;background:#fff;font-size:11px;font-weight:850;cursor:pointer}.fxbus-results-head button.on{border-color:#3a91e9;color:#0861bf;background:#eaf5ff}.fxbus-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px}.fxbus-filter{align-self:start;position:sticky;top:85px;padding:18px;border:1px solid #dfe8f1;border-radius:18px;background:#fff;box-shadow:0 10px 30px #163a6010}.fxbus-filter h3{margin:0 0 14px;font-size:14px}.fxbus-filter label{display:flex;align-items:center;gap:9px;margin:11px 0;color:#46586e;font-size:12px;font-weight:750}.fxbus-filter input{accent-color:#0871df}.fxbus-list{display:grid;gap:13px}.fxbus-card{overflow:hidden;border:1px solid #dce6ef;border-radius:21px;background:#fff;box-shadow:0 10px 32px #102f5010;transition:.2s}.fxbus-card:hover{transform:translateY(-2px);border-color:#afd2f4;box-shadow:0 18px 42px #113b671c}.fxbus-card-main{display:grid;grid-template-columns:minmax(180px,1.3fr) 2fr 140px;gap:20px;padding:19px 21px}.fxbus-operator{display:flex;gap:11px}.fxbus-mark{display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;border-radius:14px;color:#07845c;background:#d9f7eb;font-size:20px}.fxbus-operator h3{margin:1px 0 4px;font-size:15px}.fxbus-type{color:#748397;font-size:10px;font-weight:700;line-height:1.45}.fxbus-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.fxbus-badges b{padding:4px 7px;border-radius:7px;color:#31526d;background:#edf4f8;font-size:8px;text-transform:uppercase}.fxbus-timeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.fxbus-time strong{display:block;font-size:20px}.fxbus-time span{color:#7c899a;font-size:9px;font-weight:750}.fxbus-time:last-child{text-align:right}.fxbus-track{text-align:center}.fxbus-track span{display:block;margin-bottom:5px;color:#66768a;font-size:9px;font-weight:800}.fxbus-line{position:relative;height:2px;background:#b9d1e8}.fxbus-line:before,.fxbus-line:after{content:"";position:absolute;top:50%;width:6px;height:6px;border:2px solid #1b82e8;border-radius:50%;background:#fff;transform:translateY(-50%)}.fxbus-line:before{left:-2px}.fxbus-line:after{right:-2px}.fxbus-price{text-align:right}.fxbus-price small{display:block;color:#8390a2;font-size:9px}.fxbus-price strong{display:block;color:#092849;font-size:23px}.fxbus-price em{color:#07845c;font-size:9px;font-style:normal;font-weight:850}.fxbus-card-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 21px;border-top:1px solid #edf1f5;background:#fbfdff;color:#5d6e81;font-size:10px;font-weight:750}.fxbus-card-foot b{color:#07845c}.fxbus-view{padding:10px 18px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#0875e5,#0755c5);font-size:11px;font-weight:900;cursor:pointer}
.fxbus-overlay{position:fixed;z-index:10020;inset:0;display:flex;justify-content:flex-end;background:#03122699;backdrop-filter:blur(7px)}.fxbus-overlay[hidden]{display:none}.fxbus-drawer{width:min(760px,100%);height:100%;overflow:auto;background:#f3f7fb;box-shadow:-30px 0 90px #001b3e4d;animation:fxslide .28s ease-out}@keyframes fxslide{from{transform:translateX(50px);opacity:.6}}.fxbus-drawer-head{position:sticky;z-index:8;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 19px;color:#fff;background:linear-gradient(120deg,#071f3e,#075e9c 65%,#087b72)}.fxbus-drawer-head h2{margin:0;font-size:18px}.fxbus-drawer-head p{margin:3px 0 0;color:#cce4f5;font-size:10px}.fxbus-drawer-head button{display:grid;width:37px;height:37px;place-items:center;border:1px solid #ffffff38;border-radius:11px;color:#fff;background:#ffffff17;font-size:21px;cursor:pointer}.fxbus-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:13px 17px 0}.fxbus-steps b{padding:8px;border-radius:9px;color:#7c899b;background:#e4eaf0;text-align:center;font-size:9px}.fxbus-steps b.on{color:#075cbf;background:#dceeff}.fxbus-panel{padding:15px 17px 115px}.fxbus-points-shell{margin:12px 0 16px;padding:14px 16px;background:#fff;border:1.5px solid #dce6ef;border-radius:18px;box-shadow:0 4px 16px rgba(9,32,60,.04)}.fxbus-points-banner{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #edf2f7}.fxbus-points-banner b{font-size:13px;font-weight:800;color:#0c233c}.fxbus-points-banner span{font-size:11px;color:#6a7d94;font-weight:600}.fxbus-point-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.fxbus-select{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1.5px solid #d6e2ee;border-radius:14px;background:#f8fafc;transition:all .2s ease}.fxbus-select:focus-within{border-color:#0871df;background:#fff;box-shadow:0 0 0 3px rgba(8,113,223,.12)}.fxbus-select-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#4b5e76}.fxbus-dot-pickup{display:inline-block;width:8px;height:8px;border-radius:50%;background:#059669;box-shadow:0 0 0 2px rgba(5,150,105,.2)}.fxbus-dot-drop{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.2)}.fxbus-select select{width:100%;min-height:38px;border:0;outline:0;background:transparent;color:#0f1e33;font-size:12px;font-weight:750;cursor:pointer;appearance:auto}.fxbus-point-details{display:grid;gap:8px}.fxbus-point-detail{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;background:#f1f6fb;border-radius:12px;border:1px solid #e1ebf4}.fxbus-point-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;padding:4px;border-radius:8px;font-size:9px;font-weight:800;text-transform:uppercase}.fxbus-point-badge.boarding{background:#d1fae5;color:#065f46}.fxbus-point-badge.dropping{background:#dbeafe;color:#1e40af}.fxbus-point-badge i{font-style:normal;font-size:14px;line-height:1}.fxbus-point-info{display:flex;flex-direction:column;gap:2px;min-width:0}.fxbus-point-info b{font-size:12px;font-weight:800;color:#0f243a}.fxbus-point-address{font-size:11px;color:#52677e;line-height:1.3}.fxbus-point-landmark,.fxbus-point-contact{font-size:10px;color:#728498}.fxbus-point-time{font-size:13px;font-weight:850;color:#092849;white-space:nowrap}.fxbus-pax,.fxbus-contact,.fxbus-fare{padding:14px;border:1px solid #d9e4ee;border-radius:16px;background:#fff}.fxbus-deck-tabs{display:flex;gap:7px;margin:11px 0}.fxbus-deck-tabs button{padding:8px 13px;border:1px solid #d3dfea;border-radius:11px;color:#65748a;background:#fff;font-size:10px;font-weight:900}.fxbus-deck-tabs button.on{border-color:#2484e6;color:#0762c3;background:#e9f4ff}.fxbus-deck-wrap{display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:13px}.fxbus-coach{position:relative;overflow:auto;min-height:325px;padding:52px 20px 22px;border:1px solid #cad8e6;border-radius:27px 27px 16px 16px;background:linear-gradient(90deg,#e9f0f6,#fff 10%,#fff 90%,#e9f0f6);box-shadow:inset 0 0 0 6px #e3ebf2}.fxbus-coach:before{content:"FRONT";position:absolute;top:17px;left:23px;color:#8291a3;font-size:8px;font-weight:950;letter-spacing:.16em}.fxbus-driver{position:absolute;right:25px;top:13px;display:grid;width:29px;height:29px;place-items:center;border:3px solid #75869a;border-radius:50%;color:#66778a}.fxbus-seat-grid{display:grid;grid-auto-rows:34px;grid-template-columns:repeat(var(--cols,5),40px);gap:8px;justify-content:center;min-width:max-content}.fxbus-seat{position:relative;grid-row:calc(var(--row) + 1)/span var(--len);grid-column:calc(var(--col) + 1)/span var(--wid);display:grid;place-items:center;min-width:36px;min-height:31px;padding:3px;border:1.5px solid #70abe3;border-radius:9px;color:#155d9f;background:#edf7ff;font-size:8px;font-weight:900;cursor:pointer}.fxbus-seat:before{content:"";position:absolute;top:4px;left:5px;right:5px;height:3px;border-radius:2px;background:#267cc42e}.fxbus-seat.sleeper{align-items:end;padding-bottom:5px}.fxbus-seat.ladies{border-color:#e56eb4;color:#a52f75;background:#fff0f8}.fxbus-seat.booked{border-color:#cbd4dc;color:#9ca7b2;background:#e7ebef;cursor:not-allowed}.fxbus-seat.selected{border-color:#087b58;color:#fff;background:linear-gradient(145deg,#0bb47d,#07835d);box-shadow:0 7px 14px #078b632e}.fxbus-seat small{font-size:7px}.fxbus-legend{padding:13px;border:1px solid #d9e3ed;border-radius:15px;background:#fff}.fxbus-legend h4{margin:0 0 10px;font-size:11px}.fxbus-legend p{display:flex;align-items:center;gap:7px;margin:8px 0;color:#6a798d;font-size:9px;font-weight:750}.fxbus-dot{width:19px;height:14px;border:1.5px solid #70abe3;border-radius:4px;background:#edf7ff}.fxbus-dot.sel{border-color:#07835d;background:#08a672}.fxbus-dot.used{border-color:#cbd4dc;background:#e7ebef}.fxbus-dot.lady{border-color:#e56eb4;background:#fff0f8}.fxbus-selected{margin-top:13px;padding:12px;border:1px solid #c9def1;border-radius:14px;background:#f7fbff;font-size:10px}.fxbus-pill{display:inline-block;margin:7px 5px 0 0;padding:5px 7px;border-radius:7px;color:#08704f;background:#dff8ef;font-weight:900}.fxbus-sticky{position:fixed;z-index:11;right:0;bottom:0;width:min(760px,100%);display:flex;align-items:center;justify-content:space-between;padding:12px 19px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d7e1eb;background:#fffffff7;box-shadow:0 -15px 40px #0e2a4e1f;backdrop-filter:blur(14px)}.fxbus-sticky small{display:block;color:#7b899b;font-size:9px;font-weight:800}.fxbus-sticky strong{display:block;font-size:21px}.fxbus-sticky button,.fxbus-pay{min-width:165px;padding:13px 18px;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#ff711c,#ef3e17);box-shadow:0 10px 22px #f04b1438;font-weight:900;cursor:pointer}.fxbus-sticky button:disabled{opacity:.5}.fxbus-pax,.fxbus-contact,.fxbus-fare{margin-bottom:10px}.fxbus-pax h3,.fxbus-contact h3,.fxbus-fare h3{margin:0 0 12px;font-size:13px}.fxbus-form-grid{display:grid;grid-template-columns:90px 1fr 1fr 80px;gap:8px}.fxbus-form-grid.contact{grid-template-columns:1fr 1fr}.fxbus-input input,.fxbus-input select{width:100%;height:41px;padding:0 10px;border:1px solid #d6e1eb;border-radius:10px;outline:0;color:#102a44;background:#fff;font-size:11px;font-weight:750}.fxbus-input input:focus,.fxbus-input select:focus{border-color:#4b99e8;box-shadow:0 0 0 3px #1c7de21a}.fxbus-fare p{display:flex;justify-content:space-between;margin:8px 0;color:#5f7083;font-size:11px;font-weight:700}.fxbus-fare p.total{margin-top:11px;padding-top:11px;border-top:1px dashed #c8d5e2;color:#102a44;font-size:14px}.fxbus-safe{margin-top:11px;padding:9px;border-radius:10px;color:#06734f;background:#edf9f4;font-size:9px;font-weight:800}.fxbus-success{padding:28px 8px;text-align:center}.fxbus-success>i{display:grid;width:72px;height:72px;margin:0 auto 15px;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#17bd83,#057b58);box-shadow:0 15px 35px #048f6047;font-size:34px;font-style:normal}.fxbus-success h2{margin:0 0 7px}.fxbus-success>p{color:#66768a}.fxbus-ticket{margin:18px 0;padding:15px;border:1px solid #cfdee9;border-radius:16px;background:#fff;text-align:left}.fxbus-ticket p{display:flex;justify-content:space-between;margin:0;padding:8px 0;border-bottom:1px dashed #dce5ed;font-size:11px}.fxbus-ticket p:last-child{border:0}.fxbus-ticket span{color:#748397}.fxbus-toast{position:fixed;z-index:10100;left:50%;bottom:28px;max-width:420px;padding:12px 17px;border-radius:11px;color:#fff;background:#10243b;box-shadow:0 15px 35px #00000040;font-size:11px;font-weight:800;transform:translateX(-50%)}.fxbus-toast[hidden]{display:none}
@media(max-width:900px){.fxbus-search{grid-template-columns:1fr 48px 1fr}.fxbus-date{grid-column:1/3}.fxbus-search-btn{grid-column:3}.fxbus-layout{grid-template-columns:1fr}.fxbus-filter{position:static;display:flex;gap:13px;align-items:center;padding:12px}.fxbus-filter h3,.fxbus-filter label{margin:0}.fxbus-card-main{grid-template-columns:1.2fr 1.8fr 115px}}
@media(max-width:768px){.fxbus-wrap{width:calc(100% - 20px)}.fxbus-hero{padding:10px 0 26px}.fxbus-hero:before{inset:0;border-radius:0 0 25px 25px}.fxbus-hero-copy{align-items:flex-start;flex-direction:column;padding:16px 7px 17px}.fxbus-hero h1{font-size:26px}.fxbus-hero-copy p{font-size:11px}.fxbus-trust{display:none}.fxbus-search{grid-template-columns:1fr 40px 1fr;gap:6px;margin:0;padding:7px;border-radius:18px}.fxbus-field{min-height:59px;padding:7px 9px}.fxbus-field>b{display:none}.fxbus-field input{font-size:12px}.fxbus-swap{width:38px;height:38px}.fxbus-search-btn{height:59px;padding:0 9px;font-size:11px}.fxbus-content{padding:21px 0 45px}.fxbus-inspire{display:flex;gap:10px;overflow-x:auto;padding:2px 1px 13px;scroll-snap-type:x mandatory;scrollbar-width:none}.fxbus-inspire::-webkit-scrollbar{display:none}.fxbus-inspire-card{flex:0 0 78%;min-height:180px;border-radius:19px;scroll-snap-align:center}.fxbus-results-head{align-items:flex-start;flex-direction:column}.fxbus-results-head nav{width:100%;overflow:auto}.fxbus-filter{overflow:auto;white-space:nowrap}.fxbus-card-main{grid-template-columns:1fr auto;gap:14px;padding:15px}.fxbus-operator{grid-column:1/3}.fxbus-timeline{grid-column:1}.fxbus-price{grid-column:2}.fxbus-card-foot{padding:10px 14px}.fxbus-point-grid{grid-template-columns:1fr}.fxbus-deck-wrap{grid-template-columns:1fr}.fxbus-legend{display:grid;grid-template-columns:repeat(2,1fr)}.fxbus-legend h4{grid-column:1/3}.fxbus-coach{padding-left:12px;padding-right:12px}.fxbus-seat-grid{grid-template-columns:repeat(var(--cols,5),34px);gap:7px}.fxbus-form-grid,.fxbus-form-grid.contact{grid-template-columns:1fr 1fr}.fxbus-sticky button{min-width:140px}}
.fxbus-points-section{margin:14px 0 18px;padding:16px 18px;background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%);border:1.5px solid #dce8f4;border-radius:20px;box-shadow:0 8px 24px rgba(10,42,77,.05)}.fxbus-points-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #e7eff7}.fxbus-points-section-title{display:flex;align-items:center;gap:10px}.fxbus-points-pin-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#086dde;background:#eaf4ff;border:1px solid #cde4fc}.fxbus-points-section-title h4{margin:0;font-size:13.5px;font-weight:850;color:#0c243c;letter-spacing:-.01em}.fxbus-points-section-title p{margin:2px 0 0;font-size:11px;color:#62758c;font-weight:600}.fxbus-points-operator-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;font-size:10.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}.fxbus-pulse-dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.25);animation:fxbus-pulse 2s infinite}@keyframes fxbus-pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(16,185,129,.7)}70%{transform:scale(1);box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(16,185,129,0)}}.fxbus-points-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fxbus-point-box{display:flex;flex-direction:column;justify-content:space-between;border-radius:16px;padding:15px;background:#fff;transition:all .25s ease;position:relative;overflow:hidden}.fxbus-point-box--pickup{border:1.5px solid #bbf7d0;box-shadow:0 4px 16px rgba(16,185,129,.07)}.fxbus-point-box--pickup:hover{border-color:#34d399;box-shadow:0 8px 24px rgba(16,185,129,.14)}.fxbus-point-box--drop{border:1.5px solid #bfdbfe;box-shadow:0 4px 16px rgba(37,99,235,.07)}.fxbus-point-box--drop:hover{border-color:#60a5fa;box-shadow:0 8px 24px rgba(37,99,235,.14)}.fxbus-ptc-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.fxbus-ptc-type{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.fxbus-ptc-type.pickup{color:#065f46}.fxbus-ptc-type.drop{color:#1e40af}.fxbus-ptc-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;font-size:10px;font-weight:850;letter-spacing:.02em}.fxbus-ptc-badge.pickup{background:#d1fae5;color:#047857;border:1px solid #6ee7b7}.fxbus-ptc-badge.drop{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}.fxbus-ptc-badge .fxbus-star{font-size:11px;color:#f59e0b}.fxbus-ptc-body{margin-bottom:12px}.fxbus-ptc-time-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:11.5px;font-weight:850;margin-bottom:6px}.fxbus-ptc-time-badge.pickup{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}.fxbus-ptc-time-badge.drop{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.fxbus-ptc-name{margin:4px 0 6px;font-size:14px;font-weight:850;color:#0f243a;line-height:1.35;letter-spacing:-.01em}.fxbus-ptc-address{display:flex;align-items:flex-start;gap:5px;margin:3px 0;font-size:11px;color:#50667e;line-height:1.4}.fxbus-ptc-address svg{flex-shrink:0;margin-top:2px;color:#8295ab}.fxbus-ptc-landmark,.fxbus-ptc-contact{margin:2px 0 0;font-size:10.5px;color:#6b7f95;line-height:1.35}.fxbus-ptc-landmark b,.fxbus-ptc-contact b{color:#3b5066;font-weight:750}.fxbus-ptc-footer{margin-top:auto;padding-top:10px;border-top:1px dashed #e2eaf2}.fxbus-ptc-select-wrap{display:flex;flex-direction:column;gap:4px}.fxbus-ptc-select-label{font-size:10px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.fxbus-ptc-select-box{position:relative;width:100%}.fxbus-ptc-select{width:100%;height:38px;padding:0 28px 0 10px;border:1.5px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#0f172a;font-size:11.5px;font-weight:750;cursor:pointer;appearance:none;outline:none;transition:all .2s ease}.fxbus-ptc-select:focus{border-color:#0871df;background:#fff;box-shadow:0 0 0 3px rgba(8,113,223,.12)}.fxbus-ptc-select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#64748b}.fxbus-ptc-single-notice{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:750;color:#059669}.fxbus-single-check{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#d1fae5;color:#059669;font-size:10px;font-weight:900}@media(max-width:680px){.fxbus-points-section{padding:12px 14px;margin:10px 0 14px}.fxbus-points-cards-grid{grid-template-columns:1fr;gap:10px}.fxbus-points-section-head{flex-direction:column;align-items:flex-start;gap:6px}}
/* flyx-bus-seatmap-v2.css */
/* FlyX premium top-view coach seat map */
.fxbus-deck-tabs{display:inline-flex;gap:4px;margin:13px 0 12px;padding:4px;border:1px solid #d6e2ed;border-radius:15px;background:#e9f0f7;box-shadow:inset 0 1px 2px #092a4a14}
.fxbus-deck-tabs button{position:relative;min-width:104px;padding:10px 15px;border:0;border-radius:11px;color:#5c6f84;background:transparent;font-size:10px;font-weight:900;letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.fxbus-deck-tabs button:hover{color:#075fb8}.fxbus-deck-tabs button.on{color:#fff;background:linear-gradient(135deg,#0878e8,#0759bd);box-shadow:0 7px 17px #0869cf3d;transform:translateY(-1px)}
.fxbus-deck-wrap{align-items:start;grid-template-columns:minmax(0,1fr) 142px;gap:14px}
.fxbus-coach-stage{overflow-x:auto;padding:10px 13px 18px;scrollbar-color:#9cb4c8 #eaf0f5;scrollbar-width:thin}.fxbus-coach-stage::-webkit-scrollbar{height:7px}.fxbus-coach-stage::-webkit-scrollbar-track{border-radius:10px;background:#eaf0f5}.fxbus-coach-stage::-webkit-scrollbar-thumb{border-radius:10px;background:#9cb4c8}
.fxbus-coach{position:relative;overflow:visible;box-sizing:border-box;width:max-content;min-width:100%;min-height:390px;padding:92px 36px 48px;border:2px solid #173d63;border-radius:58px 58px 27px 27px;background:linear-gradient(90deg,#dbe8f1 0,#f8fbfd 7%,#fff 18%,#fff 82%,#f8fbfd 93%,#dbe8f1 100%);box-shadow:inset 0 0 0 6px #eef4f8,inset 0 0 0 8px #aec3d4,0 18px 35px #173c631f}
.fxbus-coach:before{content:none}.fxbus-coach:after{content:"";position:absolute;z-index:0;right:23px;bottom:17px;left:23px;height:9px;border-radius:0 0 12px 12px;background:linear-gradient(90deg,#173b60,#6e889f 12%,#a9bbc9 50%,#6e889f 88%,#173b60);box-shadow:0 3px 0 #092844}
.fxbus-cockpit{position:absolute;z-index:3;top:7px;right:12px;left:12px;height:74px;border:1px solid #a9bfd1;border-radius:45px 45px 15px 15px;background:linear-gradient(180deg,#d8e6f0,#f8fbfd 58%,#e9f1f6);box-shadow:inset 0 -1px 0 #fff}
.fxbus-front-badge{position:absolute;z-index:3;top:16px;left:50%;padding:5px 10px;border:1px solid #ffffff8f;border-radius:999px;color:#e9f7ff;background:#0b2e4bcc;box-shadow:0 4px 12px #082b4a2b;font-size:7px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}
.fxbus-windshield{position:absolute;top:8px;right:37px;left:37px;height:42px;border:2px solid #6f8da5;border-radius:34px 34px 11px 11px;background:linear-gradient(145deg,#153d61,#2875a5 55%,#8bd0ed);box-shadow:inset 0 0 0 3px #ffffff29,0 4px 9px #0a345234;overflow:hidden}.fxbus-windshield:before{content:"";position:absolute;top:-17px;left:-5%;width:67%;height:35px;background:linear-gradient(115deg,transparent 15%,#ffffff3d 40%,transparent 64%);transform:rotate(-8deg)}.fxbus-windshield i{position:absolute;top:2px;bottom:2px;left:50%;width:2px;background:#a8d5e580;transform:rotate(3deg)}
.fxbus-steering{position:absolute;z-index:4;right:38px;bottom:7px;width:24px;height:24px;border:3px solid #294f70;border-radius:50%;background:radial-gradient(circle,#294f70 0 3px,transparent 4px);box-shadow:0 2px 4px #12334c2e}.fxbus-steering:before,.fxbus-steering:after{content:"";position:absolute;top:9px;left:2px;width:14px;height:2px;background:#294f70;transform-origin:center}.fxbus-steering:before{transform:rotate(34deg)}.fxbus-steering:after{transform:rotate(-34deg)}
.fxbus-door{position:absolute;right:4px;bottom:-17px;width:23px;height:38px;border:2px solid #7d99af;border-radius:4px 9px 9px 4px;background:linear-gradient(90deg,#c9dbe7,#f6fafc);box-shadow:inset 4px 0 0 #aabfce}.fxbus-door:after{content:"";position:absolute;top:17px;left:5px;width:3px;height:3px;border-radius:50%;background:#274c6d}
.fxbus-seat-bay{position:relative;z-index:2;box-sizing:border-box;min-height:235px;padding:19px 13px 21px;border:1px solid #cfdee9;border-radius:18px;background:repeating-linear-gradient(0deg,#f8fbfd 0,#f8fbfd 23px,#f1f6f9 24px),linear-gradient(90deg,#e8f0f5,#fff 16%,#fff 84%,#e8f0f5);box-shadow:inset 0 0 20px #1b4d7012,0 1px 0 #fff}.fxbus-seat-bay:before{content:"";position:absolute;z-index:0;top:10px;bottom:10px;left:50%;width:36px;border-right:1px dashed #b9cad7;border-left:1px dashed #b9cad7;border-radius:8px;background:linear-gradient(90deg,#e7eef3,#f8fafb 50%,#e7eef3);opacity:.72;transform:translateX(-50%)}
.fxbus-seat-grid{position:relative;z-index:1;display:grid;grid-auto-rows:38px;grid-template-columns:repeat(var(--cols,5),42px);gap:9px;justify-content:center;min-width:max-content}
.fxbus-window-rail{position:absolute;z-index:1;top:95px;bottom:47px;width:13px;border:1px solid #7798b1;background:repeating-linear-gradient(180deg,#78badf 0,#bde9f7 24px,#3f7598 25px,#3f7598 29px);box-shadow:inset 0 0 0 2px #ffffff63}.fxbus-window-rail--left{left:10px;border-radius:7px 3px 3px 7px}.fxbus-window-rail--right{right:10px;border-radius:3px 7px 7px 3px}
.fxbus-wheel{position:absolute;z-index:5;width:13px;height:48px;border:3px solid #0a1b29;border-radius:8px;background:repeating-linear-gradient(0deg,#172735 0,#172735 4px,#334655 5px,#334655 7px);box-shadow:inset 0 0 0 2px #536472,0 4px 8px #05131f45}.fxbus-wheel--lf{top:118px;left:-11px}.fxbus-wheel--rf{top:118px;right:-11px}.fxbus-wheel--lr{bottom:57px;left:-11px}.fxbus-wheel--rr{right:-11px;bottom:57px}
.fxbus-rear-cap{position:absolute;z-index:3;right:14px;bottom:6px;left:14px;height:27px;border:1px solid #7892a6;border-radius:7px 7px 18px 18px;background:linear-gradient(180deg,#d9e5ed,#a9bdcc)}.fxbus-rear-cap:before,.fxbus-rear-cap:after{content:"";position:absolute;top:7px;width:25px;height:7px;border:2px solid #76201e;border-radius:5px;background:linear-gradient(90deg,#f52820,#ff9b55);box-shadow:0 0 8px #ff3c2d69}.fxbus-rear-cap:before{left:17px}.fxbus-rear-cap:after{right:17px}.fxbus-rear-cap span{position:absolute;top:8px;left:50%;width:38px;height:6px;border-radius:4px;background:#536d82;transform:translateX(-50%)}
.fxbus-seat{position:relative;isolation:isolate;box-sizing:border-box;grid-row:calc(var(--row) + 1)/span var(--len);grid-column:calc(var(--col) + 1)/span var(--wid);display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:39px;min-height:35px;padding:8px 3px 4px;border:1.5px solid #4b98dc;border-radius:11px 11px 8px 8px;color:#07549a;background:linear-gradient(145deg,#f5fbff,#dcedfb);box-shadow:inset 0 -3px 0 #c7e1f5,0 3px 6px #225f8c1e;overflow:hidden;font-size:8px;font-weight:950;line-height:1.05;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.fxbus-seat:before{content:"";position:absolute;z-index:-1;top:3px;right:4px;left:4px;height:7px;border:1px solid #7fb6e2;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#d9edfc,#bcdcf4);box-shadow:0 1px 1px #fff}.fxbus-seat:after{content:"";position:absolute;z-index:2;right:2px;bottom:5px;left:2px;height:8px;border-right:2px solid #70aee0;border-left:2px solid #70aee0;border-radius:3px;pointer-events:none}.fxbus-seat:hover:not(:disabled){border-color:#086ece;box-shadow:inset 0 -3px 0 #b4d7f1,0 7px 14px #1768a52e;transform:translateY(-2px)}.fxbus-seat:focus-visible{outline:3px solid #ff8b36;outline-offset:2px}
.fxbus-seat-number,.fxbus-seat-fare{position:relative;z-index:3}.fxbus-seat-fare{margin-top:3px;font-size:6.5px;font-weight:850;opacity:.88}
.fxbus-seat.sleeper{align-items:flex-start;justify-content:flex-end;padding:9px 6px 6px;border-radius:10px;box-shadow:inset -4px 0 0 #c7e1f5,0 3px 6px #225f8c1e}.fxbus-seat.sleeper:before{top:5px;right:auto;bottom:5px;left:4px;width:8px;height:auto;border-radius:5px;background:linear-gradient(90deg,#b9d8ee,#e3f3fd)}.fxbus-seat.sleeper:after{top:4px;right:5px;bottom:4px;left:auto;width:5px;height:auto;border:0;border-radius:4px;background:#7db4dc4f}
.fxbus-seat.ladies{border-color:#e56eb4;color:#9f246d;background:linear-gradient(145deg,#fff8fc,#ffe1f2);box-shadow:inset 0 -3px 0 #f3c4df,0 3px 6px #b52d7b1c}.fxbus-seat.ladies:before{border-color:#efa6ce;background:#fbd5e9}.fxbus-seat.ladies:after{border-color:#dd79b2}
.fxbus-seat.booked{border-color:#b8c3cc;color:#8997a3;background:repeating-linear-gradient(135deg,#eef1f3 0,#eef1f3 5px,#e2e7ea 6px,#e2e7ea 10px);box-shadow:inset 0 -3px 0 #d3dbe0;cursor:not-allowed;filter:saturate(.4)}.fxbus-seat.booked:before{border-color:#c4cdd4;background:#dce2e6}.fxbus-seat.booked:after{border-color:#b5c0c8}
.fxbus-seat.selected{border-color:#05714f;color:#fff;background:linear-gradient(145deg,#16c68c,#05855e);box-shadow:inset 0 -3px 0 #036c4d,0 7px 16px #078b6340;transform:translateY(-2px)}.fxbus-seat.selected:before{border-color:#6ee0b9;background:#0fa779}.fxbus-seat.selected:after{border-color:#8be8c9}.fxbus-seat.selected .fxbus-seat-fare{opacity:1}
.fxbus-legend{padding:14px;border:1px solid #d8e4ed;border-radius:17px;background:linear-gradient(180deg,#fff,#f7fafc);box-shadow:0 8px 22px #1138590f}.fxbus-legend h4{margin:0 0 12px;color:#132f4a;font-size:11px}.fxbus-legend p{display:flex;align-items:center;gap:9px;margin:10px 0;color:#617489;font-size:9px;font-weight:800}.fxbus-legend>small{display:block;margin-top:12px;padding-top:11px;border-top:1px dashed #cedbe5;color:#8a98a7;font-size:8px;line-height:1.45}
.fxbus-dot{position:relative;box-sizing:border-box;width:21px;height:17px;border:1.5px solid #4b98dc;border-radius:6px 6px 4px 4px;background:linear-gradient(145deg,#f5fbff,#dcedfb);box-shadow:inset 0 -2px 0 #c7e1f5}.fxbus-dot:before{content:"";position:absolute;top:2px;right:3px;left:3px;height:3px;border-radius:3px;background:#7fb6e2}.fxbus-dot.sel{border-color:#05714f;background:#09a875;box-shadow:inset 0 -2px 0 #05714f}.fxbus-dot.sel:before{background:#67dbb3}.fxbus-dot.used{border-color:#b8c3cc;background:repeating-linear-gradient(135deg,#eef1f3 0,#eef1f3 4px,#dce2e6 5px,#dce2e6 8px);box-shadow:none}.fxbus-dot.used:before{background:#b5c0c8}.fxbus-dot.lady{border-color:#e56eb4;background:#ffe6f4;box-shadow:inset 0 -2px 0 #f3c4df}.fxbus-dot.lady:before{background:#e993c3}.fxbus-dot.berth{width:28px;background:linear-gradient(145deg,#f5fbff,#dcedfb)}
@media(max-width:768px){.fxbus-deck-tabs{display:flex;width:max-content}.fxbus-deck-tabs button{min-width:96px}.fxbus-deck-wrap{grid-template-columns:1fr}.fxbus-coach-stage{margin-right:-4px;margin-left:-4px;padding:9px 13px 16px}.fxbus-coach{min-width:390px;padding:87px 31px 45px}.fxbus-seat-bay{padding:16px 10px 19px}.fxbus-seat-grid{grid-auto-rows:35px;grid-template-columns:repeat(var(--cols,5),36px);gap:7px}.fxbus-seat{min-width:33px;min-height:32px}.fxbus-window-rail{top:91px}.fxbus-wheel--lf,.fxbus-wheel--rf{top:113px}.fxbus-legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}.fxbus-legend h4,.fxbus-legend>small{grid-column:1/3}.fxbus-legend p{margin:7px 0}}
/* flyx-bus-content-v2.css */
/* Bus landing content, search affordances and editorial SEO guide */
.fxbus-hero{z-index:10;overflow:visible}.fxbus-content{position:relative;z-index:1}.fxbus-search{z-index:30}.fxbus-field,.fxbus-field>div{overflow:visible}.fxbus-suggest{z-index:1000;top:calc(100% + 13px);right:-13px;left:-13px;padding:8px;border-color:#d5e2ee;box-shadow:0 25px 60px #051e3b38}.fxbus-suggest button{display:flex;align-items:center;gap:10px;padding:12px 13px}.fxbus-suggest button:before{content:"";width:8px;height:8px;flex:0 0 8px;border:3px solid #1680e7;border-radius:50%;box-shadow:0 0 0 4px #e8f4ff}.fxbus-suggest button:hover,.fxbus-suggest button:focus-visible{outline:0;color:#075db6;background:#edf6ff}.fxbus-suggest small{display:none}.fxbus-no-city{padding:14px;color:#728399;font-size:11px;font-weight:800;text-align:center}
.fxbus-field>b.fxbus-route-icon{position:relative;display:block;width:39px;height:39px;flex:0 0 39px;border-radius:12px;color:#0a3760;background:#edf6ff}.fxbus-route-icon i{position:absolute;top:8px;left:9px;width:20px;height:22px;border:2px solid currentColor;border-radius:5px 5px 4px 4px;background:linear-gradient(#fff 0 35%,#9ed2f4 36% 54%,#fff 55%)}.fxbus-route-icon i:before{content:"";position:absolute;right:2px;bottom:-5px;left:2px;height:5px;border-radius:50%;background:radial-gradient(circle at 2px 2px,currentColor 0 2px,transparent 2.4px),radial-gradient(circle at calc(100% - 2px) 2px,currentColor 0 2px,transparent 2.4px)}.fxbus-route-icon i:after{content:"";position:absolute;right:3px;bottom:4px;left:3px;height:2px;border-radius:2px;background:currentColor}.fxbus-route-icon:after{position:absolute;right:-4px;bottom:-5px;display:grid;width:17px;height:17px;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:#0875e5;box-shadow:0 3px 8px #075db63b;font-size:10px;line-height:1}.fxbus-route-icon--from:after{content:"↑"}.fxbus-route-icon--to:after{content:"↓"}
.fxbus-inspire-card{min-height:230px}.fxbus-inspire-card img{object-position:center 52%}.fxbus-inspire-card:nth-child(2) img{object-position:center 48%}.fxbus-inspire-card:nth-child(3) img{object-position:center 58%}
.fxbus-guide{margin-top:52px;color:#132b43}.fxbus-guide-head{max-width:820px;margin:0 auto 30px;text-align:center}.fxbus-guide-head>span,.fxbus-guide-label{display:inline-block;margin-bottom:9px;color:#0871df;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.fxbus-guide h2{margin:0;color:#092849;font-size:clamp(25px,3.2vw,40px);letter-spacing:-.04em;line-height:1.08}.fxbus-guide h3{margin:0 0 11px;color:#0c2b48;font-size:20px;letter-spacing:-.025em}.fxbus-guide p{color:#5d7085;font-size:14px;line-height:1.75}.fxbus-guide-head p{max-width:760px;margin:15px auto 0;font-size:15px}
.fxbus-guide-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center;margin:30px 0 58px;padding:18px;border:1px solid #dce7f0;border-radius:30px;background:#fff;box-shadow:0 24px 70px #0a355f14}.fxbus-guide-media{position:relative;min-height:430px;margin:0;overflow:hidden;border-radius:22px;background:#d9e5ef}.fxbus-guide-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.fxbus-guide-media figcaption{position:absolute;right:14px;bottom:14px;left:14px;padding:12px 14px;border:1px solid #ffffff63;border-radius:13px;color:#fff;background:#071b31d9;backdrop-filter:blur(9px);font-size:10px;font-weight:750;line-height:1.5}
.fxbus-steps-list{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:fxsteps}.fxbus-steps-list li{position:relative;padding:10px 10px 10px 48px;counter-increment:fxsteps}.fxbus-steps-list li:before{content:counter(fxsteps);position:absolute;top:7px;left:0;display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,#087be8,#0757bb);box-shadow:0 7px 16px #086bcf2e;font-size:12px;font-weight:950}.fxbus-steps-list b{display:block;margin-bottom:4px;font-size:13px}.fxbus-steps-list span{display:block;color:#697b8f;font-size:11px;line-height:1.55}
.fxbus-keyword-section,.fxbus-guide-copy,.fxbus-faq{margin:62px 0}.fxbus-keyword-section>p{max-width:800px;margin:14px 0 20px}.fxbus-route-cloud{display:flex;flex-wrap:wrap;gap:9px}.fxbus-route-cloud span{padding:10px 13px;border:1px solid #cfe0ee;border-radius:999px;color:#17486f;background:#fff;box-shadow:0 4px 14px #0e3b610d;font-size:11px;font-weight:850;transition:.18s}.fxbus-route-cloud span:hover{border-color:#78b4eb;color:#0764c2;background:#edf7ff;transform:translateY(-1px)}
.fxbus-guide-wide{position:relative;min-height:410px;margin:58px 0;overflow:hidden;border-radius:29px;background:#0b2b4b;box-shadow:0 26px 65px #0b315422}.fxbus-guide-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.fxbus-guide-wide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071b31db 0,#071b3166 46%,transparent 72%)}.fxbus-guide-wide--reverse:after{background:linear-gradient(270deg,#071b31db 0,#071b3166 46%,transparent 72%)}.fxbus-guide-wide figcaption{position:absolute;z-index:2;top:50%;left:45px;width:min(340px,calc(100% - 90px));color:#d9e9f5;font-size:13px;line-height:1.65;transform:translateY(-50%)}.fxbus-guide-wide--reverse figcaption{right:45px;left:auto}.fxbus-guide-wide figcaption b{display:block;margin-bottom:8px;color:#fff;font-size:25px;letter-spacing:-.03em;line-height:1.15}
.fxbus-copy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:21px}.fxbus-copy-grid>div{padding:22px;border:1px solid #dce7f0;border-radius:20px;background:linear-gradient(160deg,#fff,#f4f9fd);box-shadow:0 10px 30px #0c345610}.fxbus-copy-grid h3{font-size:16px}.fxbus-copy-grid p{margin:0;font-size:12px}
.fxbus-city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:21px}.fxbus-city-grid>div{display:flex;align-items:flex-start;gap:18px;padding:18px;border:1px solid #d9e5ee;border-radius:17px;background:#fff}.fxbus-city-grid b{min-width:110px;color:#0b3d68;font-size:12px}.fxbus-city-grid span{color:#65798e;font-size:11px;line-height:1.65}
.fxbus-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:22px}.fxbus-faq details{padding:16px 18px;border:1px solid #d7e4ee;border-radius:17px;background:#fff}.fxbus-faq summary{position:relative;padding-right:28px;color:#14334e;font-size:12px;font-weight:900;line-height:1.45;cursor:pointer;list-style:none}.fxbus-faq summary::-webkit-details-marker{display:none}.fxbus-faq summary:after{content:"+";position:absolute;top:-3px;right:0;color:#0871df;font-size:20px}.fxbus-faq details[open] summary:after{content:"−"}.fxbus-faq details p{margin:12px 0 0;padding-top:11px;border-top:1px dashed #d5e1eb;font-size:11px}
.fxbus-guide-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:65px 0 0;padding:32px 35px;border-radius:26px;color:#fff;background:linear-gradient(125deg,#061d3b,#07568f 64%,#078063);box-shadow:0 25px 65px #082e5140}.fxbus-guide-cta span{color:#77e7bd;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.fxbus-guide-cta h2{max-width:650px;margin-top:7px;color:#fff;font-size:28px}.fxbus-guide-cta a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;border-radius:14px;color:#fff;-webkit-text-fill-color:#fff;background:linear-gradient(135deg,#ff761a,#ef3f18);box-shadow:0 14px 30px rgba(239,74,35,.34),inset 0 1px 0 rgba(255,255,255,.28);text-decoration:none;font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1;text-shadow:none;opacity:1;filter:none;transition:transform .18s ease,box-shadow .18s ease}.fxbus-guide-cta a:after{content:'→';font-size:16px;font-weight:700;transition:transform .18s ease}.fxbus-guide-cta a:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(239,74,35,.42),inset 0 1px 0 rgba(255,255,255,.28)}.fxbus-guide-cta a:hover:after{transform:translateX(3px)}
@media(max-width:900px){.fxbus-guide-split{grid-template-columns:1fr}.fxbus-guide-media{min-height:390px}.fxbus-copy-grid{grid-template-columns:1fr}.fxbus-guide-wide{min-height:360px}}
@media(max-width:768px){.fxbus-hero{z-index:10}.fxbus-search{z-index:40}.fxbus-suggest{z-index:10030;top:calc(100% + 12px);right:-10px;left:-10px;max-height:250px}.fxbus-field>b.fxbus-route-icon{display:block;width:34px;height:34px;flex-basis:34px}.fxbus-route-icon i{top:6px;left:7px}.fxbus-inspire-card{min-height:200px}.fxbus-guide{margin-top:35px}.fxbus-guide-head{text-align:left}.fxbus-guide h2{font-size:27px}.fxbus-guide-head p{font-size:13px}.fxbus-guide-split{gap:24px;margin-bottom:43px;padding:10px;border-radius:22px}.fxbus-guide-split>div{padding:4px 5px 10px}.fxbus-guide-media{min-height:300px;border-radius:16px}.fxbus-keyword-section,.fxbus-guide-copy,.fxbus-faq{margin:46px 0}.fxbus-guide-wide{min-height:370px;margin:43px 0;border-radius:21px}.fxbus-guide-wide:after,.fxbus-guide-wide--reverse:after{background:linear-gradient(180deg,transparent 25%,#071b31e8 90%)}.fxbus-guide-wide figcaption,.fxbus-guide-wide--reverse figcaption{top:auto;right:20px;bottom:22px;left:20px;width:auto;transform:none}.fxbus-guide-wide figcaption b{font-size:21px}.fxbus-city-grid,.fxbus-faq-grid{grid-template-columns:1fr}.fxbus-city-grid>div{display:block}.fxbus-city-grid b{display:block;margin-bottom:6px}.fxbus-guide-cta{align-items:flex-start;flex-direction:column;padding:25px}.fxbus-guide-cta h2{font-size:23px}.fxbus-guide-cta a{width:100%;text-align:center}}
/* flyx-bus-calendar.css */
/* flyx-bus-calendar.css
   Journey-date picker for /bus, built to match the homepage flight calendar.

   The bus page used the browser's native <input type="date">, so every OS drew
   a different control and none of them looked like the rest of the site. This
   is the same panel the homepage uses - same head, month nav, day grid and
   footer - reduced to a single date.

   Desktop: a popover anchored under the field, with a pointer.
   Mobile:  a bottom sheet. It is pinned by CSS and never follows the field on
            scroll; the homepage picker used to re-anchor on every scroll event
            and visibly drifted, so that is deliberately not repeated here.

   Namespaced fxbuscal- so nothing here can collide with the homepage picker,
   which ships its own copy of these styles under body.flyx-home-experiment. */

.fxbuscal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.34);z-index:2147483000;
}
.fxbuscal-overlay.is-open{display:block;}

.fxbuscal{
  display:none;position:fixed;z-index:2147483010;
  width:min(380px,calc(100vw - 28px));
  box-sizing:border-box;padding:0;overflow:hidden;
  border:1px solid rgba(226,232,240,.96);border-radius:24px;
  background:#fff;color:#101828;
  box-shadow:0 28px 80px rgba(15,23,42,.25),0 10px 26px rgba(15,23,42,.12);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.fxbuscal.is-open{display:block;}

/* Preserve the popover on wide, short windows; scroll the month instead of
   placing Select below the screen after rotation or a split-window resize. */
@media(min-width:769px){
  .fxbuscal{max-height:calc(100dvh - 28px);}
  .fxbuscal.is-open{display:flex;flex-direction:column;}
  .fxbuscal-inner{flex:1 1 auto;min-height:0;overflow-y:auto;}
  .fxbuscal-foot{flex:0 0 auto;}
}

/* the little arrow pointing back at the date field */
.fxbuscal:before{
  content:"";position:absolute;left:var(--fxbuscal-pointer-x,50%);top:-9px;
  width:18px;height:18px;
  border-top:1px solid rgba(226,232,240,.96);
  border-left:1px solid rgba(226,232,240,.96);
  border-radius:5px 0 0 0;background:#fff;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:-5px -5px 13px rgba(15,23,42,.05);
  pointer-events:none;
}

.fxbuscal-inner{position:relative;z-index:1;padding:18px 20px 14px;}

.fxbuscal-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid #edf2f7;
}
.fxbuscal-head span{
  display:block;margin:0 0 4px;color:#7b8794;
  font-size:11px;line-height:1;letter-spacing:.7px;text-transform:uppercase;font-weight:900;
}
.fxbuscal-head h3{margin:0;color:#101828;font-size:21px;line-height:1.15;font-weight:900;}
.fxbuscal-close{
  width:40px;height:40px;flex:0 0 40px;border:0;border-radius:50%;
  background:#f2f4f7;color:#101828;font-size:18px;font-weight:900;line-height:1;cursor:pointer;
}

.fxbuscal-navrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.fxbuscal-navrow strong{color:#101828;font-size:20px;line-height:1;font-weight:900;}
.fxbuscal-nav{
  width:36px;height:36px;border:0;border-radius:50%;
  background:#f2f4f7;color:#1f2937;font-size:22px;font-weight:900;line-height:1;cursor:pointer;
}
.fxbuscal-nav:hover{background:#e9eef6;}
.fxbuscal-nav:disabled{opacity:.42;cursor:not-allowed;pointer-events:none;}

.fxbuscal-month-title{margin-bottom:10px;text-align:center;color:#101828;font-size:16px;line-height:1.1;font-weight:900;}
.fxbuscal-weekdays,
.fxbuscal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center;}
.fxbuscal-weekdays span{padding-bottom:3px;color:#7f8a9d;font-size:12px;line-height:1.2;font-weight:800;}

.fxbuscal-day{
  height:34px;min-width:0;border:0;border-radius:10px;
  background:#fff;color:#344054;font-size:14px;line-height:1;font-weight:800;cursor:pointer;
}
.fxbuscal-day:hover:not(:disabled){background:#fff3ee;color:#ff5722;}
.fxbuscal-day.is-empty{visibility:hidden;pointer-events:none;}
.fxbuscal-day.is-disabled{color:#c5ceda;cursor:not-allowed;background:#fff;}
.fxbuscal-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1.5px #0b73e8;color:#0b73e8;}
.fxbuscal-day.is-selected{
  background:linear-gradient(135deg,#b0042f,#ff5722);color:#fff;
  box-shadow:0 12px 24px rgba(176,4,47,.23);
}

.fxbuscal-foot{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;
  padding:13px 20px;border-top:1px solid #edf2f7;background:#fff;
}
.fxbuscal-pill{
  min-height:48px;border:1px solid #ff5722;border-radius:13px;background:#fff;
  padding:8px 11px;text-align:left;
  box-shadow:0 0 0 1px #ff5722 inset,0 9px 18px rgba(255,87,34,.10);
}
.fxbuscal-pill span{display:block;margin:0 0 4px;color:#667085;font-size:12px;line-height:1;font-weight:900;}
.fxbuscal-pill strong{display:block;color:#101828;font-size:15px;line-height:1.1;font-weight:900;}
.fxbuscal-done{
  height:48px;min-width:108px;border:0;border-radius:13px;
  background:linear-gradient(135deg,#b0042f,#ff5722);color:#fff;
  font-size:15px;line-height:1;font-weight:900;cursor:pointer;
  box-shadow:0 14px 28px rgba(176,4,47,.24);
}

/* the field itself: a read-only text box, so no OS date control appears */
#fxBusDateText{cursor:pointer;}

@media(max-width:768px){
  /* Bottom sheet. Geometry lives here and the script does not anchor on phones,
     so the panel cannot drift when the page behind it moves. */
  .fxbuscal{
    top:auto;right:0;bottom:0;left:0;
    width:100%;max-width:100%;max-height:88vh;
    flex-direction:column;
    border-width:1px 0 0;border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -18px 46px rgba(15,23,42,.26);
  }
  .fxbuscal.is-open{display:flex;}
  .fxbuscal:before{display:none;}
  .fxbuscal-inner{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .fxbuscal-foot{flex:0 0 auto;}
  .fxbuscal-head h3{font-size:19px;}
  .fxbuscal-day{height:38px;font-size:15px;}
  /* freeze the page behind the sheet */
  body.fxbuscal-open{overflow:hidden;}
}
/* flyx-bus-premium-v3.css */
:root {
  --fxbus-ink: #0b1f33;
  --fxbus-muted: #63758a;
  --fxbus-blue: #0967d9;
  --fxbus-blue-dark: #064ea8;
  --fxbus-sky: #eaf5ff;
  --fxbus-orange: #ff5b21;
  --fxbus-green: #06865f;
  --fxbus-border: #d9e5ef;
  --fxbus-surface: #fff;
  --fxbus-page: #f3f7fb;
}

body.fxbus-lock { overflow: hidden !important; }
.fxbus-status[hidden], .fxbus-alert[hidden] { display: none !important; }
.fxbus-page, .fxbus-page * { box-sizing: border-box; }
.fxbus-page { color: var(--fxbus-ink); background: var(--fxbus-page); }
.fxbus-wrap { width: min(1440px, calc(100% - 48px)); }

/* Search results */
.fxbus-results-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 20px;
  padding: 0 2px;
}
.fxbus-results-head h2 { margin: 0 0 5px; color: var(--fxbus-ink); font-size: clamp(24px, 2vw, 32px); letter-spacing: -.04em; }
.fxbus-results-head p { margin: 0; color: var(--fxbus-muted); font-size: 14px; font-weight: 700; }
.fxbus-results-head nav { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid var(--fxbus-border); border-radius: 15px; background: #eaf0f6; }
.fxbus-results-head nav button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 11px; color: #5d7188; background: transparent; font-size: 12px; font-weight: 900; cursor: pointer; }
.fxbus-results-head nav button.on { color: #fff; background: linear-gradient(135deg, var(--fxbus-blue), var(--fxbus-blue-dark)); box-shadow: 0 8px 20px #0967d933; }

.fxbus-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.fxbus-filter {
  position: sticky;
  top: calc(var(--flyx-desktop-header-offset, 78px) + 18px);
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--fxbus-border);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(16, 50, 82, .08);
  backdrop-filter: blur(12px);
}
.fxbus-filter h3 { margin: 0 0 9px; font-size: 15px; letter-spacing: -.02em; }
.fxbus-filter label { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; padding: 0 10px; border-radius: 11px; color: #44586d; font-size: 12px; font-weight: 800; cursor: pointer; }
.fxbus-filter label:hover { background: #f1f7fc; }
.fxbus-filter input { width: 17px; height: 17px; margin: 0; accent-color: var(--fxbus-blue); }
.fxbus-list { display: grid; gap: 16px; min-width: 0; }

.fxbus-card {
  overflow: hidden;
  border: 1px solid #d8e4ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(20, 58, 88, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fxbus-card:hover { border-color: #b7d4ec; box-shadow: 0 20px 48px rgba(17, 70, 114, .13); transform: translateY(-2px); }
.fxbus-card-main { display: grid; grid-template-columns: minmax(230px, 1.15fr) minmax(340px, 1.7fr) 150px; gap: 30px; align-items: center; padding: 25px 26px 20px; }
.fxbus-operator { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.fxbus-mark { flex: 0 0 48px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #0a74e4, #044d9e); box-shadow: 0 9px 24px #0967d934; font-size: 18px; font-style: normal; font-weight: 950; }
.fxbus-operator > div { min-width: 0; }
.fxbus-operator h3 { overflow: hidden; margin: 0 0 5px; color: var(--fxbus-ink); font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.fxbus-type { overflow: hidden; color: var(--fxbus-muted); font-size: 11px; font-weight: 700; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.fxbus-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.fxbus-badges b { padding: 5px 8px; border: 1px solid #d6e7f5; border-radius: 999px; color: #356381; background: #f2f8fc; font-size: 8px; font-weight: 900; line-height: 1; }

.fxbus-timeline { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.2fr) minmax(90px, 1fr); gap: 12px; align-items: center; min-width: 0; }
.fxbus-time { min-width: 0; }
.fxbus-time.right { text-align: right; }
.fxbus-time strong { display: block; color: #071b2f; font-size: 21px; letter-spacing: -.03em; }
.fxbus-time span { display: block; overflow: hidden; margin-top: 4px; color: #78899b; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fxbus-track { text-align: center; }
.fxbus-track > span { display: block; margin-bottom: 7px; color: #72859a; font-size: 9px; font-weight: 850; }
.fxbus-line { position: relative; height: 2px; border-radius: 2px; background: #cbd9e5; }
.fxbus-line::before, .fxbus-line::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid #75a8d3; border-radius: 50%; background: #fff; transform: translateY(-50%); }
.fxbus-line::before { left: -2px; }
.fxbus-line::after { right: -2px; }
.fxbus-line i { position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--fxbus-blue); transform: translateX(-50%) rotate(45deg); }
.fxbus-price { min-width: 0; text-align: right; }
.fxbus-price small { display: block; color: #7b899a; font-size: 9px; font-weight: 850; }
.fxbus-price strong { display: block; margin: 3px 0 2px; color: #071b2f; font-size: 25px; letter-spacing: -.05em; }
.fxbus-price em { color: var(--fxbus-green); font-size: 9px; font-style: normal; font-weight: 900; }

.fxbus-card-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 26px; border-top: 1px solid #edf2f6; color: #5c7187; background: #fbfdff; font-size: 9px; font-weight: 800; }
.fxbus-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.fxbus-card-meta i { color: var(--fxbus-blue); font-size: 12px; font-style: normal; }
.fxbus-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px 13px 26px; border-top: 1px solid #edf2f6; background: #fff; color: #61758b; font-size: 11px; font-weight: 750; }
.fxbus-card-foot b { color: var(--fxbus-green); font-size: 14px; }
.fxbus-card-foot small { color: #8b9aaa; }
.fxbus-view { min-height: 44px; padding: 0 19px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0a74e4, #0755bd); box-shadow: 0 9px 22px #0967d936; font-size: 11px; font-weight: 950; cursor: pointer; }
.fxbus-view i { margin-left: 7px; font-size: 14px; font-style: normal; }

/* Full booking workspace */
.fxbus-overlay { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 15, 30, .72); backdrop-filter: blur(10px); }
.fxbus-overlay[hidden] { display: none !important; }
.fxbus-drawer {
  position: relative;
  overflow: hidden;
  width: min(1180px, 96vw);
  height: min(900px, calc(100vh - 48px));
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 28px;
  background: #f2f6fa;
  box-shadow: 0 35px 110px rgba(0, 15, 35, .48);
  animation: fxbusWorkspaceIn .25s ease-out;
}
@keyframes fxbusWorkspaceIn { from { opacity: .5; transform: translateY(18px) scale(.985); } }
.fxbus-drawer-head { position: absolute; z-index: 15; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 26px; color: #fff; background: linear-gradient(115deg, #071d38, #075795 58%, #087b70); }
.fxbus-drawer-head h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.fxbus-drawer-head p { overflow: hidden; max-width: 720px; margin: 5px 0 0; color: #c9e3f4; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fxbus-drawer-head button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; color: #fff; background: rgba(255,255,255,.12); font-size: 24px; cursor: pointer; }
.fxbus-drawer-head button:hover { background: rgba(255,255,255,.22); }
.fxbus-steps { position: absolute; z-index: 14; top: 76px; right: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 58px; padding: 10px 24px; border-bottom: 1px solid #d9e4ed; background: rgba(255,255,255,.96); }
.fxbus-steps b { display: grid; place-items: center; border-radius: 11px; color: #718196; background: #edf2f6; font-size: 10px; font-weight: 900; }
.fxbus-steps b.on { color: #075ebc; background: #dfefff; box-shadow: inset 0 0 0 1px #bfdcfa; }
.fxbus-panel { position: absolute; top: 134px; right: 0; bottom: 84px; left: 0; overflow: auto; padding: 18px 24px 32px; scroll-behavior: smooth; }
.fxbus-panel::-webkit-scrollbar { width: 8px; height: 8px; }
.fxbus-panel::-webkit-scrollbar-thumb { border-radius: 10px; background: #aebfce; }

.fxbus-journey-strip { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.5fr) minmax(120px, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 14px; padding: 14px 18px; border: 1px solid #d8e4ed; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(22, 57, 86, .05); }
.fxbus-journey-strip > div small { display: block; color: #718398; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fxbus-journey-strip > div b { display: block; margin-top: 3px; font-size: 18px; }
.fxbus-journey-strip > div.right { text-align: right; }
.fxbus-journey-strip > span { text-align: center; }
.fxbus-journey-strip > span em { color: #708196; font-size: 9px; font-style: normal; font-weight: 850; }
.fxbus-journey-strip > span i { position: relative; display: block; height: 2px; margin-top: 7px; background: #ccdae6; }
.fxbus-journey-strip > span i::after { content: ""; position: absolute; top: -3px; right: 0; width: 8px; height: 8px; border-top: 2px solid var(--fxbus-blue); border-right: 2px solid var(--fxbus-blue); transform: rotate(45deg); }
.fxbus-journey-strip > strong { padding: 8px 11px; border-radius: 10px; color: #245678; background: #eef7fd; font-size: 9px; white-space: nowrap; }

.fxbus-points-shell { margin-bottom: 14px; padding: 16px; border: 1px solid #d8e4ed; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(22, 57, 86, .05); }
.fxbus-point-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.fxbus-select { display: block; margin: 0; padding: 12px 14px; border: 1px solid #d2e0eb; border-radius: 14px; background: #fbfdff; }
.fxbus-select > span, .fxbus-input > span { display: block; margin-bottom: 6px; color: #75879a; font-size: 8px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.fxbus-select select { width: 100%; min-height: 24px; border: 0; outline: 0; color: #132d46; background: transparent; font-size: 11px; font-weight: 850; }
.fxbus-point-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fxbus-point-detail { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px; border-radius: 13px; background: #f4f8fb; }
.fxbus-point-detail > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff; background: var(--fxbus-blue); font-size: 16px; font-style: normal; font-weight: 900; }
.fxbus-point-detail > i.dropping { background: var(--fxbus-green); }
.fxbus-point-detail b, .fxbus-point-detail span, .fxbus-point-detail small { display: block; }
.fxbus-point-detail b { color: #17334d; font-size: 10px; }
.fxbus-point-detail span { overflow: hidden; margin-top: 3px; color: #6f8092; font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.fxbus-point-detail small { margin-top: 3px; color: #8392a2; font-size: 7px; }
.fxbus-point-detail > strong { color: #264d6d; font-size: 9px; white-space: nowrap; }

.fxbus-seat-section { padding: 18px; border: 1px solid #d8e4ed; border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(22, 57, 86, .07); }
.fxbus-seat-section > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.fxbus-seat-section > header small { color: var(--fxbus-blue); font-size: 8px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.fxbus-seat-section > header h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.03em; }
.fxbus-deck-tabs { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 1px solid #d4e1ec; border-radius: 13px; background: #eaf0f5; }
.fxbus-deck-tabs button { min-width: 112px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 10px; color: #5e7287; background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; }
.fxbus-deck-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--fxbus-blue), var(--fxbus-blue-dark)); box-shadow: 0 7px 18px #0967d935; }

.fxbus-deck-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 164px; gap: 16px; align-items: start; }
.fxbus-coach-stage { overflow: auto; padding: 10px 12px 18px; }
.fxbus-coach {
  position: relative;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  min-height: 400px;
  padding: 86px 35px 42px;
  border: 2px solid #234d70;
  border-radius: 54px 54px 23px 23px;
  background: linear-gradient(90deg, #dce8f0 0, #f8fbfd 8%, #fff 18%, #fff 82%, #f8fbfd 92%, #dce8f0 100%);
  box-shadow: inset 0 0 0 6px #edf4f8, inset 0 0 0 8px #b1c4d3, 0 15px 34px #163d5d21;
}
.fxbus-coach::before { content: none !important; }
.fxbus-cockpit { position: absolute; z-index: 3; top: 8px; right: 13px; left: 13px; height: 66px; border: 1px solid #adc1d0; border-radius: 42px 42px 13px 13px; background: linear-gradient(180deg, #d6e4ee, #f9fbfd 62%, #e5eef4); }
.fxbus-front-badge { position: absolute; z-index: 4; top: 14px; left: 50%; padding: 5px 10px; border-radius: 999px; color: #eaf7ff; background: #0a2e4dcc; font-size: 7px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.fxbus-windshield { position: absolute; top: 7px; right: 37px; left: 37px; height: 38px; overflow: hidden; border: 2px solid #6f8da5; border-radius: 31px 31px 9px 9px; background: linear-gradient(145deg, #153d61, #2875a5 55%, #8bd0ed); }
.fxbus-windshield::before { content: ""; position: absolute; top: -18px; left: -5%; width: 67%; height: 34px; background: linear-gradient(115deg, transparent 15%, #ffffff45 40%, transparent 64%); transform: rotate(-8deg); }
.fxbus-windshield i { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 2px; background: #a8d5e580; }
.fxbus-steering { position: absolute; z-index: 4; right: 39px; bottom: 5px; width: 22px; height: 22px; border: 3px solid #294f70; border-radius: 50%; background: radial-gradient(circle, #294f70 0 3px, transparent 4px); }
.fxbus-door { position: absolute; right: 4px; bottom: -17px; width: 22px; height: 35px; border: 2px solid #7d99af; border-radius: 4px 8px 8px 4px; background: linear-gradient(90deg, #c9dbe7, #f6fafc); }
.fxbus-seat-bay { position: relative; z-index: 2; min-height: 255px; padding: 20px 15px 23px; border: 1px solid #cfdee9; border-radius: 18px; background: repeating-linear-gradient(0deg, #f8fbfd 0, #f8fbfd 25px, #f1f6f9 26px), linear-gradient(90deg, #e8f0f5, #fff 16%, #fff 84%, #e8f0f5); box-shadow: inset 0 0 20px #1b4d7012; }
.fxbus-seat-bay::before { content: ""; position: absolute; z-index: 0; top: 10px; bottom: 10px; left: 50%; width: 34px; border-right: 1px dashed #bcccd8; border-left: 1px dashed #bcccd8; border-radius: 8px; background: #edf2f6; opacity: .7; transform: translateX(-50%); }
.fxbus-seat-grid { position: relative; z-index: 1; display: grid; grid-auto-rows: 38px; grid-template-columns: repeat(var(--cols, 5), 44px); gap: 9px; justify-content: center; min-width: max-content; }
.fxbus-rear-cap { position: absolute; z-index: 3; right: 16px; bottom: 7px; left: 16px; height: 24px; border: 1px solid #7892a6; border-radius: 6px 6px 16px 16px; background: linear-gradient(180deg, #d9e5ed, #a9bdcc); }
.fxbus-rear-cap::before, .fxbus-rear-cap::after { content: ""; position: absolute; top: 6px; width: 23px; height: 6px; border: 2px solid #76201e; border-radius: 5px; background: #ff583c; box-shadow: 0 0 7px #ff3c2d62; }
.fxbus-rear-cap::before { left: 17px; }
.fxbus-rear-cap::after { right: 17px; }

.fxbus-seat { position: relative; isolation: isolate; box-sizing: border-box; grid-row: calc(var(--row) + 1) / span var(--len); grid-column: calc(var(--col) + 1) / span var(--wid); display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 40px; min-height: 35px; padding: 8px 3px 4px; overflow: hidden; border: 1.5px solid #4395df; border-radius: 11px 11px 8px 8px; color: #07549a; background: linear-gradient(145deg, #f7fcff, #dceefc); box-shadow: inset 0 -3px 0 #c5e0f4, 0 3px 7px #225f8c1c; font-size: 8px; font-weight: 950; line-height: 1.05; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.fxbus-seat::before { content: ""; position: absolute; z-index: -1; top: 3px; right: 4px; left: 4px; height: 6px; border: 1px solid #7fb6e2; border-radius: 5px 5px 3px 3px; background: #cde4f6; }
.fxbus-seat:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 -3px 0 #b4d7f1, 0 8px 15px #1768a52e; }
.fxbus-seat:focus-visible { outline: 3px solid #ff8b36; outline-offset: 2px; }
.fxbus-seat-number, .fxbus-seat-fare { position: relative; z-index: 3; }
.fxbus-seat-fare { margin-top: 3px; font-size: 6.5px; font-weight: 850; opacity: .88; }
.fxbus-seat.sleeper { align-items: flex-start; justify-content: flex-end; padding: 9px 6px 6px; border-radius: 10px; box-shadow: inset -4px 0 0 #c7e1f5, 0 3px 6px #225f8c1e; }
.fxbus-seat.sleeper::before { top: 5px; right: auto; bottom: 5px; left: 4px; width: 8px; height: auto; border-radius: 5px; }
.fxbus-seat.ladies { border-color: #e56eb4; color: #9f246d; background: linear-gradient(145deg, #fff8fc, #ffe1f2); box-shadow: inset 0 -3px 0 #f3c4df; }
.fxbus-seat.booked { border-color: #b8c3cc; color: #8997a3; background: repeating-linear-gradient(135deg, #eef1f3 0, #eef1f3 5px, #e2e7ea 6px, #e2e7ea 10px); box-shadow: inset 0 -3px 0 #d3dbe0; cursor: not-allowed; filter: saturate(.4); }
.fxbus-seat.selected { border-color: #05714f; color: #fff; background: linear-gradient(145deg, #16c68c, #05855e); box-shadow: inset 0 -3px 0 #036c4d, 0 7px 16px #078b6340; transform: translateY(-2px); }

.fxbus-legend { padding: 16px; border: 1px solid #d8e4ed; border-radius: 18px; background: linear-gradient(180deg, #fff, #f7fafc); box-shadow: 0 8px 22px #1138590f; }
.fxbus-legend h4 { margin: 0 0 13px; font-size: 12px; }
.fxbus-legend p { display: flex; align-items: center; gap: 9px; margin: 10px 0; color: #617489; font-size: 9px; font-weight: 800; }
.fxbus-legend > small { display: block; margin-top: 13px; padding-top: 11px; border-top: 1px dashed #cedbe5; color: #8a98a7; font-size: 8px; line-height: 1.5; }
.fxbus-dot { position: relative; box-sizing: border-box; width: 22px; height: 17px; border: 1.5px solid #4b98dc; border-radius: 6px 6px 4px 4px; background: #e8f5ff; box-shadow: inset 0 -2px 0 #c7e1f5; }
.fxbus-dot::before { content: ""; position: absolute; top: 2px; right: 3px; left: 3px; height: 3px; border-radius: 3px; background: #7fb6e2; }
.fxbus-dot.sel { border-color: #05714f; background: #09a875; }
.fxbus-dot.used { border-color: #b8c3cc; background: #e2e7ea; }
.fxbus-dot.lady { border-color: #e56eb4; background: #ffe6f4; }
.fxbus-dot.berth { width: 30px; }
.fxbus-selected { display: flex; align-items: center; gap: 14px; margin-top: 13px; padding: 13px 15px; border: 1px solid #c9def1; border-radius: 15px; background: #f7fbff; font-size: 10px; }
.fxbus-selected > b { white-space: nowrap; }
.fxbus-pill { display: inline-block; margin: 2px 5px 2px 0; padding: 6px 9px; border-radius: 8px; color: #08704f; background: #dff8ef; font-style: normal; font-weight: 900; }

/* Passenger and checkout */
.fxbus-pax, .fxbus-contact, .fxbus-fare, .fxbus-coupon, .fxbus-policy { margin-bottom: 13px; padding: 19px; border: 1px solid #d8e4ed; border-radius: 20px; background: #fff; box-shadow: 0 9px 27px rgba(22,57,86,.05); }
.fxbus-pax h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 15px; font-size: 14px; }
.fxbus-pax h3 b { padding: 6px 9px; border-radius: 8px; color: #075ebc; background: #e8f3ff; font-size: 9px; }
.fxbus-contact h3, .fxbus-fare h3 { margin: 0; font-size: 16px; }
.fxbus-contact > p { margin: 5px 0 14px; color: var(--fxbus-muted); font-size: 10px; }
.fxbus-form-grid { display: grid; grid-template-columns: 100px 1fr 1fr 100px; gap: 11px; }
.fxbus-form-grid.contact { grid-template-columns: 1fr 1fr; }
.fxbus-input { display: block; }
.fxbus-input input, .fxbus-input select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #d1dfeb; border-radius: 12px; outline: 0; color: #102a44; background: #fbfdff; font-size: 11px; font-weight: 750; }
.fxbus-input input:focus, .fxbus-input select:focus { border-color: #4b99e8; box-shadow: 0 0 0 4px #1c7de218; background: #fff; }
.fxbus-operator-note { margin-bottom: 13px; padding: 12px 15px; border: 1px solid #f5d89a; border-radius: 13px; color: #79571d; background: #fff9e9; font-size: 10px; font-weight: 800; }
.fxbus-review-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 15px; align-items: start; }
.fxbus-fare header { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e7eef4; }
.fxbus-fare header small { color: var(--fxbus-blue); font-size: 8px; font-weight: 950; text-transform: uppercase; }
.fxbus-fare header span { max-width: 48%; color: #687c91; font-size: 9px; font-weight: 750; text-align: right; }
.fxbus-fare p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 10px 0; border-bottom: 1px dashed #dce6ed; color: #5f7083; font-size: 11px; font-weight: 700; }
.fxbus-fare p.total { margin-top: 3px; padding-top: 15px; border-bottom: 0; color: #102a44; font-size: 15px; }
.fxbus-fare p.total b { color: var(--fxbus-orange); font-size: 20px; }
.fxbus-safe { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px; border-radius: 12px; color: #06734f; background: #edf9f4; font-size: 9px; font-weight: 800; line-height: 1.5; }
.fxbus-safe i { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: var(--fxbus-green); font-style: normal; }
.fxbus-coupon { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; overflow: hidden; border-color: #cfe8dd; background: linear-gradient(145deg, #f7fffb, #effaf5); }
.fxbus-coupon-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #12ac7b, #067556); font-size: 17px; font-weight: 950; }
.fxbus-coupon small { color: var(--fxbus-green); font-size: 8px; font-weight: 950; text-transform: uppercase; }
.fxbus-coupon h3 { margin: 3px 0 5px; font-size: 14px; }
.fxbus-coupon p { margin: 0; color: #61766f; font-size: 9px; line-height: 1.5; }
.fxbus-coupon > span { grid-column: 1 / 3; width: fit-content; padding: 6px 9px; border-radius: 8px; color: #067556; background: #d8f4e8; font-size: 8px; font-weight: 900; }
.fxbus-policy summary { color: #16324c; font-size: 11px; font-weight: 900; cursor: pointer; }
.fxbus-policy p { color: #63758a; font-size: 9px; line-height: 1.6; }

.fxbus-sticky { position: absolute; z-index: 16; right: 0; bottom: 0; left: 0; width: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 12px 24px; border-top: 1px solid #d6e2ec; background: rgba(255,255,255,.97); box-shadow: 0 -14px 36px rgba(14,42,78,.13); backdrop-filter: blur(14px); }
.fxbus-sticky small { display: block; color: #75879a; font-size: 9px; font-weight: 850; }
.fxbus-sticky strong { display: block; margin-top: 2px; color: #0b1f33; font-size: 23px; letter-spacing: -.04em; }
.fxbus-sticky button, .fxbus-pay { min-width: 210px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #ff711c, #ef3e17); box-shadow: 0 11px 25px #f04b1438; font-size: 12px; font-weight: 950; cursor: pointer; }
.fxbus-sticky button:disabled { opacity: .45; cursor: not-allowed; }
.fxbus-opening > i { display: block; width: 28px; height: 28px; margin: 0 auto 10px; border: 3px solid #c6def4; border-top-color: var(--fxbus-blue); border-radius: 50%; animation: fxbusSpin .8s linear infinite; }
@keyframes fxbusSpin { to { transform: rotate(360deg); } }
.fxbus-success { padding: 35px 10px; text-align: center; }
.fxbus-success > i { display: grid; width: 74px; height: 74px; margin: 0 auto 16px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #17bd83, #057b58); box-shadow: 0 15px 35px #048f6047; font-size: 35px; font-style: normal; }
.fxbus-success h2 { margin: 0 0 7px; }
.fxbus-success > p { color: #66768a; }
.fxbus-ticket { max-width: 620px; margin: 20px auto; padding: 16px; border: 1px solid #cfdee9; border-radius: 17px; background: #fff; text-align: left; }
.fxbus-ticket p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 9px 0; border-bottom: 1px dashed #dce5ed; font-size: 11px; }
.fxbus-ticket p:last-child { border: 0; }
.fxbus-ticket span { color: #748397; }
.fxbus-pay { display: inline-grid; place-items: center; text-decoration: none; }
.fxbus-confirm-details { max-width: 620px; margin: -8px auto 20px; padding: 15px; border: 1px solid #cfe5da; border-radius: 16px; background: #f4fbf8; text-align: left; }
.fxbus-confirm-details > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fxbus-confirm-details > div b { padding: 6px 8px; border-radius: 8px; color: #087353; background: #dff5eb; font-size: 8px; }
.fxbus-confirm-details p { margin: 10px 0 0; color: #587068; font-size: 9px; line-height: 1.55; }
.fxbus-confirm-details p strong { display: block; margin-bottom: 3px; color: #163b31; }

@media (max-width: 980px) {
  .fxbus-layout { grid-template-columns: 1fr; }
  .fxbus-filter { position: static; display: flex; overflow-x: auto; align-items: center; gap: 8px; padding: 10px; white-space: nowrap; scrollbar-width: none; }
  .fxbus-filter::-webkit-scrollbar { display: none; }
  .fxbus-filter h3 { margin: 0 6px 0 0; }
  .fxbus-filter label { flex: 0 0 auto; min-height: 38px; border: 1px solid #dbe6ee; background: #fff; }
  .fxbus-card-main { grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.5fr) 140px; gap: 20px; }
  .fxbus-drawer { width: calc(100vw - 24px); height: calc(100vh - 24px); }
}

@media (max-width: 760px) {
  .fxbus-wrap { width: calc(100% - 20px); }
  .fxbus-results-head { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 0; }
  .fxbus-results-head h2 { font-size: 23px; }
  .fxbus-results-head p { font-size: 11px; }
  .fxbus-results-head nav { width: 100%; overflow-x: auto; }
  .fxbus-results-head nav button { flex: 1 0 auto; min-height: 38px; padding: 0 13px; font-size: 10px; }
  .fxbus-filter h3 { display: none; }
  .fxbus-filter label { min-height: 36px; padding: 0 10px; font-size: 10px; }
  .fxbus-filter input { width: 15px; height: 15px; }
  .fxbus-card { border-radius: 19px; }
  .fxbus-card-main { grid-template-columns: 1fr auto; gap: 17px 12px; padding: 17px 16px 14px; }
  .fxbus-operator { grid-column: 1 / 3; }
  .fxbus-mark { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; font-size: 15px; }
  .fxbus-operator h3 { font-size: 15px; }
  .fxbus-type { white-space: normal; font-size: 9px; }
  .fxbus-badges { margin-top: 8px; }
  .fxbus-badges b { font-size: 7px; }
  .fxbus-timeline { grid-column: 1; grid-template-columns: 70px minmax(80px, 1fr) 70px; gap: 8px; }
  .fxbus-time strong { font-size: 17px; }
  .fxbus-time span { font-size: 7px; }
  .fxbus-track > span { font-size: 7px; }
  .fxbus-price { grid-column: 2; }
  .fxbus-price strong { font-size: 21px; }
  .fxbus-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px 16px; font-size: 8px; }
  .fxbus-card-foot { padding: 11px 12px 11px 16px; font-size: 9px; }
  .fxbus-card-foot small { display: none; }
  .fxbus-view { min-height: 42px; padding: 0 15px; font-size: 10px; }

  .fxbus-overlay { display: block; padding: 0; background: #f2f6fa; backdrop-filter: none; }
  .fxbus-drawer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .fxbus-drawer-head { height: 66px; padding: 0 15px; }
  .fxbus-drawer-head h2 { max-width: calc(100vw - 78px); overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .fxbus-drawer-head p { max-width: calc(100vw - 78px); font-size: 8px; }
  .fxbus-drawer-head button { width: 39px; height: 39px; border-radius: 12px; }
  .fxbus-steps { top: 66px; height: 52px; padding: 8px 10px; }
  .fxbus-steps b { font-size: 8px; }
  .fxbus-panel { top: 118px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 12px 10px 24px; }
  .fxbus-journey-strip { grid-template-columns: 1fr 80px 1fr; gap: 9px; padding: 12px; border-radius: 15px; }
  .fxbus-journey-strip > div b { font-size: 15px; }
  .fxbus-journey-strip > strong { grid-column: 1 / 4; justify-self: center; margin-top: -2px; }
  .fxbus-points-shell { padding: 11px; border-radius: 17px; }
  .fxbus-point-grid, .fxbus-point-details { grid-template-columns: 1fr; gap: 8px; }
  .fxbus-point-details { margin-top: 8px; }
  .fxbus-select { padding: 10px 11px; }
  .fxbus-select select { font-size: 10px; }
  .fxbus-point-detail { grid-template-columns: 30px minmax(0,1fr) auto; padding: 9px; }
  .fxbus-point-detail > i { width: 29px; height: 29px; }
  .fxbus-point-detail span { white-space: normal; }
  .fxbus-seat-section { padding: 11px; border-radius: 18px; }
  .fxbus-seat-section > header { align-items: flex-start; flex-direction: column; }
  .fxbus-seat-section > header h3 { font-size: 16px; }
  .fxbus-deck-tabs { width: 100%; }
  .fxbus-deck-tabs button { flex: 1; min-width: 0; min-height: 36px; }
  .fxbus-deck-wrap { grid-template-columns: 1fr; gap: 10px; }
  .fxbus-coach-stage { margin: 0 -5px; padding: 8px 8px 14px; }
  .fxbus-coach { min-width: 360px; min-height: 375px; padding: 80px 29px 40px; border-radius: 46px 46px 21px 21px; }
  .fxbus-cockpit { height: 60px; }
  .fxbus-windshield { right: 32px; left: 32px; height: 34px; }
  .fxbus-seat-bay { min-height: 235px; padding: 16px 9px 20px; }
  .fxbus-seat-grid { grid-auto-rows: 35px; grid-template-columns: repeat(var(--cols, 5), 37px); gap: 7px; }
  .fxbus-seat { min-width: 34px; min-height: 32px; }
  .fxbus-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding: 12px; }
  .fxbus-legend h4, .fxbus-legend > small { grid-column: 1 / 3; }
  .fxbus-legend p { margin: 7px 0; }
  .fxbus-selected { align-items: flex-start; flex-direction: column; gap: 6px; }
  .fxbus-form-grid, .fxbus-form-grid.contact { grid-template-columns: 1fr 1fr; gap: 9px; }
  .fxbus-pax, .fxbus-contact, .fxbus-fare, .fxbus-coupon, .fxbus-policy { padding: 15px; border-radius: 17px; }
  .fxbus-review-grid { grid-template-columns: 1fr; }
  .fxbus-sticky { min-height: calc(76px + env(safe-area-inset-bottom)); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .fxbus-sticky strong { font-size: 20px; }
  .fxbus-sticky button { min-width: 150px; min-height: 48px; padding: 0 15px; border-radius: 14px; font-size: 11px; }
}

@media (max-width: 390px) {
  .fxbus-card-meta { grid-template-columns: 1fr; }
  .fxbus-timeline { grid-template-columns: 64px minmax(65px,1fr) 64px; }
  .fxbus-form-grid, .fxbus-form-grid.contact { grid-template-columns: 1fr; }
  .fxbus-input.compact { max-width: none; }
  .fxbus-coach { min-width: 335px; padding-right: 24px; padding-left: 24px; }
  .fxbus-seat-grid { grid-template-columns: repeat(var(--cols, 5), 34px); gap: 6px; }
  .fxbus-sticky button { min-width: 136px; }
}

@media (prefers-reduced-motion: reduce) {
  .fxbus-card, .fxbus-drawer, .fxbus-seat { transition: none; animation: none; }
}

/* BUS20 apply/remove control on the review screen. The panel it sits in used to
   be a static "no coupon required" notice, so it had no input styling at all. */
.fxbus-coupon-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.fxbus-coupon-row input{flex:1 1 120px;min-width:0;height:42px;padding:0 12px;border:1px solid #cbd9e6;
  border-radius:11px;background:#fff;color:#0f2740;font-size:13px;font-weight:850;letter-spacing:.06em;
  text-transform:uppercase;outline:0}
.fxbus-coupon-row input:focus{border-color:#3f9c6d;box-shadow:0 0 0 3px rgba(63,156,109,.15)}
.fxbus-coupon-row input:disabled{color:#5b7285;background:#f2f7f4;border-color:#cfe3d7}
.fxbus-coupon-row button{height:42px;padding:0 18px;border:0;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#0f8a4f,#12b568);box-shadow:0 8px 18px rgba(15,138,79,.24);
  font-size:12.5px;font-weight:900;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.fxbus-coupon-row button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,138,79,.3)}
.fxbus-coupon-row button:disabled{opacity:.6;cursor:progress}
.fxbus-coupon-row #fxBusCouponRemove{color:#4b6076;background:#fff;border:1px solid #cbd9e6;box-shadow:none}
.fxbus-coupon-row #fxBusCouponRemove:hover{background:#f6f9fb;transform:none;box-shadow:none}
/* the discount line in the fare summary reads as money coming off */
#fxBusCouponLine b{color:#0f8a4f}

/* =====================================================================
   FLYX 2026-08-27 - bus search box, city list and iOS zoom.

   Three problems this block closes:

   1) Every field on this page computed under 16px on a phone, which is the
      threshold iOS uses to decide whether to magnify the page on focus. It
      magnified and never came back, and the date sheet - which is fixed and
      full-width against the layout viewport - lost its right-hand columns.
      Fields are 16px on phones now, so the zoom never fires. The site-wide
      guard in assets/flyx-viewport-zoom-guard.js is the second line of defence
      for anything this file does not cover.

   2) The suggestion dropdown was half a card wide, so city names wrapped onto
      two lines, and it drew two bullets per row - one from the markup, one from
      a :before in flyx-bus-content-v2.css. One marker now, names on one line.

   3) The search card read as two anonymous boxes. Labels and placeholders are
      legible on a phone instead of clipped mid-word, and picking a city on a
      phone opens a proper sheet that says which end of the journey it is for.
   ===================================================================== */

/* --- hero panel width -------------------------------------------------

   The dark hero card is drawn by .fxbus-hero:before in flyx-bus-booking.css,
   whose inset was written for the original .fxbus-wrap of 1180px - it insets
   by (100vw - 1220px)/2, i.e. the wrap plus a 20px bleed each side.

   Line 18 of this file later widened .fxbus-wrap to 1440px and never moved the
   card with it. On anything wider than about 1270px the heading, the paragraph
   and the whole search form therefore hung off both edges of the card - at
   1870px the card ran 325->1545 while the content ran 211->1651, so ~78px of
   white-on-white text sat outside the panel on the left and the search card
   overhung it on the right.

   Same 20px bleed, recomputed from the wrap that is actually in force. 100%
   rather than 100vw so this and .fxbus-wrap measure against the same box -
   100vw includes the scrollbar and would reintroduce a ~7px drift per side.

   min-width:769px matters: flyx-bus-booking.css deliberately gives the phone
   hero inset:0 so it bleeds to both edges, and this file loads after it, so an
   unscoped rule here would win and put a 14px gutter back on mobile. */
@media (min-width: 769px) {
  .fxbus-hero:before {
    inset: 16px max(14px, calc((100% - 1480px) / 2));
  }
}

/* --- suggestion rows (desktop dropdown and mobile sheet share these) --- */
.fxbus-suggest .fxbus-city-row,
.fxbus-citysheet .fxbus-city-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 13px 14px;
  border: 0; border-radius: 12px;
  color: var(--fxbus-ink); background: #fff;
  text-align: left; font-size: 15px; font-weight: 800; line-height: 1.25;
  cursor: pointer;
}
.fxbus-suggest .fxbus-city-row:before,
.fxbus-citysheet .fxbus-city-row:before {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px;
  border: 3px solid var(--fxbus-blue); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--fxbus-sky);
}
.fxbus-suggest .fxbus-city-row.is-recent:before,
.fxbus-citysheet .fxbus-city-row.is-recent:before {
  border-color: var(--fxbus-orange); box-shadow: 0 0 0 4px #fff0ea;
}
/* One line, ellipsis at the edge - never a name broken across two rows. */
.fxbus-city-name {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fxbus-suggest .fxbus-city-row:hover,
.fxbus-suggest .fxbus-city-row:focus-visible,
.fxbus-citysheet .fxbus-city-row:hover,
.fxbus-citysheet .fxbus-city-row:focus-visible {
  outline: 0; color: #075db6; background: var(--fxbus-sky);
}
.fxbus-city-group {
  padding: 10px 14px 5px;
  color: var(--fxbus-muted); font-size: 10px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
}
.fxbus-city-hint, .fxbus-no-city {
  padding: 18px 14px; color: var(--fxbus-muted);
  font-size: 13px; font-weight: 700; text-align: center;
}

/* --- mobile city sheet ------------------------------------------------- */
.fxbus-citysheet { position: fixed; inset: 0; z-index: 2147482900; display: flex; }
.fxbus-citysheet[hidden] { display: none; }
.fxbus-citysheet-scrim { position: absolute; inset: 0; background: rgba(11, 31, 51, .45); }
.fxbus-citysheet-panel {
  position: absolute; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  max-height: 92vh;
  border-radius: 22px 22px 0 0;
  background: var(--fxbus-surface);
  box-shadow: 0 -18px 46px rgba(11, 31, 51, .3);
  padding-bottom: env(safe-area-inset-bottom);
}
.fxbus-citysheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px 12px;
}
.fxbus-citysheet-title { color: var(--fxbus-ink); font-size: 18px; font-weight: 900; }
.fxbus-citysheet-close {
  display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center;
  border: 0; border-radius: 50%;
  color: var(--fxbus-ink); background: #f1f5f9;
  font-size: 20px; font-weight: 900; line-height: 1; cursor: pointer;
}
.fxbus-citysheet-search { padding: 0 16px 12px; }
.fxbus-citysheet-search input {
  width: 100%; height: 52px; padding: 0 15px;
  border: 1px solid var(--fxbus-border); border-radius: 14px;
  outline: 0; color: var(--fxbus-ink); background: #fff;
  /* 16px is not a style choice here - anything smaller and iOS zooms. */
  font-size: 16px; font-weight: 750;
}
.fxbus-citysheet-search input:focus {
  border-color: #4b99e8; box-shadow: 0 0 0 3px rgba(28, 125, 226, .12);
}
.fxbus-citysheet-list {
  flex: 1 1 auto; min-height: 220px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 10px 14px;
}
body.fxbus-citysheet-open { overflow: hidden; }

/* --- phones ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Every focusable control on the page, at the size iOS needs to leave the
     zoom alone. The fields are tall enough that 16px also just reads better. */
  .fxbus-field input,
  .fxbus-input input, .fxbus-input select,
  .fxbus-select select,
  .fxbus-coupon-row input {
    font-size: 16px;
  }
  .fxbus-field { min-height: 66px; padding: 9px 11px; }
  .fxbus-field input { font-weight: 800; }
  /* The placeholder used to be cut mid-word ("Where will you boa"). Short
     prompts that fit, and an ellipsis if a long city name still overflows. */
  .fxbus-field input::placeholder { color: #93a3b5; font-weight: 700; }
  .fxbus-field input { text-overflow: ellipsis; }
  .fxbus-field label, .fxbus-input label, .fxbus-select label {
    margin-bottom: 4px; font-size: 10px; letter-spacing: .09em;
  }
  .fxbus-search { gap: 8px; padding: 9px; }
  .fxbus-search-btn { height: 66px; font-size: 15px; }
  .fxbus-input input, .fxbus-input select { height: 48px; }

  /* The inline dropdown is the desktop affordance; phones get the sheet. */
  .fxbus-suggest { display: none !important; }
}

/* =====================================================================
   FLYX 2026-08-27 - seat map redrawn in the layout Indian bus travellers
   already know from redBus.

   Before: every seat was a blue gradient chip carrying its own number and a
   6.5px fare, so a 40-berth sleeper read as a wall of near-identical blue
   boxes and the state of a seat (free / ladies / sold / picked) was carried
   almost entirely by hue.

   Now the shape does the work. A seater is a short outlined chair, a sleeper
   is a tall berth, and state is outline + fill:

     available   green outline, white body
     selected    solid green
     ladies      pink outline and a female figure on the seat face
     booked      flat grey, an X, and the word Sold where the price was

   The fare moved below the seat and the seat number moved into the tooltip,
   the aria-label and the "Your seats" pills - the face of a 32px seat is not
   a place for two lines of 7px type.

   Positioning is untouched: --row/--col/--len/--wid still come straight from
   the operator layout, so this is purely how the same grid is painted.
   ===================================================================== */

:root {
  --fxseat-free: #0fa958;
  --fxseat-free-soft: #eaf7f0;
  --fxseat-lady: #e5218a;
  --fxseat-lady-soft: #fdeef6;
  --fxseat-sold-line: #d3d8de;
  --fxseat-sold-fill: #eef0f3;
  --fxseat-sold-ink: #9aa4b0;
}

/* Rows are tall enough for the chair plus its fare; a sleeper spans two rows
   and its shape simply grows into the extra height. */
.fxbus-seat-grid {
  grid-auto-rows: 44px;
  grid-template-columns: repeat(var(--cols, 5), 42px);
  gap: 10px;
}

/* The button is now just a column: shape on top, fare underneath. Every bit of
   the old chip styling has to be unset or it shows through. */
.fxbus-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: transform .14s ease;
}
.fxbus-seat::before { content: none; }
.fxbus-seat:hover:not(:disabled) { transform: none; box-shadow: none; }
.fxbus-seat:hover:not(:disabled) .fxbus-seat-shape { transform: translateY(-2px); }
.fxbus-seat:focus-visible { outline: 0; }
.fxbus-seat:focus-visible .fxbus-seat-shape { outline: 3px solid #ff8b36; outline-offset: 2px; }

.fxbus-seat-shape {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 30px;
  min-height: 26px;
  border: 2px solid var(--fxseat-free);
  border-radius: 8px 8px 6px 6px;
  background: #fff;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
/* The cushion: the lighter block across the foot of the chair. */
.fxbus-seat-shape::before {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--fxseat-free-soft);
}
/* A sleeper is the same chair stretched, with the cushion running down one
   side instead of across the foot - it reads as a berth, not a tall seat. */
.fxbus-seat.sleeper .fxbus-seat-shape { width: 32px; border-radius: 9px; }
.fxbus-seat.sleeper .fxbus-seat-shape::before {
  top: 4px; right: auto; bottom: 4px; left: 4px;
  width: 7px; height: auto; border-radius: 4px;
}

.fxbus-seat .fxbus-seat-fare {
  flex: 0 0 auto;
  margin: 0;
  color: #6b7684;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  opacity: 1;
}

/* --- ladies ------------------------------------------------------------
   Data note: the operator sends a single Ladies_Seat flag, so female-only is
   the only gender state we can honestly show. There is no male-only row in
   the legend because there is no male-only flag to drive it. */
.fxbus-seat.ladies .fxbus-seat-shape { border-color: var(--fxseat-lady); }
.fxbus-seat.ladies .fxbus-seat-shape::before { background: var(--fxseat-lady-soft); }
.fxbus-seat.ladies .fxbus-seat-shape::after,
.fxbus-seat.selected .fxbus-seat-shape::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 13px;
  transform: translate(-50%, -60%);
}
.fxbus-seat.ladies .fxbus-seat-shape::after {
  background: var(--fxseat-lady);
  /* head + dress: a female figure, drawn as a mask so it inherits no colour
     of its own and stays crisp at 11px. */
  -webkit-mask: radial-gradient(circle at 50% 18%, #000 21%, transparent 22%),
                conic-gradient(from 180deg at 50% 44%, #000 0 100%);
  mask: radial-gradient(circle at 50% 18%, #000 21%, transparent 22%),
        conic-gradient(from 180deg at 50% 44%, #000 0 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* --- selected ---------------------------------------------------------- */
.fxbus-seat.selected .fxbus-seat-shape {
  border-color: var(--fxseat-free);
  background: var(--fxseat-free);
  box-shadow: 0 5px 12px rgba(15, 169, 88, .3);
}
.fxbus-seat.selected .fxbus-seat-shape::before { background: rgba(255, 255, 255, .34); }
/* A tick, so a picked seat is not only "the green one". */
.fxbus-seat.selected .fxbus-seat-shape::after {
  width: 11px; height: 7px;
  border: 0 solid #fff;
  border-width: 0 0 2.5px 2.5px;
  background: none;
  transform: translate(-50%, -75%) rotate(-45deg);
  -webkit-mask: none; mask: none;
}
/* The fare on a picked seat was green on the seat's own green fill wherever the berth ran into it
   (admin review showed the price as green on green). A small dark pill reads on either background. */
.fxbus-seat.selected .fxbus-seat-fare { color: #fff; font-weight: 900; background: #047857; border-radius: 6px; padding: 0 4px; }

/* --- sold -------------------------------------------------------------- */
.fxbus-seat.booked { cursor: not-allowed; }
.fxbus-seat.booked .fxbus-seat-shape {
  border-color: var(--fxseat-sold-line);
  background: var(--fxseat-sold-fill);
  box-shadow: none;
  filter: none;
}
.fxbus-seat.booked .fxbus-seat-shape::before { background: #e3e6ea; }
/* The X. Two gradients rather than two elements, because ::after is already
   spoken for by the ladies figure and the selected tick. */
.fxbus-seat.booked .fxbus-seat-shape::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  background:
    linear-gradient(45deg, transparent 44%, var(--fxseat-sold-ink) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--fxseat-sold-ink) 44% 56%, transparent 56%);
  transform: translate(-50%, -60%);
  -webkit-mask: none; mask: none;
}
.fxbus-seat.booked .fxbus-seat-fare { color: var(--fxseat-sold-ink); font-weight: 750; }

/* --- driver ------------------------------------------------------------ */
.fxbus-steering {
  position: absolute;
  top: 11px; right: 20px;
  width: 26px; height: 26px;
  border: 2.5px solid #94a3b3;
  border-radius: 50%;
  background:
    radial-gradient(circle, #94a3b3 0 3.5px, transparent 3.5px),
    linear-gradient(0deg, transparent 46%, #94a3b3 46% 54%, transparent 54%),
    linear-gradient(90deg, transparent 46%, #94a3b3 46% 54%, transparent 54%);
}

/* --- legend ------------------------------------------------------------
   Both icon variants per row, seater then sleeper, so the shapes are learnable
   before you look at the deck. */
.fxbus-legend p { align-items: center; gap: 8px; font-size: 10px; }
.fxbus-legend p span { margin-left: 2px; }
.fxbus-dot {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 19px; height: 16px;
  border: 2px solid var(--fxseat-free);
  border-radius: 6px 6px 4px 4px;
  background: #fff;
  box-shadow: none;
}
.fxbus-dot::before {
  content: "";
  position: absolute;
  right: 2px; bottom: 2px; left: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--fxseat-free-soft);
}
.fxbus-dot.berth { width: 13px; height: 24px; border-radius: 6px; }
.fxbus-dot.berth::before { top: 3px; right: auto; bottom: 3px; left: 3px; width: 4px; height: auto; border-radius: 3px; }
.fxbus-dot.sel { border-color: var(--fxseat-free); background: var(--fxseat-free); }
.fxbus-dot.sel::before { background: rgba(255, 255, 255, .34); }
.fxbus-dot.lady { border-color: var(--fxseat-lady); background: #fff; }
.fxbus-dot.lady::before { background: var(--fxseat-lady-soft); }
.fxbus-dot.used { border-color: var(--fxseat-sold-line); background: var(--fxseat-sold-fill); }
.fxbus-dot.used::before { background: #e3e6ea; }

/* --- phones ------------------------------------------------------------
   Slightly wider columns and a 44px-tall touch target per seat: a mis-tap here
   costs a wrong berth on an overnight bus. */
@media (max-width: 768px) {
  .fxbus-seat-grid {
    grid-auto-rows: 46px;
    grid-template-columns: repeat(var(--cols, 5), 44px);
    gap: 11px;
  }
  .fxbus-seat-shape { width: 32px; }
  .fxbus-seat.sleeper .fxbus-seat-shape { width: 34px; }
  .fxbus-seat .fxbus-seat-fare { font-size: 9.5px; }
  .fxbus-legend { grid-template-columns: 1fr; }
  .fxbus-legend p { font-size: 11px; }
}

/* =====================================================================
   FLYX 2026-08-27b - the coach, drawn nose-up.

   The previous frame was a wide glossy shell with a windshield, tail lights
   and a chrome ring, and the grid inside it was transposed - lanes ran down
   the CSS rows and bays across the CSS columns. The result was an eleven-wide,
   four-deep sprawl that was not the shape of any bus, with the sleeper berths
   standing off to one side. You could not tell where a seat was because the
   picture carried no orientation.

   This is a plain narrow body seen from above: front at the top with the
   wheel, aisle down the middle, seats numbered on their faces and berths
   running front-to-back. Roughly five lanes across and as many bays deep as
   the operator sends, so it scrolls down like a bus, not sideways.

   The decorative shell is gone on purpose - it cost several gradients and two
   inset rings per repaint and told the traveller nothing.
   ===================================================================== */

.fxbus-deck-wrap { grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; }
.fxbus-coach-stage {
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 6px 10px 14px;
}

.fxbus-coach {
  position: relative;
  box-sizing: border-box;
  width: max-content;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid #cbd7e2;
  /* Rounded nose, squarer tail - the outline alone says which end is front. */
  border-radius: 40px 40px 16px 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(22, 61, 93, .1);
}

.fxbus-coach-nose {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 14px;
  border-bottom: 2px dashed #e3eaf1;
}
.fxbus-front-badge {
  position: static;
  padding: 0;
  color: #7d8ea1;
  background: none;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: none;
}
.fxbus-steering {
  position: absolute;
  top: 50%; right: 13px;
  width: 24px; height: 24px;
  margin-top: -12px;
  border: 2.5px solid #9aa9b8;
  border-radius: 50%;
  background:
    radial-gradient(circle, #9aa9b8 0 3px, transparent 3px),
    linear-gradient(0deg, transparent 45%, #9aa9b8 45% 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, #9aa9b8 45% 55%, transparent 55%);
}
.fxbus-coach-tail { height: 10px; border-top: 2px dashed #e3eaf1; }

.fxbus-seat-bay {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 14px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* The aisle. Lane 2 carries no seats on a 2+2, so this sits in the empty
   column and makes the split explicit instead of leaving a mystery gap. */
.fxbus-seat-bay::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 14px; bottom: 14px; left: 50%;
  width: 30px;
  border-radius: 6px;
  border-right: 1px dashed #dfe6ed;
  border-left: 1px dashed #dfe6ed;
  background: #fafbfd;
  opacity: 1;
  transform: translateX(-50%);
}

/* Lanes across, bays down. */
.fxbus-seat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--lanes, 5), 46px);
  grid-auto-rows: 44px;
  gap: 8px;
  justify-content: center;
  min-width: max-content;
}
.fxbus-seat {
  grid-column: calc(var(--lane) + 1) / span var(--across);
  grid-row: calc(var(--bay) + 1) / span var(--long);
}

/* The number lives on the seat face - "which seat is where" was the whole
   complaint, and a tooltip does not answer it on a touchscreen. */
.fxbus-seat-shape > b {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  max-width: 100%;
  padding: 0 2px;
  color: #0d7a44;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxbus-seat-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
}
.fxbus-seat.sleeper .fxbus-seat-shape { width: 36px; align-items: flex-start; padding-top: 7px; }
.fxbus-seat.sleeper .fxbus-seat-shape > b { writing-mode: horizontal-tb; }

.fxbus-seat.selected .fxbus-seat-shape > b { color: #fff; }
.fxbus-seat.ladies .fxbus-seat-shape > b { color: #b81a6e; }
.fxbus-seat.booked .fxbus-seat-shape > b { display: none; }

/* The female marker moves to a corner pip so it never fights the number. */
.fxbus-seat.ladies .fxbus-seat-shape::after {
  top: 3px; left: auto; right: 3px;
  width: 6px; height: 7px;
  transform: none;
}
.fxbus-seat.selected .fxbus-seat-shape::after { content: none; }

/* --- performance -------------------------------------------------------
   The drawer opened slowly because the scrim ran a full-viewport
   backdrop-filter over fifty-plus result cards (3,000+ nodes), and the sticky
   filter rail ran a second blur underneath it. Every frame re-rasterised the
   whole page behind the modal. A flat scrim looks near-identical and costs
   nothing, and `contain` stops the drawer's own layout from escaping. */
.fxbus-overlay { backdrop-filter: none; background: rgba(2, 15, 30, .62); }
.fxbus-drawer { contain: layout paint; box-shadow: 0 18px 50px rgba(0, 15, 35, .42); }
body.fxbus-lock .fxbus-filter, .fxbus-overlay ~ * .fxbus-filter { backdrop-filter: none; }
.fxbus-filter { backdrop-filter: none; background: #fff; }

@media (max-width: 768px) {
  .fxbus-deck-wrap { grid-template-columns: minmax(0, 1fr); }
  .fxbus-coach-stage { padding: 4px 0 12px; }
  .fxbus-seat-grid {
    grid-template-columns: repeat(var(--lanes, 5), 48px);
    grid-auto-rows: 46px;
    gap: 9px;
  }
  .fxbus-seat-shape { width: 36px; }
  .fxbus-seat.sleeper .fxbus-seat-shape { width: 38px; }
  .fxbus-seat-shape > b { font-size: 9px; }
}

/* =====================================================================
   FLYX 2026-08-27e - modal stacking and a recognisable top-view coach.

   The live operator grid stays untouched. These rules only paint the body
   around it: panoramic glass and a driver cockpit at the rounded nose,
   window rails and road wheels down the sides, then lamps, grille and bumper
   at the squarer rear. This keeps the map useful while making its direction
   readable before a traveller studies the labels.
   ===================================================================== */

/* The shared header and mobile dock use near-maximum z-index values. Lower
   only those chrome layers while this aria-modal workspace is open so its
   title and close control cannot disappear behind the top bar. */
body.fxbus-lock #header,
body.fxbus-lock .mobile-bottom-nav {
  z-index: 10000 !important;
}

.fxbus-coach-stage {
  padding: 12px 24px 24px;
}

.fxbus-coach {
  isolation: isolate;
  overflow: visible;
  border-color: #6f8ba1;
  border-radius: 48px 48px 18px 18px;
  background:
    linear-gradient(90deg, #b9ccd9 0 8px, #edf4f7 8px 14px, #fff 14px calc(100% - 14px), #edf4f7 calc(100% - 14px) calc(100% - 8px), #b9ccd9 calc(100% - 8px));
  box-shadow:
    inset 0 0 0 3px #e8f0f5,
    inset 0 0 22px rgba(37, 79, 107, .12),
    0 13px 27px rgba(20, 54, 82, .18);
}
.fxbus-coach::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 42px 42px 14px 14px;
  pointer-events: none;
}
.fxbus-coach::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 30px;
  bottom: -6px;
  left: 30px;
  height: 8px;
  border-radius: 2px 2px 8px 8px;
  background: linear-gradient(180deg, #526d81, #132f46 70%);
  box-shadow: 0 4px 7px rgba(5, 24, 39, .28);
}

/* Front shell: windscreen, mirrors and the lower-deck driver's controls. */
.fxbus-coach-nose {
  position: relative;
  z-index: 4;
  height: 84px;
  padding: 0 14px;
  overflow: visible;
  border-bottom: 1px solid #aebfcb;
  border-radius: 45px 45px 10px 10px;
  background: linear-gradient(180deg, #c4d5e0 0, #eff5f8 58%, #dbe7ee 100%);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .9);
}
.fxbus-coach-nose::before,
.fxbus-coach-nose::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 32px;
  width: 10px;
  height: 18px;
  border: 2px solid #557188;
  background: linear-gradient(135deg, #d9edf5, #6da4bf);
  box-shadow: 0 2px 5px rgba(16, 46, 68, .2);
}
.fxbus-coach-nose::before { left: -10px; border-radius: 8px 3px 3px 8px; }
.fxbus-coach-nose::after { right: -10px; border-radius: 3px 8px 8px 3px; }

.fxbus-windshield {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 21px;
  left: 21px;
  height: 39px;
  overflow: hidden;
  border: 2px solid #496b83;
  border-radius: 34px 34px 10px 10px;
  background:
    linear-gradient(112deg, transparent 11%, rgba(255, 255, 255, .36) 28%, transparent 43%),
    linear-gradient(145deg, #112f4a, #276d96 57%, #8fc9df);
  box-shadow: inset 0 0 0 3px rgba(224, 244, 252, .16), 0 4px 8px rgba(13, 47, 71, .24);
}
.fxbus-windshield::before {
  content: "";
  position: absolute;
  right: 13%;
  bottom: 5px;
  width: 29%;
  height: 1px;
  border-radius: 2px;
  background: rgba(220, 239, 247, .65);
  transform: rotate(-12deg);
  transform-origin: right center;
}
.fxbus-windshield i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 2px;
  background: rgba(180, 220, 235, .52);
  transform: rotate(3deg);
}
.fxbus-front-badge {
  position: absolute;
  z-index: 6;
  top: 16px;
  left: 50%;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #f3fbff;
  background: rgba(7, 35, 57, .76);
  box-shadow: 0 3px 9px rgba(4, 27, 44, .22);
  font-size: 7.5px;
  letter-spacing: .13em;
  transform: translateX(-50%);
}
.fxbus-dashboard {
  position: absolute;
  z-index: 4;
  top: 48px;
  right: 31px;
  left: 31px;
  height: 8px;
  border: 1px solid #8298a8;
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #61798b, #b3c3ce);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.fxbus-dashboard i {
  position: absolute;
  top: 2px;
  left: 22%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #3d566a;
  box-shadow: 38px 0 0 #3d566a;
}
.fxbus-driver-seat {
  position: absolute;
  z-index: 5;
  top: 59px;
  right: 18px;
  width: 28px;
  height: 20px;
  border: 2px solid #657f92;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(145deg, #d5e2e9, #9fb5c3);
  box-shadow: inset 0 -5px 0 #879ead, 0 2px 4px rgba(28, 60, 82, .17);
}
.fxbus-driver-seat::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 5px;
  left: 5px;
  height: 5px;
  border-radius: 4px;
  background: #eef5f8;
}
.fxbus-steering {
  position: absolute;
  z-index: 7;
  top: 40px;
  right: 15px;
  width: 29px;
  height: 29px;
  margin: 0;
  border: 3px solid #243f54;
  border-radius: 50%;
  background:
    radial-gradient(circle, #243f54 0 3px, transparent 3.5px),
    linear-gradient(90deg, transparent 46%, #36566e 46% 54%, transparent 54%),
    linear-gradient(30deg, transparent 47%, #36566e 47% 53%, transparent 53%),
    linear-gradient(-30deg, transparent 47%, #36566e 47% 53%, transparent 53%),
    radial-gradient(circle at 42% 36%, #f5f8fa, #b8c7d1 68%);
  box-shadow: inset 0 0 0 1px #6d8799, 0 2px 4px rgba(20, 48, 67, .28);
}
.fxbus-steering::before {
  content: "";
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
  border: 1px solid rgba(36, 63, 84, .55);
  border-radius: 50%;
  background: none;
  transform: none;
}
.fxbus-steering::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1b3448;
  transform: translate(-50%, -50%);
}
.fxbus-door {
  position: absolute;
  z-index: 6;
  top: 53px;
  right: -3px;
  bottom: auto;
  width: 14px;
  height: 38px;
  border: 2px solid #668398;
  border-radius: 5px 9px 9px 5px;
  background: linear-gradient(90deg, #a9bfcd, #f4f8fa 62%);
  box-shadow: inset 4px 0 0 #8ea6b5, 0 2px 4px rgba(21, 53, 75, .18);
}
.fxbus-door::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  left: 4px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(145deg, #3f789a, #b8deeb);
}
.fxbus-door::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #29485e;
}

/* Side glazing and four tyres sit outside the supplier seat grid. */
.fxbus-window-rail {
  position: absolute;
  z-index: 3;
  top: 85px;
  bottom: 42px;
  width: 9px;
  border: 1px solid #66869d;
  background: repeating-linear-gradient(180deg, #78b3d0 0 25px, #d9e8ef 25px 29px);
  box-shadow: inset 0 0 0 2px rgba(235, 248, 252, .35);
}
.fxbus-window-rail--left { left: 4px; border-radius: 5px 2px 2px 5px; }
.fxbus-window-rail--right { right: 4px; border-radius: 2px 5px 5px 2px; }
.fxbus-wheel {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 47px;
  border: 2px solid #071520;
  border-radius: 8px;
  background: repeating-linear-gradient(0deg, #10212e 0 5px, #344958 5px 8px);
  box-shadow: inset 0 0 0 2px #536673, 0 4px 8px rgba(4, 17, 27, .3);
}
.fxbus-wheel--lf { top: 125px; left: -9px; }
.fxbus-wheel--rf { top: 125px; right: -9px; }
.fxbus-wheel--lr { bottom: 62px; left: -9px; }
.fxbus-wheel--rr { right: -9px; bottom: 62px; }

.fxbus-seat-bay {
  min-height: 0;
  margin: 0 13px;
  padding: 17px 11px 19px;
  border: 1px solid #d3dfe7;
  background:
    repeating-linear-gradient(0deg, rgba(244, 248, 250, .7) 0 43px, rgba(226, 235, 241, .55) 43px 44px),
    linear-gradient(90deg, #eef4f7, #fff 15%, #fff 85%, #eef4f7);
  box-shadow: inset 0 0 16px rgba(28, 72, 101, .08);
}
.fxbus-seat-bay::before {
  top: 17px;
  bottom: 19px;
  width: 31px;
  border-color: #d5e0e8;
  background: linear-gradient(90deg, #edf2f5, #fafcfd 50%, #edf2f5);
}

/* Rear shell: two lamp clusters, a central REAR plate, ventilation slots and
   the darker bumper drawn by .fxbus-coach::after. */
.fxbus-coach-tail {
  position: relative;
  z-index: 4;
  height: 43px;
  border-top: 1px solid #9fb2c0;
  border-radius: 5px 5px 15px 15px;
  background: linear-gradient(180deg, #dce7ed, #aebfca 72%, #8fa4b2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .76);
}
.fxbus-coach-tail::before,
.fxbus-coach-tail::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 27px;
  height: 9px;
  border: 2px solid #6f2624;
  border-radius: 5px;
  background: linear-gradient(90deg, #b71f22 0 46%, #ff8c36 46% 68%, #f5d34d 68%);
  box-shadow: 0 0 7px rgba(238, 57, 42, .45), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.fxbus-coach-tail::before { left: 18px; }
.fxbus-coach-tail::after { right: 18px; transform: scaleX(-1); }
.fxbus-coach-tail span {
  position: absolute;
  top: 7px;
  left: 50%;
  min-width: 39px;
  padding: 3px 6px;
  border: 1px solid #60788a;
  border-radius: 4px;
  color: #edf5f8;
  background: #486276;
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .14em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.fxbus-coach-tail i {
  position: absolute;
  right: 33%;
  bottom: 8px;
  left: 33%;
  height: 7px;
  border-top: 1px solid #687f90;
  border-bottom: 1px solid #687f90;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #536d7f 4px 6px);
}

@media (max-width: 768px) {
  .fxbus-coach-stage { padding: 8px 16px 20px; }
  .fxbus-coach-nose { height: 80px; }
  .fxbus-window-rail { top: 81px; }
  .fxbus-wheel--lf, .fxbus-wheel--rf { top: 120px; }
  .fxbus-seat-bay { margin-right: 12px; margin-left: 12px; padding-right: 9px; padding-left: 9px; }
  .fxbus-coach-tail { height: 41px; }
  .fxbus-coach-tail::before { left: 15px; }
  .fxbus-coach-tail::after { right: 15px; }
}

/* =====================================================================
   FLYX 2026-08-28 - off-screen bus results cost nothing to keep.

   Same treatment the flight result list gets in flightsearch.php: every bus
   the operator returns is rendered into the DOM at once, and the browser laid
   out and painted all of them on every reflow regardless of where the viewport
   was. content-visibility:auto lets it skip layout and paint for a card until
   that card is near the screen - most of what a virtualised list buys, without
   removing anything from the DOM, so sorting, the quick filters and Ctrl+F all
   still see every result.

   contain-intrinsic-size gives a placeholder height so the scrollbar is honest
   before a card has been seen. 240px is the measured card height on a live
   result (237px); `auto` makes the browser remember the real height afterwards,
   so any error self-corrects on first view.
   ===================================================================== */
@supports (content-visibility: auto) {
  .fxbus-list .fxbus-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
  }
  /* The top of the list is on screen from the start. */
  .fxbus-list .fxbus-card:nth-of-type(-n+4) {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
}

/* =====================================================================
   FLYX 2026-09-10 - 320px windows (iPad Slide Over, older Galaxy Fold covers).

   The route row is `1fr 40px 1fr`, but a grid item never shrinks below its
   content, so at 320px the To field and the Search button ran 14px past the
   screen edge. Letting the tracks and fields shrink keeps exactly the same
   layout. It starts below 340px: the 344px Galaxy Fold cover already fits, and
   no phone 360px or wider is affected.
   ===================================================================== */
@media (max-width: 339.98px) {
  .fxbus-search { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .fxbus-search > * { min-width: 0; }
  .fxbus-field { gap: 7px; padding-left: 8px; padding-right: 8px; }
}
/* flyx-bus-results-v4.css */
/* =====================================================================
   Bus search results - redesign 12-Sep-2026.

   Markup: buspage.php #fxBusResults. Rendering: flyx-bus-booking.js, the
   "Results list" block. Everything here is a new .fxbr-* namespace so none
   of the old .fxbus-card / .fxbus-filter rules in flyx-bus-booking.css and
   flyx-bus-premium-v3.css can reach it (premium-v3 still styles the seat
   drawer, which is untouched).

   Layout
     >= 900px  filters in a sticky left rail, sort cards above the list
     <  900px  sticky toolbar (Filters button + sort pills), filters open as
               a bottom sheet, quick chips under the toolbar
   iPad / Fold / Duo at 769-1023px are scaled to a 1024px desktop by
   fx_large_touch.php, so they get the rail, not a separate tablet design.

   The CARD follows the width of the list, not the viewport (container
   queries), so one card works in a 280px Fold cover screen, a 700px list
   beside the rail and a 1100px list on a wide monitor. Browsers without
   container queries get the compact card, which is correct at any width.
   ===================================================================== */

.fxbr {
  --b: #0967d9;
  --bd: #0752b3;
  --ink: #0b1f33;
  --mut: #5f7186;
  --line: #dde7f0;
  --soft: #f6f9fc;
  --ok: #067a55;
  --okbg: #e4f5ec;
  --warn: #c2410c;
  --warnbg: #fff1e6;
  --top: var(--flyx-desktop-header-offset, 76px);
  margin: 6px 0 34px;
  color: var(--ink);
  scroll-margin-top: calc(var(--top) + 10px);
}
.fxbr[hidden], .fxbr [hidden] { display: none !important; }
.fxbr svg { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.fxbr button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.fxbr button:focus-visible, .fxbr input:focus-visible, .fxbr a:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
.fxbr h2, .fxbr h3, .fxbr p, .fxbr ul { margin: 0; }

/* ---- heading ---------------------------------------------------------- */
.fxbr-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; }
.fxbr-title { min-width: 0; }
.fxbr-title h2 { color: var(--ink); font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.fxbr-title p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px; color: var(--mut); font-size: 16px; font-weight: 600; }
.fxbr a.fxbr-modify { color: var(--b) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.fxbr-modify:hover { text-decoration: underline; }
.fxbr-days { display: inline-flex; gap: 8px; }
.fxbr-days button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fxbr-days button:hover:not(:disabled) { border-color: #b8d3ee; color: var(--b); }
.fxbr-days button:disabled { opacity: .45; cursor: default; }

/* ---- layout ----------------------------------------------------------- */
.fxbr-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; }
.fxbr-main { min-width: 0; }

/* ---- sort ------------------------------------------------------------- */
.fxbr-toolbar { margin: 0 0 14px; }
.fxbr-filter-btn { display: none; }
.fxbr-sort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fxbr-sortbtn { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(20, 58, 88, .04); transition: border-color .15s, box-shadow .15s; }
.fxbr-sortbtn:hover { border-color: #b8d3ee; }
.fxbr-sortbtn i { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #eaf3ff; color: var(--b); font-size: 19px; font-style: normal; }
.fxbr-sortbtn span { min-width: 0; }
.fxbr-sortbtn small { display: block; color: var(--mut); font-size: 12px; font-weight: 600; line-height: 1.2; }
.fxbr-sortbtn b { display: block; overflow: hidden; margin-top: 2px; font-size: 16px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.fxbr-sortbtn.on { border-color: var(--b); background: linear-gradient(135deg, #0a74e4, var(--bd)); color: #fff; box-shadow: 0 10px 24px -8px rgba(9, 103, 217, .6); }
.fxbr-sortbtn.on i { background: rgba(255, 255, 255, .18); color: #fff; }
.fxbr-sortbtn.on small { color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) and (max-width: 1180px) { .fxbr-sortbtn i { display: none; } }

/* ---- chips ------------------------------------------------------------ */
.fxbr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fxbr-chips:empty { display: none; }
.fxbr-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #33475c; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fxbr-chip svg { font-size: 14px; }
.fxbr-chip.on, .fxbr-chip--active { border-color: #b9d6f7; background: #eaf3ff; color: var(--bd); }
.fxbr-chip--quick { display: none; }
.fxbr-chip--clear { border-color: transparent; background: transparent; color: var(--b); font-weight: 700; }

/* ---- filter rail ------------------------------------------------------ */
.fxbr-filters { position: sticky; top: calc(var(--top) + 14px); display: flex; flex-direction: column; max-height: calc(100vh - var(--top) - 28px); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(16, 50, 82, .07); }
.fxbr-filters-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--line); }
.fxbr-filters-head h3 { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); font-size: 18px; font-weight: 800; }
.fxbr-filters-head h3 svg { color: var(--b); font-size: 20px; }
.fxbr-reset { padding: 6px 4px; border: 0; background: none; color: var(--b); font-size: 13px; font-weight: 700; cursor: pointer; }
.fxbr-reset:disabled { color: #9aabbd; cursor: default; }
.fxbr-filters-close { display: none; }
.fxbr-filters-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fxbr-filters-foot { display: none; }

.fxbr-group { padding: 2px 14px 12px 18px; border-bottom: 1px solid #edf2f7; }
.fxbr-group:last-child { border-bottom: 0; }
.fxbr-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; }
.fxbr-group-head svg { font-size: 18px; color: #6b7f94; transform: rotate(180deg); transition: transform .2s; }
.fxbr-group.is-closed .fxbr-group-head svg { transform: none; }
.fxbr-group.is-closed .fxbr-group-body { display: none; }
.fxbr-opts { display: grid; gap: 2px; }
.fxbr-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 4px 6px; border-radius: 10px; color: #2f4357; font-size: 14px; font-weight: 500; cursor: pointer; }
.fxbr-opt:hover { background: #f3f8fd; }
.fxbr-opt input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--b); cursor: pointer; }
.fxbr-ico { display: grid; flex: 0 0 22px; place-items: center; color: var(--b); font-size: 19px; font-style: normal; }
.fxbr-opt span { flex: 1 1 auto; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.fxbr-opt em { flex: 0 0 auto; min-width: 28px; padding: 3px 7px; border-radius: 999px; background: #f0f4f8; color: #5b6e82; font-size: 12px; font-style: normal; font-weight: 600; text-align: center; }
.fxbr-opt.is-on { background: #eef5ff; }
.fxbr-opt.is-on span { color: var(--ink); font-weight: 650; }
.fxbr-opt.is-zero { opacity: .45; }
.fxbr-find { display: block; margin: 0 0 6px; }
.fxbr-find input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 14px; }
.fxbr-find input:focus { border-color: var(--b); background: #fff; outline: none; }
.fxbr-group.is-long:not(.is-all):not(.is-searching) .fxbr-opt:nth-of-type(n+7):not(.is-on) { display: none; }
.fxbr-showall { margin-top: 4px; padding: 6px; border: 0; background: none; color: var(--b); font-size: 13px; font-weight: 700; cursor: pointer; }
.fxbr-group.is-searching .fxbr-showall { display: none; }
.fxbr-scrim { display: none; }

/* ---- list + card (compact base, container queries grow it) ------------ */
.fxbr-list { display: grid; gap: 14px; min-width: 0; container-type: inline-size; container-name: fxbrlist; }
.fxbr-card { position: relative; min-width: 0; border: 1px solid #dbe6f0; border-radius: 18px; background: #fff; box-shadow: 0 6px 22px rgba(20, 58, 88, .06); transition: border-color .2s, box-shadow .2s; }
.fxbr-card:hover { border-color: #b8d3ee; box-shadow: 0 14px 36px rgba(17, 70, 114, .11); }
@supports (content-visibility: auto) {
  /* 70 cards on a busy route; the first screenful paints normally. */
  .fxbr-card:nth-child(n+5) { content-visibility: auto; contain-intrinsic-size: auto 300px; }
}

.fxbr-card-top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 10px; }
.fxbr-logo { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--op, var(--b)); color: #fff; font-size: 18px; font-style: normal; font-weight: 800; box-shadow: 0 6px 14px -6px var(--op, var(--b)); }
.fxbr-opinfo { flex: 1 1 auto; min-width: 0; }
.fxbr-opinfo h3 { overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.fxbr-opinfo p { margin-top: 2px; color: var(--mut); font-size: 13px; line-height: 1.35; }
.fxbr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fxbr-tags b { padding: 4px 9px; border-radius: 999px; background: #eef4fa; color: #34506b; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; }
.fxbr-badges { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; }
.fxbr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fxbr-badge.cheap { background: var(--okbg); color: var(--ok); }
.fxbr-badge.speed { background: var(--warnbg); color: var(--warn); }

.fxbr-journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, .7fr) minmax(0, 1fr); align-items: start; gap: 8px; margin: 0 14px; padding: 12px; border: 1px solid #e3ebf3; border-radius: 14px; background: #fbfdff; }
.fxbr-pt { min-width: 0; }
.fxbr-pt.end { text-align: right; }
.fxbr-pt strong { display: block; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.fxbr-pt small { display: block; margin-top: 2px; color: var(--mut); font-size: 12px; line-height: 1.3; }
.fxbr-pt small em { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--warnbg); color: var(--warn); font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; }
.fxbr-pt b { display: block; margin-top: 6px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.fxbr-pt span { display: block; overflow: hidden; color: var(--mut); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.fxbr-mid { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 10px; min-width: 0; color: var(--mut); font-size: 12px; font-weight: 600; white-space: nowrap; }
.fxbr-rail { position: relative; width: 100%; height: 2px; border-radius: 2px; background: #bcd4ea; }
.fxbr-rail::before, .fxbr-rail::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: 2px solid var(--b); border-radius: 50%; background: #fff; transform: translateY(-50%); }
.fxbr-rail::before { left: -2px; }
.fxbr-rail::after { right: -2px; }
.fxbr-rail i { position: absolute; top: 50%; left: 50%; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #d3e2f0; color: var(--b); font-size: 15px; font-style: normal; transform: translate(-50%, -50%); }

.fxbr-foot { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.fxbr-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fxbr-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid #e3ebf3; border-radius: 999px; background: #fff; color: #3c5166; font-size: 12px; font-weight: 600; white-space: nowrap; }
button.fxbr-pill { cursor: pointer; }
button.fxbr-pill:hover, button.fxbr-pill[aria-expanded="true"] { border-color: #b9d6f7; background: #eef5ff; color: var(--b); }
.fxbr-pill svg { color: var(--b); font-size: 15px; }
.fxbr-pill.fxbr-seats { border-color: transparent; background: var(--okbg); color: var(--ok); }
.fxbr-pill.fxbr-seats svg { color: inherit; }
.fxbr-pill.fxbr-low { background: var(--warnbg); color: var(--warn); }
.fxbr-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fxbr-price { min-width: 0; line-height: 1.15; }
.fxbr-price del { display: block; color: #8a99a9; font-size: 13px; }
.fxbr-price strong { display: block; color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.fxbr-price small { display: block; margin-top: 1px; color: var(--mut); font-size: 11px; }
.fxbr-price em { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 7px; background: var(--okbg); color: var(--ok); font-size: 11px; font-style: normal; font-weight: 700; }
.fxbr-select { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #0a74e4, var(--bd)); box-shadow: 0 8px 20px -6px rgba(9, 103, 217, .55); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fxbr-select:hover { filter: brightness(1.07); }
.fxbr-select svg { font-size: 17px; }

.fxbr-more { margin: 0 14px 14px; overflow: hidden; border: 1px solid #e3ebf3; border-radius: 14px; background: #fbfdff; }
.fxbr-more-tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; border-bottom: 1px solid #e3ebf3; scrollbar-width: none; }
.fxbr-more-tabs button { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: #465b70; font-size: 13px; font-weight: 600; cursor: pointer; }
.fxbr-more-tabs button.on { background: #fff; box-shadow: 0 1px 4px rgba(16, 50, 82, .12); color: var(--b); font-weight: 700; }
.fxbr-more ul { max-height: 280px; padding: 4px 14px; overflow-y: auto; list-style: none; }
.fxbr-more li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px dashed #e0e8f0; font-size: 13px; line-height: 1.4; }
.fxbr-more li:last-child { border-bottom: 0; }
.fxbr-more li b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.fxbr-more li span { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.fxbr-more li small { display: block; color: var(--mut); font-size: 12px; }
.fxbr-more .fxbr-policy li { grid-template-columns: minmax(0, 1fr) auto; }
.fxbr-more .fxbr-policy li span { color: #3c5166; }
.fxbr-more .fxbr-policy li b { color: var(--ok); text-align: right; }
.fxbr-note { padding: 8px 14px 12px; color: var(--mut); font-size: 12px; }

/* Phone card: the tags repeat the type line right above them, and the fact
   pills wrapped onto two rows - together ~110px per card. The Cheapest/Fastest
   badge becomes a corner tab: beside the name it squeezed "IntrCity SmartBus"
   to "IntrCity ..." and wrapped the bus type over four lines on a Fold. */
@container fxbrlist (max-width: 559px) {
  .fxbr-badges { position: absolute; top: 0; right: 14px; flex-direction: row; gap: 4px; }
  .fxbr-badge { padding: 3px 8px; border-radius: 0 0 8px 8px; font-size: 10.5px; }
  .fxbr-card.has-badge .fxbr-card-top { padding-top: 24px; }
  .fxbr-tags { margin-top: 0; }
  .fxbr-tags b { display: none; margin-top: 8px; }
  .fxbr-tags b.fxbr-tag-x { display: inline-block; }
  .fxbr-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fxbr-pills::-webkit-scrollbar { display: none; }
}

.fxbr-empty { display: grid; justify-items: center; gap: 6px; padding: 42px 20px; border: 1px dashed #c9d8e6; border-radius: 18px; background: #fff; text-align: center; }
.fxbr-empty svg { color: #9db8d3; font-size: 42px; }
.fxbr-empty b { font-size: 17px; }
.fxbr-empty span { color: var(--mut); font-size: 14px; }
.fxbr-empty button { min-height: 42px; margin-top: 8px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--b); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Fold cover screen, iPhone SE in a narrow list */
@container fxbrlist (max-width: 340px) {
  .fxbr-card-top { padding: 12px 12px 8px; gap: 10px; }
  .fxbr-logo { flex-basis: 36px; width: 36px; height: 36px; font-size: 16px; }
  .fxbr-journey { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 6px; margin: 0 12px; padding: 10px; }
  .fxbr-pt strong { font-size: 15px; }
  .fxbr-mid { font-size: 11px; }
  .fxbr-rail i { width: 22px; height: 22px; font-size: 13px; }
  .fxbr-foot { padding: 10px 12px 12px; }
  .fxbr-price strong { font-size: 20px; }
  .fxbr-buy { flex-wrap: wrap; gap: 10px; }
  .fxbr-select { flex: 1 1 100%; min-height: 46px; padding: 0 12px; font-size: 15px; }
  .fxbr-badges { right: 12px; }
  .fxbr-more { margin: 0 12px 12px; }
  .fxbr-more li { grid-template-columns: 64px minmax(0, 1fr); }
}

/* Large phone landscape, unfolded Fold, list beside the rail */
@container fxbrlist (min-width: 560px) {
  .fxbr-card-top { gap: 14px; padding: 18px 20px 12px; }
  .fxbr-logo { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
  .fxbr-opinfo h3 { font-size: 18px; }
  .fxbr-opinfo p { font-size: 14px; }
  .fxbr-journey { grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) minmax(0, 1fr); gap: 14px; margin: 0 20px; padding: 16px 18px; }
  .fxbr-pt strong { font-size: 22px; }
  .fxbr-pt b { font-size: 14px; }
  .fxbr-mid { font-size: 13px; }
  .fxbr-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 18px; }
  .fxbr-buy { flex: 0 0 auto; gap: 16px; }
  .fxbr-price { text-align: right; }
  .fxbr-more { margin: 0 20px 18px; }
}

/* Desktop: the facts sit as icon-over-label columns, price split off by a rule */
@container fxbrlist (min-width: 780px) {
  .fxbr-journey { grid-template-columns: minmax(0, 1fr) minmax(160px, 1.1fr) minmax(0, 1fr); padding: 16px 24px; }
  .fxbr-pills { flex-wrap: nowrap; gap: 4px; }
  .fxbr-pill { flex-direction: column; justify-content: center; gap: 4px; min-width: 92px; min-height: 58px; padding: 4px 8px; border-color: transparent; border-radius: 12px; background: none; font-size: 12px; }
  .fxbr-pill svg { font-size: 20px; }
  .fxbr-pill.fxbr-seats, .fxbr-pill.fxbr-low { background: none; font-weight: 700; }
  .fxbr-buy { gap: 20px; padding-left: 22px; border-left: 1px solid #e3ebf3; }
  .fxbr-price strong { font-size: 28px; }
  .fxbr-select { min-height: 52px; padding: 0 24px; font-size: 16px; }
}

/* ---- phones, narrow PC windows: toolbar + bottom sheet ---------------- */
/* 769-899px is a narrow PC window: the desktop header is still fixed on top, so
   --top keeps its offset there. Only the phone skin (<=768) has no fixed header. */
@media (max-width: 768px) {
  .fxbr { --top: 0px; }
}
@media (max-width: 899px) {
  .fxbr-layout { display: block; }
  /* Not position:sticky - html and body.fxm-unified-mobile carry overflow-x:hidden,
     which makes body an overflow container and disables sticky. Switching them to
     overflow-x:clip made body the page scroller instead of the window (measured
     12-Sep: window.scrollTo stopped moving the page), so flyx-bus-booking.js pins
     the bar with .is-fixed while the list is under it. The slot holds its height. */
  .fxbr-toolbar-slot { min-height: 58px; margin: 0 0 10px; }
  .fxbr-toolbar {
    z-index: 60;
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0;
    background: #f3f7fb;
    /* full-bleed background without widening the page */
    box-shadow: 0 0 0 100vmax #f3f7fb, 0 1px 0 100vmax var(--line);
    clip-path: inset(0 -100vmax -1px);
  }
  .fxbr-toolbar.is-fixed { position: fixed; top: var(--top); }
}
@media (max-width: 768px) {
  .fxbr-toolbar.is-fixed { padding-top: max(8px, env(safe-area-inset-top)); }
}
@media (max-width: 899px) {
  .fxbr-filter-btn { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
  .fxbr-filter-btn svg { color: var(--b); font-size: 17px; }
  .fxbr-filter-btn.on { border-color: var(--b); color: var(--b); }
  .fxbr-filter-btn b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 999px; background: var(--b); color: #fff; font-size: 11px; }
  .fxbr-sort { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fxbr-sort::-webkit-scrollbar { display: none; }
  .fxbr-sortbtn { flex: 0 0 auto; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 12px; box-shadow: none; }
  .fxbr-sortbtn i { display: none; }
  .fxbr-sortbtn span { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
  .fxbr-sortbtn small { color: inherit; font-size: 13px; font-weight: 700; }
  .fxbr-sortbtn b { margin: 0; font-size: 13px; font-weight: 600; opacity: .8; }

  .fxbr-chips { flex-wrap: nowrap; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
  .fxbr-chips::-webkit-scrollbar { display: none; }
  .fxbr-chip--quick { display: inline-flex; }
  .fxbr-chip--active.is-dup { display: none; }

  .fxbr-filters {
    position: fixed; z-index: 10015; top: auto; right: 0; bottom: 0; left: 0;
    max-height: 88vh; max-height: 88dvh; border: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(2, 15, 30, .25);
    transform: translateY(105%); visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  body.fxbr-sheet-open .fxbr-filters { transform: none; visibility: visible; transition: transform .28s ease; }
  body.fxbr-sheet-open { overflow: hidden !important; }
  .fxbr-filters-head { padding: 12px 12px 12px 18px; }
  .fxbr-filters-close { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 12px; background: #f0f4f8; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
  .fxbr-filters-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
  .fxbr-filters-foot button { flex: 1; min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
  #fxBusFilterClear { border: 1px solid var(--line); background: #fff; color: var(--ink); }
  #fxBusFilterApply { flex: 2; border: 0; background: linear-gradient(135deg, #0a74e4, var(--bd)); color: #fff; }
  .fxbr-scrim { position: fixed; z-index: 10014; inset: 0; display: block; background: rgba(2, 15, 30, .5); }
  .fxbr-group { padding: 2px 16px 14px 18px; }
  .fxbr-group-head { min-height: 50px; font-size: 15px; }
  .fxbr-opt { min-height: 44px; font-size: 15px; }
  .fxbr-find input { height: 42px; font-size: 16px; } /* 16px: no iOS focus zoom */

  /* time-of-day as 2x2 tiles, the way the redBus app does it */
  .fxbr-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fxbr-tiles .fxbr-opt { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: 86px; padding: 10px 6px; border: 1px solid var(--line); text-align: center; }
  .fxbr-tiles .fxbr-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .fxbr-tiles .fxbr-opt span { flex: 0 0 auto; font-size: 13px; }
  .fxbr-tiles .fxbr-opt em { min-width: 0; padding: 0; background: none; font-size: 12px; }
  .fxbr-tiles .fxbr-ico { font-size: 22px; }
  .fxbr-tiles .fxbr-opt.is-on { border-color: var(--b); box-shadow: 0 0 0 1px var(--b) inset; }
}

@media (max-width: 560px) {
  .fxbr-top { gap: 10px; margin-bottom: 12px; }
  .fxbr-title h2 { font-size: 23px; }
  .fxbr-title p { gap: 2px 12px; font-size: 14px; }
  .fxbr-days { width: 100%; }
  .fxbr-days button { flex: 1; justify-content: center; min-height: 38px; padding: 0 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .fxbr-card, .fxbr-filters, .fxbr-group-head svg { transition: none !important; }
}
/* flyx-bus-points.css */
/* =====================================================================
   Bus seat drawer: boarding + dropping point picker (13-Sep-2026).
   Replaces the two native <select>s and the "Choose your pickup and drop"
   empty state with two tappable cards and a list sheet - the same picker the
   app uses (flyx-app/src/styles/bus-points.css). Markup + behaviour:
   flyx-bus-booking.js, pointsHeader() / openPointSheet().
   The sheet sits inside .fxbus-drawer (absolute, inset 0), not inside
   #fxBusPanel, because loadSeats() re-renders the panel on every change.
   ===================================================================== */

.fxpp { margin: 0 0 14px; }
.fxpp [hidden] { display: none !important; }
.fxpp svg, .fxpp-sheet svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fxpp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fxpp-card {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 74px; margin: 0; padding: 12px 16px;
  border: 1px solid #d8e4ed; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(22, 57, 86, .05);
  color: #0c233c; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fxpp-card:hover:not(:disabled) { border-color: #9fc6ec; box-shadow: 0 10px 26px rgba(9, 103, 217, .1); }
.fxpp-card:focus-visible { outline: 2px solid #0967d9; outline-offset: 2px; }
.fxpp-card:disabled { cursor: default; opacity: .6; }
.fxpp-dot { width: 16px; height: 16px; border: 4px solid #10b981; border-radius: 50%; background: #fff; }
.fxpp-card[data-point="dropping"] .fxpp-dot { border-color: #f97316; }
.fxpp-card span { min-width: 0; }
.fxpp-card small { display: block; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fxpp-card b { display: block; overflow: hidden; margin-top: 3px; color: #0c233c; font-size: 15px; font-weight: 850; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.fxpp-card[data-set="false"] b { color: #0967d9; }
.fxpp-card em { display: block; overflow: hidden; margin-top: 2px; color: #556980; font-size: 12.5px; font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fxpp-card > svg { color: #8395a8; }

.fxpp-hint {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 11px 14px;
  border: 1px solid #cfe2f7; border-radius: 13px; background: #eef6ff;
  color: #1e4f86; font-size: 13px; font-weight: 700; line-height: 1.35;
}
.fxpp-hint svg { width: 17px; height: 17px; color: #0967d9; }

/* ---- sheet (inside the drawer) ---------------------------------------- */
.fxpp-sheet { position: absolute; z-index: 40; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 17, 34, .5); }
.fxpp-sheet[hidden] { display: none !important; }
.fxpp-panel {
  display: flex; flex-direction: column; width: min(600px, 100%); max-height: 82%;
  overflow: hidden; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(3, 17, 34, .25);
  animation: fxppUp .22s ease-out;
}
@keyframes fxppUp { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .fxpp-panel { animation: none; } }
.fxpp-panel header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid #edf2f7; }
.fxpp-tabs { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; padding: 4px; border-radius: 12px; background: #f1f5f9; }
.fxpp-tabs button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #475569; font: inherit; font-size: 14px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.fxpp-tabs button.on { background: #fff; box-shadow: 0 1px 4px rgba(15, 35, 60, .12); color: #0c233c; font-weight: 850; }
.fxpp-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 11px; background: #f1f5f9; color: #0c233c; cursor: pointer; }
.fxpp-search { position: relative; display: block; margin: 10px 14px 2px; }
.fxpp-search[hidden] { display: none !important; }
.fxpp-search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: #8395a8; transform: translateY(-50%); }
/* 16px: no iOS focus zoom */
.fxpp-search input { width: 100%; height: 44px; margin: 0; padding: 0 12px 0 36px; border: 1px solid #d7e3ed; border-radius: 12px; background: #f8fafc; color: #0c233c; font: inherit; font-size: 16px; outline: none; }
.fxpp-search input:focus { border-color: #0967d9; background: #fff; }
.fxpp-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 8px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.fxpp-row {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 20px; align-items: center; gap: 10px;
  width: 100%; min-height: 60px; margin: 0; padding: 10px 8px; border: 0; border-bottom: 1px solid #f1f5f9; border-radius: 12px;
  background: transparent; color: #0c233c; font: inherit; text-align: left; cursor: pointer;
}
.fxpp-row:hover { background: #f6f9fc; }
.fxpp-row.on { background: #eef6ff; }
.fxpp-row strong { font-size: 14.5px; font-weight: 850; white-space: nowrap; }
.fxpp-row span { min-width: 0; }
.fxpp-row b { display: block; font-size: 14.5px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.fxpp-row small { display: block; margin-top: 2px; color: #64748b; font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fxpp-radio { width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; }
.fxpp-row.on .fxpp-radio { border: 6px solid #0967d9; }
.fxpp-empty { padding: 26px 14px; color: #64748b; font-size: 13.5px; text-align: center; }

/* PC drawer is wide: the list becomes a centred dialog rather than a full-width sheet. */
@media (min-width: 769px) {
  .fxpp-sheet { align-items: center; padding: 24px; }
  .fxpp-panel { max-height: 78%; border-radius: 22px; }
}

@media (max-width: 768px) {
  .fxpp-cards { grid-template-columns: 1fr; gap: 0; overflow: hidden; border: 1px solid #d8e4ed; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(22, 57, 86, .05); position: relative; }
  .fxpp-cards::before { content: ""; position: absolute; top: 36px; bottom: 36px; left: 26px; border-left: 2px dashed #cbd8e5; }
  .fxpp-card { min-height: 68px; padding: 12px 14px; border: 0; border-radius: 0; box-shadow: none; }
  .fxpp-card + .fxpp-card { border-top: 1px solid #edf2f7; }
  .fxpp-dot { position: relative; z-index: 1; margin-left: 3px; }
  .fxpp-card b { font-size: 14.5px; }
  .fxpp-row { grid-template-columns: 72px minmax(0, 1fr) 20px; }
}
@media (max-width: 340px) {
  .fxpp-row { grid-template-columns: 60px minmax(0, 1fr) 18px; gap: 8px; }
  .fxpp-tabs button { font-size: 12.5px; }
}
/* flyx-bus-flow-v5.css */
/* =====================================================================
   Bus search flow - 14-Sep-2026. Loaded last in the bus bundle.

   One page, two views:
     /bus         landing - hero, inspiration strip and guide (unchanged)
     /bus-search  results - body.fxbus-view-results, printed by buspage.php
                  on a direct load and set by flyx-bus-booking.js after a search

   In the results view the hero becomes a compact modify bar. Desktop keeps
   the whole search form inline in it. Phones get a route summary card
   (#fxBusModify) and the same form opens full screen
   (body.fxbus-modify-open), so the city sheet and the calendar it opens are
   the landing page's own. The list below is the .fxbr-* results from
   flyx-bus-results-v4.css.
   ===================================================================== */

/* Only the results view has a summary card or a sheet header. */
.fxbus-modify,
.fxbus-search-head { display: none; }

/* ---- results view: the landing chrome goes away ------------------------ */
body.fxbus-view-results .fxbus-hero-copy,
body.fxbus-view-results #fxBusWelcome,
body.fxbus-view-results .fxbus-guide { display: none !important; }
body.fxbus-view-results .fxbus-content { padding-top: 18px; }

/* A toast has to read above the modify sheet and the seat drawer. */
.fxbus-toast { z-index: 2147483100; }

/* ---- desktop and narrow PC windows: a slim bar with the form inline ----- */
@media (min-width: 769px) {
  body.fxbus-view-results .fxbus-hero { padding: 14px 0 12px; }
  body.fxbus-view-results .fxbus-hero .fxbus-search { margin-top: 0; }
  /* The landing hero's dark gradient card (.fxbus-hero:before). With the headline gone and
     the bar this slim, only its two rounded ends showed - a stray band behind the form. */
  body.fxbus-view-results .fxbus-hero:before { display: none; }
}

/* ---- card price -------------------------------------------------------- */
.fxbr-price .fxbr-from { display: block; margin: 0; color: #5f7186; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.fxbr-price .fxbr-offer {
  display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 999px;
  background: #e4f5ec; color: #067a55; font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap;
}
.fxbus-fare-live { margin: 4px 0 0; color: #5f7186; font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.fxbus-fare-live b { color: #0b1f33; font-weight: 850; }

/* ---- links drawn as buttons -------------------------------------------
   css/main.css ("FLYX OWNER FIX: Orange theme") forces every <a> to the brand orange with
   !important, which beats a button's own white text: "View, print or download ticket" and
   "Search buses now" were orange text on an orange button. Links that are buttons restate it. */
a.fxbus-pay, a.fxbus-pay:visited, a.fxbus-pay:hover, a.fxbus-pay:focus,
.fxbus-guide-cta a, .fxbus-guide-cta a:visited, .fxbus-guide-cta a:hover, .fxbus-guide-cta a:focus { color: #fff !important; }

/* Filter sheet and modify sheet own the bottom of the screen; the site's dock
   (z-index 2147482500, above both) would otherwise sit on their buttons. */
@media (max-width: 899px) {
  body.fxbr-sheet-open .mobile-bottom-nav,
  body.fxbus-modify-open .mobile-bottom-nav { visibility: hidden !important; pointer-events: none !important; }
}

/* ---- phones ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* the mobile shell's big copy and service tiles belong to the landing page */
  body.fxbus-view-results .fxm-shell-copy,
  body.fxbus-view-results .fxm-service-rail { display: none !important; }
  body.fxbus-view-results .fxm-shell-top { min-height: 0; padding-bottom: 12px; }

  /* the summary card's Modify button already does this on a phone */
  body.fxbus-view-results .fxbr a.fxbr-modify { display: none !important; }

  body.fxbus-view-results .fxbus-hero { padding: 12px 0 0; overflow: visible; }
  body.fxbus-view-results .fxbus-hero:before { display: none; }
  body.fxbus-view-results .fxbus-content { padding-top: 12px; }

  body.fxbus-view-results .fxbus-modify {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px 14px; border: 1px solid #e3ebf5; border-radius: 20px;
    background: #fff; color: #0b1f33; box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  }
  .fxbus-modify-route { min-width: 0; }
  .fxbus-modify-route small {
    display: block; margin: 0 0 6px; color: #8a95a6;
    font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase;
  }
  .fxbus-modify-route b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; font-weight: 850; line-height: 1.2; }
  .fxbus-modify-route b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fxbus-modify-route b i {
    display: inline-grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center;
    border-radius: 50%; background: #eaf3ff; color: #0967d9; font-size: 13px; font-style: normal;
  }
  .fxbus-modify-route em { display: block; margin-top: 6px; color: #5f7186; font-size: 12.5px; font-style: normal; font-weight: 700; }
  .fxbus-modify-btn {
    flex: 0 0 auto; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px;
    background: #0967d9; color: #fff; font: inherit; font-size: 13px; font-weight: 800;
    box-shadow: 0 9px 20px rgba(9, 103, 217, .25); cursor: pointer;
  }

  /* The form stays off the results page until Modify opens it full screen. Full screen, not
     a half sheet over a scrim: a tap outside a half sheet would land on a bus card. */
  body.fxbus-view-results .fxbus-search { display: none; }
  body.fxbus-view-results.fxbus-modify-open .fxbus-search {
    position: fixed; z-index: 2147482600; inset: 0;
    display: grid; align-content: start;
    margin: 0; padding: max(12px, env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto; border: 0; border-radius: 0; background: #f3f7fb; box-shadow: none;
  }
  body.fxbus-view-results.fxbus-modify-open .fxbus-search-head {
    display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; margin: 0 2px 6px;
  }
  .fxbus-search-head b { color: #0b1f33; font-size: 18px; font-weight: 850; }
  .fxbus-search-close {
    display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 12px;
    background: #fff; color: #0b1f33; font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
  }
  body.fxbus-modify-open { overflow: hidden !important; }

  /* Results first on a phone: the rewards banner moves under the list. */
  body.fxbus-view-results .fxbus-content > .fxbus-wrap { display: flex; flex-direction: column; }
  body.fxbus-view-results .fxbus-content > .fxbus-wrap > * { order: 1; }
  body.fxbus-view-results .fxbus-content > .fxbus-wrap > .fx-search-rewards { order: 3; margin-top: 4px; }
}