/* ===== Paywall banner (base aesthetic) ===== */
#vd-paywall-banner{
  width: min(860px, 92%);
  margin: 10px auto 14px;
  padding: 10px 14px;
  text-align: center;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(0,255,195,.35);
  box-shadow:
    0 0 18px rgba(0,255,195,.18) inset,
    0 0 22px rgba(0,255,195,.12);
  color: #dffff6;
  font-weight: 700;
  letter-spacing: .2px;
  font-family: 'Object Sans', sans-serif;
}

/* Timer/notice pill (default green-tinted) */
#vd-paywall-banner .pill{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0,255,195,.12);
  box-shadow: 0 0 12px rgba(0,255,195,.25) inset;
  font-weight: 800;
}

/* ===== Expired state (transparent banner; white “expired”; yellow pill) ===== */
#vd-paywall-banner.expired{
  /* keep the same transparent/dark look and border as base */
  background: rgba(0,0,0,.55);
  border-color: rgba(0,255,195,.35);
  color: #dffff6;
}

/* “Access expired” lead text */
#vd-paywall-banner.expired .lead{
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 0 8px rgba(0,0,0,.28);
}

/* Yellow action pill */
#vd-paywall-banner.expired .pill-yellow{
  background: #EFF16D;
  color: #000;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 14px rgba(239,241,109,.22);
  border: 1px solid #E4EA58;
  font-weight: 700;
}