/* NARI Driver — additions on top of styles.css. Bigger targets, fewer words: used while driving.
   ChatGPT driver guideline: primary buttons 56–64px, body 18px, prices 32–48px bold. */
body { font-size: 17px; }
.btn { min-height: 60px; }
.btn.huge { min-height: 64px; }
.online-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.online-bar .state { flex: 1; }
.online-bar .state b { display: block; font-size: 18px; font-weight: 600; }
.online-bar .state small { color: var(--muted); font-size: 13px; }
.switch { position: relative; width: 84px; height: 44px; border-radius: 999px; border: 0; background: var(--line); transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(-40px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px 12px; }
.stat { padding: 12px 10px; text-align: center; }
.stat b { display: block; font: 800 22px var(--font-en); }
.stat b small { font: 600 12px var(--font-ar); margin-inline-start: 3px; }
.stat span { font-size: 12px; color: var(--muted); }
.waiting { text-align: center; padding: 28px 24px; color: var(--muted); }
.waiting .pulse { display: inline-block; width: 14px; height: 14px; margin-bottom: 10px; }
.offline-hint { margin: 0 16px 16px; }

/* incoming request */
.req-wrap { position: absolute; inset: 0; z-index: 20; background: rgba(8, 20, 34, .55); display: flex; align-items: flex-end; }
.req { width: 100%; background: var(--bg); border-radius: 24px 24px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); animation: up .22s ease-out; }
.req .timer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.req .timer b { font-size: 18px; font-weight: 600; }
.ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 20px var(--font-en); background: conic-gradient(var(--copper) var(--p, 100%), var(--line) 0); }
.ring span { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.req .fare { text-align: center; padding: 12px 0 6px; }
.req .fare .big { font: 800 40px var(--font-en); line-height: 1.1; }
.req .fare .big small { font: 700 18px var(--font-ar); margin-inline-start: 6px; }
.req .fare p { margin: 2px 0 0; color: var(--ok); font-weight: 600; font-size: 15px; }
.req .meta { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.req .meta b { color: var(--ink); font-family: var(--font-en); }
.btn.huge { min-height: 72px; font-size: 22px; }
.btn.ghost { background: transparent; border: 0; color: var(--muted); min-height: 48px; font-size: 15px; font-weight: 500; }

/* on trip */
.trip-stage { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.trip-stage .pill { padding: 6px 12px; border-radius: 999px; background: var(--copper-soft); color: var(--ink-2); font-weight: 600; font-size: 14px; }
:root[data-theme="dark"] .trip-stage .pill { color: var(--accent); }
.rider { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.rider b { display: block; font-size: 17px; font-weight: 600; }
.rider small { color: var(--muted); font-size: 13px; }
.rider .call { margin-inline-start: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; border: 0; }
.nav-btn { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 2; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font-weight: 600; display: flex; align-items: center; gap: 6px; font-size: 14px; }

/* collect cash */
.collect { margin: 16px; padding: 22px 16px; text-align: center; background: var(--copper-soft); border: 2px solid var(--copper); border-radius: var(--r); }
.collect p { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-2); }
:root[data-theme="dark"] .collect p { color: var(--accent); }
.collect .big { font: 800 52px var(--font-en); line-height: 1.1; color: var(--ink); margin-top: 4px; }
.collect .big small { font: 700 22px var(--font-ar); margin-inline-start: 6px; }
.collect .commission { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* earnings */
.earn-head { margin: 0 16px 12px; padding: 18px; text-align: center; }
.earn-head span { font-size: 14px; color: var(--muted); }
.earn-head .big { font: 800 38px var(--font-en); line-height: 1.1; }
.earn-head .big small { font: 700 16px var(--font-ar); margin-inline-start: 6px; }
.due { margin: 0 16px 12px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--copper); }
.due .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--copper-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.due b { display: block; font-size: 15px; font-weight: 600; }
.due small { color: var(--muted); font-size: 13px; }
.due .amt { margin-inline-start: auto; font: 800 20px var(--font-en); white-space: nowrap; }
.due.warn { border-color: var(--danger); }
.due.warn .ico { background: #FBE3DE; color: var(--danger); }
.day-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.day-row:last-child { border-bottom: 0; }
.day-row .bar { flex: 1; height: 8px; margin: 0 12px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.day-row .bar i { display: block; height: 100%; background: var(--copper); border-radius: 4px; }
.day-row b { font: 700 15px var(--font-en); }

/* documents */
.doc-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent); flex: none; }
.doc-row b { display: block; font-size: 15px; font-weight: 500; }
.doc-row small { color: var(--muted); font-size: 13px; }
.doc-row .badge { margin-inline-start: auto; white-space: nowrap; }
.badge.pending { background: #FDF0D5; color: #5A3B05; }
.badge.expired { background: #FBE3DE; color: var(--danger); }
.rating-big { display: flex; align-items: center; gap: 14px; padding: 14px; }
.rating-big .n { font: 800 44px var(--font-en); line-height: 1; }
.rating-big .n small { font: 500 14px var(--font-ar); color: var(--muted); display: block; }
.rating-big .ok { color: var(--ok); font-weight: 600; font-size: 14px; }
.rating-big .meter { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.rating-big .meter i { display: block; height: 100%; background: var(--ok); }
.warn-box { margin: 12px 16px 0; padding: 12px 14px; border-radius: var(--r-sm); background: #FDF0D5; color: #5A3B05; font-size: 14px; display: flex; gap: 8px; }