/*
 * White & Blue design system: legacy theme override
 * ─────────────────────────────────────────────────────────────
 * Maps the old Page Design variables (theme.css + layout :root) onto the
 * design tokens, so every existing page renders white & blue. Loaded only
 * while Admin → Page Design → Design system is 'White & Blue' (default).
 */

/* ── 1. Legacy variables used across existing pages ─────────────────── */
:root {
    --brand-primary: var(--ds-primary);
    --brand-dark: var(--ds-primary-hover);
    --brand-accent: var(--ds-primary-hover);
    --brand-secondary: var(--ds-primary);
    --brand-muted: var(--ds-text-muted);

    --bg-page: var(--ds-bg-subtle);
    --bg-nav: var(--ds-bg);
    --bg-surface: var(--ds-bg-subtle);
    --bg-card: var(--ds-bg);
    --bg-payment: var(--ds-bg);

    --text-primary: var(--ds-text);
    --text-secondary: var(--ds-text-muted);
    --text-muted: var(--ds-text-muted);
    --text-inverse: #FFFFFF;

    --card-bg: var(--ds-bg);
    --card-border: var(--ds-border);
    --card-border-accent: var(--ds-border);
    --card-selected-bg: var(--ds-primary-soft);
    --card-selected-text: var(--ds-text);
    --card-hover-bg: var(--ds-primary-soft);

    --input-bg: #FFFFFF;
    --input-border: var(--ds-border);
    --input-text: var(--ds-text);

    --btn-primary-bg: var(--ds-primary);
    --btn-primary-hover: var(--ds-primary-hover);
    --btn-primary-text: #FFFFFF;

    --game-card-bg: var(--ds-bg);
    --game-card-text: var(--ds-text);
    --game-card-btn-bg: var(--ds-primary);
    --game-card-btn-text: #FFFFFF;

    --banner-side-color: var(--ds-primary);
    --banner-center-bg: var(--ds-bg);
    --category-label-bg: var(--ds-primary);
    --category-label-text: #FFFFFF;
    --chat-btn-bg: var(--ds-bg);
    --chat-btn-hover-bg: var(--ds-primary-soft);
    --footer-icon-color: var(--ds-primary);
    --payment-icon-bg: var(--ds-primary-soft);
    --sticky-bar-bg: var(--ds-bg);
    --sticky-bar-shadow: rgba(15, 23, 42, 0.08);
    --receipt-btn-bg: var(--ds-primary);
    --disabled-card-bg: var(--ds-bg-subtle);
    --disabled-card-text: var(--ds-text-muted);

    --status-success: var(--ds-success);
    --status-danger: var(--ds-error);
    --status-warning: var(--ds-warning);
    --status-info: var(--ds-primary);
    --color-success: var(--ds-success);
    --color-danger: var(--ds-error);
    --color-warning: var(--ds-warning);
    --color-info: var(--ds-primary);

    --border-radius: var(--ds-radius);
    --glass-blur: 0px;
    --font-family: var(--ds-font);
    --is-dark: 0;
}

/* ── 2. Base ────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body,
body#app-body {
    font-family: var(--ds-font) !important;
    background: var(--ds-bg-subtle) !important;
    color: var(--ds-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip (not hidden): stops sideways scrolling without breaking position: sticky */
    overflow-x: clip;
}
::selection { background: var(--ds-primary-border); color: var(--ds-text); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
img { max-width: 100%; }

/* Form controls (overrides the Page Design input rules in the layout) */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background-color: #FFFFFF;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: #94A3B8; opacity: 1; }
input:focus, select:focus, textarea:focus {
    border-color: var(--ds-primary) !important;
    box-shadow: var(--ds-focus-ring) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ds-primary); }

/* ── 3. Classes game-show.js adds at runtime (written for the old dark theme) ── */
/* "Verified recently" account chips */
#recent_accounts_container > .w-full { color: var(--ds-text-muted); }
#recent_accounts_container > .group { background: var(--ds-bg); border-color: var(--ds-border); }
#recent_accounts_container > .group:hover { background: var(--ds-primary-soft); border-color: var(--ds-primary-border); }
#recent_accounts_container > .group > span { color: var(--ds-text); }
#recent_accounts_container > .group:hover > span { color: var(--ds-primary); }
#recent_accounts_container > .group > button { color: var(--ds-text-muted); }
#recent_accounts_container > .group > button:hover { color: var(--ds-error); }

/* Pay Now buttons: the script toggles bg-custom-1 / bg-gray-400 */
#buyNowBtn:not(:disabled), #buyNowBtnMobile:not(:disabled) { background-color: var(--ds-primary); color: #FFFFFF; opacity: 1; }
#buyNowBtn:not(:disabled):hover, #buyNowBtnMobile:not(:disabled):hover { background-color: var(--ds-primary-hover); }
#buyNowBtn:disabled, #buyNowBtnMobile:disabled { background-color: #E2E8F0; color: #94A3B8; opacity: 1; }