:root {
  --ink: #171717;
  --muted: #72706b;
  --paper: #fffdf8;
  --yellow: #f7b718;
  --yellow-soft: #fff2c7;
  --orange: #f59e0b;
  --green: #2e9b68;
  --shadow: 0 18px 48px rgba(37, 31, 18, .16);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #ece9e1; color: var(--ink); }
body { min-height: 100svh; overflow: hidden; }
button { font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .78; }

.auth-screen { position: relative; display: flex; flex-direction: column; min-height: 100svh; max-width: 640px; margin: 0 auto; overflow: hidden; padding: max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(155deg, #fffdf8 0%, #fff8e8 54%, #f7b718 180%); }
.auth-screen[hidden] { display: none; }
.auth-screen::before { content: ''; position: absolute; top: -18%; right: -27%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: rgba(247,183,24,.15); }
.auth-screen::after { content: ''; position: absolute; bottom: -14%; left: -31%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(245,158,11,.2); }
.auth-orbit { position: absolute; border: 1px solid rgba(245,158,11,.22); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 220px; height: 220px; top: 64px; right: -118px; }
.orbit-two { width: 130px; height: 130px; bottom: 105px; left: -70px; }
.auth-topline, .auth-card, .auth-footer { position: relative; z-index: 2; }
.auth-topline { display: flex; align-items: center; justify-content: space-between; }
.auth-brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; letter-spacing: -.04em; }
.auth-brand .brand-mark { width: 38px; height: 38px; border-radius: 13px 13px 13px 4px; font-size: 18px; }
.auth-brand strong { color: #c77600; }
.auth-version { padding: 7px 10px; border: 1px solid rgba(23,23,23,.08); border-radius: 999px; color: #8a836f; font-size: 10px; background: rgba(255,255,255,.48); }
.auth-card { width: min(100%, 430px); margin: auto; padding: 28px 22px 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; background: rgba(255,253,248,.83); box-shadow: 0 22px 60px rgba(93,70,18,.13); backdrop-filter: blur(12px); }
.auth-hero-mark { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 23px 23px 23px 7px; background: var(--yellow); color: var(--ink); font-size: 30px; box-shadow: 0 12px 24px rgba(203,140,0,.23); transform: rotate(-5deg); }
.auth-hero-mark span { transform: rotate(5deg); }
.auth-kicker { color: #bd7a00; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.auth-card h1 { margin: 10px 0 10px; text-align: center; font-size: clamp(32px, 9vw, 47px); letter-spacing: -.07em; }
.auth-card h1 em { color: #c77600; font-style: normal; }
.auth-copy { max-width: 290px; margin: 0 auto 25px; color: var(--muted); text-align: center; line-height: 1.75; font-size: 14px; }
.field-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.phone-field { display: flex; align-items: center; min-height: 56px; border: 1.5px solid #e5dfd0; border-radius: 15px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.phone-field:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.phone-field.field-error { border-color: #c34f35; box-shadow: 0 0 0 4px rgba(195,79,53,.1); }
.country-code { display: grid; place-items: center; min-width: 63px; height: 31px; border-left: 1px solid #e8e2d5; color: #8a836f; font-size: 13px; font-weight: 800; }
.phone-field input { min-width: 0; flex: 1; height: 54px; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; direction: ltr; text-align: left; }
.phone-field input::placeholder { color: #b4aea1; }
.field-hint { min-height: 17px; margin: 7px 3px 12px; color: #999287; font-size: 10px; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 18px; border-radius: 16px; background: var(--yellow); color: var(--ink); font-size: 16px; font-weight: 800; box-shadow: 0 10px 22px rgba(203,140,0,.2); transition: transform .2s ease, opacity .2s ease; }
.auth-submit:active, .guest-button:active { transform: scale(.98); }
.auth-submit b { font-size: 24px; font-weight: 500; direction: ltr; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 13px; color: #ada79b; font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #ece7db; }
.guest-button { width: 100%; min-height: 45px; border: 1px solid #e4ddcf; border-radius: 14px; background: rgba(255,255,255,.52); color: #5e5a53; font-size: 13px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.auth-terms { margin: 16px 8px 0; color: #aaa397; text-align: center; line-height: 1.6; font-size: 9px; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 7px; color: #877e6c; font-size: 11px; }
body.in-app { background: #ece9e1; }
@media (min-width: 641px) { .auth-screen { min-height: 780px; margin-top: 18px; border-radius: 32px; box-shadow: 0 18px 70px rgba(50,42,25,.17); } }

.app-shell { position: relative; min-height: 100svh; max-width: 640px; margin: 0 auto; overflow: hidden; background: var(--paper); }
.map-stage { position: absolute; inset: 0 0 260px; min-height: 430px; overflow: hidden; background: #dedbd1; }
.map-canvas, .map-fallback { position: absolute; inset: 0; }
.map-canvas { background: #d8d6ce; }
.map-fallback { overflow: hidden; background: #dcd9d0; }
.district { position: absolute; border: 1px solid rgba(255,255,255,.65); background: #e8e4d8; transform: rotate(-14deg); }
.district-one { width: 62%; height: 62%; left: -14%; top: 12%; border-radius: 48% 22% 32% 18%; }
.district-two { width: 56%; height: 44%; right: -12%; top: 18%; border-radius: 36% 14% 38% 18%; background: #d5dfd0; }
.district-three { width: 72%; height: 48%; left: 18%; bottom: -8%; border-radius: 40% 22% 15% 31%; background: #e5dfcc; }
.road { position: absolute; background: rgba(255,255,255,.82); box-shadow: 0 0 0 1px rgba(171,165,151,.13); }
.road-main { width: 140%; height: 18px; left: -20%; top: 53%; transform: rotate(-9deg); }
.road-cross { width: 18px; height: 120%; left: 45%; top: -10%; transform: rotate(14deg); }
.road-diagonal { width: 130%; height: 9px; left: -15%; top: 24%; transform: rotate(28deg); background: rgba(255,255,255,.62); }
.river { position: absolute; width: 22%; height: 125%; left: 61%; top: -12%; background: #b7d5d5; transform: rotate(11deg); opacity: .86; box-shadow: 5px 0 0 rgba(255,255,255,.4), -5px 0 0 rgba(255,255,255,.25); }
.map-label { position: absolute; z-index: 2; font-size: 11px; color: #8c877d; letter-spacing: .02em; }
.label-baghdad { top: 17%; left: 29%; font-weight: 800; font-size: 16px; color: #777267; }
.label-karrada { bottom: 25%; right: 22%; }
.label-mansour { top: 33%; left: 13%; }
.route-dash { position: absolute; width: 40%; height: 25%; left: 31%; top: 36%; border: 3px dashed rgba(245, 158, 11, .68); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(22deg); }
.map-marker { position: absolute; left: 49%; top: 49%; z-index: 4; width: 44px; height: 44px; transform: translate(-50%, -50%); transition: left .6s ease, top .6s ease; }
.marker-pin { position: absolute; inset: 6px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); border: 4px solid #fff; box-shadow: 0 5px 14px rgba(111,69,0,.28); }
.mini-tuktuk { transform: rotate(45deg); color: #fff; font-size: 15px; }
.marker-pulse { position: absolute; inset: -10px; border: 2px solid rgba(245,158,11,.5); border-radius: 50%; animation: pulse 2.2s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.65); opacity: .1; } 45% { transform: scale(1); opacity: .7; } }
.fallback-note { position: absolute; z-index: 5; top: 91px; right: 20px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; background: rgba(255,253,248,.88); color: #69655e; font-size: 11px; box-shadow: 0 5px 18px rgba(34,29,19,.08); backdrop-filter: blur(8px); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,155,104,.14); }
.topbar { position: absolute; z-index: 10; top: max(18px, env(safe-area-inset-top)); right: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 16px 16px 16px 5px; background: var(--yellow); color: var(--ink); font-size: 22px; box-shadow: 0 7px 18px rgba(80,55,3,.2); transform: rotate(-4deg); }
.brand-mark span { transform: rotate(4deg); }
.brand-name { font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.brand-name strong { color: #c77600; }
.brand-subtitle { margin-top: 5px; color: #5f5b54; font-size: 11px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(23,23,23,.1); border-radius: 50%; background: rgba(255,253,248,.84); color: var(--ink); font-weight: 800; font-size: 18px; box-shadow: 0 5px 18px rgba(34,29,19,.08); backdrop-filter: blur(8px); }
.map-tools { position: absolute; z-index: 10; top: 155px; right: 16px; }
.locate-button { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 13px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 800; box-shadow: 0 8px 20px rgba(34,29,19,.12); transition: transform .2s ease, background .2s ease; }
.locate-button:active, .ride-button:active { transform: scale(.97); }
.locate-icon { color: var(--orange); font-size: 20px; line-height: .7; }
.locate-button.loading .locate-icon, .ride-button.loading .ride-icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-credit { position: absolute; z-index: 4; bottom: 13px; left: 16px; color: rgba(72,68,61,.65); font-size: 10px; }
.ride-sheet { position: absolute; z-index: 20; right: 0; bottom: 0; left: 0; min-height: 260px; padding: 12px 20px max(18px, env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--paper); box-shadow: 0 -10px 38px rgba(37,31,18,.1); }
.grabber { width: 42px; height: 4px; margin: 0 auto 17px; border-radius: 9px; background: #dedbd2; }
.sheet-kicker { display: flex; align-items: center; gap: 8px; color: #bb7900; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.kicker-line { display: inline-block; width: 22px; height: 2px; background: var(--yellow); }
h1 { margin: 9px 0 4px; font-size: clamp(25px, 7vw, 34px); line-height: 1.1; letter-spacing: -.055em; }
.sheet-copy { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.ride-button { display: flex; align-items: center; width: 100%; min-height: 58px; padding: 0 16px; border-radius: 17px; background: var(--yellow); color: var(--ink); font-weight: 800; box-shadow: 0 10px 24px rgba(203,140,0,.22); transition: transform .2s ease, opacity .2s ease; }
.ride-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-left: 10px; border-radius: 10px; background: rgba(255,255,255,.48); font-size: 17px; }
#rideLabel { flex: 1; text-align: right; font-size: 16px; }
.button-arrow { font-size: 23px; direction: ltr; }
.demo-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; color: #9a958c; font-size: 10px; }
.demo-badge { padding: 3px 7px; border-radius: 999px; background: #f1eee7; color: #78736a; font-weight: 800; }
.toast { position: fixed; z-index: 50; right: 18px; bottom: max(278px, calc(260px + env(safe-area-inset-bottom))); left: 18px; max-width: 500px; margin: auto; padding: 13px 15px; border: 1px solid rgba(23,23,23,.08); border-radius: 14px; background: #24221f; color: #fff; text-align: center; font-size: 13px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast[data-kind="success"] { background: #1f8055; }
.toast[data-kind="warning"] { background: #8b5a00; }
.info-panel { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(23,23,23,.34); backdrop-filter: blur(5px); }
.info-panel[hidden] { display: none; }
.info-card { position: relative; width: min(100%, 360px); padding: 30px 24px 23px; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.close-button { position: absolute; top: 12px; left: 14px; width: 32px; height: 32px; border-radius: 50%; background: #f2efe8; color: #68645b; font-size: 23px; line-height: 1; }
.info-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 17px; background: var(--yellow); font-size: 25px; }
.info-card h2 { margin: 0 0 7px; font-size: 24px; }
.info-card p { margin: 0 0 20px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.small-button { width: 100%; padding: 12px; border-radius: 13px; background: var(--yellow); color: var(--ink); font-weight: 800; }
@media (min-width: 641px) { .app-shell { min-height: 780px; margin-top: 18px; border-radius: 32px; box-shadow: 0 18px 70px rgba(50,42,25,.17); } body { padding: 18px 0; } .map-stage { border-radius: 32px 32px 0 0; } }
@media (max-height: 680px) and (max-width: 640px) { .map-stage { bottom: 234px; } .ride-sheet { min-height: 234px; padding-top: 8px; } .sheet-copy { margin-bottom: 12px; } .grabber { margin-bottom: 11px; } .map-tools { top: 132px; } }