/* Styles for features only a few pages use: 18+ items and the ID scan (age_check.py, static/id_scan.js), and the rating stars on the order page.
   Kept apart from customer.css so that file stays small; base.html loads both. */
/* ---------- 18+ items (age_check.py): the badge, the "verify your age" dialog, the profile card ---------- */
.badge.age, .age-flag { display: inline-flex; align-items: center; background: var(--bad-bg); color: var(--bad-text); font-weight: 800; font-size: 11px;
                        padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; flex: none; align-self: flex-start; }
.age-flag { position: absolute; top: 8px; left: 8px; z-index: 2; }
.age-gate { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 6, 23, .55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.age-gate-card { background: var(--surface); color: var(--ink); width: 100%; max-width: 420px; border-radius: 22px; padding: 24px 20px 20px; text-align: center;
                 box-shadow: 0 20px 50px rgba(2, 6, 23, .35); display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .age-gate { align-items: center; } }
.age-gate-badge { align-self: center; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                  background: var(--bad-bg); color: var(--bad-text); font-size: 22px; font-weight: 900; }
.age-gate-card h2 { margin: 4px 0 0; font-size: 20px; }
.age-gate-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.age-gate-card .age-gate-reason { background: var(--bad-bg); color: var(--bad-text); border-radius: 12px; padding: 9px 12px; }
.age-gate-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.age-gate-btns .btn { width: 100%; justify-content: center; min-height: 48px; }
.age-card { scroll-margin-top: 80px; }
.age-card .age-state { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 6px 0 10px; }
.age-card .age-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.age-card .age-state.verified i { background: #16a34a; } .age-card .age-state.pending i { background: #d97706; } .age-card .age-state.rejected i { background: var(--danger-btn); }
.age-card form { display: grid; gap: 10px; }
.age-card .age-photo { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; }
.age-scan-btn { width: 100%; } .age-small { font-size: 13px; margin: 0; } .age-small.age-scan-note { margin: 8px 0 12px; }
.age-card .age-photo img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; }

/* ---------- the ID scan (static/id_scan.js): full screen camera, a card-shaped frame, the photo is taken by itself ---------- */
.idscan { position: fixed; inset: 0; z-index: 3100; background: #0b1020; color: #fff; display: flex; flex-direction: column; align-items: center;
          padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; overflow-y: auto; }
.idscan-top { text-align: center; max-width: 440px; }
.idscan-top h2 { margin: 8px 0 4px; font-size: 22px; color: #fff; }
.idscan-top p { margin: 0; color: #cbd5e1; line-height: 1.45; }
.idscan-view { position: relative; width: 100%; max-width: 480px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #000; flex: none; }
.idscan-view[hidden] { display: none; }
.idscan-view video { width: 100%; height: 100%; object-fit: cover; }
.idscan-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.idscan-frame span { width: 86%; aspect-ratio: 85.6 / 54; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(2, 6, 23, .55); }
.idscan-msg { min-height: 24px; margin: 0; font-weight: 700; text-align: center; color: #e2e8f0; }
.idscan-msg.busy::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
                           border: 2px solid #fff; border-right-color: transparent; animation: idscan-spin .8s linear infinite; }
.idscan-msg.bad { color: #fca5a5; }
@keyframes idscan-spin { to { transform: rotate(360deg); } }
.idscan-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 440px; margin-top: auto; }
.idscan-btns .btn { width: 100%; justify-content: center; min-height: 50px; }
.idscan-btns .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.idscan-btns [hidden] { display: none; }
.idscan-icon { width: 76px; height: 76px; margin: 24px auto 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 900; }
.idscan-icon.ok { background: #16a34a; color: #fff; }
.idscan-icon.wait { background: #f59e0b; color: #1f2937; }
@media (prefers-reduced-motion: reduce) { .idscan-msg.busy::before { animation: none; } }

/* rating stars on the order page: the delivery (rider), and once the app itself (templates/order_detail.html) */
.rate-stars { display: flex; gap: 2px; margin: 6px 0 10px; }
.rate-star { min-width: 44px; min-height: 44px; padding: 4px; border: 0; background: none; color: #d97706; font-size: 30px; line-height: 1; cursor: pointer; }
.rate-star:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.rate-done { color: #d97706; font-size: 20px; margin: 0; display: flex; align-items: center; gap: 2px; }
.rate-done .rate-star { min-width: 0; min-height: 0; padding: 0; }
.rate-star svg { fill: none; } .rate-star.on svg { fill: currentColor; }        /* empty outline, filled once chosen */
#rateCard textarea, #appRateCard textarea { width: 100%; margin-bottom: 10px; }