/* =========================================================================
   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 {
    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;
}

@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);
}

/* --- 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);
}

/* ---- 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;
}

/* ---- 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);
}

/* ---- 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;
}

.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;
}