/**
 * User pages shell — final cascade (all remaining user pages)
 * Spacing, contrast, mobile fit — light + dark
 */

/* ── Shared mobile spacing (fixed header, single offset) ── */
@media (max-width: 720px) {
    body:not(.admin):is(
        .page-verify,
        .page-debts,
        .page-menu,
        .page-checkout,
        .page-order-confirm,
        .page-order-processing,
        .page-payment-status,
        .page-products,
        .page-contact,
        .page-privacy,
        .page-terms,
        .page-2fa,
        .page-whatsapp-business,
        .page-order-detail
    ) main.page {
        padding-top: calc(var(--topbar-height, 56px) + 6px) !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden;
    }

    body:not(.admin).page-favorites main.page:has(.search-container) {
        padding-top: calc(var(--topbar-height, 56px) + 6px) !important;
    }

    body:not(.admin).page-private-chat main.page {
        padding-top: 0 !important;
        overflow-x: hidden;
    }
}

/* Favorites: no double search-bar offset */
body:not(.admin).page-favorites main.page:has(.search-container) {
    padding-top: calc(var(--topbar-height, 56px) + 6px) !important;
}

/* ── Generic page-box / container contrast ── */
body:not(.admin) main.page .page-box,
body:not(.admin) main.page > .container .page-box {
    background: var(--dash-card, var(--card-color)) !important;
    border-color: var(--dash-card-border, var(--border-color-token)) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

body:not(.admin) main.page .page-box h1,
body:not(.admin) main.page .page-box h2,
body:not(.admin) main.page .page-box h3,
body:not(.admin) main.page .page-box .card__title {
    color: var(--dash-heading, var(--theme-heading, var(--page-shell-text))) !important;
}

body:not(.admin) main.page .page-box p,
body:not(.admin) main.page .page-box li,
body:not(.admin) main.page .page-box label,
body:not(.admin) main.page .page-box .hero__text,
body:not(.admin) main.page .page-box .form-field > span {
    color: var(--dash-text-secondary, var(--page-shell-text)) !important;
}

body:not(.admin) main.page .page-box .button--primary,
body:not(.admin) main.page .page-box .btn-primary {
    background: var(--theme-gradient-primary, var(--primary-color)) !important;
    color: var(--button-text, #fff) !important;
    border-color: transparent !important;
}

body:not(.admin) main.page .page-box .button:not(.button--primary),
body:not(.admin) main.page .page-box .button--ghost {
    background: var(--dash-card-alt, var(--theme-input-bg)) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    border-color: var(--dash-card-border, var(--border-color-token)) !important;
}

body:not(.admin) main.page .page-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(.admin) main.page .page-box select,
body:not(.admin) main.page .page-box textarea {
    background: var(--theme-input-bg, var(--dash-card)) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    border-color: var(--theme-input-border, var(--dash-card-border)) !important;
}

body:not(.admin) main.page .page-box .note {
    background: color-mix(in srgb, var(--success-color, #22c55e) 14%, transparent) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    border-color: color-mix(in srgb, var(--success-color, #22c55e) 35%, transparent) !important;
}

body:not(.admin) main.page .page-box .alert,
body:not(.admin) main.page .page-box .error-list {
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 14%, transparent) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 35%, transparent) !important;
}

body:not(.admin) main.page .page-box .card {
    background: var(--dash-card, var(--card-color)) !important;
    border-color: var(--dash-card-border) !important;
    color: var(--dash-text) !important;
}

/* ── Verify ── */
body.page-verify:not(.admin) main.page .page-box .hero__text[style*="color:#475569"] {
    color: var(--dash-text-secondary) !important;
}

/* ── Debts ── */
body.page-debts:not(.admin) .debts-page,
body.page-debts:not(.admin) .debts-box {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.page-debts:not(.admin) .debts-title {
    color: var(--dash-heading, var(--page-shell-text)) !important;
}

body.page-debts:not(.admin) .debts-trader,
body.page-debts:not(.admin) .debts-empty,
body.page-debts:not(.admin) .debts-row__meta {
    color: var(--dash-text-secondary) !important;
}

body.page-debts:not(.admin) .debts-row {
    background: var(--dash-card) !important;
    border-color: var(--dash-card-border) !important;
}

body.page-debts:not(.admin) .debts-row--debt {
    background: linear-gradient(180deg, var(--dash-card) 0%, color-mix(in srgb, var(--danger-color, #ef4444) 10%, var(--dash-card)) 100%) !important;
    border-color: color-mix(in srgb, var(--danger-color, #ef4444) 35%, var(--dash-card-border)) !important;
}

body.page-debts:not(.admin) .debts-row--credit {
    background: linear-gradient(180deg, var(--dash-card) 0%, color-mix(in srgb, var(--success-color, #22c55e) 10%, var(--dash-card)) 100%) !important;
    border-color: color-mix(in srgb, var(--success-color, #22c55e) 35%, var(--dash-card-border)) !important;
}

body.page-debts:not(.admin) .debts-row__name {
    color: var(--dash-text, var(--page-shell-text)) !important;
}

body.page-debts:not(.admin) .debts-row__reason {
    color: var(--dash-text-secondary) !important;
    background: var(--dash-card-alt, var(--theme-input-bg)) !important;
}

body.page-debts:not(.admin) .debts-icon-btn,
body.page-debts:not(.admin) .debts-op-btn {
    background: var(--dash-card-alt, var(--theme-input-bg)) !important;
    border-color: var(--dash-card-border) !important;
    color: var(--dash-text) !important;
}

body.page-debts:not(.admin) .debts-modal__content {
    background: var(--dash-card) !important;
    color: var(--dash-text) !important;
    border: 1px solid var(--dash-card-border);
}

body.page-debts:not(.admin) .debts-form .form-field span {
    color: var(--dash-text-secondary) !important;
}

body.page-debts:not(.admin) .debts-form input {
    background: var(--theme-input-bg) !important;
    color: var(--dash-text) !important;
    border-color: var(--theme-input-border) !important;
}

/* ── Order detail / confirm overrides ── */
body.page-order-detail:not(.admin) .order-details-v2,
body.page-order-confirm:not(.admin) .page-box {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.page-order-detail:not(.admin) [style*="background:#fff"],
body.page-order-detail:not(.admin) [style*="background: #fff"],
body.page-order-confirm:not(.admin) [style*="background:#fff"] {
    background: var(--dash-card) !important;
    color: var(--dash-text) !important;
}

body.page-order-detail:not(.admin) [style*="color:#fff"],
body.page-order-confirm:not(.admin) [style*="color:#fff"] {
    color: var(--button-text, #fff) !important;
}

/* ── API site — white outline text (see api-site-pages.css) ── */
body.page-api-site:not(.admin) [style*="color:#fff"],
body.page-api-site-docs:not(.admin) [style*="color:#fff"] {
    color: #fff !important;
}

/* ── Menu page ── */
body.page-menu:not(.admin) .modal-page,
body.page-menu:not(.admin) main.page > section {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

/* ── Prevent horizontal scroll globally on user pages ── */
body:not(.admin) main.page,
body:not(.admin) main.page > section,
body:not(.admin) main.page > .container {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body:not(.admin) main.page img,
body:not(.admin) main.page video,
body:not(.admin) main.page pre,
body:not(.admin) main.page table {
    max-width: 100%;
}