/*
 * ZenoSMP – additions on top of the Cobble theme (generic.css / shared.css).
 * Everything the original theme did not ship (basket extras, order page, error page,
 * inline pixel icons, ...) and the text-contrast fixes for the bright #00ACFF accent.
 */

/* ── Inline pixel icons (replace the Material Design icon font) ───────────── */
.px-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}
.px-icon--btn { width: 16px; height: 16px; }
.px-icon--lg { width: 40px; height: 40px; }
.px-icon--chevron { width: 12px; height: 8px; transition: transform 0.2s ease; }
.px-check { width: 14px; height: 12px; color: var(--success); }
.px-cross { width: 12px; height: 12px; color: var(--danger); }
.nav-chevron .px-icon, .px-chevron { width: 12px; height: 8px; transition: transform 0.2s ease; }
.ranktable-card.open .px-chevron { transform: rotate(180deg); }
.basket-refresh .px-icon { width: 16px; height: 16px; }
.basket-refresh.spinning .px-icon { animation: spin 0.5s ease infinite; }
.cart-empty > .px-icon { color: var(--text-tertiary); }
.category-title > .px-icon { width: 18px; height: 18px; }

/* ── Text on the primary colour ───────────────────────────────────────────
   The theme prints white text on its (darker) blue. #00ACFF is bright, so the
   text on every filled primary surface uses --color-primary-text instead. */
.button--primary,
.button--primary:hover,
.button--primary:focus,
.button--success,
.button--success:hover,
.button--success:focus,
.button--checkout,
.button--checkout:hover,
.button--checkout:focus,
.button--primary .px-icon,
.button--checkout .px-icon {
    color: var(--color-primary-text, #031a20);
}
.badge-primary,
.nav-tag,
.category-title,
.category-title *,
.package-expiry,
.login-edition.active,
.patron-tier__header,
.stacked-tier.active .stacked-tier__inner,
.stacked-tier.active .stacked-tier__inner *,
.cart-empty__cat:hover,
.vote-site__number-inner,
.sb-announcement,
.sb-announcement * {
    color: var(--color-primary-text, #031a20);
}
.pkg-btn--add .pkg-btn__inner,
.pkg-btn--add .pkg-btn__inner * {
    color: var(--color-primary-text, #031a20);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--color-primary-text, #031a20);
}
.cart-btn .profile__name,
.cart-btn .profile__value,
.cart-badge-mobile .header-badge__text,
.vote-site__number *,
.panel-primary,
.panel-primary *,
.btn-primary,
.store-product-options .actions .btn-primary {
    color: var(--color-primary-text, #031a20) !important;
}
.cart-btn .profile__value { opacity: 0.75; }

/* Secondary button */
.button--secondary {
    --btn-border: var(--border);
    --btn-bg: var(--surface-raised);
    color: var(--white);
    height: 44px;
    padding: 0 20px;
}
.button--secondary:hover { filter: brightness(1.25); }

/* ── Basket additions ─────────────────────────────────────────────────────── */
.basket-item__meta {
    margin-top: 4px;
    font-size: 0.75em;
    line-height: 1.4;
    color: var(--text-tertiary);
    overflow-wrap: anywhere;
}
.basket-item__left { padding-right: 12px; }
.basket-item__qty-btn { text-decoration: none; user-select: none; }

.basket-promo { display: flex; flex-direction: column; }
.basket-promo__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85em;
    text-align: left;
}
.basket-promo__toggle:hover { color: var(--white); }
.basket-promo.open .px-icon--chevron { transform: rotate(180deg); }
.basket-promo__body { display: none; padding-top: 8px; }
.basket-promo.open .basket-promo__body { display: block; }
.basket-promo__form { display: flex; gap: 8px; }
.basket-promo__input { flex: 1 1 auto; min-width: 0; height: 44px; text-transform: uppercase; }
.basket-promo__apply { flex-shrink: 0; }

.basket-email { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.basket-email__label { font-size: 13px; font-weight: 600; color: var(--white); }
.basket-email__req { color: var(--primary); }
.basket-email__input { width: 100%; height: 44px; }
.basket-email__input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.basket-email__hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted, #9a9a9a); }

.basket-lines { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.basket-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.85em;
    color: var(--text-secondary);
}
.basket-line > span:last-child { white-space: nowrap; color: var(--white); }
.basket-line b { color: var(--white); font-weight: 600; }
.basket-line em { font-style: normal; color: var(--text-tertiary); margin-left: 4px; }
.basket-line--discount > span:last-child { color: var(--success); }
.basket-line__x {
    background: none;
    border: 0;
    padding: 0 4px;
    margin-left: 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-tertiary);
    cursor: pointer;
}
.basket-line__x:hover { color: var(--danger); }

.basket-pulse { animation: basket-pulse 0.5s ease; }
@keyframes basket-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--text-tertiary); }
.store-form-options .form-group { margin-bottom: 16px; }
.store-form-options label { display: block; margin-bottom: 6px; color: var(--white); font-weight: 600; }
.store-form-options select.input { width: 100%; }
@media (max-width: 767px) {
    input.input, select.input, textarea.input { font-size: 16px; }
}

/* ── Order page ───────────────────────────────────────────────────────────── */
.order-page .page-header { flex-wrap: wrap; gap: 12px; }
.order-status {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--border);
    color: var(--white);
    clip-path: var(--clip-2);
}
.order-status--pending { background: var(--warning); color: #201500; }
.order-status--paid { background: var(--color-primary); color: var(--color-primary-text, #031a20); }
.order-status--delivered { background: var(--success); color: #04200f; }
.order-status--review { background: var(--warning); color: #201500; }
.order-status--cancelled, .order-status--refunded { background: var(--danger); color: #fff; }

.order-notice {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--warning);
    color: var(--text-primary);
    line-height: 1.6;
}
.order-notice--ok { background: rgba(34, 197, 94, 0.08); border-left-color: var(--success); }
.order-notice__ref { margin-top: 10px; color: var(--text-secondary); }
.order-notice__ref strong { color: var(--white); font-size: 1.1em; letter-spacing: 0.05em; user-select: all; }

.order-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--surface-raised);
    border: 2px solid var(--border);
}
.order-item__info { min-width: 0; }
.order-item__name { color: var(--white); font-weight: 600; }
.order-item__qty { color: var(--text-secondary); font-weight: 500; }
.order-item__meta { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); }
.order-item__price { color: var(--white); font-weight: 600; white-space: nowrap; }
.order-item__price small, .order-totals small { color: var(--text-tertiary); font-weight: 500; }

.order-totals { margin-left: auto; max-width: 360px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.order-totals__row { display: flex; justify-content: space-between; gap: 24px; color: var(--text-secondary); }
.order-totals__row span:last-child { color: var(--white); }
.order-totals__row--total {
    padding-top: 10px;
    border-top: 2px solid var(--border);
    font-size: 1.15em;
    font-weight: 700;
    color: var(--white);
}
.order-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.order-actions .button { height: 48px; }

/* ── Error page ───────────────────────────────────────────────────────────── */
.error-page { padding: 56px 24px; text-align: center; }
.error-page__code {
    font-size: clamp(64px, 14vw, 120px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-primary);
    text-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.error-page__title { margin: 12px 0 8px; color: var(--white); font-size: 24px; }
.error-page__text { max-width: 460px; margin: 0 auto 24px; color: var(--text-secondary); }
.error-page__btn { min-width: 200px; }
/* The full-page maintenance screen (Admin → Settings → Maintenance) has its own dedicated
   layout + inline styles (app/Views/layout/maintenance.php) instead of reusing this class. */

/* ── Login popup / bedrock notice ─────────────────────────────────────────── */
.giftcard-menu-back { transition: opacity 0.2s ease; }

/* ── Grid images: keep aspect ratio inside cards ──────────────────────────── */
.img-responsive { max-width: 100%; height: auto; }

/* ── Snow (Christmas mode) ────────────────────────────────────────────────── */
.snow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.snow > i {
    position: absolute;
    top: -10px;
    width: var(--s, 4px);
    height: var(--s, 4px);
    background: #fff;
    opacity: var(--o, 0.7);
    animation: snowfall var(--d, 10s) linear var(--delay, 0s) infinite;
}
@keyframes snowfall {
    to { transform: translate3d(var(--x, 20px), 105vh, 0); }
}

/* ── Footer extras ────────────────────────────────────────────────────────── */
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── Accessibility ────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .snow, .particles-container { display: none; }
    * { scroll-behavior: auto !important; }
}

/* ── Rank table: the columns are narrow, so keep the buttons compact ──────── */
.ranktable-rank .pkg-actions { margin: 0; width: 100%; }
.ranktable-rank .pkg-btn__inner { padding: 0 8px; font-size: 12px; }
.ranktable-rank .pkg-btn.wide { min-width: 0; }
.ranktable-desktop[data-many] .pkg-btn--info { display: none; }

/* ── Misc fixes ───────────────────────────────────────────────────────────── */
.basket-line__x { display: inline-block; }
.basket-line > span:first-child { min-width: 0; }
/* keep toasts clear of the open basket drawer */
@media (min-width: 768px) {
    body:has(.basket-popup) .toaster { right: 520px; }
}
@media (max-width: 767px) {
    /* the basket covers the whole screen on phones – show toasts at the top so they never hide the checkout button */
    body:has(.basket-popup) .toaster { top: 12px; bottom: auto; height: auto; flex-direction: column; }
}

/* ── Order page: negative notice ─────────────────────────────────────────── */
.order-notice--bad { background: rgba(220, 38, 38, 0.08); border-left-color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   On-site checkout (layout "checkout" + cart/pay.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.checkout-site { min-height: 100vh; display: flex; flex-direction: column; }
.checkout-topbar { background: var(--surface); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 20; }
.checkout-topbar__inner {
    max-width: 1100px; margin: 0 auto; padding: 10px 16px; min-height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.checkout-topbar__brand { display: inline-flex; align-items: center; }
.checkout-topbar__brand .header-logo { height: 40px; width: auto; }
.checkout-topbar__secure {
    display: inline-flex; align-items: center; gap: 8px; color: var(--success); font-weight: 600; font-size: 13px;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.checkout-topbar__back { color: var(--text-secondary); font-size: 14px; text-decoration: none; white-space: nowrap; }
.checkout-topbar__back:hover { color: var(--white); }
.checkout-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; }

.pay-heading { margin-bottom: 20px; }
.pay-heading__title { font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--white); letter-spacing: -0.01em; }
.pay-heading__sub { margin-top: 4px; color: var(--text-secondary); }
.pay-heading__sub strong { color: var(--white); }

.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.pay-grid .panel { margin-bottom: 0; }
.pay-side { position: sticky; top: 88px; }
.pay-side__note { margin-top: 14px; font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
@media (max-width: 900px) {
    .pay-grid { grid-template-columns: minmax(0, 1fr); }
    .pay-side { position: static; order: -1; }
    .checkout-topbar__back { display: none; }
    .checkout-topbar__inner { justify-content: space-between; }
}

.pay-card { padding: 28px; }
@media (max-width: 520px) { .pay-card { padding: 18px; } }
.pay-card__title { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.pay-card__hint { color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }

/* Payment Element mount + loading skeleton */
.pay-element { min-height: 0; }
.pay-skeleton { display: flex; flex-direction: column; gap: 12px; }
.pay-skeleton span {
    display: block; height: 52px; background: linear-gradient(90deg, #171717 25%, #222 50%, #171717 75%);
    background-size: 200% 100%; border: 2px solid #2a2a2a; animation: paySkeleton 1.2s ease infinite;
}
.pay-skeleton span:nth-child(2) { height: 46px; }
@keyframes paySkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pay-card form.is-locked { opacity: 0.6; pointer-events: none; }

/* Alerts (declined, validation, errors) */
.pay-alert {
    margin: 0 0 18px; padding: 14px 18px; line-height: 1.55; color: var(--text-primary);
    background: rgba(220, 38, 38, 0.1); border-left: 4px solid var(--danger);
}
.pay-alert--warn { background: rgba(245, 158, 11, 0.08); border-left-color: var(--warning); }
.pay-alert__title { font-weight: 700; color: var(--white); margin-bottom: 2px; }
.pay-alert__note { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.pay-alert__note:empty { display: none; }
.pay-alert--shake { animation: payShake 0.4s ease; }
@keyframes payShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* Pay button */
.pay-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px;
    font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
}
form .pay-submit { margin-top: 20px; }
.pay-submit[disabled] { opacity: 0.55; cursor: not-allowed; }
.pay-submit__spinner, .pay-spinner {
    display: none; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
.pay-submit.is-busy .pay-submit__spinner { display: inline-block; }
.pay-spinner { display: inline-block; width: 44px; height: 44px; border-width: 4px; color: var(--color-primary); }

.pay-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; color: var(--text-tertiary); font-size: 12.5px; }
.pay-trust li { display: inline-flex; align-items: center; gap: 6px; }
.pay-trust svg { color: var(--success); }
.pay-trust[hidden] { display: none; }

/* Result states: success / processing / delayed */
.pay-result { text-align: center; padding: 12px 0 4px; }
.pay-result[hidden] { display: none; }
.pay-result__icon { display: flex; justify-content: center; margin-bottom: 14px; }
.pay-result--ok .pay-result__icon { color: var(--success); }
.pay-result--wait .pay-result__icon { color: var(--warning); }
.pay-result--wait:has(.pay-spinner) .pay-result__icon { color: var(--color-primary); }
.pay-result__title { font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
.pay-result__text { color: var(--text-secondary); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.pay-result__text strong { color: var(--white); }
.pay-check__ring { stroke-dasharray: 145; stroke-dashoffset: 145; animation: payDraw 0.6s ease forwards; }
.pay-check__tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: payDraw 0.4s 0.5s ease forwards; }
@keyframes payDraw { to { stroke-dashoffset: 0; } }

.pay-steps { list-style: none; margin: 22px auto 24px; padding: 0; max-width: 340px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.pay-steps li { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); }
.pay-steps li strong { color: inherit; }
.pay-steps__dot { width: 14px; height: 14px; background: var(--border); border: 2px solid #333; flex-shrink: 0; }
.pay-steps li.is-done { color: var(--white); }
.pay-steps li.is-done .pay-steps__dot { background: var(--success); border-color: var(--success); }
.pay-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
@media (min-width: 521px) { .pay-actions { flex-direction: row; } .pay-actions .pay-submit { flex: 1; } }
.pay-card .pay-actions { margin-top: 18px; }

/* Order summary */
.pay-player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 14px 0; background: var(--surface-raised); border: 2px solid var(--border); }
.pay-player img { image-rendering: pixelated; }
.pay-player__label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.pay-player__name { font-weight: 700; color: var(--white); }
.pay-lines { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.pay-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pay-lines__name { color: var(--white); font-weight: 600; }
.pay-lines__name span { color: var(--text-secondary); font-weight: 500; }
.pay-lines__meta { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); }
.pay-lines__price { color: var(--white); font-weight: 600; white-space: nowrap; }
.pay-totals { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary); }
.pay-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.pay-totals > div span:last-child { color: var(--white); }
.pay-totals__total { padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--border); font-size: 1.2em; font-weight: 800; color: var(--white) !important; }

@media (prefers-reduced-motion: reduce) {
    .pay-skeleton span, .pay-alert--shake, .pay-check__ring, .pay-check__tick, .pay-submit__spinner, .pay-spinner { animation: none; }
    .pay-check__ring, .pay-check__tick { stroke-dashoffset: 0; }
}

/* ── Subscriptions: clear "monthly" labelling ───────────────────────────── */
.sub-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 2px solid var(--color-primary, #00ACFF); background: rgba(0, 172, 255, 0.1); color: var(--color-primary, #00ACFF); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.sub-tag .px-icon { width: 11px; height: 11px; }
.sub-per { font-size: 0.78em; font-weight: 600; color: var(--text-secondary); margin-left: 3px; letter-spacing: 0; }
.sub-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Package cards (grid, list) and the package page: tag + text centred, buttons stacked (Add / Subscribe / Gift) */
.gridpackage .sub-note,
.listpackage .sub-note,
.pkg-page__left .sub-note { flex-direction: column; justify-content: center; text-align: center; gap: 6px; margin: 0 0 12px; }
.listpackage .sub-note { margin-bottom: 8px; }
.gridpackage .pkg-actions .pkg-btn--info,
.listpackage .pkg-actions .pkg-btn--info { order: 1; }
.gridpackage .pkg-actions .pkg-btn.add,
.listpackage .pkg-actions .pkg-btn.add,
.pkg-page__left .pkg-actions .pkg-btn.add { order: 2; }
.gridpackage .pkg-actions .pkg-btn.subscribe,
.listpackage .pkg-actions .pkg-btn.subscribe,
.pkg-page__left .pkg-actions .pkg-btn.subscribe { order: 3; flex: 1 0 100%; }
.gridpackage .pkg-actions .pkg-btn.gift,
.listpackage .pkg-actions .pkg-btn.gift,
.pkg-page__left .pkg-actions .pkg-btn.gift { order: 4; }
.listpackage__actions { flex: 0 1 370px; min-width: 0; }
.listpackage .product-actions { display: flex; flex-direction: column; align-items: stretch; }
.listpackage .pkg-actions { margin: 0; }
@media (max-width: 720px) {
    .listpackage { flex-wrap: wrap; gap: 12px; }
    .listpackage__actions { flex: 1 1 100%; }
}
/* The theme hides the button labels on phones (icon only). The cards here have room, and "+" alone does not tell
   "Add to Basket" from "Subscribe", so the labels stay visible. */
@media (max-width: 960px) {
    .gridpackage .pkg-actions .only-desktop,
    .listpackage .pkg-actions .only-desktop,
    .pkg-page__left .pkg-actions .only-desktop { display: inline; }
}
/* One card per row on phones (two per row overflowed the screen) */
@media (max-width: 576px) {
    .packages-grid { grid-template-columns: minmax(0, 1fr); }
}
.basket-sub-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); border-left: 3px solid var(--color-primary, #00ACFF); background: rgba(0, 172, 255, 0.06); }
.basket-sub-note .px-icon { flex: none; width: 14px; height: 14px; color: var(--color-primary, #00ACFF); }
.basket-sub-note--bad { border-left-color: var(--danger); background: rgba(220, 38, 38, 0.08); color: var(--white); }
.pay-totals__then { font-size: 0.92em; color: var(--text-tertiary) !important; }
.pay-legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.pay-legal a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.pay-legal--sub { display: flex; gap: 8px; padding: 10px 12px; border: 2px solid var(--border); background: var(--surface-raised); color: var(--text-secondary); }
.pay-legal--sub .px-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--color-primary, #00ACFF); }
.pay-legal--sub strong { color: var(--white); }
.pay-consent { align-items: flex-start; cursor: pointer; }
.pay-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-primary, #00ACFF); cursor: pointer; }

/* ── paysafecard row ────────────────────────────────────────────────────────
   Sits directly under Stripe's payment-method list (an iframe) and is built to look like one more row of it. The numbers
   below were measured on Stripe's real Payment Element with the "night" appearance from checkout.js (fontSizeBase 15px,
   2px borders, no radius): row 55.69px high (2px border + 16px padding + 19.69px content), radio 15.75px, icon box
   29.53×15.75px, 12px / 9.84px gaps, 13.125px semibold label, 13.95px field labels, 45.25px inputs, 4px under the
   header, 16px under the last line. The font is the system stack on purpose: it is what Stripe's iframe renders with
   (the page's own Geist webfont does not exist inside that iframe). */
.pay-alt {
    margin-top: 8px;
    border: 2px solid #2a2a2a;
    background: #171717;
    color: #ededed;
    font: 15px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pay-alt[hidden], .pay-alt__panel[hidden] { display: none; }
.pay-alt.is-selected, .pay-alt:has(.pay-alt__head:focus-visible) { border-color: var(--color-primary, #00ACFF); }
.pay-alt:has(.pay-alt__head:focus-visible) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(0, 172, 255, 0.25), 0 1px 1px rgba(255, 255, 255, 0.12);
}
@supports (color: color-mix(in srgb, red 25%, transparent)) {
    .pay-alt:has(.pay-alt__head:focus-visible) {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--color-primary, #00ACFF) 25%, transparent), 0 1px 1px rgba(255, 255, 255, 0.12);
    }
}
.pay-alt__head {
    display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 51.6875px; margin: 0; padding: 0 16px;
    background: none; border: 0; border-radius: 0; color: #a0a0a0; text-align: left; cursor: pointer;
    font: 600 13.125px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent; transition: color 0.15s ease;
}
.pay-alt__head:focus { outline: none; }
.pay-alt__head:hover { color: #ededed; }
.pay-alt.is-selected .pay-alt__head { color: var(--color-primary, #00ACFF); cursor: default; }
/* Radio: same 100-unit SVG as Stripe's (ring = 9.375 units thick, dot r = 21.875) */
.pay-alt__radio { flex: none; display: block; width: 15.75px; height: 15.75px; margin-right: 12px; fill: currentColor; }
.pay-alt__ring { fill: none; stroke: currentColor; stroke-width: 9.375px; }
.pay-alt__dot { fill: currentColor; fill-opacity: 0; transition: fill-opacity 0.15s ease; }
.pay-alt.is-selected .pay-alt__dot { fill-opacity: 1; }
/* Icon box: Stripe draws every icon 15.75px high inside a 2.25em wide box (its own wide SEPA logo is 24.6px wide) */
.pay-alt__logo { flex: none; display: block; width: 29.53125px; height: 15.75px; margin-right: 9.84375px; }
.pay-alt__mark { position: relative; display: block; width: 23.52px; height: 15.75px; overflow: hidden; }
.pay-alt__mark img { position: absolute; display: block; width: 151.52%; height: auto; max-width: none; left: -26.06%; top: -62.44%; }
.pay-alt__label { flex: 1 1 auto; min-width: 0; }
.pay-alt__panel { padding: 4px 16px 16px; animation: payAltIn 0.18s ease both; }
@keyframes payAltIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pay-alt__fieldlabel { display: block; margin: 0 0 4px; font-size: 13.95px; font-weight: 600; line-height: 1.15; color: #ededed; }
.pay-alt__input {
    display: block; width: 100%; height: 45.25px; margin: 0; padding: 12px; box-sizing: border-box;
    background: #141414; border: 2px solid #2a2a2a; border-radius: 0; color: #ededed; box-shadow: none;
    font: 15px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
    outline: none; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; -webkit-appearance: none; appearance: none;
}
.pay-alt__input::placeholder { color: #808080; opacity: 1; }
.pay-alt__input:focus { border-color: var(--color-primary, #00ACFF); }
.pay-alt__hint { margin: 12px 0 0; font-size: 13.95px; line-height: 1.45; color: #a0a0a0; }
.pay-alt__accept { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 13.95px; line-height: 1.45; color: #a0a0a0; cursor: pointer; }
.pay-alt__accept input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-primary, #00ACFF); cursor: pointer; }
.pay-alt__accept a { color: #ededed; text-decoration: underline; text-underline-offset: 2px; }
/* iOS zooms into inputs below 16px – Stripe's own fields grow to 16px on phones for the same reason */
@media (max-width: 767px) { .pay-alt__input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pay-alt, .pay-alt__head, .pay-alt__dot, .pay-alt__input { transition: none; } .pay-alt__panel { animation: none; } }
.sub-box { margin: 18px 0; padding: 16px 18px; border: 2px solid var(--color-primary, #00ACFF); background: rgba(0, 172, 255, 0.05); }
.sub-box--ending { border-color: var(--border); background: var(--surface-raised); }
.sub-box--bad { border-color: var(--danger); background: rgba(220, 38, 38, 0.07); }
.sub-box__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--white); }
.sub-box__text { margin: 10px 0 0; color: var(--text-secondary); line-height: 1.6; }
.sub-box__text strong { color: var(--white); }
.sub-box__actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.sub-box__actions form { margin: 0; }