/* Globe Premium — UI states for gating, badges, and overlays */

/* ── Premium Gate Overlay ────────────────────────────────────────── */
.ag-premium-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 21, 0.75);
  backdrop-filter: blur(6px);
  animation: ag-gate-fadein 0.2s ease;
}

@keyframes ag-gate-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ag-premium-gate__card {
  position: relative;
  max-width: 360px;
  width: 90vw;
  padding: 32px 24px 24px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  animation: ag-gate-scalein 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ag-gate-scalein {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ag-premium-gate__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}
.ag-premium-gate__close:hover {
  color: #fff;
}

.ag-premium-gate__icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.ag-premium-gate__title {
  font-size: 18px;
  font-weight: 600;
  color: #f8fafc;
  margin-bottom: 8px;
}

.ag-premium-gate__msg {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
  line-height: 1.5;
}

.ag-premium-gate__btn {
  display: inline-block;
  padding: 10px 28px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.ag-premium-gate__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

/* ── Premium Badges ──────────────────────────────────────────────── */
.ag-premium-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;
}

.ag-premium-badge--locked {
  background: #2563eb;
  color: #fff;
}

.ag-premium-badge--warning {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.ag-premium-badge--exhausted {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── Feature Button States ───────────────────────────────────────── */
.ag-premium-locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}
.ag-premium-locked::after {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

/* Near-limit warning pulse */
.ag-premium-near-limit {
  animation: ag-near-limit-pulse 2s ease-in-out infinite;
}

@keyframes ag-near-limit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
  50% { box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25); }
}

/* Limit reached state */
.ag-premium-limit-reached {
  opacity: 0.6;
  position: relative;
}
.ag-premium-limit-reached::after {
  content: "⚡";
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 12px;
}

/* === globe_redesign_v2: marker system === */
.ag-mk{position:relative;width:30px;height:38px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));cursor:pointer}
.ag-mk__body{position:absolute;top:0;left:1px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:var(--ag-mk-c,#4f8fe0)}
.ag-mk__tail{position:absolute;top:20px;left:10px;width:10px;height:10px;background:var(--ag-mk-c,#4f8fe0);border-right:2px solid rgba(255,255,255,.92);border-bottom:2px solid rgba(255,255,255,.92);transform:rotate(45deg)}
.ag-mk__g{position:absolute;top:6px;left:6px;width:18px;height:18px;background:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ag-mk--stay{--ag-mk-c:#4f8fe0}.ag-mk--trail{--ag-mk-c:#34d399}.ag-mk--event{--ag-mk-c:#c084fc}.ag-mk--reel{--ag-mk-c:#f4b45c}
.ag-mk--user{--ag-mk-c:#2dd4bf}
.ag-mk__g[data-glyph="bed"]{-webkit-mask-image:url("/static/img/globe/glyph-bed.b0e7324becf0.svg");mask-image:url("/static/img/globe/glyph-bed.b0e7324becf0.svg")}
.ag-mk__g[data-glyph="boot"]{-webkit-mask-image:url("/static/img/globe/glyph-boot.28b6820822f3.svg");mask-image:url("/static/img/globe/glyph-boot.28b6820822f3.svg")}
.ag-mk__g[data-glyph="ticket"]{-webkit-mask-image:url("/static/img/globe/glyph-ticket.a8b69668f854.svg");mask-image:url("/static/img/globe/glyph-ticket.a8b69668f854.svg")}
.ag-mk__g[data-glyph="play"]{-webkit-mask-image:url("/static/img/globe/glyph-play.4b4882d79a03.svg");mask-image:url("/static/img/globe/glyph-play.4b4882d79a03.svg")}
.ag-cluster2{border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,140,120,.98),rgba(203,44,74,.95));color:#fff;font-weight:700;display:grid;place-items:center;border:2.5px solid rgba(255,255,255,.55);box-shadow:0 0 18px rgba(244,84,112,.55)}

/* === globe_redesign_v2: location puck === */
.ag-locpuck{position:relative;width:64px;height:64px;display:grid;place-items:center;pointer-events:none}
.ag-locpuck__acc{position:absolute;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(46,116,184,.30),rgba(46,116,184,.10) 55%,transparent 72%);border:1px solid rgba(79,143,224,.35)}
.ag-locpuck__cone{position:absolute;bottom:calc(50% - 3px);left:50%;transform:translateX(-50%);width:32px;height:30px;background:radial-gradient(120% 115% at 50% 100%,rgba(120,175,235,.72),rgba(79,143,224,.28) 45%,rgba(79,143,224,0) 82%);clip-path:polygon(50% 100%,86% 8%,50% 0%,14% 8%);filter:blur(2px)}
.ag-locpuck__core{position:relative;width:18px;height:18px;border-radius:50%;background:#2E74B8;border:3px solid #fff;box-shadow:0 0 0 2px rgba(46,116,184,.45),0 3px 8px rgba(0,0,0,.6);z-index:3}

/* === globe_redesign_v2: place peek (Task 4.2) ===
   mapboxgl.Popup's own chrome (white content box + tip + close button) is
   reset ONLY inside .ag-peek-popup (the Popup's `className` option scopes
   these selectors to just this popup -- the .ag-popup--story / .ag-rift-popup
   Popups elsewhere in templates/globe/index.html keep the default chrome
   untouched). */
.ag-peek-popup .mapboxgl-popup-content{background:transparent;padding:0;box-shadow:none;border-radius:0}
.ag-peek-popup .mapboxgl-popup-tip{display:none}
.ag-peek-popup .mapboxgl-popup-close-button{color:#fff;font-size:16px;line-height:1;top:2px;right:4px}
.ag-peek{width:250px;background:rgba(15,23,42,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.5);color:#fff;font-family:'Geist',system-ui,sans-serif}
.ag-peek__header{height:8px;background:linear-gradient(145deg,#2563eb,#4f46e5)}
.ag-peek__body{padding:14px 16px 16px}
.ag-peek__name{font-size:14px;font-weight:700;line-height:1.3}
.ag-peek__meta{margin-top:2px;font-size:11px;color:rgba(255,255,255,.55)}
.ag-peek__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ag-peek__action{flex:1 1 auto}

/* === globe_redesign_v2: calm route empty-state (Task 4.2) ===
   Replaces the "No route yet" skeleton in the results popup (#ag-status)
   whenever no Start is set yet -- see statusNoRouteYet() in
   templates/globe/index.html. */
.ag-status-empty{padding:14px 12px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;text-align:center;font-size:12px;color:rgba(255,255,255,.7);line-height:1.4}

/* === globe_redesign_v2: transport-mode segmented control (Task 5.2) ===
   Namespace-checked: zero pre-existing ".ag-seg"/".ag-seg__btn" hits anywhere
   in the repo before this task (the only "ag-seg*" hits were the unrelated,
   longer ".ag-segmented*" admin-widget classes in static/admin/css/widgets.css
   -- a different stylesheet never loaded on /globe/). Replaces the plain
   <select id="ag-mode"> as the visible primary control -- see the flag-gated
   markup + wiring in templates/globe/index.html. */
.ag-seg{display:flex;gap:2px;padding:3px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);margin-bottom:8px}
.ag-seg__btn{flex:1 1 0;min-width:0;padding:7px 4px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.6);font-size:11px;font-weight:600;line-height:1.3;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.ag-seg__btn:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}
.ag-seg__btn[aria-pressed="true"]{background:linear-gradient(145deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.4)}

/* === globe_redesign_v2: consolidated PRO upsell card (Task 5.2) ===
   Namespace-checked: zero pre-existing ".ag-upsell*" hits anywhere in the
   repo before this task. Server-rendered with inline style="display:none";
   initGlobePremium() in templates/globe/index.html flips it on (sets
   .style.display='') only when at least one feature actually resolves to
   locked/upgrade -- same reveal-after-async-bootstrap timing as the
   per-button badges it replaces. */
.ag-upsell{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:10px;border-radius:12px;border:1px solid rgba(37,99,235,.35);background:rgba(37,99,235,.12)}
.ag-upsell__icon{font-size:18px;flex:0 0 auto}
.ag-upsell__text{flex:1 1 auto;min-width:0}
.ag-upsell__title{font-size:12px;font-weight:700;color:#fff}
.ag-upsell__msg{margin-top:2px;font-size:11px;color:rgba(255,255,255,.65);line-height:1.35}
.ag-upsell__cta{flex:0 0 auto;padding:7px 14px;border-radius:9px;background:linear-gradient(145deg,#2563eb,#4f46e5);color:#fff;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.ag-upsell__cta:hover{box-shadow:0 4px 14px rgba(37,99,235,.4)}

/* === globe_redesign_v2: honest disabled-SOS state (Task 5.2) ===
   Namespace-checked: zero pre-existing ".ag-sos-degraded"/".ag-sos-caveat"
   hits anywhere in the repo before this task. Applied to #ag-guard-sos (the
   Guardian Shield Mode popup's "Send SOS" button) only when the flag is on
   AND {% if not twilio_ready %} -- visual-only, the button stays fully
   clickable (see templates/globe/index.html for why a real `disabled`
   attribute would be wrong here). */
.ag-sos-degraded{opacity:.55;filter:grayscale(.3)}
.ag-sos-caveat{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);font-size:11px;line-height:1.4;color:#fbbf24}

/* === globe_redesign_v2: anon-alive sign-in ribbon (Task 5.3) ===
   Namespace-checked: zero pre-existing ".bm-anon-*"/"#bm-anon-ribbon" hits
   anywhere in the repo before this task. Lives in the SAME floating
   top-center chrome column as #bm-omni (chrome.css, inset-block-start:
   var(--ag-space-4)) and #bm-chips (inset-block-start: calc(var(--ag-space-4)
   + 54px)) -- this is that column's third row, offset by chips' own
   min-block-size (var(--ag-hit-target-compact), ~40px) + a small gap.
   ".bm-glass" (chrome.css) supplies the shared dark-blur panel look every
   other First-Light chrome element uses (#bm-omni/#bm-chips/#bm-whisper all
   carry it too); only positioning/layout is new here, per this program's
   "new globe_redesign_v2 classes append to globe_premium.css" convention
   (Task 5.2) -- literal px values here match that file's own established
   style (.ag-upsell/.ag-seg/.ag-status-empty above), not the --bm-* custom
   properties chrome.css defines (those are scoped to .bm-first-light and
   don't reliably inherit outside #ag-globe-shell -- see NavHudTests' own
   note in apps/globe/tests/test_blue_marble_w2b.py for that exact trap).
   CONCERN: this row-3 offset is a reasoned estimate (chip height + gap),
   not visually verified in a live browser -- see task-5.3-report.md. */
.bm-anon-ribbon{position:absolute;inset-block-start:calc(var(--ag-space-4) + 100px);inset-inline:0;margin-inline:auto;inline-size:min(480px,92%);display:flex;align-items:center;gap:8px;padding:8px 14px;z-index:20}
.bm-anon-ribbon__icon{flex:0 0 auto;font-size:14px;line-height:1}
.bm-anon-ribbon__msg{flex:1 1 auto;min-width:0;font-size:12px;color:rgba(255,255,255,.85);line-height:1.3}
.bm-anon-ribbon__cta{flex:0 0 auto;padding:6px 12px;border-radius:9px;background:linear-gradient(145deg,#2563eb,#4f46e5);color:#fff;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.bm-anon-ribbon__cta:hover{box-shadow:0 4px 14px rgba(37,99,235,.4)}