/* ============================================================
   member-views.css — the "deal" style library
   ------------------------------------------------------------
   How a discount is rendered for the different audiences /
   membership states. This is the visual half of audience.js:
     · list rows (.mp-item) and their marks/meta
     · the colored comparison pills (.deal-pill--std / --valor
       / --lock / --unver) + the "join to save" note
     · the veteran-owned inline attribute
     · the map pins (.pin-pill and its --valor / --locked /
       --unver variants + the gold sheen animation)

   Depends on tokens from core.css. Loaded after core.
   ============================================================ */
/* list rows = clean records */
.mp-item{display:flex;gap:11px;padding:11px 10px;border-radius:var(--r-sm);cursor:pointer;align-items:flex-start;
  border:1px solid transparent}
.mp-item + .mp-item{margin-top:0;border-top:1px solid var(--line-2)}
.mp-item:hover{background:var(--surface)}
.mp-item.sel{background:var(--surface-2);border-color:var(--line)}
.mp-item .mark{width:44px;height:44px;border-radius:var(--r-sm);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-weight:800;
  font-size:1.05rem;color:var(--navy);flex:none;overflow:hidden}
.mp-item .mark img{width:100%;height:100%;object-fit:cover;display:block}
.mp-meta{min-width:0}
.mp-item .nm{font-weight:700;font-size:.95rem;line-height:1.25;color:var(--ink)}
.mp-item .mt{font-size:.79rem;color:var(--muted);margin-top:3px}
.mp-item .mt .sep{opacity:.45}
/* deal rendering = colored comparison pills (standard vs Valor) */
.mp-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px}
.deal-pill{display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 9px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:800;line-height:1;white-space:nowrap;letter-spacing:0;box-sizing:border-box}
.deal-pill--std{background:var(--navy);color:#fff}
.deal-pill--std.deal-pill--unver{background:#dfe3ea;color:#4a5563;outline:1.5px dashed #9aa3b0;outline-offset:-1.5px}
.deal-pill--valor{color:#3a2c00;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  background:linear-gradient(145deg,#f2dd8f,#e0c25e 55%,#cca842)}
.deal-pill--lock{color:#6b5410;background:linear-gradient(145deg,#fbf1cf,#f2e2a4 55%,#e9d488);
  box-shadow:inset 0 0 0 1.5px #c9a83a,inset 0 1px 0 rgba(255,255,255,.6)}
.rate-star{color:var(--gold-deep)}
.deal-pill--valor .rate-star{color:#7a5c00}
.deal-pill--lock .rate-star{color:#7a5c00}
.deal-note{display:inline-flex;flex-basis:100%;align-items:center;gap:5px;font-size:.72rem;font-weight:800;color:var(--good);letter-spacing:.01em}
.deal-note::before{content:"";width:12px;height:12px;flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='15 7 21 7 21 13'/></svg>") center/contain no-repeat}
.deal-note--join{color:var(--good);cursor:pointer;text-decoration:none}
.deal-note--join:hover{text-decoration:underline}
/* veteran-owned = quiet gray inline attribute on the meta line */
.mp-item .mt .mt-vet{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#6a7687}
.mp-item .mt .mt-vet::before{content:"";width:10px;height:10px;flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a7687'><polygon points='12,2 15,9 22,9.4 16.5,14 18.2,21 12,17 5.8,21 7.5,14 2,9.4 9,9'/></svg>") center/contain no-repeat}
.mp-item--locked{opacity:.6}
.mp-item--locked .mark{filter:grayscale(.7)}
.mp-empty{padding:26px 16px;color:var(--muted);font-size:.88rem;text-align:center;line-height:1.5}

/* ---------- map pins ---------- */
.pin-marker{display:flex;flex-direction:column;align-items:center;cursor:pointer;text-decoration:none;
  border:0;background:none;padding:0;font:inherit}
.pin-marker:hover{z-index:5}.pin-marker.is-selected{z-index:6}
.pin-marker.is-selected .pin-pill{box-shadow:0 4px 14px rgba(18,41,74,.38),0 0 0 2px var(--gold)}
.pin-pill{display:flex;align-items:center;gap:5px;background:var(--navy);color:#fff;border-radius:999px;
  padding:5px 11px 5px 8px;font-weight:800;font-size:.79rem;line-height:1;white-space:nowrap;
  box-shadow:0 2px 7px rgba(18,41,74,.32);transition:transform .15s}
.pin-marker:hover .pin-pill{transform:translateY(-2px)}
.pin-pct{font-weight:800}
/* plain tag glyph — inherits pill text color, no chip behind it */
.pin-tag{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px;color:currentColor}
.pin-tag svg{width:14px;height:14px}
/* unverified standard deal — light gray with dark text and a dashed border */
.pin-pill--unver{background:#dfe3ea;color:#4a5563;box-shadow:0 2px 7px rgba(18,41,74,.22);outline:1.5px dashed #9aa3b0;outline-offset:-1.5px}
.pin-pill--unver + .pin-stem{background:#c2c9d3}
/* Valor merchant — gold star + rate on a clean gold treatment */
.pin-star-ic{display:flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px;color:#8a6d16}
.pin-star-ic svg{width:15px;height:15px}
.pin-pill--valor{color:#3a2c00;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#f6e6a2,#e6cb68 55%,#d0ad42);
  box-shadow:0 3px 12px rgba(154,125,36,.45),inset 0 0 0 1px rgba(122,92,0,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.pin-pill--locked{position:relative;overflow:hidden;color:#6b5410;
  background:linear-gradient(145deg,#fbf1cf,#f2e2a4 55%,#e9d488);
  box-shadow:0 2px 9px rgba(154,125,36,.28),inset 0 0 0 1.5px #c9a83a,inset 0 1px 0 rgba(255,255,255,.6)}
.pin-pill--locked .pin-star-ic{color:#b8992e}
.pin-pill--valor::after,.pin-pill--locked::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:translateX(-220%) skewX(-18deg);animation:pinSheen 5s ease-in-out infinite}
@keyframes pinSheen{0%{transform:translateX(-220%) skewX(-18deg)}
  12%{transform:translateX(320%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
.pin-marker:has(.pin-pill--valor),.pin-marker:has(.pin-pill--locked){z-index:4}
.pin-stem{width:2px;height:9px;background:var(--navy);opacity:.55}
.pin-pill--locked + .pin-stem,.pin-pill--valor + .pin-stem{background:var(--gold-deep)}