/**
 * WPCode snippets (Account / Orders / Wallet / Codes / View order)
 * — fixes hardcoded dark rgba / #fff when site is in light mode
 * — --ps-* variables also set in color-modes.css; !important here wins over snippet :root order
 */

html[data-theme="light"],
:root[data-theme="light"] {
    --ps-bg: #eef1f6 !important;
    --ps-surface: #e8ecf4 !important;
    --ps-surface-2: #e2e8f0 !important;
    --ps-border: #cfd6e4 !important;
    --ps-text: #000000 !important;
    --ps-muted: #1a1a1a !important;
    --ps-accent: #5b4cdb !important;
    --ps-blue: #0066cc !important;
    --ps-green: #15803d !important;
    --ps-red: #dc2626 !important;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]),
    :root:not([data-theme="dark"]) {
        --ps-bg: #eef1f6 !important;
        --ps-surface: #e8ecf4 !important;
        --ps-surface-2: #e2e8f0 !important;
        --ps-border: #cfd6e4 !important;
        --ps-text: #000000 !important;
        --ps-muted: #1a1a1a !important;
        --ps-accent: #5b4cdb !important;
        --ps-blue: #0066cc !important;
        --ps-green: #15803d !important;
        --ps-red: #dc2626 !important;
    }
}

/* Sidebar / nav rows (snippet uses white alpha on dark) */
html[data-theme="light"] .pga-row,
:root[data-theme="light"] .pga-row {
    background: rgba(0, 0, 0, 0.035) !important;
    border-color: rgba(0, 0, 0, 0.09) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-row,
    :root:not([data-theme="dark"]) .pga-row {
        background: rgba(0, 0, 0, 0.035) !important;
        border-color: rgba(0, 0, 0, 0.09) !important;
    }
}

html[data-theme="light"] .pga-row:hover,
:root[data-theme="light"] .pga-row:hover {
    border-color: var(--ps-border) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-row:hover,
    :root:not([data-theme="dark"]) .pga-row:hover {
        border-color: var(--ps-border) !important;
    }
}

html[data-theme="light"] .pga-row.is-head,
html[data-theme="light"] .pga-row.is-active,
:root[data-theme="light"] .pga-row.is-head,
:root[data-theme="light"] .pga-row.is-active {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.11) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-row.is-head,
    html:not([data-theme="dark"]) .pga-row.is-active,
    :root:not([data-theme="dark"]) .pga-row.is-head,
    :root:not([data-theme="dark"]) .pga-row.is-active {
        background: rgba(0, 0, 0, 0.06) !important;
        border-color: rgba(0, 0, 0, 0.11) !important;
    }
}

html[data-theme="light"] .pga-avatar,
:root[data-theme="light"] .pga-avatar {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .pga-btn.alt,
:root[data-theme="light"] .pga-btn.alt {
    background: linear-gradient(180deg, var(--ps-surface-2), var(--ps-surface)) !important;
    box-shadow: none !important;
    border: 1px solid var(--ps-border) !important;
    color: var(--ps-text) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-btn.alt,
    :root:not([data-theme="dark"]) .pga-btn.alt {
        background: linear-gradient(180deg, var(--ps-surface-2), var(--ps-surface)) !important;
        border: 1px solid var(--ps-border) !important;
        color: var(--ps-text) !important;
    }
}

/* Wallet table + modal */
html[data-theme="light"] .psw-table tbody tr:hover td,
:root[data-theme="light"] .psw-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.04) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .psw-table tbody tr:hover td,
    :root:not([data-theme="dark"]) .psw-table tbody tr:hover td {
        background: rgba(0, 0, 0, 0.04) !important;
    }
}

html[data-theme="light"] .psw-modal h3,
:root[data-theme="light"] .psw-modal h3 {
    color: var(--ps-text) !important;
}

html[data-theme="light"] .psw-field input,
:root[data-theme="light"] .psw-field input {
    border-color: var(--ps-border) !important;
    background: var(--ps-surface) !important;
    color: var(--ps-text) !important;
}
html[data-theme="light"] .psw-field input:focus,
:root[data-theme="light"] .psw-field input:focus {
    background: var(--ps-surface-2) !important;
    border-color: var(--ps-accent) !important;
}
html[data-theme="light"] .psw-field input::placeholder,
:root[data-theme="light"] .psw-field input::placeholder {
    color: var(--ps-muted) !important;
    opacity: 0.85;
}

/* Codes / view-order */
html[data-theme="light"] .psv-item,
:root[data-theme="light"] .psv-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--ps-text) !important;
}
html[data-theme="light"] .psv-rowline,
:root[data-theme="light"] .psv-rowline {
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .psv-item,
    :root:not([data-theme="dark"]) .psv-item {
        background: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
    }
    html:not([data-theme="dark"]) .psv-rowline,
    :root:not([data-theme="dark"]) .psv-rowline {
        border-color: rgba(0, 0, 0, 0.1) !important;
    }
}

html[data-theme="light"] .code-chip input,
:root[data-theme="light"] .code-chip input {
    border-color: var(--ps-border) !important;
    background: var(--ps-surface) !important;
    color: var(--ps-text) !important;
}

/* View-order accent button on light */
html[data-theme="light"] .pga-btn.accent,
:root[data-theme="light"] .pga-btn.accent {
    color: #fff !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-btn.accent,
    :root:not([data-theme="dark"]) .pga-btn.accent {
        color: #fff !important;
    }
}

html[data-theme="light"] body.pga-account-page,
:root[data-theme="light"] body.pga-account-page,
html[data-theme="light"] body.ps-order-view-page,
:root[data-theme="light"] body.ps-order-view-page {
    background: var(--ps-bg) !important;
    color: var(--ps-text) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) body.pga-account-page,
    :root:not([data-theme="dark"]) body.pga-account-page,
    html:not([data-theme="dark"]) body.ps-order-view-page,
    :root:not([data-theme="dark"]) body.ps-order-view-page {
        background: var(--ps-bg) !important;
        color: var(--ps-text) !important;
    }
}

/* ── Orders list (light): each order = own card, not one flat block ── */
html[data-theme="light"] .pga-orders,
:root[data-theme="light"] .pga-orders {
    gap: 12px !important;
}
html[data-theme="light"] .pga-order,
:root[data-theme="light"] .pga-order {
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .pga-orders,
    :root:not([data-theme="dark"]) .pga-orders {
        gap: 12px !important;
    }
    html:not([data-theme="dark"]) .pga-order,
    :root:not([data-theme="dark"]) .pga-order {
        background: var(--ps-surface) !important;
        border: 1px solid var(--ps-border) !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }
}

/* ── Mobile header (theme or WPCode snippet) — readable icons, still fits ── */
@media (max-width: 999.98px) {
    .ps-header__inner { padding: 8px 12px !important; gap: 8px !important; }
    .ps-nav { gap: 6px !important; flex-wrap: nowrap !important; min-width: 0 !important; }
    .ps-logo-img { height: 24px !important; }
    .ps-logo-text { font-size: 18px !important; }
    .ps-link, .ps-btn {
        padding: 7px 10px !important;
        font-size: 12px !important;
        gap: 5px !important;
        border-radius: 11px !important;
    }
    .ps-icon { width: 17px !important; height: 17px !important; }
    .ps-wallet .amount {
        font-size: clamp(11px, 3.2vw, 13px) !important;
        font-weight: 800 !important;
        max-width: 92px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .ps-profile { width: 36px !important; height: 36px !important; border-width: 1px !important; }
    .ps-login-icon { width: 38px !important; height: 38px !important; }
    .ps-login-icon svg { width: 19px !important; height: 19px !important; }
    .vb-theme-toggle {
        padding: 6px 9px !important;
        font-size: 11px !important;
        gap: 4px !important;
        border-radius: 11px !important;
    }
    .vb-theme-toggle svg { width: 15px !important; height: 15px !important; }
}
@media (max-width: 420px) {
    .ps-header__inner { padding: 7px 8px !important; gap: 5px !important; }
    .ps-logo-img { height: 22px !important; }
    .ps-link, .ps-btn { padding: 6px 8px !important; font-size: 11px !important; gap: 4px !important; }
    .ps-wallet .amount { max-width: 76px !important; font-size: 11px !important; }
    .ps-profile { width: 34px !important; height: 34px !important; }
    .ps-login-icon { width: 36px !important; height: 36px !important; }
    .vb-theme-toggle { padding: 5px 7px !important; font-size: 10px !important; }
    .vb-theme-toggle .vb-toggle-label { display: none !important; }
}