@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f5f6ef;color:#222222;font-family:'DM Sans',sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c18d29;outline-offset:3px}header{height:88px;padding:0 46px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6eae2;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:7px;font-size:23px;font-weight:800;text-decoration:none;color:#222222}.brand>span:last-child{font-weight:400}.logo{background:#252525;color:#fff;border-radius:13px;padding:4px 10px;font-size:28px;margin-right:5px}nav{display:flex;background:#f1f3ef;border-radius:30px;padding:5px}.tab{border:0;background:transparent;padding:10px 21px;border-radius:24px;color:#69746f;font-weight:600}.tab.active{background:#222222;color:white}.region{color:#56645e;display:flex;align-items:center;gap:8px}.region i{width:7px;height:7px;border-radius:100%;background:#252525}main{position:relative;min-height:calc(100vh - 88px);padding:35px 46px 85px;overflow:hidden}.map{position:absolute;inset:0}.map svg{width:100%;height:100%;position:absolute}.map-note{position:absolute;right:24px;bottom:79px;font-size:11px;color:#626e65;background:#ffffffd9;padding:7px 10px;border-radius:6px}.map-label{position:absolute;right:40px;top:35px;background:#ffffffed;padding:16px 22px;border-radius:12px;font-weight:700;box-shadow:0 5px 20px #173f2810}.map-label span{display:block;font-size:11px;font-weight:400;color:#7d887e;margin-top:5px}.panel{position:relative;width:398px;background:#fff;border-radius:23px;padding:29px;box-shadow:0 15px 70px #133c2420}.eyebrow{font-size:9px;letter-spacing:2.1px;color:#252525;font-weight:800;margin-bottom:17px}h1{font-family:Manrope,sans-serif;font-size:42px;letter-spacing:-1.8px;line-height:1.13;margin:0;font-weight:800}.intro{color:#75817b;margin:13px 0 23px}.trip-fields{background:#f6f7f3;border:1px solid #e8ece3;border-radius:12px;padding:0 15px}.trip-fields label{display:flex;align-items:center;gap:13px;padding:16px 0}.trip-fields label+label{border-top:1px solid #e1e6dc}.trip-fields label div{flex:1;color:#7c887f;font-size:9px;font-weight:700;letter-spacing:1px}.dot{width:9px;height:9px;border:2px solid #252525;border-radius:50%;flex-shrink:0}.dark{border-color:#222222;border-radius:2px;background:#222222}input,select{width:100%;background:transparent;border:0;color:#222222;margin-top:6px;letter-spacing:0;font-weight:500;font-size:13px}input{padding:5px 0}.trip-fields button{font-size:25px;border:0;background:transparent;color:#252525;padding:2px}.note-label{display:block;color:#748078;font-size:11px;margin:15px 0}.note-label input{border-bottom:1px solid #e4e8e0;padding-bottom:10px}.ride-option{display:flex;align-items:center;gap:12px;border:1.5px solid #252525;border-radius:12px;padding:16px;background:#f4f9f5}.taxi-icon{font-size:32px;color:#bd9529}.ride-option div{flex:1}small{display:block;color:#75827a;font-size:11px;margin-top:5px}.pill{font-size:9px;background:#e0eee5;color:#252525;border-radius:20px;padding:5px 8px;font-weight:500}.payment,.fare{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12px}.payment>span,.fare>span{color:#7b857f}.fare strong{font-size:20px}.fine{font-size:10px;line-height:1.6;color:#808b83}.primary{width:100%;display:flex;justify-content:space-between;background:#252525;color:white;border:0;border-radius:11px;padding:16px 18px;font-weight:700;margin-top:15px}.primary:hover{background:#393939}.primary:disabled{background:#8caaa0;cursor:default}.secondary{background:#f2f5ef;border:1px solid #e2e8dd;border-radius:9px;padding:12px;width:100%;margin:12px 0;color:#365447}.trust{display:flex;justify-content:space-between;color:#879188;font-size:9px;margin-top:19px}footer{display:flex;justify-content:space-between;margin-top:25px;padding-top:19px;border-top:1px solid #eef0e9;font-size:8px;letter-spacing:1px;font-weight:700;color:#859189}footer span{letter-spacing:0;font-weight:400}.demo-banner{position:absolute;bottom:0;left:0;right:0;background:#222222;color:white;display:flex;align-items:center;gap:18px;padding:17px 46px;font-size:11px}.demo-banner span{color:#b9c7bd}.demo-banner button{margin-left:auto;color:white;background:transparent;border:1px solid #597467;border-radius:7px;padding:8px 12px;font-size:10px}.box,.trip-card{background:#f5f7f1;border-radius:12px;padding:16px;margin-top:18px;line-height:1.6}.driver-row{display:flex;align-items:center;gap:12px;margin:17px 0}.avatar{width:42px;height:42px;border-radius:50%;background:#dce8dc;display:grid;place-items:center;font-weight:700}.stats{display:flex;gap:12px}.stats div{background:#edf4ed;border-radius:12px;padding:20px;flex:1}.stats strong{display:block;font-size:30px}.stats span{font-size:10px;color:#78867b}h3{font-size:14px;margin-top:24px}.history-row{font-size:11px;padding:12px 0;border-bottom:1px solid #e5eae0;line-height:1.7}.history-row span{color:#738078;display:block}[hidden]{display:none!important}#car{transition:transform 4s linear}#tripStatus{font-weight:700}
@media(min-width:1400px){main{padding-left:7vw}.map svg{padding-left:160px}}@media(max-width:800px){header{padding:0 18px;height:auto;min-height:80px;flex-wrap:wrap;gap:14px;padding-top:15px;padding-bottom:15px}.brand{font-size:19px}.region{font-size:10px}nav{order:3;width:100%;justify-content:center}.tab{padding:9px 17px}main{padding:225px 16px 110px}.map{height:430px}.map-label{right:16px;top:16px;padding:10px 15px;font-size:11px}.map-note{top:185px;bottom:auto;right:16px}.map svg{height:430px}.panel{width:100%;max-width:440px;margin:auto;padding:24px}h1{font-size:36px}.demo-banner{flex-wrap:wrap;padding:14px 18px;gap:8px}.demo-banner span{font-size:9px;flex-basis:100%;order:3}.demo-banner button{padding:5px 8px}}

#car{transition:transform 1s linear}.tracking-map{position:absolute;right:40px;bottom:120px;width:290px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 40px #173f2820}.tracking-heading{display:flex;align-items:center;gap:8px;font-size:12px}.tracking-heading .pill{margin-left:auto}.tracking-dot{width:7px;height:7px;border-radius:50%;background:#252525;box-shadow:0 0 0 4px #e4f1e8}.tracking-metrics{display:flex;gap:32px;margin-top:20px}.tracking-metrics strong{font-size:25px;letter-spacing:-.7px}.tracking-progress{height:5px;border-radius:4px;background:#e7eee6;margin:18px 0 12px;overflow:hidden}.tracking-progress span{display:block;height:100%;width:0;background:#252525;transition:width 1s linear}#trackingUpdate{font-size:9px}#follow{margin-bottom:0}.tracking-map.finished .tracking-dot{background:#839188}@media(max-width:800px){.tracking-map{top:75px;bottom:auto;right:16px;width:225px;padding:12px}.tracking-heading{font-size:10px}.tracking-metrics{margin-top:10px;gap:25px}.tracking-metrics strong{font-size:19px}.tracking-metrics small{font-size:9px}.tracking-progress{margin:10px 0 8px}.map:has(.tracking-map:not([hidden])) .map-note{top:215px}.map:has(.tracking-map:not([hidden])){z-index:1}.panel{z-index:2}}

.vehicle-card{background:white;border:1px solid #e1e7da;border-radius:15px;overflow:hidden;margin-top:16px}.vehicle-visual{position:relative;background:radial-gradient(ellipse at center,#fff9e2,#eef2e8);padding:28px 10px 8px}.vehicle-visual img{width:100%;height:auto;display:block;max-height:155px}.vehicle-tag{position:absolute;top:13px;left:16px;font-size:9px;letter-spacing:1.4px;color:#536855;font-weight:700}.illustration-note{display:block;text-align:right;font-size:8px;color:#85907d}.vehicle-info{padding:18px 16px 2px}.plate{display:inline-flex;align-items:stretch;border:2px solid #182e29;background:white;border-radius:6px;overflow:hidden;box-shadow:0 3px 0 #182e290a;margin-bottom:12px}.plate>span{display:grid;place-items:center;background:#235697;color:white;font-size:9px;padding:0 7px}.plate strong{padding:5px 12px;font-size:24px;letter-spacing:2px;font-family:Manrope,sans-serif;white-space:nowrap}.vehicle-model{display:block;font-size:15px}.vehicle-model span{font-weight:400;color:#788476}.vehicle-card .driver-row{padding:14px 16px;margin:12px 0 0;border-top:1px solid #edf0e8}.pickup-identity{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:15px;padding:13px;background:#e3efe4;border-radius:11px}.pickup-identity small{font-size:10px;max-width:165px}.pickup-code{font-size:25px;letter-spacing:4px;white-space:nowrap}.vehicle-check{font-size:10px;color:#728371;line-height:1.6;margin:11px 0 0}.driver-pickup{margin-top:16px;border:1px solid #dce5d7;background:#f6f8f2;border-radius:12px;padding:16px}.driver-pickup label{display:block;font-size:11px;margin-top:15px}.driver-pickup input{background:white;border:1px solid #dce5d7;border-radius:8px;padding:12px;font-size:22px;letter-spacing:5px}.driver-pickup p{font-size:11px;margin:0;color:#252525}.trip-card:has(.vehicle-card){padding:16px}#pickupIdentity.verified{background:#d3e9d9}#tripStatus{font-size:16px}#passenger:has(#bookingDetails[hidden]) h1{font-size:31px}#passenger:has(#bookingDetails[hidden]) .intro{margin-bottom:10px}

.vehicle-card{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;padding-top:12px}.vehicle-visual{background:transparent;padding:0;display:grid;place-items:center;align-self:center}.vehicle-visual img{width:46px;height:66px;max-height:none}.vehicle-info{padding:0 12px 0 0;min-width:0}.plate{margin-bottom:7px}.plate strong{font-size:20px;letter-spacing:1px;padding:3px 8px}.vehicle-model{font-size:13px}.vehicle-info small{font-size:9px;line-height:1.4}.vehicle-card .driver-row{grid-column:1/-1;margin-top:12px;padding:12px}.vehicle-card .driver-row .avatar{width:34px;height:34px;font-size:11px}.vehicle-card .driver-row strong{font-size:12px}.vehicle-card .driver-row small{font-size:10px}

:root{--taxi-yellow:#ffcf24;--ink:#222222}.brand{gap:10px}.brand .logo{background:var(--taxi-yellow);color:var(--ink);font:800 24px Manrope,sans-serif;border-radius:12px;padding:8px 9px}.brand .brand-name{font:800 23px Manrope,sans-serif;letter-spacing:-1px;color:var(--ink)}.primary{background:var(--taxi-yellow);color:var(--ink)}.primary:hover{background:#efbf13}.primary:disabled{background:#e5ddba;color:#827a5e}.eyebrow{color:#665a20}.tab.active{background:var(--ink);color:var(--taxi-yellow)}.region i,.tracking-dot{background:var(--taxi-yellow)}.tracking-dot{box-shadow:0 0 0 4px #fff7d5}.ride-option{border-color:#e8c543;background:#fffbea}.pill{background:#fff2bb;color:#68551b}.avatar{background:#ffefaf;color:var(--ink)}.pickup-identity{background:#fff2bf}.pickup-identity.verified{background:#f8edb8}.tracking-progress span{background:#e9b817}.secondary{background:#faf8ed;border-color:#e7e2cf;color:#4f4a38}.demo-banner{background:var(--ink)}.demo-banner b{color:var(--taxi-yellow)}@media(max-width:800px){.brand .brand-name{font-size:21px}}