:root { color-scheme:light; font-family:Arial,sans-serif; color:#2d2d2d; background:#f5f5f3; --green:#97d700; --dark:#187d00; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.search { padding:42px 24px 34px; border-bottom:1px solid #e2e2de; background:linear-gradient(115deg,#f0f4e4,#fff 58%,#eef5d8); }
.search>h1,#form,.results-area { width:min(1180px,100%); margin-inline:auto; }
h1 { margin:0 0 20px; font-size:clamp(28px,4vw,42px); letter-spacing:-.035em; }
#form { position:relative; padding:20px; border:1px solid #e4e4df; border-radius:12px; background:#fff; box-shadow:0 6px 22px #323c181f; }
.one-way { display:flex; align-items:center; gap:9px; margin-bottom:16px; font-size:14px; }
.one-way i { width:20px; height:20px; border:2px solid #52a700; border-radius:50%; box-shadow:inset 0 0 0 4px #fff; background:var(--green); }
.fields { display:grid; grid-template-columns:1fr 34px 1fr 190px 120px; align-items:end; gap:10px; }
label { position:relative; display:block; min-width:0; color:#5e5e5a; font-size:12px; }
.input { height:44px; display:flex; align-items:center; gap:10px; margin-top:6px; padding:0 12px; border:1px solid #9b9b97; border-radius:5px; background:#fff; }
.input b { color:#777; font-size:11px; }
.input input { width:100%; min-width:0; border:0; outline:0; background:transparent; }
.swap { width:34px; height:34px; margin-bottom:5px; border:1px solid #b5b5b0; border-radius:50%; background:#fff; }
.action,.results button,aside footer button { height:44px; border:0; border-radius:5px; background:var(--green); font-weight:800; }
.action:hover,.results button:hover,aside footer button:hover { background:#88c200; }
.filters { display:flex; align-items:end; gap:20px; margin-top:16px; padding-top:15px; border-top:1px solid #ecece8; }
.filters>strong { align-self:center; padding:7px 12px; border:1px solid #c8c8c3; border-radius:99px; font-size:13px; }
.filters input[type=time],.filters select { height:36px; display:block; margin-top:4px; padding:0 10px; border:1px solid #9b9b97; border-radius:5px; background:#fff; }
.filters .check { display:flex; align-items:center; gap:7px; min-height:36px; color:#2d2d2d; }
.check input { width:18px; height:18px; accent-color:var(--dark); }
.suggestions { position:absolute; z-index:10; top:calc(100% + 5px); left:0; right:0; overflow:hidden; border:1px solid #cfcfca; border-radius:8px; background:#fff; box-shadow:0 8px 24px #0003; }
.suggestions button { width:100%; display:flex; justify-content:space-between; padding:11px 13px; border:0; border-bottom:1px solid #ededeb; text-align:left; background:#fff; }
.suggestions button:hover { background:#f4f8e9; }
.suggestions small { color:#777; }
.error { margin:13px 0 0; color:#a72819; }
.results-area { padding:34px 24px 80px; }
.empty { margin:0; padding:26px 20px; border:1px dashed #c9c9c4; border-radius:12px; color:#6e6e68; text-align:center; background:#fff; }
.loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:60px; color:#666; }
.loading i { width:18px; height:18px; border:2px solid #d9e1c1; border-top-color:var(--dark); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.results { display:grid; gap:12px; }
.trip { display:grid; grid-template-columns:minmax(170px,1fr) 120px minmax(170px,1fr) 120px 140px; gap:16px; align-items:center; padding:17px 18px; border:1px solid #d8d8d4; border-radius:8px; background:#fff; }
.trip:hover { border-color:#aeb98b; box-shadow:0 4px 16px #00000012; }
.trip p { margin:0; }
.time { margin-bottom:4px!important; font-size:17px; font-weight:800; }
.place { font-size:13px; line-height:1.35; }
.duration { color:#656560; font-size:13px; text-align:center; }
.meta { display:grid; gap:5px; }
.price { font-size:20px; font-weight:900; text-align:right; }
.kind { color:#50504c; font-size:12px; }
.capacity { color:#a0271b; font-size:11px; text-align:right; }
.backdrop { position:fixed; z-index:30; inset:0; background:#0008; }
aside { position:fixed; z-index:31; top:0; right:0; width:min(470px,100vw); height:100vh; overflow-y:auto; background:#fff; box-shadow:-8px 0 30px #0003; }
aside header { position:sticky; z-index:4; top:0; display:flex; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #ddd; background:#fff; }
aside h2,aside header p { margin:0; }
aside header p { margin-top:4px; color:#5f5f5b; font-size:13px; }
aside header button { border:0; background:none; font-size:30px; }
#tabs,.legend { display:flex; gap:8px; overflow-x:auto; padding:13px 20px; border-bottom:1px solid #e1e1dd; }
#tabs:empty { display:none; }
#tabs button { flex:none; padding:8px 11px; border:1px solid #c7c7c2; border-radius:99px; background:#fff; font-size:12px; }
#tabs button[aria-selected=true] { border-color:var(--dark); color:var(--dark); background:#f1f8dc; font-weight:800; }
.legend span { min-width:max-content; font-size:12px; }
.legend strong,.legend small,aside footer strong,aside footer small { display:block; }
.vehicle { position:relative; width:322px; margin:18px auto 90px; border:3px solid #d0d0cc; border-radius:52px 52px 38px 38px; background:#fff; }
.item { position:absolute; display:flex; align-items:center; justify-content:center; }
.row { z-index:2; font-size:12px; font-weight:800; }
.seat { width:calc(100% - 5px); height:calc(100% - 5px); display:flex; align-items:center; justify-content:center; border:2px solid #5e5e5a; border-radius:11px 11px 7px 7px; color:#3c4f10; background:#f7fbe9; font-size:10px; font-weight:900; }
.seat:before { content:""; position:absolute; top:20%; width:42%; border-top:5px solid #8b8b86; border-inline:4px solid transparent; }
.seat span { z-index:1; margin-top:15px; }
.seat.reverse { transform:rotate(180deg); }
.seat.reverse span { transform:rotate(180deg); }
.seat.taken { border-color:transparent; color:#81817c; background:#f4f4f2; font-size:22px; font-weight:400; }
.seat.taken:before { content:none; }
.fixture { color:#a2a29e; font-size:22px; }
.fixture.wind-shild { border-top:5px solid #d0d0cc; border-radius:50%; }
.fixture.door { border-right:3px double #b8b8b3; }
.fixture.small-toilet { border:1px solid #b8b8b3; font-size:9px; }
aside footer { position:sticky; z-index:5; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-top:1px solid #ddd; background:#fff; }
aside footer button { min-width:110px; }
#seatError { margin:30px 20px; padding:15px; border:1px solid #e7c5bd; background:#fff3f0; }
[hidden] { display:none!important; }
@media(max-width:960px) { .fields{grid-template-columns:1fr 34px 1fr}.fields label:nth-of-type(3),.action{grid-row:2}.action{grid-column:3}.trip{grid-template-columns:1fr 90px 1fr 110px}.trip button{grid-column:1/-1} }
@media(max-width:640px) { .search{padding:28px 14px 24px}#form{padding:15px}.fields{grid-template-columns:1fr}.swap{display:none}.fields label:nth-of-type(3),.action{grid-row:auto;grid-column:auto}.filters{align-items:stretch;flex-direction:column;gap:10px}.filters input[type=time],.filters select{width:100%}.results-area{padding:26px 14px 60px}.trip{grid-template-columns:1fr 1fr}.duration{display:none}.trip>div:nth-child(3),.meta{text-align:right}.price,.capacity{text-align:left}.trip button{grid-column:2;grid-row:3}.vehicle{width:min(322px,calc(100vw - 42px))} }