/* Delivery map selector: page-only styles (checkout, Delivery page, dashboard Delivery).
   Every colour is a token from app.css; regions and zones are told apart by token colours and by the
   legend text, never by colour alone. */
.map-pick { display: grid; gap: 12px; }
.map-pick-controls { display: grid; gap: 8px; }
.map-picked { margin: 0; min-height: 1.2em; font-size: .86rem; color: var(--muted); }
.map-stage { max-width: 440px; width: 100%; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); padding: 8px; }
.map-stage svg { display: block; width: 100%; height: auto; }
.map-stage path, .map-stage circle { fill: var(--line2); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; cursor: pointer; transition: fill .35s var(--ease), stroke .35s var(--ease), opacity .35s var(--ease); vector-effect: non-scaling-stroke; }
.map-stage path:hover, .map-stage circle:hover { opacity: .78; stroke: var(--ink); }
.map-stage .is-picked { stroke: var(--ink); stroke-width: 2.4; fill: var(--gold-deco) !important; opacity: 1; }
.map-stage [data-region="kenya"] { fill: var(--brand); }
.map-stage [data-region="east_africa"] { fill: var(--gold); }
.map-stage [data-region="west_africa"] { fill: var(--info); }
.map-stage [data-region="central_africa"] { fill: var(--ok); }
.map-stage [data-region="southern_africa"] { fill: var(--star); }
.map-stage [data-region="north_africa"] { fill: var(--warn); }
.map-stage [data-region="none"] { fill: var(--line2); }
.map-stage [data-unconfirmed="1"] { fill-opacity: .45; }
.map-stage [data-zone="none"] { fill: var(--line2); }
.map-stage [data-zi="0"] { fill: var(--brand); }
.map-stage [data-zi="1"] { fill: var(--gold); }
.map-stage [data-zi="2"] { fill: var(--info); }
.map-stage [data-zi="3"] { fill: var(--ok); }
.map-stage [data-zi="4"] { fill: var(--star); }
.map-stage [data-zi="5"] { fill: var(--warn); }
.map-stage path:focus, .map-stage circle:focus { outline: none; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); }
.map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.map-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--line2); border: 1px solid var(--line); display: inline-block; }
.map-swatch.rg-kenya { background: var(--brand); }
.map-swatch.rg-east_africa { background: var(--gold); }
.map-swatch.rg-west_africa { background: var(--info); }
.map-swatch.rg-central_africa { background: var(--ok); }
.map-swatch.rg-southern_africa { background: var(--star); }
.map-swatch.rg-north_africa { background: var(--warn); }
.map-swatch.rg-none { background: var(--line2); }
.map-swatch.zn-0 { background: var(--brand); }
.map-swatch.zn-1 { background: var(--gold); }
.map-swatch.zn-2 { background: var(--info); }
.map-swatch.zn-3 { background: var(--ok); }
.map-swatch.zn-4 { background: var(--star); }
.map-swatch.zn-5 { background: var(--warn); }
.map-stage path:focus-visible, .map-stage circle:focus-visible { outline: none; stroke: var(--gold-deco); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .map-stage path, .map-stage circle { transition: none; } }
/* Delivery page: regions as cards with both currencies */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.zone-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--raised); }
.zone-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.05rem; }
.zone-card .zone-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--line2); }
.zone-card .to-confirm { font-size: .78rem; font-weight: 700; color: var(--warn); }
.amazon-links { margin: 8px 0 0; padding-left: 18px; }
/* Dashboard coverage table */
.coverage { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; font-size: .86rem; }
.coverage span { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.coverage .gap { color: var(--bad); font-weight: 700; }