/* ===== gate_ui.css: the parts of the gate's screens that BOTH pages share (the PWA shell and /map/) =====
   Loaded by index.html and map/index.html. Every selector is scoped to #view (the gate's screen), #installSheet or #installBtn, so nothing here can
   change the pages' own look. The two pages name their colour tokens differently (--accent/--ink/--ink-soft/--page here, --acc/--fg/--mut/--bg there):
   the local --g-* aliases below take whichever exists. Touch targets are at least 44px; nothing sets a width wider than the screen. */
:is(#view, #installSheet, #installBtn, #acctSheet, #acctBtn) {
  --g-acc: var(--accent, var(--acc, #714b67)); --g-soft: var(--accent-soft, var(--accbg, #efe6ed)); --g-ink: var(--ink, var(--fg, #1d2430));
  --g-mut: var(--ink-soft, var(--mut, #667085)); --g-card: var(--card, #fff); --g-line: var(--line, #d9dde4); --g-warn: var(--warn, #b54708); --g-danger: var(--danger, #b3261e);
}
/* the link-style buttons: the consent line under the phone box and the support link at the foot of every screen */
#view .lnk { background: none; border: 0; padding: 0; margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; text-align: start;
  font: inherit; font-size: 13px; line-height: 1.6; color: var(--g-acc); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#view .lnk:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; border-radius: 6px; }
#view .gfoot { display: flex; justify-content: center; padding-top: 4px; }
#view .gfoot .lnk { justify-content: center; font-size: 12.5px; color: var(--g-mut); padding: 0 16px; }
/* recommended plan: the badge and a stronger border; the per-month line sits under the total */
#view .plan.rec { border-color: var(--g-acc); box-shadow: 0 0 0 1px var(--g-acc); }
#view .badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--g-acc); border-radius: 99px; padding: 1px 10px; vertical-align: middle; }
#view .permonth { margin-top: -2px; }
#view .plan .btn.pri { min-height: 44px; }
/* the legal page and the support card */
#view .g-legal { min-height: calc(100dvh - 24px); align-content: start; }
#view .g-legal h3 { font-size: 13.5px; margin: 6px 0 0; color: var(--g-ink); }
#view .g-legal ul { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--g-ink); display: grid; gap: 4px; }
#view .g-legaltext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.9; color: var(--g-ink); }
#view .g-support a { color: var(--g-acc); overflow-wrap: anywhere; }
/* the code box: six digits read as a code, not as a phone number */
#view #gCode { text-align: center; letter-spacing: 6px; }
/* the iPhone install sheet: a bottom sheet over the page (and over the lock screen) */
#installSheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .35); }
#installSheet[hidden] { display: none; }
#installSheet .g-sheet-box { width: 100%; max-width: 640px; margin: 0 auto; background: var(--g-card); color: var(--g-ink); border: 1px solid var(--g-line); border-bottom: 0;
  border-radius: 18px 18px 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); display: grid; gap: 12px; font: 14px/1.7 var(--ui, var(--font, Tahoma, system-ui, sans-serif)); outline: none; }
#installSheet h2 { margin: 0; font-size: 16px; }
#installSheet .g-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
#installSheet .g-steps svg { vertical-align: middle; color: var(--g-acc); }
#installSheet .g-btn { min-height: 44px; border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#installSheet .g-btn:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; }
/* the Android install button next to the title */
#installBtn { flex: none; min-height: 44px; min-width: 44px; padding: 4px 14px; border: 1px solid var(--g-acc); background: var(--g-acc); color: #fff; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#installBtn[hidden] { display: none; }
#installBtn:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; }

/* the account sheet (person-icon button in the top bar): same bottom-sheet look as the install sheet; "خروج" is the only red button */
#acctSheet { position: fixed; inset: 0; z-index: 2147482100; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .35); }
#acctSheet[hidden] { display: none; }
#acctSheet .g-sheet-box { width: 100%; max-width: 640px; margin: 0 auto; background: var(--g-card); color: var(--g-ink); border: 1px solid var(--g-line); border-bottom: 0;
  border-radius: 18px 18px 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); display: grid; gap: 12px; font: 14px/1.7 var(--ui, var(--font, Tahoma, system-ui, sans-serif)); outline: none; max-height: 92dvh; overflow: auto; }
#acctSheet h2 { margin: 0; font-size: 16px; }
#acctSheet .g-mut { color: var(--g-mut); }
#acctSheet .g-warn { color: var(--g-ink); font-size: 14px; line-height: 1.9; }
#acctSheet .g-support { font-size: 13px; color: var(--g-mut); overflow-wrap: anywhere; }
#acctSheet .g-support a { color: var(--g-acc); }
#acctSheet .g-rowb { display: flex; gap: 8px; flex-wrap: wrap; }
#acctSheet .g-btn { flex: 1 1 0; min-width: 120px; min-height: 44px; border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#acctSheet .g-btn.pri { background: var(--g-acc); border-color: var(--g-acc); color: #fff; }
#acctSheet .g-btn.danger { background: var(--g-danger); border-color: var(--g-danger); color: #fff; }
#acctSheet .g-btn.danger-o { border-color: var(--g-danger); color: var(--g-danger); }
#acctSheet .g-btn:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; }
/* the person-icon button: 44px touch target, same outline look as the other top-bar buttons */
#acctBtn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-card); color: var(--g-ink); cursor: pointer; }
#acctBtn[hidden] { display: none; }
#acctBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#acctBtn:focus-visible { outline: 2px solid var(--g-acc); outline-offset: 2px; }