/* SHELLEH RIDE Mini App — mobile first, brand navy, follows Telegram's light/dark theme. */
:root {
  --navy:#021641; --navy-2:#0a2463; --accent:#3d7bff; --accent-2:#22d3ee;
  --bg: var(--tg-theme-bg-color, #f2f5fb); --card: var(--tg-theme-secondary-bg-color, #ffffff);
  --ink: var(--tg-theme-text-color, #0b1530); --muted: var(--tg-theme-hint-color, #64708a);
  --line: rgba(120,140,180,.18); --good:#10b981; --bad:#ef4444; --warn:#f59e0b;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-navy: linear-gradient(160deg, #0a2463 0%, #021641 60%, #010a1f 100%);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; overflow-x:hidden; }
body { font-family:system-ui, "Segoe UI", Tahoma, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; }
#app { max-width:560px; margin:0 auto; padding:0 0 32px; }
button { font:inherit; border:none; cursor:pointer; }

.splash { min-height:100vh; display:grid; place-items:center; align-content:center; gap:22px; background:var(--grad-navy); }
.splash img { width:90px; animation:float 3s ease-in-out infinite; filter:drop-shadow(0 10px 30px rgba(61,123,255,.7)); }
.spinner { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin .8s linear infinite; }

.hero { position:relative; overflow:hidden; padding:22px 18px 26px; color:#fff; background:var(--grad-navy); border-radius:0 0 26px 26px; }
.hero::before { content:""; position:absolute; width:300px; height:300px; inset-block-start:-150px; inset-inline-end:-80px;
                background:radial-gradient(circle, rgba(61,123,255,.5), transparent 60%); animation:drift 10s ease-in-out infinite alternate; }
.hero > * { position:relative; }
.hero .top { display:flex; align-items:center; justify-content:space-between; }
.hero .logo { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.06em; font-size:14px; }
.hero .logo img { width:30px; }
.hero h1 { margin:18px 0 4px; font-size:24px; }
.hero p { margin:0; color:#a9bce8; font-size:14px; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:7px 12px; border-radius:99px; background:rgba(255,255,255,.12); font-size:13px; font-weight:600; }

.section { padding:16px; }
.section h2 { font-size:16px; margin:6px 2px 12px; }
.card { background:var(--card); border-radius:18px; padding:16px; box-shadow:0 1px 2px rgba(2,22,65,.05), 0 8px 22px rgba(2,22,65,.07);
        border:1px solid var(--line); animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
.card + .card { margin-top:12px; }
.big { display:flex; align-items:center; gap:14px; width:100%; text-align:start; color:var(--ink); }
.big .ic { width:52px; height:52px; border-radius:16px; background:var(--grad); display:grid; place-items:center; font-size:24px; flex:none;
           box-shadow:0 8px 20px rgba(61,123,255,.35); }
.big b { display:block; font-size:17px; }
.big span { color:var(--muted); font-size:13px; }

.steps { display:flex; gap:6px; margin:0 2px 14px; }
.steps i { flex:1; height:4px; border-radius:4px; background:var(--line); }
.steps i.on { background:var(--grad); }
.choices { display:grid; gap:10px; }
.choice { width:100%; padding:16px; border-radius:16px; background:var(--card); color:var(--ink); border:1px solid var(--line);
          font-weight:700; font-size:16px; text-align:start; display:flex; align-items:center; justify-content:space-between;
          animation:rise .4s cubic-bezier(.2,.8,.2,1) both; transition:transform .15s, border-color .2s; }
.choice:active { transform:scale(.98); }
.choice small { color:var(--muted); font-weight:500; }
.choice.home { border-color:var(--accent); }
.search { width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink);
          font:inherit; font-size:16px; margin-bottom:12px; outline:none; }
.search:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(61,123,255,.15); }

.trip .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.trip .time { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.trip .price { font-size:18px; font-weight:800; color:var(--accent); }
.trip .meta { color:var(--muted); font-size:13px; margin-top:8px; line-height:1.7; }
.tag { display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700; background:rgba(61,123,255,.12); color:var(--accent); }
.tag.pink { background:rgba(236,72,153,.12); color:#db2777; }
.btn { width:100%; padding:15px; border-radius:14px; background:var(--grad); color:#fff; font-weight:800; font-size:16px; margin-top:14px;
       box-shadow:0 8px 20px rgba(61,123,255,.3); transition:transform .15s; }
.btn:active { transform:scale(.98); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.danger { background:linear-gradient(135deg,#ef4444,#f97316); box-shadow:0 8px 20px rgba(239,68,68,.25); }
.btn:disabled { opacity:.6; }
.muted { color:var(--muted); font-size:13px; }
.center { text-align:center; padding:40px 20px; }
.center .emoji { font-size:56px; animation:float 3s ease-in-out infinite; }
.note { padding:12px 14px; border-radius:14px; background:rgba(245,158,11,.12); color:#b45309; font-size:14px; margin-bottom:12px; }
.error { padding:12px 14px; border-radius:14px; background:rgba(239,68,68,.1); color:var(--bad); font-size:14px; margin:12px 0; }

.sheet-bg { position:fixed; inset:0; background:rgba(1,10,31,.5); display:flex; align-items:flex-end; z-index:10; animation:fade .2s both; }
.sheet { width:100%; max-width:560px; margin:0 auto; background:var(--bg); border-radius:24px 24px 0 0; padding:20px 16px 28px;
         animation:up .3s cubic-bezier(.2,.8,.2,1) both; }
.sheet h3 { margin:0 0 12px; }
input[type=time] { width:100%; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:18px; }

@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes drift { from { transform:translate(0,0); } to { transform:translate(-30px,30px) scale(1.1); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes up { from { transform:translateY(100%); } to { transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation:none !important; transition:none !important; } }

/* driver screens */
.neg { color:var(--bad); }
.pax { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.pax a { color:var(--accent); text-decoration:none; font-weight:600; font-size:14px; }
.mini { padding:8px 12px; border-radius:10px; background:rgba(239,68,68,.12); color:var(--bad); font-weight:700; font-size:13px; flex:none; }
.seg { display:flex; flex-wrap:wrap; gap:8px; }
.seg button, .chipbtn { padding:10px 14px; border-radius:12px; background:var(--card); color:var(--ink); border:1px solid var(--line); font-weight:600; }
.seg button.on, .chipbtn.on { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(61,123,255,.3); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.stepper { display:flex; align-items:center; gap:18px; }
.stepper button { width:44px; height:44px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:22px; font-weight:800; }
.stepper b { font-size:22px; min-width:24px; text-align:center; }
.toggle { display:flex; align-items:center; gap:10px; margin-top:16px; font-weight:600; }
.toggle input { width:22px; height:22px; accent-color:#db2777; }
.section h3 { margin:18px 2px 8px; font-size:14px; color:var(--muted); }
.card.onway { border-color:rgba(34,211,238,.45); }

/* ---------------------------------------------------------------- map (Uber-style)
   The map sits at the top; the screens are a sheet that slides over it. */
#map { display:none; }
body.has-map #map { display:block; position:fixed; inset:0 0 auto 0; height:48vh; z-index:0; background:#dfe6f2; }
body.has-map #app { position:relative; z-index:1; margin-top:40vh; min-height:60vh; background:var(--bg);
  border-radius:26px 26px 0 0; box-shadow:0 -10px 40px rgba(2,22,65,.18); padding-top:14px; }
body.has-map #app::before { content:""; display:block; width:42px; height:5px; border-radius:5px; background:var(--line);
  margin:0 auto 4px; background:rgba(120,140,180,.45); }
/* the header becomes light, the brand + balance float on the map */
body.has-map .hero { background:none; color:var(--ink); padding:6px 18px 2px; border-radius:0; overflow:visible; }
body.has-map .hero::before { display:none; }
body.has-map .hero h1 { margin:6px 0 2px; font-size:22px; }
body.has-map .hero p { color:var(--muted); }
body.has-map .hero .top { position:fixed; top:calc(10px + env(safe-area-inset-top)); inset-inline:12px; z-index:2; pointer-events:none; }
body.has-map .hero .top > * { pointer-events:auto; background:rgba(255,255,255,.92); color:#0b1530; padding:7px 12px;
  border-radius:99px; box-shadow:0 4px 16px rgba(2,22,65,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.has-map .hero .logo img { width:22px; }
/* Telegram's dark theme: darker map */
.map-dark .leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
.leaflet-tile-pane { filter:saturate(.75); }
.leaflet-container { font:inherit; }
.leaflet-control-attribution { font-size:9px; background:rgba(255,255,255,.7) !important; }

/* "where to?" like ride apps */
.whereto { width:100%; display:flex; align-items:center; gap:12px; padding:16px 16px; border-radius:16px; background:var(--card);
  color:var(--ink); border:1px solid var(--line); box-shadow:0 6px 20px rgba(2,22,65,.08); text-align:start; animation:rise .4s both; }
.whereto .sq { width:10px; height:10px; background:var(--ink); flex:none; border-radius:2px; }
.whereto b { flex:1; font-size:18px; }
.whereto .when { font-size:12px; padding:6px 10px; border-radius:99px; background:rgba(61,123,255,.12); color:var(--accent); font-weight:700; }
.quick { display:flex; gap:8px; margin-top:12px; overflow-x:auto; }
.qchip { padding:10px 14px; border-radius:99px; background:var(--card); color:var(--ink); border:1px solid var(--line); font-weight:600;
  white-space:nowrap; flex:none; }
.section > .card.big { margin-top:12px; }

/* pins */
.pin-wrap { background:none; border:none; }
.pin { position:absolute; transform:translate(-50%, -50%); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.pin .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:15px; background:#fff;
  box-shadow:0 3px 10px rgba(2,22,65,.3); border:2px solid #fff; }
.pin .lab { display:flex; flex-direction:column; padding:4px 9px; border-radius:10px; background:#fff; color:#0b1530;
  box-shadow:0 3px 10px rgba(2,22,65,.2); font-size:12px; line-height:1.25; }
.pin .lab small { color:#3d7bff; font-weight:700; direction:ltr; }
.pin.uni .dot { width:38px; height:38px; font-size:19px; background:#021641; border-color:#3d7bff; }
.pin.area.on .dot { background:#3d7bff; }
.pin.area.small .dot { width:12px; height:12px; font-size:0; background:#3d7bff; border-width:2px; }
.me-dot { width:18px; height:18px; border-radius:50%; background:#3d7bff; border:3px solid #fff;
  box-shadow:0 0 0 0 rgba(61,123,255,.6); animation:ping 2s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(61,123,255,.55); } 100% { box-shadow:0 0 0 18px rgba(61,123,255,0); } }
.card.trip { cursor:pointer; }
body.has-map .hero .logo img { background:#021641; border-radius:50%; padding:3px; width:26px; height:26px; }
/* zoomed out: just the dots (the selected area and the university keep their names) */
#map.far .pin.area:not(.on) .lab { display:none; }
.pin.area .dot { width:26px; height:26px; font-size:13px; }
.pin .lab { font-size:11px; padding:3px 8px; }
/* the map itself is always left-to-right (pins sit exactly on their point) */
#map, .leaflet-container { direction:ltr; }
.pin { left:0; top:0; }
.pin .lab { direction:rtl; text-align:right; }
html[dir=ltr] .pin .lab { direction:ltr; text-align:left; }
/* the dot sits exactly on the point; the label hangs beside it */
.pin { display:block; }
.pin .lab { position:absolute; left:calc(100% + 6px); top:50%; transform:translateY(-50%); }
.mini.chat { background:rgba(61,123,255,.12); color:var(--accent); margin-inline-end:6px; }

/* ---------------------------------------------------------------- forms (registration, driver application) */
.fld { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.fld > span { font-weight:700; font-size:14px; }
.fld .search { margin-bottom:0; }
.photo-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px;
  border:2px dashed var(--line); border-radius:16px; background:var(--card); color:var(--accent); font-weight:700;
  cursor:pointer; overflow:hidden; padding:10px; }
.photo-box .ph { font-size:40px; }
.photo-box img { max-width:100%; max-height:220px; border-radius:12px; object-fit:contain; }
.row2 { display:flex; gap:10px; }
.row2 .btn { margin-top:10px; }

/* ---------------------------------------------------------------- chat */
.chat-screen { display:flex; flex-direction:column; min-height:calc(100vh - 20px); padding-bottom:84px; }
body.has-map .chat-screen { min-height:56vh; }
.chat-top { display:flex; flex-direction:column; gap:3px; padding:4px 2px 12px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.chat-top b { font-size:17px; }
.chat-list { display:flex; flex-direction:column; gap:8px; flex:1; }
.chat-list .bubble { max-width:80%; padding:9px 13px; border-radius:18px; line-height:1.5; animation:rise .25s both;
  overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-list .bubble .at { display:block; font-size:10px; opacity:.65; margin-top:2px; }
.chat-list .bubble .who { display:block; font-size:11px; font-weight:800; margin-bottom:2px; }
.chat-list .bubble.mine { align-self:flex-start; background:var(--grad); color:#fff; border-start-start-radius:6px; }
.chat-list .bubble.theirs { align-self:flex-end; background:var(--card); border:1px solid var(--line); border-start-end-radius:6px; }
.chat-list .bubble.staff { align-self:center; background:rgba(245,158,11,.14); color:var(--ink); max-width:90%; }
.chat-bar { position:fixed; bottom:0; inset-inline:0; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line); z-index:5; max-width:560px; margin:0 auto; }
.chat-input { flex:1; resize:none; padding:12px 14px; border-radius:22px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font:inherit; font-size:16px; max-height:120px; outline:none; }
.chat-input:focus { border-color:var(--accent); }
.chat-send-btn { width:46px; height:46px; flex:none; border-radius:50%; background:var(--grad); color:#fff; font-size:18px;
  box-shadow:0 6px 16px rgba(61,123,255,.3); }
[dir=rtl] .chat-send-btn { transform:scaleX(-1); }
.chat-send-btn:disabled { opacity:.5; }
.tag.blue { background:rgba(37,99,235,.12); color:#2563eb; }
.toggle.men input { accent-color:#2563eb; }
.card.wallet { text-align:center; }
.big-num { font-size:34px; font-weight:900; margin:4px 0 8px; letter-spacing:-.02em; }
.big-num.neg { color:var(--bad); }
.cliq { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:20px; }
.steps-text { white-space:pre-line; line-height:1.8; margin:10px 0 0; }
button.chip { border:none; color:inherit; font:inherit; cursor:pointer; }
.demo-bar { position:fixed; top:0; inset-inline:0; z-index:20; text-align:center; font-size:12px; font-weight:700;
  padding:calc(5px + env(safe-area-inset-top)) 10px 5px; background:#f59e0b; color:#1f1300; pointer-events:none; }
body.demo { padding-top:26px; }
body.demo.has-map #map { top:26px; }
body.demo.has-map .hero .top { top:calc(36px + env(safe-area-inset-top)); }

/* ---------------------------------------------------------------- the website (outside Telegram) */
.web-back { position:fixed; top:calc(10px + env(safe-area-inset-top)); inset-inline-start:12px; z-index:30; width:40px; height:40px;
  border-radius:50%; background:rgba(255,255,255,.92); color:#0b1530; font-size:28px; line-height:1; font-weight:700;
  box-shadow:0 4px 16px rgba(2,22,65,.2); }
[dir=rtl] .web-back { transform:scaleX(-1); }
body:has(.web-back:not([style*="none"])) .hero .top .logo { margin-inline-start:48px; }
.chips { display:inline-flex; gap:8px; align-items:center; }
.chip.bell { position:relative; }
.chip.bell b { position:absolute; top:-4px; inset-inline-end:-4px; background:var(--bad); color:#fff; border-radius:99px;
  font-size:10px; padding:1px 6px; }
.note-item { cursor:pointer; display:flex; flex-direction:column; gap:4px; white-space:pre-wrap; line-height:1.6; }
.note-item.new { border-color:var(--accent); }
.card.setup { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.card.setup .btn { margin-top:6px; }
.rate-card { display:flex; flex-direction:column; gap:6px; }
.stars { display:flex; gap:6px; direction:ltr; justify-content:center; margin:6px 0; }
.star { font-size:34px; line-height:1; background:none; color:#cbd5e1; padding:2px 4px; transition:transform .1s, color .1s; }
.star.on { color:#f59e0b; transform:scale(1.08); }
.rate-card .search { margin:0; }