/* The credit shop's neon treatment is intentionally scoped to this page. */
.buy-credits-page {
    --credits-neon: #a52d70;
    --credits-gold: #856000;
    --credits-panel: var(--portal-surface);
}
[data-theme="dark"] .buy-credits-page {
    --credits-neon: #f15bda;
    --credits-gold: #f5d650;
    --credits-panel: #0a131c;
}
.buy-credits-page .portal-content {
    container: credit-shop / inline-size;
    background: radial-gradient(ellipse at 45% 35%, color-mix(in srgb, var(--credits-neon) 5%, transparent), transparent 65%);
}
.credits-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem 0 3.25rem; }
.buy-credits-page .portal-page-header { margin: 0; gap: 1.4rem; flex: 1 1 28rem; }
.buy-credits-page .portal-page-header h1 { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 750; letter-spacing: -.03em; }
.buy-credits-page .portal-page-header > .portal-page-icon { width: 4.75rem; height: 4.75rem; flex-basis: 4.75rem; font-size: 2.7rem; }
.buy-credits-page .portal-page-icon { color: var(--credits-neon); background: color-mix(in srgb, var(--credits-neon) 10%, var(--credits-panel)); border-color: color-mix(in srgb, var(--credits-neon) 45%, transparent); }
.credits-intro { margin: .15rem 0 0; color: var(--app-muted); }
.credits-balance { display: flex; align-items: center; gap: 1.5rem; padding: 1.15rem 1.5rem; border: 1px solid var(--credits-gold); border-radius: 10px; background: color-mix(in srgb, var(--credits-gold) 4%, var(--credits-panel)); box-shadow: inset 0 0 24px color-mix(in srgb, var(--credits-gold) 7%, transparent); }
.credits-coins { display: block; width: 1em; height: 1em; flex-shrink: 0; filter: drop-shadow(0 0 3px #b8860b); }
.credits-coins--pink { filter: drop-shadow(0 0 3px #a52d70); }
.credits-coins--purple { filter: drop-shadow(0 0 3px #7036a5); }
.credits-coins--green { filter: drop-shadow(0 0 3px #228344); }
.credits-coins--blue { filter: drop-shadow(0 0 3px #235e9b); }
.credits-balance > .credits-coins { font-size: 3.2rem; }
.buy-credits-page .portal-page-icon > i { text-shadow: 0 0 8px color-mix(in srgb, var(--credits-neon) 35%, transparent); }
[data-theme="dark"] .buy-credits-page .credits-coins { filter: drop-shadow(0 0 3px #f5d650) drop-shadow(0 0 9px #e9b52c99); }
[data-theme="dark"] .buy-credits-page .credits-coins--pink { filter: drop-shadow(0 0 3px #f15bda) drop-shadow(0 0 9px #f15bda99); }
[data-theme="dark"] .buy-credits-page .credits-coins--purple { filter: drop-shadow(0 0 3px #c084fc) drop-shadow(0 0 9px #c084fc99); }
[data-theme="dark"] .buy-credits-page .credits-coins--green { filter: drop-shadow(0 0 3px #65e58b) drop-shadow(0 0 9px #65e58b99); }
[data-theme="dark"] .buy-credits-page .credits-coins--blue { filter: drop-shadow(0 0 3px #60a5fa) drop-shadow(0 0 9px #60a5fa99); }
[data-theme="dark"] .buy-credits-page .portal-page-icon > i { text-shadow: 0 0 4px var(--credits-neon), 0 0 14px var(--credits-neon); }
[data-theme="dark"] .buy-credits-page :is(.portal-page-icon, .credits-pack-icon) { box-shadow: inset 0 0 16px #f15bda18, 0 0 12px #f15bda18; }
[data-theme="dark"] .buy-credits-page .credits-pack .credits-pack-icon { box-shadow: inset 0 0 16px #c084fc18, 0 0 12px #c084fc18; }
[data-theme="dark"] .buy-credits-page .credits-pack .credits-pack-icon--green { color: #65e58b; box-shadow: inset 0 0 16px #65e58b18, 0 0 12px #65e58b18; }
[data-theme="dark"] .buy-credits-page .credits-pack .credits-pack-icon--blue { color: #60a5fa; box-shadow: inset 0 0 16px #60a5fa18, 0 0 12px #60a5fa18; }
.credits-balance strong { display: block; font-size: 1.8rem; line-height: 1.3; }
.credits-balance span { font-size: .875rem; color: var(--app-muted); }
.credits-packages, .credits-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.credits-packages { scroll-margin-top: 2rem; }
.buy-credits-page .credits-pack { position: relative; border-color: color-mix(in srgb, var(--credits-neon) 50%, var(--app-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--credits-neon) 5%, var(--credits-panel)), var(--credits-panel) 60%); }
.buy-credits-page .credits-pack--featured {
    border: 2px solid var(--credits-neon);
    box-shadow: 0 0 6px color-mix(in srgb, var(--credits-neon) 65%, transparent),
        0 0 24px color-mix(in srgb, var(--credits-neon) 35%, transparent),
        0 0 42px color-mix(in srgb, var(--credits-neon) 15%, transparent),
        inset 0 0 22px color-mix(in srgb, var(--credits-neon) 18%, transparent);
}
.buy-credits-page .credits-pack > .card-body { padding: 1.75rem; text-align: center; }
.credits-featured-label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5rem; padding: .3rem 1.2rem; white-space: nowrap; border: 1px solid var(--credits-neon); border-radius: 7px; background: var(--credits-panel); color: var(--credits-neon); font-size: .875rem; font-weight: 700; box-shadow: 0 0 14px color-mix(in srgb, var(--credits-neon) 25%, transparent); }
.credits-pack-heading { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; padding-bottom: 1.1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--app-border); }
.credits-pack-icon { flex: 0 0 3.6rem; display: grid; place-items: center; height: 3.6rem; font-size: 2.4rem; color: var(--credits-neon); border: 1px solid currentColor; border-radius: 6px; }
.credits-pack .credits-pack-icon { color: var(--portal-purple); }
.credits-pack .credits-pack-icon--green { color: #228344; }
.credits-pack .credits-pack-icon--blue { color: var(--portal-info); }
.buy-credits-page .credits-pack h2 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); margin: 0 0 .3rem; }
.credits-pack-heading p { font-size: .8rem; line-height: 1.5; margin: 0; color: var(--app-muted); }
.credits-quantity { font-size: 3.25rem; line-height: 1.15; font-weight: 800; margin: 0; }
.credits-quantity--green { color: #228344; }
.credits-quantity--blue { color: var(--portal-info); }
.credits-quantity--purple { color: var(--portal-purple); }
[data-theme="dark"] .buy-credits-page .credits-quantity--green { color: #65e58b; }
[data-theme="dark"] .buy-credits-page .credits-quantity--blue { color: #60a5fa; }
[data-theme="dark"] .buy-credits-page .credits-quantity--purple { color: #c084fc; }
.credits-unit { font-weight: 600; margin: 0 0 .6rem; }
.credits-price { font-size: 2rem; font-weight: 600; margin: 0 0 .8rem; }
.credits-description { color: var(--app-muted); font-size: .9rem; line-height: 1.5; max-width: 19rem; margin: 0 auto 1.1rem; }
.buy-credits-page .credits-buy { min-height: 3rem; font-size: 1rem; border: 1px solid transparent; color: #180b1d; background: linear-gradient(100deg, #f42de4, #ff88ab 55%, #f7d979); }
.buy-credits-page .credits-buy:hover { color: #180b1d; filter: brightness(1.08); box-shadow: 0 0 16px color-mix(in srgb, var(--credits-neon) 25%, transparent); }
.buy-credits-page .credits-buy:active { color: #180b1d; filter: brightness(.95); }
.credits-benefits { margin-top: 1.75rem; }
.credits-benefit { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.25rem; border: 1px solid var(--app-border); border-radius: 9px; background: var(--credits-panel); }
.credits-benefit > div { min-width: 0; }
.credits-benefit .portal-page-icon { width: 3.6rem; height: 3.6rem; flex-basis: 3.6rem; font-size: 2rem; }
.credits-benefit h2 { font-size: 1rem; font-weight: 700; margin: .1rem 0 .5rem; }
.credits-benefit p { font-size: .85rem; line-height: 1.55; color: var(--app-muted); margin: 0 0 .3rem; }
.credits-payment-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: .9rem 1.25rem; margin-top: 1.1rem; border: 1px solid var(--app-border); border-radius: 9px; background: var(--credits-panel); color: var(--app-muted); }
.credits-payment-security { display: flex; align-items: center; gap: 1rem; flex: 1 1 24rem; }
.credits-payment-security > i { font-size: 1.3rem; }
.credits-payment-note p { margin: 0; font-size: .8rem; }
.credits-payment-options { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.credits-stripe { color: var(--portal-purple); font-size: 1.6rem; font-weight: 800; letter-spacing: -.06em; }
.credits-payment-methods { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.credits-payment-brand { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2rem; padding: .25rem .65rem; border: 1px solid var(--app-border); border-radius: 5px; font-size: .8rem; line-height: 1.4; white-space: nowrap; }
.credits-payment-brand--visa { background: #fff; border-color: #e5e7eb; color: #1434cb; font-size: 1rem; font-weight: 800; font-style: italic; }
.credits-payment-brand--mastercard { background: #fff; border-color: #e5e7eb; color: #232323; font-weight: 600; }
.credits-mastercard-symbol { position: relative; display: inline-block; width: 1.9rem; height: 1.2rem; }
.credits-mastercard-symbol::before, .credits-mastercard-symbol::after { content: ""; position: absolute; top: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; }
.credits-mastercard-symbol::before { left: 0; background: #eb001b; }
.credits-mastercard-symbol::after { right: 0; background: #f79e1b; mix-blend-mode: multiply; }
.credits-payment-brand--klarna { background: #ffb3c7; border-color: #ffb3c7; color: #17120f; font-size: 1rem; font-weight: 750; letter-spacing: -.04em; }
.credits-payment-brand--amazon { background: #fff; border-color: #e5e7eb; color: #232f3e; font-size: .95rem; font-weight: 700; letter-spacing: -.035em; }
.credits-payment-brand--amazon span { font-weight: 400; }
@container credit-shop (max-width: 1000px) {
    .buy-credits-page .credits-pack > .card-body { padding: 1.5rem 1rem 1rem; }
    .credits-pack-heading { flex-direction: column; text-align: center; }
    .credits-pack-icon { flex-basis: auto; width: 3.6rem; }
    .credits-benefit { flex-direction: column; gap: .75rem; }
}
@container credit-shop (max-width: 700px) {
    .credits-packages, .credits-benefits { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .credits-header { margin-top: 0; margin-bottom: 2rem; }
    .credits-balance { width: 100%; }
    .credits-pack-heading { flex-direction: row; text-align: left; }
    .credits-benefit { flex-direction: row; }
    .credits-benefits { gap: 1rem; }
    .credits-payment-note { flex-wrap: wrap; }
    .credits-payment-note p { flex: 1 1 12rem; }
    .buy-credits-page .portal-page-header { gap: 1rem; }
    .buy-credits-page .portal-page-header > .portal-page-icon { width: 3.4rem; height: 3.4rem; flex-basis: 3.4rem; font-size: 2rem; }
}