/* eSewak v4.1.0 — Sawari (ride) + Track Order + Contact us
   File: /assets/css/ride.css */
.rm-map { width: 100%; height: 320px; border-radius: 14px; overflow: hidden; background: #e8eef5; border: 1px solid #dbe3ec; position: relative; z-index: 0; }
.rm-map.tall { height: 420px; }
.rm-map-msg { display: flex; align-items: center; justify-content: center; height: 100%; color: #64748b; font-size: .9rem; text-align: center; padding: 12px; }
.rm-pin { background: none; border: 0; }
.rm-pin-b { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid #334155; display: flex; align-items: center;
  justify-content: center; font-size: 16px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

.rd-wrap { display: grid; gap: 14px; }
@media (min-width: 900px) { .rd-wrap.two { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.rd-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.rd-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.rd-field { position: relative; margin-bottom: 10px; }
.rd-field label { display: block; font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
.rd-field .rd-row { display: flex; gap: 6px; }
.rd-field input { flex: 1; min-width: 0; }
.rd-field.on input { outline: 2px solid #2563eb; }
.rd-sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 1000; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.12); max-height: 240px; overflow: auto; }
.rd-sugg button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font-size: .88rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.rd-sugg button:hover { background: #eff6ff; }
.rd-hint { font-size: .8rem; color: #64748b; margin: 4px 0 8px; }
.rd-veh { display: grid; gap: 8px; margin: 10px 0; }
.rd-veh-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid #e5e7eb; border-radius: 12px; cursor: pointer; background: #fff; text-align: left; width: 100%; font: inherit; }
.rd-veh-opt.sel { border-color: #2563eb; background: #eff6ff; }
.rd-veh-opt .ic { font-size: 1.7rem; }
.rd-veh-opt .nm { flex: 1; }
.rd-veh-opt .nm small { display: block; color: #64748b; font-size: .78rem; }
.rd-veh-opt .fr { font-weight: 800; font-size: 1.1rem; }
.rd-veh-opt.none { opacity: .6; }
.rd-pay { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.rd-pay label { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; cursor: pointer; font-size: .88rem; }
.rd-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-weight: 700; margin-bottom: 10px; }
.rd-status.ok { background: #ecfdf5; color: #065f46; }
.rd-status.bad { background: #fef2f2; color: #991b1b; }
.rd-status .spin { width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rdspin 1s linear infinite; }
@keyframes rdspin { to { transform: rotate(360deg); } }
.rd-otp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 2px dashed #f59e0b; border-radius: 12px; background: #fffbeb; margin-bottom: 10px; }
.rd-otp b { font-size: 1.8rem; letter-spacing: .35em; font-family: ui-monospace, monospace; }
.rd-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rd-person .av { width: 46px; height: 46px; border-radius: 50%; background: #e0e7ff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; flex: none; }
.rd-person .av img { width: 100%; height: 100%; object-fit: cover; }
.rd-person .nm { flex: 1; min-width: 0; }
.rd-person .nm small { display: block; color: #64748b; }
.rd-addr { font-size: .88rem; margin: 6px 0; display: flex; gap: 6px; }
.rd-addr span:first-child { flex: none; }
.rd-kv { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .88rem; margin: 8px 0; }
.rd-kv b { font-size: 1rem; }
.rd-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rd-btns .btn { flex: 1 1 auto; }
.rd-req { border: 2px solid #22c55e; border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #f0fdf4; animation: rdpulse 1.6s ease-in-out infinite; }
@keyframes rdpulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.15); } }
.rd-req .fr { font-size: 1.5rem; font-weight: 800; color: #166534; }
.rd-stars { display: flex; gap: 6px; font-size: 2rem; margin: 6px 0; }
.rd-stars button { background: none; border: 0; cursor: pointer; font-size: inherit; color: #cbd5e1; padding: 0; }
.rd-stars button.on { color: #f59e0b; }
.rd-hist { display: grid; gap: 8px; }
.rd-hist-row { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: .86rem; }
.rd-hist-row .x { flex: 1; min-width: 0; }
.rd-hist-row .x div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #e2e8f0; color: #334155; }
.rd-badge.completed { background: #dcfce7; color: #166534; }
.rd-badge.cancelled, .rd-badge.expired { background: #fee2e2; color: #991b1b; }
.rd-badge.searching, .rd-badge.accepted, .rd-badge.arrived, .rd-badge.started { background: #dbeafe; color: #1e40af; }
.rd-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-onoff { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; flex: none; }
.rd-onoff.on { background: #dcfce7; color: #166534; border-color: #86efac; }
.rd-onoff input { width: 18px; height: 18px; margin: 0; accent-color: #16a34a; appearance: auto; -webkit-appearance: checkbox; }
.rd-nav-dot { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; margin-left: 4px; }

/* Track Order timeline */
.rm-steps { list-style: none; margin: 10px 0; padding: 0; }
.rm-steps li { display: flex; gap: 12px; padding: 0 0 14px; position: relative; color: #94a3b8; }
.rm-steps li::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: #e2e8f0; }
.rm-steps li:last-child::before { display: none; }
.rm-steps .rm-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #cbd5e1; background: #fff; flex: none; margin-top: 2px; position: relative; z-index: 1; }
.rm-steps li.done { color: #0f172a; }
.rm-steps li.done .rm-dot { border-color: #16a34a; background: #16a34a; }
.rm-steps li.done::before { background: #16a34a; }
.rm-steps li.bad .rm-dot { border-color: #dc2626; background: #dc2626; }
.rm-steps small { display: block; color: #64748b; font-size: .78rem; }

/* Contact us modal (home footer) */
.sc-ov { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sc-box { background: #fff; color: #0f172a; border-radius: 18px; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.sc-box h3 { margin: 0 0 12px; font-size: 1.25rem; }
.sc-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.sc-row:last-of-type { border-bottom: 0; }
.sc-row .ic { font-size: 1.3rem; flex: none; width: 28px; text-align: center; }
.sc-row a { color: #1d4ed8; font-weight: 600; text-decoration: none; word-break: break-word; }
.sc-row small { display: block; color: #64748b; font-size: .78rem; }
.sc-x { float: right; background: #f1f5f9; border: 0; border-radius: 50%; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; }

@media (prefers-color-scheme: dark) {
  html.dark-ok .rd-card, html.dark-ok .sc-box { background: #0f172a; color: #e2e8f0; border-color: #1e293b; }
}

/* v4.1.1: khoj ka sandesh (khoj rahe / nahi mila) */
.rd-sugg-msg { padding: 10px 12px; font-size: .85rem; color: #475569; line-height: 1.45; }

/* ============================================================
   v4.1.2 — map: chhota ⓘ credit, ⛶ poora screen (isi frame me), gaadi icon, 🧭 raasta-darshan, doori patti
   ============================================================ */
.rm-credit { background: rgba(255,255,255,.85); border-radius: 12px; font-size: 11px; line-height: 1; display: flex; align-items: center; margin: 0 6px 6px 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rm-credit-i { border: 0; background: none; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 13px; color: #475569; }
.rm-credit-t { display: none; padding-right: 8px; white-space: nowrap; }
.rm-credit.open .rm-credit-t { display: inline; }
.rm-credit a { color: #334155; text-decoration: none; }
.rm-fs-btn { width: 34px; height: 34px; border-radius: 6px; border: 2px solid rgba(0,0,0,.2); background: #fff; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.rm-full { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  z-index: 99990 !important; border-radius: 0 !important; border: 0 !important; margin: 0 !important; }
html.rm-noscroll, html.rm-noscroll body { overflow: hidden !important; }
.rm-pin-b.big { width: 40px; height: 40px; font-size: 21px; position: relative; }
.rm-pin-b i { position: absolute; right: -4px; bottom: -4px; min-width: 15px; height: 15px; border-radius: 8px; color: #fff; font: 700 10px/15px system-ui, sans-serif; text-align: center; font-style: normal; }

/* Dono taraf ki doori (customer ↔ rider) */
.rd-gap { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; margin-bottom: 10px; font-size: .92rem; }
.rd-gap b { font-size: 1.15rem; color: #c2410c; }
.rd-gap small { display: block; color: #9a3412; opacity: .85; }
.rd-gap .ic { font-size: 1.6rem; }

/* 🧭 Navigation patti (map ke upar, poore screen me bhi) */
.rm-navbar { position: absolute; left: 8px; right: 54px; top: 8px; z-index: 1000; background: #0f5132; color: #fff; border-radius: 14px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.rm-navbar .ic { font-size: 2rem; line-height: 1; }
.rm-navbar .tx { flex: 1; min-width: 0; }
.rm-navbar .tx b { display: block; font-size: 1.25rem; }
.rm-navbar .tx span { display: block; font-size: .9rem; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-navbar button { background: rgba(255,255,255,.18); border: 0; color: #fff; border-radius: 10px; width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; }
.rm-navfoot { position: absolute; left: 8px; bottom: 8px; z-index: 1000; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: .9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; gap: 12px; align-items: center; }
.rm-navfoot b { font-size: 1.05rem; }
.rm-navfoot button { border: 0; background: #fee2e2; color: #991b1b; border-radius: 8px; padding: 6px 10px; font-weight: 700; cursor: pointer; }

/* ============================================================
   v4.1.3 — Google Maps jaisi jagah-khoj suchi
   ============================================================ */
.rd-sugg { max-height: 360px; border-radius: 12px; padding: 4px 0; }
.rd-sugg .rd-sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid #f1f5f9;
  background: none; text-align: left; cursor: pointer; font: inherit; color: #0f172a; }
.rd-sugg .rd-sg:hover, .rd-sugg .rd-sg.on { background: #eff6ff; }
.rd-sg .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.rd-sg .tx { flex: 1; min-width: 0; }
.rd-sg .tx .n { display: block; font-weight: 400; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sg .tx .n b { font-weight: 800; }
.rd-sg .tx small { display: block; font-size: .78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sg .km { flex: none; font-size: .78rem; color: #475569; font-weight: 600; }
.rd-sg-act .tx b { font-weight: 600; color: #1d4ed8; }
.rd-sg-h { padding: 6px 12px 2px; font-size: .72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; }
.rd-sg-foot { padding: 6px 12px; font-size: .72rem; color: #94a3b8; text-align: right; }
.rd-field input { scroll-margin-top: 175px; }   /* mobile: upar ki patti ke neeche */

/* ============================================================
   v4.1.4 — ◎ meri lokeshan (map par), neela bindu, location chalu karne ki madad
   ============================================================ */
.rm-loc-btn { width: 34px; height: 34px; border-radius: 6px; border: 2px solid rgba(0,0,0,.2); background: #fff; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.rm-loc-ic { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #475569; position: relative; }
.rm-loc-ic::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #475569; }
.rm-loc-btn.on .rm-loc-ic { border-color: #2563eb; }
.rm-loc-btn.on .rm-loc-ic::after { background: #2563eb; }
.rm-loc-btn.busy .rm-loc-ic { animation: rdspin 1s linear infinite; border-color: #2563eb; border-right-color: transparent; }
.rm-me { background: none; border: 0; }
.rm-me span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.35), 0 1px 4px rgba(0,0,0,.4); }
.rm-lochelp { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1000; background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: .85rem; max-height: 75%; overflow: auto; }
.rm-lochelp p { margin: 4px 0; color: #b91c1c; }
.rm-lochelp ul { margin: 6px 0 10px; padding-left: 18px; }
.rm-lochelp li { margin: 4px 0; }
.rm-lochelp .x { position: absolute; right: 8px; top: 6px; border: 0; background: #f1f5f9; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.rd-lochint { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 6px 10px; color: #1e3a8a; margin: 4px 0 0; }

/* ============================================================
   v4.1.4 — 📍 Track Order chhota popup (isi page par, peeche ka page waisa hi)
   ============================================================ */
.tp-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.tp-box { background: #fff; width: 100%; max-width: 560px; height: min(86vh, 760px); height: min(86dvh, 760px); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.tp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #e5e7eb; font-weight: 700; }
.tp-head span { flex: 1; }
.tp-head button { border: 0; background: #f1f5f9; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.tp-box iframe { flex: 1; width: 100%; border: 0; display: block; background: #f1f4f8; }
@media (max-width: 560px) { .tp-ov { padding: 0; align-items: flex-end; } .tp-box { height: 90vh; height: 90dvh; border-radius: 18px 18px 0 0; } }