/* billing-banner.css — shared across all user-facing pages. Banner is injected at the top of by /js/billing-banner.js when the authenticated user has a past-due, grace, or suspended subscription state. */ .billing-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 20px; font-size: 14px; font-weight: 500; text-align: center; border-bottom: 1px solid transparent; z-index: 1000; position: sticky; top: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .billing-banner-message { flex: 1 1 auto; max-width: 780px; } .billing-banner-cta { background-color: rgba(0, 0, 0, 0.25); color: inherit; text-decoration: none; padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 600; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; } .billing-banner-cta:hover { background-color: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.5); } .billing-banner-info { background-color: #1e3a5f; color: #bbdefb; border-bottom-color: #2196f3; } .billing-banner-warning { background-color: #3a2f0e; color: #ffe082; border-bottom-color: #ffc107; } .billing-banner-error { background-color: #3a1414; color: #ffcdd2; border-bottom-color: #ef5350; } @media (max-width: 600px) { .billing-banner { flex-direction: column; gap: 10px; padding: 12px 16px; } .billing-banner-message { max-width: none; } }