/* =========================================================================
   components.css — reusable UI building blocks
   ========================================================================= */

/* --- Glass card --- */
.card {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    transition: transform var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.card--interactive:hover {
    border-color: var(--border-glass-strong);
    box-shadow: var(--shadow-elevated);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.card__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
}

.card__title .material-symbols-rounded {
    color: var(--accent);
    font-size: 22px;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn .material-symbols-rounded {
    font-size: 18px;
}

.btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
}

.btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow-accent);
    /* Explicit re-declaration needed: the global `a:hover { color: ... }`
       rule (element + pseudo-class) has higher CSS specificity than a
       single class like .btn--primary, so it silently won whenever this
       button was rendered as an <a> tag rather than a <button> —
       background and text both ended up the same accent-hover color,
       making the text effectively invisible. */
    color: var(--text-on-accent);
}

.btn--secondary {
    background: var(--surface-glass-hover);
    border-color: var(--border-glass);
    color: var(--text-primary);
}

.btn--secondary:hover {
    background: var(--surface-glass-active);
    border-color: var(--border-glass-strong);
    color: var(--text-primary);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn--ghost:hover {
    background: var(--surface-glass);
    color: var(--text-primary);
}

.btn--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn--danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--status-danger);
}

.btn--sm {
    padding: 8px 14px;
    font-size: var(--text-xs);
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Form inputs --- */
.field {
    margin-bottom: var(--space-5);
}

.field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
}

.field__error {
    font-size: var(--text-xs);
    color: var(--status-danger);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.input,
.select,
.textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-tertiary);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--border-glass-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.input--error,
.textarea--error {
    border-color: var(--status-danger);
}

/* --- Badges / status pills --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    line-height: 1.2;
}

.badge--pending  { background: var(--status-pending-bg); color: var(--status-pending); }
.badge--processing { background: var(--status-info-bg); color: var(--status-info); }
.badge--success  { background: var(--status-success-bg); color: var(--status-success); }
.badge--failed   { background: var(--status-danger-bg); color: var(--status-danger); }
.badge--cancelled { background: var(--status-pending-bg); color: var(--text-tertiary); }

/* --- Alerts --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
}

.alert .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
}

.alert--success { background: var(--status-success-bg); color: var(--status-success); border-color: rgba(34,197,94,0.25); }
.alert--danger   { background: var(--status-danger-bg); color: var(--status-danger); border-color: rgba(239,68,68,0.25); }
.alert--warning  { background: var(--status-warning-bg); color: var(--status-warning); border-color: rgba(245,158,11,0.25); }
.alert--info     { background: var(--status-info-bg); color: var(--status-info); border-color: rgba(56,189,248,0.25); }

/* --- Tables --- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    min-width: 560px;
}

.data-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-glass);
    white-space: nowrap;
}

.data-table tbody td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    transition: background var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--text-tertiary);
}

.empty-state .material-symbols-rounded {
    font-size: 40px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.empty-state h3 {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

/* --- Toasts --- */
.toast-stack {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(360px, calc(100vw - 32px));
}

.toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-elevated);
    backdrop-filter: blur(20px);
    animation: toast-in var(--duration-base) var(--ease-standard);
    font-size: var(--text-sm);
}

.toast.is-leaving {
    animation: toast-out var(--duration-base) var(--ease-standard) forwards;
}

/* Opt-in countdown bar — see UIDX.toast()'s showProgress param. Starts
   full-width and is flipped to 0% a frame after insertion, so the
   `transition: width linear` (duration set inline per-call, since it
   has to match whatever duration that toast was given) animates it
   shrinking away in sync with the toast's own removal timer. */
.toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent);
    transition-property: width;
    transition-timing-function: linear;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* --- Modal --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 10, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 900;
    opacity: 0;
    animation: fade-in var(--duration-base) var(--ease-standard) forwards;
}

@keyframes fade-in {
    to { opacity: 1; }
}

.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    width: 100%;
    max-width: 480px;
    padding: var(--space-6);
    transform: translateY(8px) scale(0.98);
    animation: modal-in var(--duration-base) var(--ease-standard) forwards;
}

@keyframes modal-in {
    to { transform: translateY(0) scale(1); }
}

/* --- Loading spinner --- */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Public marketing shell --- */
.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--space-3);
    padding: var(--space-6) 0;
}

.public-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.public-nav__link {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.public-nav__link:hover {
    color: var(--text-primary);
    background: var(--surface-glass);
}

.public-nav__link.is-active {
    color: var(--accent);
    background: var(--accent-soft);
}

/* CTA buttons (Sign in, Get Started, Go to Dashboard) sit right after
   the plain links — a small extra gap sets them visually apart as
   actions rather than navigation, without needing a separate wrapper. */
.public-nav__links .btn {
    margin-left: var(--space-2);
}

.public-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    font-size: var(--text-lg);
}

.public-nav__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.hero {
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}

.hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.1;
    margin-bottom: var(--space-5);
}

.hero p {
    font-size: var(--text-lg);
    max-width: 560px;
    margin: 0 auto var(--space-8);
}

.hero__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    padding: var(--space-12) 0;
}

.feature-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* --- Homepage section header: eyebrow pill + heading + subtext, used for
   the FAQ/pricing preview strips below the feature grid --- */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-8);
}

.section-header .hero__eyebrow {
    margin-bottom: var(--space-4);
}

.section-header h2 {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-2);
}

.section-header p {
    color: var(--text-secondary);
    margin: 0;
}

/* --- Glow card: a .card with a colored halo, set per-instance via
   --glow-color. Used for pricing tiers where a plain flat accent card
   doesn't communicate which tier is the best deal. --- */
.glow-card {
    position: relative;
    border-color: color-mix(in srgb, var(--glow-color, var(--accent)) 35%, var(--border-glass));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow-color, var(--accent)) 20%, transparent),
                0 12px 30px color-mix(in srgb, var(--glow-color, var(--accent)) 18%, transparent);
}

.glow-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glow-color, var(--accent));
    color: #05070d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* --- How It Works: numbered steps, reuses .card/.feature-grid for layout
   consistency with the section above it — only the step-number badge is
   new. --- */
.step-card {
    text-align: left;
    position: relative;
}

.step-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* --- Product preview: two real (fake-data) dashboard screenshots side by
   side on desktop, stacked on mobile via responsive.css. Explicit
   width/height on the <img> tags themselves prevents layout shift before
   the image loads. --- */
.product-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-2);
}

.product-preview__shot {
    padding: 0;
    overflow: hidden;
}

.product-preview__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border-glass);
}

.product-preview__caption {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* --- Trust strip: compact row of confirmed-true product facts, placed
   right before pricing. Deliberately not a .card grid like the sections
   above it -- a lighter-weight single row keeps this from reading as
   "more features" when it's meant as a quick trust scan. --- */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-6) 0;
}

.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.trust-strip__item .material-symbols-rounded {
    font-size: 18px;
    color: var(--status-success);
}

/* --- Auth card (login/register/reset) --- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-card__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6);
    font-weight: 700;
    font-size: var(--text-lg);
}

.auth-card h2 {
    text-align: center;
    margin-bottom: var(--space-2);
}

.auth-card > p {
    text-align: center;
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.auth-card__footer {
    text-align: center;
    font-size: var(--text-sm);
    margin-top: var(--space-5);
    color: var(--text-tertiary);
}

/* --- Stat metric --- */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat__value {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.stat__value--accent {
    color: var(--accent);
}

.stat__label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.stat__delta {
    font-size: var(--text-sm);
    font-weight: 600;
}

.stat__delta--up { color: var(--status-success); }
.stat__delta--down { color: var(--status-danger); }
.stat__delta--flat { color: var(--text-tertiary); }

/* ---- Payment method selection modal ---- */
.payment-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.payment-modal-overlay.is-open {
    display: flex;
}

.payment-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-elevated);
}

.payment-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}

.payment-modal__close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.payment-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    text-align: center;
    font: inherit;
    color: inherit;
}

.payment-method-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.payment-method-card img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}

.payment-method-card .material-symbols-rounded {
    font-size: 40px;
    color: var(--accent);
}

.payment-method-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- Site-wide notice banner ---- */
.site-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 500;
}

.site-notice--info {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

.site-notice--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--text-primary);
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

/* includes/partials/staging-banner.php — deliberately loud, never dismissable */
.site-notice--staging {
    background: repeating-linear-gradient(135deg, rgba(217, 119, 6, 0.35) 0 12px, rgba(217, 119, 6, 0.15) 12px 24px);
    color: var(--text-primary);
    border-bottom: 2px solid rgba(217, 119, 6, 0.8);
    letter-spacing: 0.02em;
}

/* ---- Telegram channel card (includes/partials/telegram-banner.php) ----
   Reuses .card/.card--interactive for the surface/border/radius/hover and
   .btn/.btn--secondary/.btn--sm for the CTA pill — only the layout glue
   and the brand-accurate icon color are new. */
.telegram-banner-wrap {
    padding: var(--space-5) var(--space-8) 0;
    max-width: 1320px;
    margin: 0 auto;
}

.telegram-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: inherit;
}

.telegram-banner:hover {
    color: inherit;
}

.telegram-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #229ED9;
}

.telegram-banner__icon .material-symbols-rounded {
    font-size: 18px;
    color: #fff;
}

.telegram-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.telegram-banner__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.telegram-banner__desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.telegram-banner__cta {
    flex-shrink: 0;
    pointer-events: none; /* the whole card is already the link target */
}

@media (max-width: 860px) {
    .telegram-banner-wrap {
        padding: var(--space-4) var(--space-4) 0;
    }
}

@media (max-width: 480px) {
    .telegram-banner {
        flex-wrap: wrap;
        padding: var(--space-4);
    }

    /* flex-basis: 100% forces the body (title + description) to claim the
       whole first line by itself, so the icon sits beside it and the CTA
       is pushed onto its own line below — the CTA keeps its natural,
       unstretched width there since nothing forces it to grow. */
    .telegram-banner__body {
        flex-basis: 100%;
    }

    .telegram-banner__cta {
        margin-top: var(--space-3);
    }
}

/* ---- Public site footer ---- */
.site-footer {
    margin-top: var(--space-10);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-glass);
}

.site-footer__top {
    display: grid;
    /* A fixed-bounds minmax() for the brand column, not a bare `fr` —
       auto-fit/auto-fill repeat() is invalid per spec when combined with
       a flexible (fr) track elsewhere in the same list, and an invalid
       value drops the ENTIRE declaration back to its initial value
       (none), not just the offending part. That's what was silently
       collapsing every footer column into one, confirmed by testing the
       old value directly in a browser: setting it left style.gridTemplateColumns
       as an empty string — the browser never accepted it in the first place. */
    grid-template-columns: minmax(220px, 300px) repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    text-align: left;
}

.site-footer__brand-col p.site-footer__tagline {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    max-width: 320px;
    line-height: 1.6;
}

.site-footer__link-col h4 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.site-footer__link-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__link-col a {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.site-footer__link-col a:hover {
    color: var(--text-primary);
}

.site-footer__payments {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.site-footer__payments-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.site-footer__payments-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.site-footer__payments-logos img {
    height: 32px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}

.site-footer__payment-chip {
    font-size: var(--text-xs);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
}

.site-footer__copyright {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0;
}

.site-footer__legal {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    opacity: 0.8;
    margin: var(--space-2) 0 0;
}

/* ---- Company registration section (About Us page, code-rendered — see
   includes/partials/company-registration.php) ---- */
.company-registration {
    max-width: 760px;
    margin: 0 auto var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-glass);
}

.company-registration__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
    align-items: start;
}

.company-registration__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.company-registration h2 {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-xl);
}

.company-registration__lede {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    line-height: 1.7;
}

.company-registration__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
}

.company-registration__facts > div {
    min-width: 0;
}

.company-registration__facts dt {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.company-registration__facts dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.company-registration__verify {
    margin: 0;
    font-size: var(--text-sm);
}

.company-registration__verify a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-weight: 600;
}

.company-registration__verify a .material-symbols-rounded {
    font-size: 16px;
}

.company-registration__verify-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.company-registration__certificate {
    margin: 0;
}

.company-registration__certificate-link {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-glass);
    background: #fff;
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.company-registration__certificate-link:hover {
    border-color: var(--border-glass-strong);
    box-shadow: var(--shadow-elevated);
}

.company-registration__certificate img {
    display: block;
    width: 100%;
    height: auto;
}

.company-registration__certificate figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ---- Legal business information (Contact page) ---- */
.legal-info {
    max-width: 560px;
    margin: var(--space-8) auto var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-glass);
    text-align: center;
}

.legal-info h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.legal-info__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-8);
    margin: 0 0 var(--space-3);
}

.legal-info__facts dt {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.legal-info__facts dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.legal-info__facts dd a {
    color: var(--text-primary);
}

.legal-info__more {
    margin: 0;
    font-size: var(--text-xs);
}

.legal-info__more a {
    color: var(--text-tertiary);
}

.legal-info__more a:hover {
    color: var(--text-primary);
}

/* ---- Admin-authored SEO text blocks (pricing page, etc.) ---- */
.seo-text-block {
    max-width: 760px;
    margin: var(--space-10) auto 0;
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-glass);
    color: var(--text-secondary);
    line-height: 1.7;
}

.seo-text-block h2, .seo-text-block h3 {
    color: var(--text-primary);
    margin-top: var(--space-6);
}

.seo-text-block a {
    color: var(--accent);
}

/* ---- FAQ accordion ---- */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-item__chevron {
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard);
    color: var(--text-tertiary);
}

.faq-item.is-open .faq-item__chevron {
    transform: rotate(180deg);
}

.faq-item__answer {
    display: none;
    padding: 0 var(--space-5) var(--space-4);
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-item.is-open .faq-item__answer {
    display: block;
}

.faq-item__answer p {
    margin: 0;
}

/* ---- Public nav active-page highlighting (matches the sidebar's visual language) ---- */
.btn--ghost.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ---- Toggle group: radio inputs styled as a segmented button group,
   for choices where a normal <select>'s invisible pre-picked default is
   itself the source of mistakes (e.g. balance-adjustment direction) —
   forcing a visible, deliberate click instead of an easy-to-miss dropdown
   value. No option is marked .is-checked until the admin actually clicks
   one; unpicked-and-still-submitted is exactly the failure mode this
   replaces the <select> to prevent, so there is no pre-selected default. ---- */
.toggle-group {
    display: flex;
    gap: var(--space-2);
}
.toggle-group__option {
    flex: 1;
    position: relative;
}
.toggle-group__option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.toggle-group__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-glass);
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.toggle-group__option input:focus-visible + .toggle-group__label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.toggle-group__option--danger input:checked + .toggle-group__label {
    border-color: var(--status-danger);
    background: var(--status-danger-bg);
    color: var(--status-danger);
}
.toggle-group__option--success input:checked + .toggle-group__label {
    border-color: var(--status-success);
    background: var(--status-success-bg);
    color: var(--status-success);
}
.toggle-group__option--neutral input:checked + .toggle-group__label {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* ---- Card-style toggle-group variant: two-line option (title + short
   description), e.g. the Adjust Balance direction picker. Segmented-card
   look (radius-md, not a pill) instead of the default single-line pill. ---- */
.toggle-group--cards .toggle-group__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.toggle-group__label-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
}

.toggle-group__label-main .material-symbols-rounded {
    font-size: 16px;
}

.toggle-group__label-sub {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-tertiary);
}

/* ---- Adjust Balance: amount gets more width than the currency picker,
   stacking on narrow phones instead of squeezing both into half-width. ---- */
.adjust-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

@media (max-width: 560px) {
    .adjust-amount-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- About Us page content (admin-authored HTML) ---- */
.static-page-content {
    max-width: 760px;
    margin: 0 auto var(--space-10);
    color: var(--text-secondary);
    line-height: 1.8;
}

.static-page-content h2, .static-page-content h3 {
    color: var(--text-primary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.static-page-content h2:first-child, .static-page-content h3:first-child {
    margin-top: 0;
}

.static-page-content p {
    margin: 0 0 var(--space-4);
}

.static-page-content a {
    color: var(--accent);
}

.static-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
    display: block;
}

.static-page-content ul, .static-page-content ol {
    padding-left: var(--space-6);
    margin: 0 0 var(--space-4);
}

/* ---- Google "site:" search icon (submission status cells) ---- */
.google-check-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.google-check-icon:hover {
    opacity: 1;
}

/* ---- Floating WhatsApp/Telegram support widget ---- */
.support-widget {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 60;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

/* Toggled by initSupportWidgetGuard() in app.js while any
   [data-support-widget-guard] element (e.g. the homepage hero's CTA
   buttons) is in view, so the widget can't sit on top of and partially
   block a primary call-to-action on small screens. */
.support-widget.is-guarded {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.support-widget__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform var(--duration-fast) var(--ease-standard);
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.support-widget__button:hover {
    transform: scale(1.08);
    color: #ffffff;
}

/* Real brand colors, not the site's own accent theme — WhatsApp/Telegram
   need to stay instantly recognizable regardless of which accent color
   an admin or user has selected. */
.support-widget__button--whatsapp {
    background: #25d366;
    animation-name: support-widget-glow-whatsapp;
}

.support-widget__button--telegram {
    background: #0088cc;
    animation-name: support-widget-glow-telegram;
}

@keyframes support-widget-glow-whatsapp {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.55); }
    50%      { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(37, 211, 102, 0); }
}

@keyframes support-widget-glow-telegram {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(0, 136, 204, 0.55); }
    50%      { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(0, 136, 204, 0); }
}

@media (max-width: 640px) {
    .support-widget {
        right: var(--space-4);
        bottom: var(--space-4);
    }
    .support-widget__button {
        width: 46px;
        height: 46px;
    }
}

/* Rounded slide switch — wraps a plain <input type="checkbox"> so its
   native change event (what any existing JS already listens for) keeps
   firing unchanged; only the visual is replaced. Usage:
   <label class="switch">
     <input type="checkbox" data-whatever>
     <span class="switch__track"><span class="switch__thumb"></span></span>
     label text
   </label> */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.switch__track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--status-danger);
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}
.switch input:checked + .switch__track {
    background: var(--status-success);
}
.switch input:checked + .switch__track .switch__thumb {
    transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Submit pages — min/max links-per-submission badges under the page title. */
.batch-limits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.batch-limits .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    padding: 4px 10px;
}
.batch-limits .badge .material-symbols-rounded {
    font-size: 15px;
}

/* ---- Submit pages — two-column layout + right-column insight cards ----
   (Current batch / Today / Recent submissions — see
   includes/partials/submit-insights.php and assets/js/submit-insights.js).
   Purely informational: nothing here is referenced by the submission
   form or its JS. Collapses to one column at 1024px in responsive.css. */
.submit-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

.submit-layout__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.submit-insights .card__header {
    margin-bottom: var(--space-4);
}

.submit-insights .card__title {
    font-size: var(--text-base);
}

.submit-insights .card__title .material-symbols-rounded {
    font-size: 20px;
}

/* Current batch */
.submit-insights__count {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.submit-insights__num {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.submit-insights__of {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-tertiary);
}

.submit-insights__caption {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.submit-insights__bar {
    height: 6px;
    margin: var(--space-4) 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.submit-insights__bar-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--duration-base) var(--ease-standard),
                background var(--duration-base) var(--ease-standard);
}

.submit-insights__bar-fill.is-over {
    background: var(--status-danger);
}

.submit-insights__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.submit-insights__fact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.submit-insights__fact .material-symbols-rounded {
    font-size: 18px;
}

.submit-insights__fact strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    text-align: right;
}

.submit-insights__fact--ok .material-symbols-rounded      { color: var(--status-success); }
.submit-insights__fact--warn .material-symbols-rounded    { color: var(--status-warning); }
.submit-insights__fact--dupe .material-symbols-rounded    { color: var(--status-info); }
.submit-insights__fact--domains .material-symbols-rounded { color: var(--text-tertiary); }

.submit-insights__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--status-danger);
}

.submit-insights__note[hidden] {
    display: none;
}

.submit-insights__empty,
.submit-insights__muted {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Empty textarea: hide the zeroed breakdown, show the hint instead. The
   server renders the card in this state, and the JS toggles it. */
.submit-insights.is-empty .submit-insights__bar,
.submit-insights.is-empty .submit-insights__facts,
.submit-insights.is-empty .submit-insights__note {
    display: none;
}

.submit-insights:not(.is-empty) .submit-insights__empty {
    display: none;
}

/* Today */
.submit-insights__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

/* Recent submissions */
.submit-insights__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.submit-insights__link .material-symbols-rounded {
    font-size: 16px;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.submit-insights__link:hover .material-symbols-rounded {
    transform: translateX(2px);
}

.submit-insights__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 calc(-1 * var(--space-3));
}

.submit-insights__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: inherit;
    min-width: 0;
    transition: background var(--duration-fast) var(--ease-standard);
}

a.submit-insights__item:hover {
    background: var(--surface-glass-hover);
    color: inherit;
}

.submit-insights__item-main {
    flex: 1;
    min-width: 0;
}

.submit-insights__item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submit-insights__dot {
    color: var(--text-tertiary);
    font-weight: 400;
}

.submit-insights__item-sub {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.submit-insights__item .badge {
    padding: 3px 9px;
    flex-shrink: 0;
}

.submit-insights__chevron {
    font-size: 20px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

a.submit-insights__item:hover .submit-insights__chevron {
    transform: translateX(2px);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .submit-insights__bar-fill,
    .submit-insights__item,
    .submit-insights__chevron,
    .submit-insights__link .material-symbols-rounded {
        transition: none;
    }
}

/* Left column of the submit layout: the form card with the "Recent
   batches" table (includes/partials/submit-recent-batches.php) under it. */
.submit-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.submit-recent-batches__breakdown {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.submit-recent-batches .empty-state {
    padding: var(--space-6) 0 var(--space-2);
}

/* --- PWA "Install app" banner (built by initPwaInstall() in app.js) ---
   Bottom-left on desktop so it never stacks on top of the toast stack or
   the floating support widget (both bottom-right); full-width bar on
   phones. Only ever rendered for signed-in users, once per session. */
.pwa-banner {
    position: fixed;
    left: var(--space-6);
    bottom: var(--space-6);
    z-index: 950;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: min(520px, calc(100vw - 32px));
    padding: var(--space-4) var(--space-5);
    padding-right: var(--space-12);
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated), var(--shadow-glow-accent);
    backdrop-filter: blur(20px);
    animation: toast-in var(--duration-base) var(--ease-standard);
    font-size: var(--text-sm);
}

.pwa-banner.is-leaving {
    animation: toast-out var(--duration-base) var(--ease-standard) forwards;
}

.pwa-banner__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--accent-soft);
}

.pwa-banner__icon img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.pwa-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-banner__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.pwa-banner__text {
    color: var(--text-secondary);
    line-height: 1.45;
}

.pwa-banner__text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.pwa-banner__kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.3em;
    border: 1px solid var(--border-glass-strong);
    border-radius: 6px;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.3;
}

.pwa-banner__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
}

.pwa-banner__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
}

.pwa-banner__close:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
}

.pwa-banner__close .material-symbols-rounded {
    font-size: 20px;
}

@media (max-width: 640px) {
    .pwa-banner {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        width: auto;
        flex-wrap: wrap;
        padding-right: var(--space-5);
    }
    .pwa-banner__actions {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* ---- Collapsible card: <details class="card card--collapsible"> with a
   <summary class="card__header"> (title + .card__chevron). Keeps the
   existing .card look; closed by default unless the server adds `open`. ---- */
.card--collapsible > summary {
    list-style: none;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
}

.card--collapsible > summary::-webkit-details-marker {
    display: none;
}

.card--collapsible[open] > summary {
    margin-bottom: var(--space-5);
}

.card__chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-standard);
}

.card--collapsible[open] > summary .card__chevron {
    transform: rotate(180deg);
}

.card__summary-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* ---- Sub-section inside a card, toggled by <details class="subsection"> ---- */
.subsection {
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-glass);
    padding-top: var(--space-4);
}

.subsection > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}

.subsection > summary::-webkit-details-marker {
    display: none;
}

.subsection > summary .material-symbols-rounded {
    font-size: 18px;
    color: var(--text-tertiary);
}

.subsection > summary .card__chevron {
    margin-left: auto;
}

.subsection[open] > summary .card__chevron {
    transform: rotate(180deg);
}

.subsection__body {
    margin-top: var(--space-4);
}

/* ---- Search bar + filter row (admin list pages: Users, Credits) ---- */
.search-bar {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.search-bar__input {
    position: relative;
    flex: 1;
    min-width: 0;
}

.search-bar__input .material-symbols-rounded {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    font-size: 20px;
}

.search-bar__input .input {
    padding-left: 44px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
    align-items: end;
}

.filter-grid .field {
    margin-bottom: 0;
}

.filter-grid .field__label {
    font-size: var(--text-xs);
    margin-bottom: 4px;
}

.filter-grid .select {
    padding: 10px 14px;
    font-size: var(--text-sm);
}

.filter-footer {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.filter-footer__spacer {
    flex: 1;
}

.filter-footer .switch {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ---- Segmented control (radio pills), e.g. Add / Remove credits ---- */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
}

.segmented label {
    position: relative;
}

.segmented input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.segmented span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.segmented span .material-symbols-rounded {
    font-size: 18px;
}

.segmented span:hover {
    color: var(--text-primary);
}

.segmented input:checked + span {
    background: var(--accent);
    color: var(--text-on-accent);
}

.segmented .segmented__option--danger input:checked + span {
    background: var(--status-danger);
    color: #fff;
}

.segmented input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Quick-pick chips (e.g. preset credit amounts) ---- */
.chip-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.chip {
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
}

.chip:hover {
    border-color: var(--border-glass-strong);
    color: var(--text-primary);
}

/* ---- Live "new balance" preview under an adjustment form ---- */
.balance-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: var(--space-4) 0;
}

.balance-preview b {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}

.balance-preview--negative b {
    color: var(--status-danger);
}

/* ---- Selected-account header (Credits page) ---- */
.user-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.user-hero__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.user-hero__name {
    font-weight: 700;
    font-size: var(--text-lg);
    margin: 0 0 2px;
}

.user-hero__meta {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.user-hero__balance {
    margin-left: auto;
    text-align: right;
}

.user-hero__balance .stat__value {
    font-size: var(--text-2xl);
}

/* ---- Inline tools: a button that expands a small panel below it
   (Users page bulk-delete actions). <details class="tool"> with a
   <summary class="btn ..."> so the closed state is literally a button. ---- */
.tool-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-start;
}

.tool > summary {
    list-style: none;
}

.tool > summary::-webkit-details-marker {
    display: none;
}

.tool > summary .badge {
    margin-left: 4px;
    padding: 2px 8px;
}

.tool__panel {
    margin-top: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    max-width: 640px;
}

.tool__panel p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}

/* ---- Live search (assets/js/live-search.js) ---- */
/* The icon is vertically centred with a translateY transform, so the
   shared `spin` keyframe (a bare rotate) would knock it off-centre —
   this one keeps the translate while rotating. */
form.is-loading .search-bar__input .material-symbols-rounded {
    animation: search-spin 1s linear infinite;
}

@keyframes search-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

.filter-footer__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ---- Personal payment account cards (admin/payments.php) ---- */
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.account-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    min-width: 0;
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.account-card:hover,
.account-card:focus-within {
    border-color: var(--border-glass-strong);
}

.account-card--disabled {
    opacity: 0.6;
}

.account-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.account-card__identity {
    min-width: 0;
}

.account-card__name {
    font-weight: 700;
    font-size: var(--text-base);
    margin: 0 0 2px;
    overflow-wrap: anywhere;
}

.account-card__alias {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0;
    overflow-wrap: anywhere;
}

.account-card__balances {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.account-card__balance {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.account-card__balance-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--status-success);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.account-card__balance-currency {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.account-card__empty {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.account-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-glass);
}

/* ---- Popover variant of .tool (bulk-delete's own red-bordered
   .tool__panel stays untouched) — anchors a form panel under a button
   sitting inside a flex .card__header, instead of pushing the row
   taller when opened. ---- */
.tool--popover {
    position: relative;
}

.tool__panel--popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 20;
    width: min(360px, calc(100vw - var(--space-8)));
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-glass-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
}