/* =====================================================================
   وين — light surface
   White sheets over a light map, which is the layout riders already know.
   Brand navy is the primary action colour and amber is kept for money,
   so it still reads as Wayn rather than a clone.
   ===================================================================== */

:root{
  --ink:#0E1830;        /* brand navy, used for text and primary buttons */
  --ink-2:#39445C;
  --ink-3:#6B7488;
  --line-l:#E6E8EC;
  --surf:#FFFFFF;
  --surf-2:#F5F6F8;
  --am:#E8A33D;
  --ok-l:#1F9D63;
  --bad-l:#D64A3B;
}

body.light{ background:#EDEFF2; color:var(--ink); }

/* ---------- chrome ---------- */
body.light .iconbtn{
  background:var(--surf); border:0; color:var(--ink);
  box-shadow:0 2px 10px rgba(16,24,40,.16);
}
body.light .balpill{
  background:var(--ink); color:#fff; border:0;
  box-shadow:0 2px 12px rgba(16,24,40,.22); font-size:.98rem;
}
body.light .balpill small{ color:#B9C0CE; }
body.light .earnpill{
  background:var(--ink); color:#fff; border:0;
  box-shadow:0 4px 16px rgba(16,24,40,.3);
}
body.light .earnpill span{ color:#7BE0A9; }

/* ---------- sheet ---------- */
body.light .sheet{
  background:var(--surf); border-top:0; color:var(--ink);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 34px rgba(16,24,40,.18);
}
body.light .sheet::before{ background:#D8DBE2; }
body.light .sheet h2{ color:var(--ink); font-size:1.34rem; }
body.light .sheet .sub, body.light .mu{ color:var(--ink-3); }

/* ---------- the Uber-style from/to block ---------- */
body.light .trip-fields{
  border:1.5px solid var(--ink); border-radius:14px; padding:4px 14px; margin-bottom:14px;
}
body.light .tf{
  display:flex; align-items:center; gap:13px; padding:14px 0; width:100%;
  background:none; border:0; text-align:start; font-size:1.04rem; color:var(--ink);
}
body.light .tf+.tf{ border-top:1px solid var(--line-l); }
body.light .tf .g{ width:11px; display:grid; place-items:center; flex:none }
body.light .tf .g i{ width:11px; height:11px; border-radius:50%; background:var(--ink); display:block }
body.light .tf.dest .g i{ border-radius:2px; }
body.light .tf span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
body.light .tf .ph{ color:var(--ink-3) }

/* ---------- ride options ---------- */
body.light .ride{
  background:var(--surf); border:2px solid transparent; border-radius:14px;
  padding:12px 14px; color:var(--ink); gap:12px;
}
body.light .ride[aria-pressed="true"]{ border-color:var(--ink); background:var(--surf); }
body.light .ride .nm b{ color:var(--ink); font-size:1.06rem }
body.light .ride .nm small{ color:var(--ink-3) }
body.light .ride .pr{ color:var(--ink); font-size:1.12rem }
body.light .rides{ gap:2px }

/* ---------- buttons ---------- */
body.light .act{ background:var(--ink); color:#fff; border-radius:12px; }
body.light .act.ok{ background:var(--ok-l); color:#fff }
body.light .act[style*="var(--bad)"]{ background:var(--bad-l)!important; color:#fff!important }
body.light .btn{ background:var(--ink); color:#fff }
body.light .btn.ghost{ background:var(--surf-2); border:0; color:var(--ink) }
body.light .mini2 a, body.light .mini2 button{
  background:var(--surf-2); border:0; color:var(--ink); border-radius:12px;
}
body.light .pill{ border-color:var(--line-l); color:var(--ink-3); background:var(--surf) }
body.light .pill.am{ background:#FDF3E2; border-color:#F0D6A6; color:#8A5B12 }
body.light .pill.ok{ background:#E8F6EE; border-color:#BFE6D2; color:var(--ok-l) }
body.light .seg{ background:var(--surf-2); border:0 }
body.light .seg button{ color:var(--ink-3) }
body.light .seg button[aria-pressed="true"]{ background:var(--ink); color:#fff }

/* ---------- cards, lists ---------- */
body.light .card, body.light .capcard, body.light .item{
  background:var(--surf); border:1px solid var(--line-l); color:var(--ink);
}
body.light .card.lit{ background:#FBF6EC; border-color:#F0D6A6 }
body.light .avatar{ background:var(--surf-2); color:var(--ink) }
body.light .big{ color:var(--ink) }
body.light .xl{ color:var(--ink) }
body.light .legrow small{ color:var(--ink-3) }
body.light .legline{ border-color:var(--line-l) }
body.light .dotm.a{ background:var(--ink) }
body.light .dotm.b{ background:var(--am) }

/* ---------- panels ---------- */
body.light .panel{ background:var(--surf); color:var(--ink) }
body.light .panel__head{ border-bottom:1px solid var(--line-l) }
body.light .plist button{ color:var(--ink); border-bottom:1px solid var(--line-l) }
body.light .plist .ic{ background:var(--surf-2) }
body.light .plist small{ color:var(--ink-3) }
body.light input, body.light select, body.light textarea{
  background:var(--surf); color:var(--ink); border:1px solid #D6D9E0;
}
body.light input::placeholder{ color:#9AA1B0 }
body.light label{ color:var(--ink-3) }

/* ---------- Uber-style account header ---------- */
.acct-head{ padding:6px 0 18px }
.acct-head h1{ font-size:2rem; margin:0 0 8px; line-height:1.15 }
.acct-rate{
  display:inline-flex; align-items:center; gap:6px; background:var(--surf-2);
  border-radius:8px; padding:5px 11px; font-weight:700; font-size:.95rem;
}
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px }
.tile3{
  background:var(--surf-2); border:0; border-radius:14px; padding:18px 8px;
  display:grid; gap:8px; place-items:center; color:var(--ink); font-weight:600; font-size:.95rem;
}
.tile3 svg{ width:26px; height:26px; stroke:var(--ink); fill:none; stroke-width:1.7 }
.tile3:active{ background:#EBEDF1 }

/* ---------- wallet ---------- */
.balcard{
  background:var(--ink); color:#fff; border-radius:18px; padding:22px;
  margin-bottom:18px;
}
.balcard small{ color:#AEB6C6; font-size:.86rem }
.balcard .amt{ font-family:var(--fd); font-weight:800; font-size:2.5rem; letter-spacing:-1px }
.balcard .amt span{ font-size:1rem; color:#AEB6C6; font-weight:600 }

.paylist{ display:grid; gap:2px; margin-bottom:6px }
.payrow{
  display:flex; align-items:center; gap:14px; width:100%; background:none; border:0;
  padding:16px 4px; text-align:start; color:var(--ink); font-size:1.02rem;
  border-bottom:1px solid var(--line-l);
}
.payrow:active{ background:var(--surf-2) }
.payrow .logo{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:.82rem; color:#fff; flex:none;
}
.payrow .tx{ flex:1; min-width:0 }
.payrow .tx b{ display:block; font-weight:600 }
.payrow .tx small{ color:var(--ink-3); font-size:.83rem }
.payrow .arw{ color:var(--ink-3) }

.acct-sec{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:22px 0 8px; font-weight:700 }

.statusrow{
  display:flex; justify-content:space-between; gap:10px; padding:13px 0;
  border-bottom:1px solid var(--line-l); font-size:.92rem;
}
.badge{ border-radius:100px; padding:3px 11px; font-size:.78rem; font-weight:700 }
.badge.p{ background:#FDF3E2; color:#8A5B12 }
.badge.a{ background:#E8F6EE; color:var(--ok-l) }
.badge.r{ background:#FBE9E7; color:var(--bad-l) }

/* login screens keep the dark brand look */
body.light #login{ background:var(--ink); color:#EFE7D8 }
body.light #login .card{ background:#16213D; border-color:#2A3A61; color:#EFE7D8 }
body.light #login label{ color:#9AA6C0 }
body.light #login input{ background:#0E1830; color:#EFE7D8; border-color:#2A3A61 }
body.light #login .btn{ background:var(--am); color:#241703 }
body.light #login .btn.ghost{ background:transparent; border:1.5px solid #2A3A61; color:#EFE7D8 }
body.light #login .mu{ color:#9AA6C0 }
body.light #login h1{ color:#EFE7D8 }
body.light #login .msg.info{ background:rgba(232,163,61,.1); color:#9AA6C0 }

/* ---------- welcome / auth screens ---------- */
.lstep{animation:lin .28s ease}
@keyframes lin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lback{background:none;border:0;color:#9AA6C0;font:inherit;font-size:.92rem;padding:0 0 10px;cursor:pointer}
.sells{display:grid;gap:14px;margin:26px 0 28px}
.sell{display:flex;gap:14px;align-items:flex-start}
.sell span{font-size:1.5rem;line-height:1;flex:none;width:34px;text-align:center}
.sell b{display:block;color:#EFE7D8;font-size:1rem;font-weight:600}
.sell small{display:block;color:#9AA6C0;font-size:.86rem;line-height:1.55;margin-top:2px}
.legal{color:#7E8CA8;font-size:.82rem;text-align:center;margin-top:18px;line-height:1.7}
.legal a{color:#E8A33D;text-decoration:none}
.agree{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  color:#9AA6C0;font-size:.88rem;margin-top:4px;cursor:pointer}
.agree input{width:20px;height:20px;margin-top:2px;accent-color:#E8A33D}
.agree a{color:#E8A33D;text-decoration:none}