/* Taxi / Courier order screens. Brand: black, white, orange. */
.mx-ride { --r-accent:#ff7a00; --r-accent-soft:#fff1e3; --r-ink:#111; --r-mute:#6b6b6b; --r-line:#ececec; --r-bg:#fff; --r-card:#fff; --r-field:#f4f4f4;
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--r-bg); color:var(--r-ink); font:15px/1.35 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; overflow:hidden; }
.mx-ride::backdrop { background:#000; }
@media (prefers-color-scheme: dark) { .mx-ride { --r-ink:#f5f5f5; --r-mute:#a3a3a3; --r-line:#2c2c2c; --r-bg:#121212; --r-card:#1c1c1c; --r-field:#262626; --r-accent-soft:#3a2514; } }
.mx-ride * { box-sizing:border-box; }
.mx-ride [hidden] { display:none !important; }
.mx-ride .r-toast { pointer-events:none; }
:where(.mx-ride) button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
.mx-ride button:focus-visible, .mx-ride input:focus-visible { outline:3px solid var(--r-accent); outline-offset:2px; }
.mx-ride svg { width:22px; height:22px; flex:none; }
.r-shell { position:relative; height:100%; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
.r-top { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--r-bg); z-index:3; }
.r-round { width:44px; height:44px; border-radius:50%; background:var(--r-card); box-shadow:0 2px 10px rgba(0,0,0,.14); display:grid; place-items:center; flex:none; }
.r-demand-link { position:relative; color:#d8490b; }
.r-demand-link svg { stroke:#e8490b; fill:#ffca28; }
.r-demand-link span { position:absolute; left:50%; top:calc(100% + 3px); transform:translateX(-50%); padding:2px 5px; border-radius:5px; background:#20130fdd; color:#fff; font:700 9px/1 system-ui,sans-serif; white-space:nowrap; }
.r-tabs { flex:1; display:flex; background:var(--r-field); border-radius:999px; padding:4px; gap:4px; }
.r-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:999px; font-weight:700; color:var(--r-mute); }
.r-tab[aria-pressed="true"] { background:var(--r-ink); color:var(--r-bg); }
.r-map-wrap { position:relative; flex:1; min-height:0; }
.r-map { position:absolute; inset:0; }
.r-card { position:absolute; left:12px; right:12px; top:8px; z-index:2; background:var(--r-card); border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.18); padding:6px 52px 6px 12px; }
.r-addr { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:9px 0; min-height:48px; }
.r-addr + .r-swap + .r-addr { border-top:1px solid var(--r-line); }
.r-addr span { display:flex; flex-direction:column; min-width:0; }
.r-addr small { color:var(--r-mute); font-size:12px; }
.r-addr strong { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-dot { width:12px; height:12px; border-radius:50%; flex:none; } .r-dot-from { background:var(--r-ink); } .r-dot-to { background:var(--r-accent); box-shadow:0 0 0 4px var(--r-accent-soft); }
.r-swap { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:var(--r-field); display:grid; place-items:center; }
.r-quick { border-top:1px solid var(--r-line); padding:4px 0; } .r-quick button { display:inline-flex; align-items:center; gap:6px; padding:8px 4px; color:var(--r-accent); font-weight:700; }
.r-locate { position:absolute; right:12px; bottom:14px; z-index:2; }
.r-hint { position:absolute; left:50%; bottom:70px; transform:translateX(-50%); background:var(--r-ink); color:var(--r-bg); padding:10px 16px; border-radius:999px; font-weight:600; z-index:2; margin:0; }
.r-sheet { position:relative; z-index:3; background:var(--r-bg); border-radius:24px 24px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.16); padding:6px 16px calc(14px + env(safe-area-inset-bottom)); max-height:58dvh; overflow-y:auto; margin-top:-24px; }
.r-handle { display:block; width:40px; height:4px; border-radius:2px; background:var(--r-line); margin:4px auto 12px; }
.r-stat { display:flex; gap:18px; color:var(--r-mute); font-weight:600; margin-bottom:10px; } .r-stat span { display:inline-flex; align-items:center; gap:6px; } .r-stat svg { width:18px; height:18px; }
.r-empty, .r-meta { color:var(--r-mute); font-size:13px; margin:6px 0; } .r-error { color:#d0261e; font-weight:600; margin:8px 0; }
.r-loading { display:flex; align-items:center; gap:10px; padding:10px 0; color:var(--r-mute); } .r-loading i { width:18px; height:18px; border-radius:50%; border:3px solid var(--r-line); border-top-color:var(--r-accent); animation:r-spin .8s linear infinite; }
@keyframes r-spin { to { transform:rotate(360deg); } }
.r-tariffs { display:grid; gap:8px; margin-bottom:12px; }
.r-tariff { display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; border:2px solid transparent; background:var(--r-field); text-align:left; }
.r-tariff[aria-pressed="true"] { border-color:var(--r-accent); background:var(--r-accent-soft); }
.r-ico { width:44px; height:44px; border-radius:12px; background:var(--r-card); display:grid; place-items:center; } .r-grow { flex:1; display:flex; flex-direction:column; } .r-grow small { color:var(--r-mute); } .r-tariff b { font-size:16px; }
.r-pay { display:flex; gap:8px; margin-bottom:12px; } .r-pay button { padding:10px 14px; border-radius:12px; background:var(--r-field); font-weight:600; } .r-pay button[aria-pressed="true"] { background:var(--r-ink); color:var(--r-bg); } .r-pay button:disabled { opacity:.5; cursor:not-allowed; }
.r-field { display:block; margin-bottom:10px; } .r-field span { display:block; font-size:12px; color:var(--r-mute); margin-bottom:4px; }
.r-field input { width:100%; height:48px; border-radius:12px; border:1px solid var(--r-line); background:var(--r-field); padding:0 14px; font:inherit; color:inherit; }
.r-block { margin-bottom:12px; } .r-block h3 { font-size:13px; color:var(--r-mute); margin:0 0 8px; font-weight:600; }
.r-chips { display:flex; flex-wrap:wrap; gap:8px; } .r-chip { padding:10px 16px; border-radius:999px; background:var(--r-field); font-weight:600; } .r-chip[aria-pressed="true"] { background:var(--r-ink); color:var(--r-bg); }
.r-sizes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .r-size { padding:10px 6px; border-radius:14px; background:var(--r-field); border:2px solid transparent; display:flex; flex-direction:column; align-items:center; } .r-size small { color:var(--r-mute); font-size:11px; } .r-size[aria-pressed="true"] { border-color:var(--r-accent); background:var(--r-accent-soft); }
.r-btn { min-height:52px; padding:0 20px; border-radius:16px; font-weight:800; background:var(--r-ink); color:var(--r-bg); } .r-cta { width:100%; background:var(--r-accent); color:#fff; font-size:17px; margin-top:4px; } .r-btn:disabled { opacity:.45; cursor:not-allowed; } .r-btn-ghost { background:var(--r-field); color:var(--r-ink); }
.r-row { display:flex; gap:10px; justify-content:center; margin-top:10px; }
.r-track { text-align:center; padding:8px 0 4px; } .r-track h2 { margin:10px 0 4px; font-size:20px; } .r-track p { margin:4px 0; color:var(--r-mute); }
.r-pulse { position:relative; width:84px; height:84px; margin:6px auto; border-radius:50%; background:var(--r-accent); color:#fff; display:grid; place-items:center; } .r-pulse svg { width:36px; height:36px; position:relative; }
.r-pulse i { position:absolute; inset:0; border-radius:50%; border:3px solid var(--r-accent); animation:r-ping 1.8s ease-out infinite; } .r-pulse i + i { animation-delay:.9s; }
@keyframes r-ping { from { transform:scale(1); opacity:.7; } to { transform:scale(1.9); opacity:0; } }
.r-search { position:absolute; inset:0; z-index:6; background:var(--r-bg); padding-top:env(safe-area-inset-top); display:flex; flex-direction:column; }
.r-search form { display:flex; gap:10px; padding:10px 12px; align-items:center; } .r-search input { flex:1; height:46px; border-radius:23px; border:1px solid var(--r-line); background:var(--r-field); padding:0 18px; font:inherit; color:inherit; }
.r-results { overflow-y:auto; padding:0 12px; } .r-results > button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 6px; border-bottom:1px solid var(--r-line); } .r-results svg { color:var(--r-accent); }
.r-toast { position:absolute; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:8; background:var(--r-ink); color:var(--r-bg); padding:10px 16px; border-radius:12px; max-width:90%; text-align:center; }
@media (min-width: 900px) {
  .r-shell { display:grid; grid-template-columns:420px 1fr; grid-template-rows:auto 1fr; }
  .r-top { grid-column:1; } .r-map-wrap { grid-column:2; grid-row:1 / 3; }
  .r-sheet { grid-column:1; grid-row:2; max-height:none; border-radius:0; margin-top:0; box-shadow:none; border-right:1px solid var(--r-line); }
  .r-handle { display:none; } .r-card { max-width:420px; right:auto; width:calc(100% - 24px); }
}

.r-note { color:var(--r-mute); font-size:13px; margin:0 0 10px; }
.r-cta { position:sticky; bottom:0; box-shadow:0 -12px 12px -2px var(--r-bg); }
.r-sheet { scroll-padding-bottom:70px; }
.r-btn:disabled { opacity:1; background:var(--r-line); color:var(--r-mute); }

/* Yandex Go-style horizontal tariff cards */
.r-tariffs { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px; margin:0 -16px 6px; padding-inline:16px; scrollbar-width:none; }
.r-tariffs::-webkit-scrollbar { display:none; }
.r-tariff { flex:0 0 132px; scroll-snap-align:start; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; min-height:128px; position:relative; }
.r-tariff strong { margin-top:6px; } .r-tariff b { font-size:17px; } .r-tariff small { color:var(--r-mute); font-size:12px; line-height:1.25; }
.r-ico { width:64px; height:40px; border-radius:10px; } .r-ico svg { width:30px; height:30px; } .r-ico-minivan { width:76px; }
.r-places { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .r-place { position:relative; display:inline-flex; }
.r-chip-place { display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; padding:10px 14px; border-radius:16px; min-width:120px; } .r-chip-place svg { width:18px; height:18px; color:var(--r-accent); } .r-chip-place small { color:var(--r-mute); font-size:12px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.r-x { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--r-ink); color:var(--r-bg); font-size:14px; line-height:1; }
.r-recents h3 { font-size:13px; color:var(--r-mute); margin:6px 0; font-weight:600; } .r-recent { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 2px; border-bottom:1px solid var(--r-line); } .r-recent svg { color:var(--r-mute); width:18px; height:18px; } .r-recent span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.r-handle { display:block; width:100%; height:22px; margin:0 0 4px; position:relative; background:none; }
.r-handle::before { content:""; position:absolute; left:50%; top:9px; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--r-line); }
.r-sheet.is-min .r-more { display:none; } .r-sheet.is-min { overflow-y:hidden; }
.r-pin { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-26px 0 0 -13px; z-index:4; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--r-accent); box-shadow:0 4px 10px rgba(0,0,0,.35); pointer-events:none; }
.r-pin::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.r-pick { position:absolute; left:12px; right:12px; bottom:14px; z-index:5; background:var(--r-card); border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.2); padding:14px 16px; } .r-pick p { margin:0 0 10px; font-weight:600; }
.r-pick .r-row { margin-top:0; } .r-pick .r-btn { flex:1; } .r-cta-pick { background:var(--r-accent); color:#fff; }
.mx-ride.is-picking .r-sheet, .mx-ride.is-picking .r-card, .mx-ride.is-picking .r-locate { display:none; }

/* ===== Referens dizayn: to'liq ekran xarita + pastki panel (sariq) ===== */
.mx-ride { --r-accent:#ffd400; --r-accent-soft:#fff6c7; --r-field:#f1f1f4; --r-line:#e6e6ea; }
@media (prefers-color-scheme: dark) { .mx-ride { --r-accent-soft:#3b3410; --r-field:#262629; } }
.r-back { position:absolute; left:12px; top:calc(12px + env(safe-area-inset-top)); z-index:3; }
.r-tabs { position:absolute; right:12px; top:calc(12px + env(safe-area-inset-top)); z-index:3; flex:none; background:var(--r-card); box-shadow:0 4px 18px rgba(0,0,0,.18); padding:4px; }
.r-tab { flex:none; padding:0 16px; height:42px; color:var(--r-ink); }
.r-tab[aria-pressed="true"] { background:var(--r-accent); color:#111; }
.r-ctrls { position:absolute; right:12px; top:calc(76px + env(safe-area-inset-top)); z-index:3; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.r-zoom { display:flex; flex-direction:column; background:var(--r-card); border-radius:22px; box-shadow:0 2px 10px rgba(0,0,0,.14); overflow:hidden; }
.r-zoom button { width:44px; height:44px; display:grid; place-items:center; } .r-zoom button + button { border-top:1px solid var(--r-line); }
.r-card { position:relative; left:auto; right:auto; top:auto; z-index:auto; background:none; box-shadow:none; padding:0 56px 0 0; display:grid; gap:8px; margin:2px 0 10px; border-radius:0; }
.r-addr { background:var(--r-field); border-radius:16px; padding:10px 14px; min-height:60px; border:0; }
.r-addr + .r-swap + .r-addr, .r-addr + .r-addr { border-top:0; }
.r-addr small { color:#6a6fa0; } .r-addr strong { font-size:16px; }
.r-addr > span { flex:1; } .r-chev { width:16px; height:16px; color:#9a9aa3; }
.r-dot { width:14px; height:14px; box-shadow:none !important; } .r-dot-from { background:#1769ff; }
.r-dot-to { width:22px; height:22px; background:none; color:#ed3541; display:grid; place-items:center; } .r-dot-to svg { width:22px; height:22px; fill:#ed3541; stroke:none; }
.r-swap { position:absolute; right:0; top:50%; transform:translateY(-50%); width:46px; height:46px; background:var(--r-card); box-shadow:0 2px 10px rgba(0,0,0,.16); }
.r-quick { border:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.r-quick button { justify-content:center; height:50px; border-radius:14px; border:1px solid var(--r-line); background:var(--r-card); color:var(--r-ink); font-weight:600; padding:0 8px; }
.r-vts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.r-vt { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; padding:8px 2px 6px; min-height:94px; border-radius:16px; border:1px solid var(--r-line); background:var(--r-card); text-align:center; }
.r-vt img { width:100%; height:50px; object-fit:contain; display:block; }
.r-vt strong { font-size:13px; font-weight:600; } .r-vt small { font-size:11px; color:var(--r-mute); }
.r-vt[aria-pressed="true"] { background:var(--r-accent-soft); border:2px solid var(--r-accent); padding:7px 1px 5px; }
.r-vt:disabled { opacity:.55; cursor:default; }
.r-btn.r-cta { background:var(--r-accent); color:#111; border-radius:16px; min-height:56px; font-size:18px; }
.r-btn.r-cta:disabled { background:var(--r-line); color:var(--r-mute); }
@media (min-width: 900px) {
  .r-shell { grid-template-rows:1fr; } .r-map-wrap { grid-row:1; } .r-sheet { grid-row:1; }
  .r-card { max-width:none; width:auto; }
}

/* Scroll-revealed info sections (taxi / courier) */
.r-info { margin:16px 0 4px; padding:14px; border-radius:18px; background:var(--r-field); }
.r-info h3 { margin:0 0 10px; font-size:15px; font-weight:800; }
.r-trow { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--r-line); font-size:14px; }
.r-trow:last-child { border-bottom:0; } .r-trow span { color:var(--r-mute); } .r-trow b { font-weight:700; text-align:right; }
.r-trow.is-total { font-size:16px; } .r-trow.is-total span { color:var(--r-ink); font-weight:700; } .r-trow.is-total b { font-weight:800; }
.r-tsum { margin-top:8px; padding-top:6px; border-top:2px solid var(--r-line); }
.r-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.r-list li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--r-mute); } .r-list svg { flex:none; width:20px; height:20px; color:var(--r-ink); }
.r-info .r-pay { margin-bottom:10px; } .r-info .r-size { background:var(--r-card); }

/* ===== Ixcham va toza panel (kichik ekranlarda xarita ko'rinib tursin) ===== */
.r-sheet { max-height:min(46dvh,420px); padding:2px 14px calc(10px + env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: var(--r-line) transparent; overscroll-behavior:contain; }
.r-sheet::-webkit-scrollbar { width:4px; } .r-sheet::-webkit-scrollbar-thumb { background:var(--r-line); border-radius:4px; }
.r-handle { height:16px; margin:0 0 2px; } .r-handle::before { top:6px; }
.r-card { gap:6px; margin:0 0 8px; padding-right:50px; }
.r-addr { min-height:48px; padding:6px 12px; border-radius:14px; gap:10px; }
.r-addr strong { font-size:15px; } .r-addr small { font-size:11px; }
.r-swap { width:40px; height:40px; }
.r-quick { gap:8px; margin-bottom:8px; } .r-quick button { height:40px; border-radius:12px; font-size:14px; }
.r-empty { margin:2px 0 8px; font-size:12.5px; }
.r-places { gap:8px; margin:0 0 8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 2px 0; } .r-places::-webkit-scrollbar { display:none; }
.r-chip-place { flex-direction:row; align-items:center; gap:6px; min-width:0; padding:7px 12px; border-radius:999px; font-size:13px; white-space:nowrap; }
.r-chip-place svg { width:16px; height:16px; } .r-chip-place small { display:none; }
.r-place .r-x { position:static; width:20px; height:20px; margin-left:-30px; margin-right:6px; font-size:13px; align-self:center; background:transparent; color:var(--r-mute); }
.r-place:has(.r-x) .r-chip-place { padding-right:32px; }
.r-recents h3 { margin:4px 0; font-size:12px; } .r-recent { padding:9px 2px; font-size:14px; }
.r-vts { gap:6px; margin-bottom:8px; } .r-vt { min-height:78px; padding:6px 2px 5px; border-radius:14px; } .r-vt img { height:38px; }
.r-btn.r-cta { min-height:50px; font-size:16px; border-radius:14px; margin-top:2px; box-shadow:0 -10px 0 6px var(--r-bg); }
.r-info { margin:12px 0 2px; padding:12px; border-radius:16px; }
.r-meta:empty { display:none; }
@media (min-width:900px) { .r-sheet { max-height:none; } }

/* ===== Maksimal ixcham o'lchamlar ===== */
.r-back.r-round { width:36px; height:36px; }
.r-tabs { padding:3px; gap:2px; } .r-tab { height:32px; padding:0 11px; font-size:13px; gap:5px; } .r-tab svg { width:16px; height:16px; }
.r-ctrls { gap:7px; top:calc(58px + env(safe-area-inset-top)); }
.r-ctrls .r-round { width:34px; height:34px; } .r-ctrls .r-round svg { width:17px; height:17px; } .r-ctrls .r-compass svg { width:22px; height:22px; }
.r-zoom { border-radius:17px; } .r-zoom button { width:34px; height:34px; } .r-zoom svg { width:16px; height:16px; }
.r-sheet { max-height:min(38dvh,330px); padding:0 12px calc(8px + env(safe-area-inset-bottom)); }
.r-handle { height:12px; } .r-handle::before { top:4px; width:32px; margin-left:-16px; height:3px; }
.r-card { gap:5px; margin:0 0 6px; padding-right:40px; }
.r-addr { min-height:40px; padding:4px 10px; border-radius:12px; gap:8px; }
.r-addr strong { font-size:13.5px; } .r-addr small { font-size:10px; } .r-dot { width:10px; height:10px; } .r-dot-to { width:16px; height:16px; } .r-dot-to svg { width:16px; height:16px; } .r-chev { width:13px; height:13px; }
.r-swap { width:32px; height:32px; } .r-swap svg { width:16px; height:16px; }
.r-quick { gap:6px; margin-bottom:6px; } .r-quick button { height:34px; border-radius:10px; font-size:13px; gap:5px; } .r-quick svg { width:16px; height:16px; }
.r-empty { font-size:11.5px; margin:0 0 6px; }
.r-chip-place { padding:5px 10px; font-size:12px; } .r-chip-place svg { width:14px; height:14px; } .r-places { margin-bottom:6px; }
.r-recent { padding:7px 2px; font-size:13px; }
.r-vts { gap:5px; margin-bottom:6px; } .r-vt { min-height:64px; padding:4px 2px; border-radius:12px; } .r-vt img { height:30px; } .r-vt strong { font-size:11.5px; } .r-vt small { font-size:10px; }
.r-btn.r-cta { min-height:42px; font-size:14.5px; border-radius:12px; }
.r-info { padding:10px; border-radius:14px; } .r-info h3 { font-size:13.5px; margin-bottom:6px; } .r-trow { padding:6px 0; font-size:13px; } .r-list li { font-size:12.5px; }
.r-field input { height:40px; border-radius:10px; } .r-size { padding:7px 4px; }
@media (min-width:900px) { .r-sheet { max-height:none; } }
.r-layers { position:absolute; right:54px; top:calc(94px + env(safe-area-inset-top)); z-index:4; display:grid; gap:6px; padding:10px; min-width:130px; background:var(--r-card); border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.2); }
.r-layers[hidden] { display:none; } .r-layers strong { font-size:12px; color:var(--r-mute); }
.r-layers button { height:34px; border-radius:10px; background:var(--r-field); font-size:13px; font-weight:600; } .r-layers button[aria-pressed="true"] { background:var(--r-accent); color:#111; }
.r-status { position:absolute; left:56px; top:calc(18px + env(safe-area-inset-top)); z-index:3; padding:5px 11px 5px 22px; border-radius:999px; background:var(--r-card); box-shadow:0 2px 10px rgba(0,0,0,.16); font-size:12px; font-weight:700; }
.r-status::before { content:""; position:absolute; left:9px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#22b14c; }
.r-status[data-state="pause"]::before { background:#ffb300; } .r-status[data-state="rest"]::before { background:#8a8a93; }
.r-ctrls .r-work[aria-pressed="true"] { background:var(--r-accent); color:#111; }
.r-rest { position:absolute; inset:0; z-index:6; display:grid; place-items:center; padding:24px; text-align:center; background:rgba(15,15,18,.78); color:#fff; backdrop-filter:blur(4px); }
.r-rest[hidden] { display:none; } .r-rest h2 { margin:0 0 6px; font-size:20px; } .r-rest p { margin:0 0 16px; opacity:.8; font-size:14px; } .r-rest .r-cta { width:auto; padding:0 28px; box-shadow:none; }
.r-pausemenu { top:auto; bottom:auto; right:54px; margin-top:0; } .r-ctrls { z-index:3; }
.r-status { cursor:pointer; border:0; color:var(--r-ink); padding-right:26px; }
.r-status::after { content:""; position:absolute; right:10px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.6; }
.r-pausemenu { right:auto; left:12px; top:calc(58px + env(safe-area-inset-top)) !important; }
.r-pausemenu .r-end { background:#fdecec; color:#c62828; } .r-pausemenu button[hidden] { display:none; }
.r-pausemenu { left:56px; right:auto; top:calc(58px + env(safe-area-inset-top)) !important; min-width:176px; padding:6px; gap:2px; border-radius:14px; transform-origin:0 0; }
.r-pausemenu::before { content:""; position:absolute; left:22px; top:-5px; width:10px; height:10px; background:var(--r-card); transform:rotate(45deg); border-radius:2px; }
.r-pausemenu strong { padding:4px 8px 2px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.r-pausemenu button { height:36px; text-align:left; padding:0 10px; background:transparent; border-radius:9px; font-size:14px; } .r-pausemenu button:hover, .r-pausemenu button:focus-visible { background:var(--r-field); }
.r-pausemenu .r-end { margin-top:4px; border-top:1px solid var(--r-line); border-radius:0 0 9px 9px; background:transparent; color:#c62828; }
.r-status[aria-expanded="true"]::after { transform:rotate(-135deg); margin-top:-2px; }
.r-status::before { width:9px; height:11px; margin-top:-5.5px; left:9px; border-radius:0; background:transparent !important; border-left:3px solid #22b14c; border-right:3px solid #22b14c; box-sizing:border-box; }
.r-status[data-state="pause"]::before { border-color:#ffb300; } .r-status[data-state="rest"]::before { border-color:#8a8a93; }
.r-status[data-state="pause"] { background:#fff3cf; }
.r-status { padding-left:26px; }
.r-tip { position:absolute; left:56px; top:calc(56px + env(safe-area-inset-top)); z-index:5; max-width:210px; padding:9px 12px; border-radius:12px; background:#111; color:#fff; font-size:12.5px; line-height:1.3; box-shadow:0 6px 20px rgba(0,0,0,.28); pointer-events:none; animation:r-tipin .25s ease-out; }
.r-tip[hidden] { display:none; } .r-tip::before { content:""; position:absolute; left:24px; top:-5px; width:10px; height:10px; background:#111; transform:rotate(45deg); border-radius:2px; }
@keyframes r-tipin { from { opacity:0; transform:translateY(-4px); } }
.r-live { display:inline-block; width:8px; height:8px; margin-left:7px; border-radius:50%; background:#1769ff; vertical-align:middle; box-shadow:0 0 0 0 rgba(23,105,255,.55); animation:r-live 1.6s ease-out infinite; }
@keyframes r-live { 0% { box-shadow:0 0 0 0 rgba(23,105,255,.55); } 70% { box-shadow:0 0 0 8px rgba(23,105,255,0); } 100% { box-shadow:0 0 0 0 rgba(23,105,255,0); } }
@media (prefers-reduced-motion: reduce) { .r-live { animation:none; box-shadow:0 0 6px 2px rgba(23,105,255,.45); } }
.r-tabs { padding:2px; gap:1px; } .r-tab { height:26px; padding:0 9px; font-size:12px; gap:4px; } .r-tab svg { width:14px; height:14px; }
.r-back.r-round { top:calc(12px + env(safe-area-inset-top)); } .r-tabs { top:calc(14px + env(safe-area-inset-top)); } .r-ctrls { top:calc(50px + env(safe-area-inset-top)); }
.r-status { top:calc(15px + env(safe-area-inset-top)); } .r-pausemenu, .r-tip { top:calc(52px + env(safe-area-inset-top)) !important; }
.r-back.r-round { width:30px; height:30px; } .r-back.r-round svg { width:16px; height:16px; } .r-back.r-round { top:calc(14px + env(safe-area-inset-top)); }
.r-ctrls { gap:5px; top:calc(50px + env(safe-area-inset-top)); }
.r-ctrls .r-round { width:28px; height:28px; } .r-ctrls .r-round svg { width:14px; height:14px; } .r-ctrls .r-compass svg { width:19px; height:19px; }
.r-zoom { border-radius:14px; } .r-zoom button { width:28px; height:28px; } .r-zoom svg { width:13px; height:13px; }
.r-status { left:50px; top:calc(16px + env(safe-area-inset-top)); font-size:11.5px; padding-top:4px; padding-bottom:4px; }
.r-pausemenu, .r-tip { left:50px; }
.r-rec { position:absolute; left:calc(50px + 118px); top:calc(16px + env(safe-area-inset-top)); z-index:3; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:#e5252a; color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; box-shadow:0 2px 10px rgba(229,37,42,.4); }
.r-rec[hidden] { display:none; } .r-rec i { width:7px; height:7px; border-radius:50%; background:#fff; animation:r-rec 1.1s ease-in-out infinite; }
@keyframes r-rec { 50% { opacity:.25; } } @media (prefers-reduced-motion: reduce) { .r-rec i { animation:none; } }
/* ===== Yagona o'lcham: hamma yuqori elementlar 30px ===== */
.r-back.r-round, .r-status, .r-rec, .r-tabs { top:calc(14px + env(safe-area-inset-top)); height:30px; box-sizing:border-box; }
.r-back.r-round { width:30px; }
.r-status, .r-rec { display:inline-flex; align-items:center; padding-top:0; padding-bottom:0; font-size:12px; line-height:1; }
.r-status { left:50px; padding-left:26px; padding-right:28px; } .r-status::before { left:10px; } .r-status::after { margin-top:-5px; }
.r-rec { padding:0 11px; font-size:12px; }
.r-tabs { display:flex; align-items:center; padding:2px; } .r-tab { height:26px; font-size:12px; padding:0 10px; }
.r-ctrls { top:calc(52px + env(safe-area-inset-top)); gap:6px; }
.r-ctrls .r-round, .r-zoom button { width:30px; height:30px; } .r-zoom { border-radius:15px; }
.r-pausemenu, .r-tip { top:calc(50px + env(safe-area-inset-top)) !important; }
/* ===== Yana bir pog'ona kichik: 26px ===== */
.r-back.r-round, .r-status, .r-rec, .r-tabs { top:calc(12px + env(safe-area-inset-top)); height:26px; }
.r-back.r-round { width:26px; } .r-back.r-round svg { width:14px; height:14px; }
.r-status { left:44px; font-size:11px; padding-left:22px; padding-right:24px; } .r-status::before { left:8px; width:8px; height:10px; margin-top:-5px; border-left-width:2.5px; border-right-width:2.5px; } .r-status::after { right:9px; width:5px; height:5px; margin-top:-4px; }
.r-live { width:7px; height:7px; margin-left:6px; }
.r-rec { font-size:11px; padding:0 9px; gap:4px; } .r-rec i { width:6px; height:6px; }
.r-tab { height:22px; font-size:11px; padding:0 8px; gap:3px; } .r-tab svg { width:12px; height:12px; }
.r-ctrls { top:calc(46px + env(safe-area-inset-top)); gap:5px; }
.r-ctrls .r-round, .r-zoom button { width:26px; height:26px; } .r-zoom { border-radius:13px; }
.r-ctrls .r-round svg { width:13px; height:13px; } .r-ctrls .r-compass svg { width:17px; height:17px; } .r-zoom svg { width:12px; height:12px; }
.r-pausemenu, .r-tip { left:44px; top:calc(44px + env(safe-area-inset-top)) !important; }
.r-sheet { max-height:min(46dvh,400px); } .r-vts { margin-top:2px; } .r-quick { margin-top:2px; }
.r-vi { display:block; width:100%; height:34px; } .r-vi svg { width:100%; height:100%; display:block; }

/* Telefon: pastki oyna boshida faqat manzil qatorlari va mashina turlarigacha ko'rinadi; pastga siljitilganda qolganlari ochiladi. */
@media (max-width:899px) {
  .r-sheet { max-height:282px; overflow-y:auto; overscroll-behavior:contain; }
}

/* 3D rasm ikonkalar (Taksi/Kuryer): oq fon karta rangiga singadi */
.r-vi { height:44px; display:flex; align-items:center; justify-content:center; }
.r-vi img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; mix-blend-mode:multiply; }

/* Gorizontal siljiydigan kategoriyalar (Taksi/Kuryer) + tungi tarif yozuvi */
.r-vts.is-scroll { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 6px; margin:0 -2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.r-vts.is-scroll::-webkit-scrollbar { display:none; }
.r-vts.is-scroll .r-vt { flex:0 0 calc((100% - 24px) / 3.6); min-width:84px; scroll-snap-align:start; }
.r-night { margin:0 0 8px; padding:6px 10px; border-radius:10px; background:#16161a; color:#ffd400; font-size:12px; line-height:1.3; }

/* Kategoriya katakchalari to'liq ko'rinsin: tugma soyasi ustini yopmasin, rasm kattaroq */
.r-sheet .r-btn.r-cta { box-shadow:none; margin-top:6px; }
.r-vts.is-scroll { padding-bottom:6px; margin-bottom:4px; }
.r-vts.is-scroll .r-vt { min-height:92px; justify-content:flex-end; overflow:visible; }
.r-vi { height:50px; }
/* Safar video yozuvi (dashcam) */
.r-dash { position:absolute; left:12px; top:calc(56px + env(safe-area-inset-top)); z-index:4; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.r-dash-btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:17px; background:#111; color:#fff; font-size:13px; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.r-dash-btn i { width:10px; height:10px; border-radius:50%; background:#ff4d2e; } .r-dash-btn.is-rec i { animation:r-dash-blink 1s infinite; }
@keyframes r-dash-blink { 50% { opacity:.25; } }
.r-dash-ok { width:min(260px,70vw); padding:12px; border-radius:14px; background:var(--r-bg,#fff); color:var(--r-ink,#111); box-shadow:0 6px 24px rgba(0,0,0,.25); font-size:12.5px; line-height:1.35; }
.r-dash-ok p { margin:0 0 10px; } .r-dash-ok div { display:flex; gap:8px; } .r-dash-ok button { flex:1; height:36px; border-radius:10px; font-weight:700; background:var(--r-field,#eee); } .r-dash-ok button[data-dash=yes] { background:#ff7a00; color:#fff; }
.r-dash-save { padding:7px 12px; border-radius:12px; background:#ff7a00; color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; }

/* Video zapis: tepada o'rtada, kichik */
.r-dash { left:50%; transform:translateX(-50%); top:calc(14px + env(safe-area-inset-top)); align-items:center; }
.r-dash-btn { height:28px; padding:0 10px; gap:5px; font-size:11.5px; border-radius:14px; white-space:nowrap; } .r-dash-btn i { width:8px; height:8px; }
.r-vts.is-scroll .r-vt { min-height:96px; padding-bottom:8px; }

/* Video zapis: boshqa tugmalar (Ishda / Taksi-Kuryer) bilan bir xil o'lcham va ko'rinish */
.r-dash { top:calc(12px + env(safe-area-inset-top)); }
.r-dash-btn { height:36px; padding:0 12px; gap:6px; font-size:13px; font-weight:700; border-radius:18px; background:var(--r-card,#fff); color:var(--r-ink,#111); box-shadow:0 4px 18px rgba(0,0,0,.18); }
.r-dash-btn i { width:9px; height:9px; }
.r-vts.is-scroll { padding-bottom:12px; margin-bottom:2px; }
.r-vts.is-scroll .r-vt { min-height:100px; padding-top:10px; padding-bottom:10px; }
.r-vi { height:54px; } .r-vi img { max-height:54px; }
.r-dash { left:calc(50% - 22px); } .r-dash-btn { padding:0 10px; font-size:12.5px; }
.mx-ride svg.nv-heat { width:100% !important; height:100% !important; }

/* Ride ichida umumiy 'svg 22px' qoidasi olov va talab belgilarini kichraytirmasin */
.mx-ride .nv-heat-flame svg { width:100%; height:100%; }
.mx-ride .nv-demand-flame svg { width:30px; height:36px; }
/* Video zapis: tepada, sarlavha qatori ostida o'rtada */
.r-dash { left:50%; top:calc(56px + env(safe-area-inset-top)); transform:translateX(-50%); }

/* Video: "Ishda" tugmasi bilan bir qatorda, bir xil o'lcham; yozilayotganda qizil chiroq yonib turadi */
.r-dash { left:140px; top:calc(18px + env(safe-area-inset-top)); transform:none; z-index:3; }
.r-dash-btn { height:auto; position:relative; padding:5px 11px 5px 22px; gap:0; border-radius:999px; background:var(--r-card,#fff); color:var(--r-ink,#111); box-shadow:0 2px 10px rgba(0,0,0,.16); font-size:12px; font-weight:700; line-height:normal; }
.r-dash-btn i { position:absolute; left:9px; top:50%; width:8px; height:8px; margin-top:-4px; background:#9aa0a6; animation:none; }
.r-dash-btn.is-rec i { background:#ff2d2d; box-shadow:0 0 0 3px rgba(255,45,45,.25), 0 0 8px 2px rgba(255,45,45,.8); animation:r-dash-blink 1s infinite; }
.r-dash-btn.is-rec { color:#d11; }
.r-dash { top:calc(12px + env(safe-area-inset-top)); }

/* Talab kartochkalari kichik va tartibli; olov belgilari olib tashlandi (hudud rangi talabni ko'rsatadi) */
.mx-ride .nv-demand-flame { display:none !important; }
.mx-ride .nv-demand-marker { min-height:0; }
.mx-ride .nv-demand-label { min-width:0 !important; padding:5px 20px 5px 8px !important; border-radius:10px !important; font-size:10px !important; line-height:1.25 !important; box-shadow:0 2px 8px rgba(0,0,0,.25) !important; }
.mx-ride .nv-demand-label strong { font-size:10px !important; font-weight:700 !important; }
.mx-ride .nv-demand-label b { font-size:13px !important; }
.mx-ride .nv-demand-label small { font-size:9px !important; margin-top:1px !important; }
.mx-ride .nv-demand-arrow { right:6px !important; transform:scale(.7); }
.mx-ride .nv-demand-label b, .mx-ride .nv-demand-label strong, .mx-ride .nv-demand-label small { white-space:nowrap !important; } .mx-ride .nv-demand-label b { font-size:12.5px !important; }

/* talab kartochkasi: ixcham gradient pill, olov hudud kattaligiga qarab */
.mx-ride .nv-demand-label { background:linear-gradient(135deg,#ff8a1f,#f2541b) !important; color:#fff !important; border:1px solid rgba(255,255,255,.55) !important; box-shadow:0 3px 10px rgba(180,40,0,.35) !important; }
.mx-ride .nv-demand-marker.is-hot .nv-demand-label { background:linear-gradient(135deg,#ff4b2b,#c8101e) !important; }
.mx-ride .nv-demand-label strong { color:#fff !important; opacity:.92; letter-spacing:.01em; }
.mx-ride .nv-demand-label b { color:#ffe66d !important; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.mx-ride .nv-demand-label small { color:#fff !important; }
.mx-ride .nv-demand-label::before { display:none !important; }

.mx-ride .nv-demand-label { padding:3px 26px 3px 6px !important; border-radius:8px !important; font-size:8.5px !important; }
.mx-ride .nv-demand-label strong { font-size:8.5px !important; }
.mx-ride .nv-demand-label b { font-size:10.5px !important; }
.mx-ride .nv-demand-label small { font-size:7.5px !important; margin-top:0 !important; }
.mx-ride .nv-demand-arrow { right:3px !important; }
.mx-ride .nv-demand-arrow svg { width:9px !important; height:9px !important; }

.mx-ride .nv-heat-flame { display:none !important; }
.mx-ride .nv-demand-arrow { display:none !important; }
.mx-ride .nv-label-flame { position:absolute; right:4px; bottom:3px; object-fit:contain; object-position:50% 100%; pointer-events:none; filter:drop-shadow(0 0 3px rgba(255,200,60,.9)); animation:nv-lflame 1.3s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes nv-lflame { 0%,100% { transform:scale(1,1); } 50% { transform:scale(.94,1.08); } }
@media (prefers-reduced-motion:reduce) { .mx-ride .nv-label-flame { animation:none; } }

.r-dash-ok { max-width:calc(100vw - 24px); box-sizing:border-box; }
.r-dash-btn { padding:4px 8px 4px 18px !important; font-size:11.5px !important; }
.r-dash-btn i { left:7px !important; }
.r-dash-btn { padding:3px 6px 3px 15px !important; font-size:10.5px !important; }
.r-dash-btn i { left:6px !important; width:6px !important; height:6px !important; margin-top:-3px !important; }
.r-status { padding-left:9px !important; padding-right:7px !important; }