/* ── Paywall in-context upsell surfaces (V3 #10) ──────────────────────────────
 * Reusable quota meter + feature-lock badge, rendered by the {% quota_meter %}
 * and {% upgrade_lock %} inclusion tags (monetization/templatetags/paywall.py).
 * Generalised from the companies `.pd-upgrade-banner` + offices `.ov-ins-bar-*`
 * patterns. Themed entirely via design tokens (so light/dark follow automatically)
 * and RTL-safe via logical properties. State colour is carried by the fill / icon
 * only — the count text stays --text-primary so it never drops below WCAG AA. */

.pw-meter{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; margin:12px 0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.pw-meter--compact{ padding:8px 10px; margin:8px 0; }

.pw-meter-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary);
}
.pw-meter-label{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.pw-meter-label i{ color:var(--accent); font-size:var(--fs-xs); flex-shrink:0; }
.pw-meter-count{ font-variant-numeric:tabular-nums; color:var(--text-primary); white-space:nowrap; }

.pw-meter-track{
  position:relative; height:7px; border-radius:var(--radius-pill);
  background:var(--overlay-medium); overflow:hidden;
}
.pw-meter-fill{
  height:100%; border-radius:inherit;
  background:var(--accent-surface);
  transition:width .3s var(--ease);
}
.pw-meter--warn .pw-meter-fill{ background:#d99423; }        /* amber (decorative fill) */
.pw-meter--over .pw-meter-fill{ background:var(--danger); }

.pw-meter-cta{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-top:2px; font-size:var(--fs-xs); font-weight:700;
  color:var(--accent); text-decoration:none;
}
.pw-meter-cta:hover{ text-decoration:underline; }
.pw-meter-cta i{ font-size:var(--fs-xs); }

/* Inline feature-lock badge — sits next to a gated control. */
.pw-lock{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:600; color:var(--text-muted);
  background:var(--accent-dim);
  border:1px solid var(--border);
  white-space:nowrap;
}
.pw-lock i{ color:var(--accent); font-size:var(--fs-xs); }
.pw-lock-cta{
  color:var(--accent); font-weight:700; text-decoration:none;
  padding-inline-start:6px; margin-inline-start:2px;
  border-inline-start:1px solid var(--border-hover);
}
.pw-lock-cta:hover{ text-decoration:underline; }

/* Full-width upgrade banner (generalised `.pd-upgrade-banner`). */
.pw-banner{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; margin:12px 0;
  background:var(--accent-dim);
  border:1px solid var(--accent);
  border-radius:var(--radius-md);
  font-size:var(--fs-sm); color:var(--text-secondary);
}
.pw-banner i{ color:var(--accent); margin-top:2px; flex-shrink:0; }
.pw-banner a{ color:var(--accent); font-weight:700; }