@layer components{.payment-notice{--payment-accent:var(--primary);width:min(calc(100% - (2 * var(--page-gutter-mobile))), var(--page-width));border:1px solid color-mix(in srgb, var(--payment-accent) 35%, var(--border));border-inline-start:6px solid var(--payment-accent);border-radius:var(--radius-card);background:color-mix(in srgb, var(--payment-accent) 7%, var(--card));color:var(--foreground);align-items:flex-start;gap:1rem;margin:1.5rem auto 0;padding:1.5rem;display:flex}.payment-notice[data-state=paid]{--payment-accent:var(--success)}.payment-notice[data-state=delayed]{--payment-accent:var(--warning)}.payment-notice[data-state=error],.payment-notice[data-state=failed]{--payment-accent:var(--destructive)}.payment-notice[data-state=canceled],.payment-notice[data-state=refunded],.payment-notice[data-state=partially_refunded]{--payment-accent:var(--muted-foreground)}.payment-notice-icon{width:3rem;height:3rem;color:var(--payment-accent);background:color-mix(in srgb, var(--payment-accent) 12%, var(--card));border-radius:50%;flex:0 0 3rem;place-items:center;display:grid}.payment-notice-icon svg{width:1.75rem;height:1.75rem}.payment-notice-content{flex:1;min-width:0}.payment-notice-title{text-wrap:balance;margin:0;font-size:1.5rem;font-weight:700;line-height:1.35}.payment-notice-description{margin:.5rem 0 0;font-size:1rem;line-height:1.65}.payment-notice-detail{margin:.5rem 0 0;font-size:.875rem;line-height:1.6}.payment-notice-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;display:flex}.payment-notice-actions>*{min-height:2.75rem}.payment-notice-spinner{animation:1s linear infinite payment-notice-spin}@keyframes payment-notice-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.payment-notice-spinner{animation:none}}@media (width>=40rem){.payment-notice{width:min(calc(100% - (2 * var(--page-gutter))), var(--page-width));padding:1.75rem 2rem}}@media (width<=26rem){.payment-notice{gap:.5rem;padding:1rem}.payment-notice-icon{flex-basis:2rem;width:2rem;height:2rem}.payment-notice-icon svg{width:1.5rem;height:1.5rem}.payment-notice-title{font-size:1.25rem}}}