@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans Arabic',sans-serif;color:#283d33;background:#fafbf7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ed8a51;outline-offset:4px}header{height:100px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e8df;background:#fff;direction:ltr}.brand{display:flex;align-items:center;gap:11px;color:#293e35;text-decoration:none;font-size:28px;letter-spacing:-1.4px;font-weight:700;line-height:1.1}nav{display:flex;gap:40px;align-items:center}nav button{border:0;background:none;color:#2f4238;height:100px;font-weight:700;font-size:15px;border-bottom:3px solid #f47730}.city{font-size:14px;color:#738074;display:flex;gap:8px}.lang{border:1px solid #e1e5dd;border-radius:25px;padding:10px 18px;background:white;font-size:14px;color:#3d5144}main{display:grid;grid-template-columns:460px 1fr;min-height:calc(100vh - 100px);max-width:1900px;margin:auto;direction:ltr}.booking{padding:35px 35px 20px;direction:rtl;background:#fff;z-index:2}html[dir=ltr] .booking{direction:ltr}.eyebrow{color:#cd652d;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:8px}h1{font-size:34px;line-height:1.5;letter-spacing:-1px;margin:0;font-weight:800}.intro{color:#7c867c;font-size:14px;margin:6px 0 25px}.flow{position:relative}.locations{border:1px solid #e0e5dc;border-radius:15px;background:#fafbf8;padding:8px 17px;position:relative}.locations label{display:flex;gap:14px;align-items:center;padding:11px 0}.field{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}.field>span{font-size:12px;color:#859082}.field select{border:0;outline:0;background:transparent;color:#314333;font-size:15px;width:100%;padding:0}.dot{width:10px;height:10px;background:#f47936;border-radius:50%;box-shadow:0 0 0 4px #ffebe0}.square{width:10px;height:10px;border-radius:2px;background:#334c3d}.connector{height:24px;border-inline-start:1px dashed #bec8b7;position:absolute;inset-inline-start:21px;top:56px}.locations label:first-child .field{border-bottom:1px solid #e6e9df;padding-bottom:13px}.swap{position:absolute;top:54px;inset-inline-end:15px;background:#fff;border:1px solid #e3e7df;width:31px;height:31px;border-radius:50%;color:#52634c;font-size:22px}.landmark{margin:16px 0 23px}.landmark label{font-size:12px;color:#758171;display:block;margin-bottom:6px}.landmark input{width:100%;padding:9px 11px;border:0;border-bottom:1px solid #e7e9e2;background:#fff;font-size:14px;color:#344a39}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}h2{font-size:16px;margin:0}.section-title>span{font-size:12px;color:#7c8978}.rides{display:grid;gap:9px}.ride{display:flex;align-items:center;text-align:start;gap:13px;width:100%;padding:12px;border:1px solid #e4e8de;border-radius:13px;background:#fff;color:inherit}.ride.selected{border:1.5px solid #ed793a;background:#fff7f1}.car{width:67px;flex-shrink:0}.ride-copy{flex:1}.ride strong{display:block;font-size:15px}.ride small{display:block;font-size:12px;color:#7b8477;margin-top:3px}.ride-price{font-size:14px;font-weight:700;text-align:end}.ride-price small{font-weight:400}.payment{display:flex;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid #e9ece4;margin-top:9px}.cash{font-size:23px;background:#f0f4e9;border-radius:8px;padding:0 8px}.payment strong{font-size:14px}.payment small{display:block;font-size:12px;color:#7e8979}.check{margin-inline-start:auto;color:#65815d}.estimate{display:flex;justify-content:space-between;align-items:center;margin:18px 0;font-size:14px}.estimate strong{font-size:22px}.primary{width:100%;border:0;border-radius:12px;background:#f47630;color:white;padding:15px;font-weight:700;font-size:16px;box-shadow:0 6px 15px #f4763018}.primary:hover{background:#df6522}.demo-note{font-size:12px;color:#8b9386;text-align:center;line-height:1.8;margin:11px 0 0}#error{font-size:13px;color:#b4412a;margin:7px 0}footer{display:flex;justify-content:center;align-items:center;gap:8px;color:#7d8c74;font-size:12px;margin-top:20px}.map{position:relative;overflow:hidden;min-height:780px;background:#f0f1e9}.map>svg{width:100%;height:100%;position:absolute;inset:0}.map-top{position:absolute;inset:26px 28px auto;display:flex;justify-content:space-between;align-items:center;gap:8px}.city-tag{background:white;border-radius:25px;padding:10px 17px;display:flex;align-items:center;gap:8px;box-shadow:0 3px 10px #20312108;font-size:14px}.live-dot{width:7px;height:7px;display:inline-block;background:#729968;border-radius:50%}.map-demo{font-size:12px;background:#ffffffc9;padding:6px 10px;border-radius:7px;color:#7c8575}.map-caption{position:absolute;bottom:90px;left:35px;right:35px;max-width:370px;background:#fffffff2;backdrop-filter:blur(8px);border:1px solid #fff;border-radius:17px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 10px 40px #33412512;direction:rtl}html[dir=ltr] .map-caption{direction:ltr}.mini-logo{border-radius:13px;background:#fff0e3;color:#e47835;padding:10px;font-size:28px}.map-caption strong{font-size:17px}.map-caption p{font-size:13px;color:#839078;margin:4px 0 0}.map-bottom{position:absolute;bottom:22px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between}.map-bottom span{font-size:12px;background:#f5f6efc9;padding:5px 9px;color:#7f8779}.map-bottom button{border:0;background:#fff;border-radius:12px;padding:8px 13px;font-size:26px;color:#3c4e36}.success-icon{background:#eaf1e3;border-radius:50%;width:65px;height:65px;display:grid;place-items:center;color:#648556;font-size:30px;margin:25px auto}.confirmation-title{text-align:center;font-size:24px}.status-text{text-align:center;font-size:14px;color:#7b8774}.driver{background:#f8faf5;border:1px solid #e4e9df;border-radius:16px;padding:22px;margin:25px 0}.avatar{width:50px;height:50px;border-radius:50%;background:#e7ecdf;display:grid;place-items:center;font-weight:700;font-size:22px;float:inline-start;margin-inline-end:15px}.driver strong{display:block}.driver p{font-size:13px;color:#7b8475}.trip-summary{font-size:14px;line-height:2.2;margin-bottom:23px}.secondary{width:100%;padding:13px;background:white;border:1px solid #dce2d6;border-radius:12px;color:#65775b;margin-top:10px}.completed{padding:20px;text-align:center}.map.pulse #startMarker{animation:pulse .7s ease 2}@keyframes pulse{50%{opacity:.3}}@media(min-width:1450px){main{grid-template-columns:500px 1fr}.booking{padding:45px 48px}}@media(max-width:850px){header{height:80px;padding:0 5%}nav{display:none}.brand{font-size:25px}main{display:flex;flex-direction:column}.map{order:-1;min-height:260px;height:260px}.map>svg{object-fit:cover}.map-caption{display:none}.map-top{inset:15px 18px auto}.map-bottom{bottom:12px;left:18px;right:18px}.booking{border-radius:25px 25px 0 0;margin-top:-18px;padding:27px 24px}.intro{margin-bottom:20px}h1{font-size:30px}.map-demo{font-size:11px}footer{margin-bottom:12px}}

/* Google owns the map canvas and its attribution; keep app overlays clear. */
#googleMap{position:absolute;inset:0;width:100%;height:100%}
.google-active #mapSvg,.google-active .map-caption,.google-active .map-bottom{display:none}
.google-active .map-top{pointer-events:none;top:12px;left:12px;right:60px}
.maps-status{font-size:12px;line-height:1.7;color:#778472;margin:10px 0 0}
gmp-place-autocomplete{width:100%;min-width:0;color-scheme:light}
.chosen-place{font-size:12px;color:#6b7b62;line-height:1.6;overflow-wrap:anywhere}
.google-marker{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f47630;color:white;border:3px solid white;box-shadow:0 2px 7px #0003;font:700 15px Arial}
[hidden]{display:none!important}

.primary:disabled{opacity:.55;cursor:not-allowed}

.location-tools{margin-top:14px}.location-tools button{min-height:44px;border:1px solid #dce4d5;border-radius:10px;background:#f8faf5;color:#344d3c;padding:10px 12px;font-size:14px}.location-tools>button{width:100%;text-align:start;font-weight:600}.pin-actions{display:flex;gap:8px;margin-top:8px}.pin-actions button{flex:1}.pin-actions button[aria-pressed=true]{background:#fff0e5;border-color:#ed793a}.location-tools p{font-size:12px;line-height:1.7;color:#697d61;margin:9px 0}.location-tools button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:850px){.map.google-active{height:360px;min-height:360px}.google-active .map-top{right:12px;left:12px}.map-top .map-demo{max-width:60%;text-align:center}}

/* Concept 01: Electric O, with a road cut into the orange ring. */
.brand{gap:10px;letter-spacing:-1.4px;white-space:nowrap;direction:ltr}
.brand-mark{width:56px;height:56px;display:block;flex-shrink:0}
.brand-wordmark{font-family:'DM Sans',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.15;color:#111;letter-spacing:-1.5px}
.brand-wordmark>span{color:#ff681d}
.mini-logo{background:none;padding:0;border-radius:0;object-fit:contain;flex-shrink:0}
@media(max-width:850px){.brand-mark{width:46px;height:46px}.brand-wordmark{font-size:25px;letter-spacing:-1.2px}.brand{gap:7px}}
@media(max-width:360px){.brand-mark{width:39px;height:39px}.brand-wordmark{font-size:22px}}

/* Original supplied artwork: preserve its contours and lettering without redrawing. */
.brand-wordmark-image{display:block;width:185px;height:35px;object-fit:contain}
@media(max-width:850px){.brand-wordmark-image{width:157px;height:auto}}
@media(max-width:360px){.brand-wordmark-image{width:138px;height:auto}}

.brand-mark,.brand-wordmark-image,.mini-logo{mix-blend-mode:multiply}

.brand-mark,.brand-wordmark-image,.mini-logo{mix-blend-mode:normal}
.brand-wordmark-image{height:auto;aspect-ratio:1100/250;object-fit:contain}

.car-eado{width:90px;height:52px;object-fit:contain;flex-shrink:0}@media(max-width:380px){.car-eado{width:72px;height:46px}}

.payment-unavailable{width:100%;text-align:start;margin-top:10px;padding:13px 12px;border:1px solid #e4e5e4;border-radius:12px;background:#f4f4f3;color:#858984;cursor:not-allowed;box-shadow:none;opacity:1;gap:10px}
.payment-unavailable small{color:#858984;font-size:11px;line-height:1.6;margin-top:3px}
.payment-card-icon{display:flex;flex-shrink:0;color:#969a96}
.payment-online-copy{flex:1;min-width:0}
.coming-soon{flex-shrink:0;border-radius:6px;padding:4px 7px;background:#e7e8e6;color:#767b75;font-size:10px;font-weight:600}

.payment-unavailable{align-items:flex-start;padding:15px 13px;background:linear-gradient(120deg,#f7f7f6,#f0f1ef)}
.payment-unavailable .payment-card-icon{margin-top:3px}
.payment-unavailable .coming-soon{margin-top:3px;white-space:nowrap}
.payment-brands{display:flex;align-items:center;gap:8px;margin-top:10px;direction:ltr}
.payment-brand{height:34px;min-width:61px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dedfdd;border-radius:7px;background:#ffffffa6;box-shadow:0 1px 2px #00000004}
.visa-mark{font-family:Arial,sans-serif;font-size:21px;font-weight:900;font-style:italic;letter-spacing:-1px;color:#858984;padding:0 10px}
.mastercard-mark{gap:3px;padding:0 8px}
.mastercard-mark>span{font-family:Arial,sans-serif;font-size:10px;letter-spacing:-.3px;color:#858984}
