/* /css/feature-billing-nudge.css */

.feature-billing-nudge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 320px;
  background: linear-gradient(135deg, var(--brand-primary, #ef4444) 0%, var(--brand-accent, #f97316) 100%);
  color: #fff;
  padding: 14px 36px 14px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  z-index: 1500;
  animation: fbn-in 250ms ease-out;
}

.feature-billing-nudge .fbn-close {
  position: absolute; top: 4px; right: 6px;
  width: 26px; height: 26px;
  background: transparent; border: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: 50%;
}
.feature-billing-nudge .fbn-close:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.feature-billing-nudge .fbn-headline {
  font: 700 14px/1.3 system-ui, sans-serif;
  margin-bottom: 4px;
}

.feature-billing-nudge .fbn-sub {
  font: 400 12px/1.4 system-ui, sans-serif;
  opacity: .9;
}

@media (max-width: 480px) {
  .feature-billing-nudge {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

@keyframes fbn-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}