/* snapex.pro light/dark theme (exchanger pages only, after exchange.css / page.css / order-bonus.css).
   <html data-ex-theme="light|dark"> is set before the first paint by partials/theme-head. Pay pages have their own
   data-inv-theme and never load this file. */

/* ——— Toggle in the header ——— */
.ex-theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--ex-border);
    border-radius: 50%;
    background: var(--ex-surface);
    color: var(--ex-muted);
    cursor: pointer;
    box-shadow: var(--ex-shadow-sm);
    transition: color var(--ex-transition), border-color var(--ex-transition), background var(--ex-transition), transform var(--ex-transition);
}

.ex-theme-toggle:hover {
    color: var(--ex-text-primary);
    border-color: var(--ex-border-hover);
    transform: translateY(-1px);
}

.ex-theme-toggle:focus-visible {
    outline: 2px solid var(--ex-border-focus);
    outline-offset: 2px;
}

.ex-theme-toggle__sun,
.ex-theme-toggle__moon {
    grid-area: 1 / 1;
}

:root[data-ex-theme="light"] .ex-theme-toggle__sun,
:root[data-ex-theme="dark"] .ex-theme-toggle__moon {
    display: none;
}

/* Phones: the header already holds logo, language, Partners and the bot badge — the toggle takes the space of the
   language code (the flag stays). */
@media (max-width: 639px) {
    .ex-theme-toggle {
        width: 1.85rem;
        height: 1.85rem;
    }

    .ex-theme-toggle svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 440px) {
    .ex-header .ex-lang-code {
        display: none;
    }
}

@media (max-width: 400px) {
    .ex-header .ex-lang-chevron {
        display: none;
    }
}

/* Very narrow phones: the logo mark alone, the "SnapEX" word was cut under the header buttons anyway. */
@media (max-width: 380px) {
    .ex-header .ex-logo {
        gap: 0;
        font-size: 0;
    }
}

/* ——— Dark palette (same tones as the Pay page) ——— */
:root[data-ex-theme="dark"] {
    color-scheme: dark;
    --ex-bg: #0b0f14;
    --ex-bg-alt: #0f141c;
    --ex-surface: #121821;
    --ex-surface-elevated: #171f2a;
    --ex-surface-hover: #1c2633;
    --ex-border: rgba(255, 255, 255, 0.09);
    --ex-border-hover: rgba(255, 255, 255, 0.18);
    --ex-border-focus: rgba(34, 201, 139, 0.6);
    --ex-text: #d6dee9;
    --ex-text-primary: #f5f7fa;
    --ex-muted: #95a3b6;
    --ex-dim: #7d8a9c;
    --ex-accent: #22c98b;
    --ex-accent-hover: #35d69a;
    --ex-accent-text: #06281d;
    --ex-accent-muted: rgba(34, 201, 139, 0.12);
    --ex-accent-glow: rgba(34, 201, 139, 0.2);
    --ex-danger-bg: rgba(248, 113, 113, 0.1);
    --ex-danger-border: rgba(248, 113, 113, 0.25);
    --ex-danger-text: #f87171;
    --ex-success-bg: rgba(34, 201, 139, 0.1);
    --ex-success-border: rgba(34, 201, 139, 0.22);
    --ex-info-bg: rgba(96, 165, 250, 0.1);
    --ex-info-border: rgba(96, 165, 250, 0.25);
    --ex-info-text: #93c5fd;
    --ex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --ex-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ex-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.22);
    --ex-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.3);
    --ex-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.4);
}

:root[data-ex-theme="dark"] .ex-header {
    background: rgba(18, 24, 33, 0.86);
}

:root[data-ex-theme="dark"] .ex-bg-blob::before {
    background: radial-gradient(ellipse, rgba(34, 201, 139, 0.08) 0%, transparent 70%);
}

:root[data-ex-theme="dark"] .ex-bg-blob::after {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.05) 0%, transparent 70%);
}

/* Header: language menu, Telegram bot badge, games pill */
:root[data-ex-theme="dark"] .ex-lang-btn:hover,
:root[data-ex-theme="dark"] .ex-lang[open] > .ex-lang-btn,
:root[data-ex-theme="dark"] .ex-lang-menu {
    background: var(--ex-surface-elevated);
    color: var(--ex-text-primary);
}

:root[data-ex-theme="dark"] .ex-lang-option:hover {
    background: var(--ex-surface-hover);
}

:root[data-ex-theme="dark"] .ex-lang-option.is-active {
    background: var(--ex-accent-muted);
    color: var(--ex-accent);
}

:root[data-ex-theme="dark"] .ex-tg-bot-badge {
    border-color: rgba(56, 189, 248, 0.3);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0%, rgba(56, 189, 248, 0.14) 100%);
    color: #7dd3fc;
}

:root[data-ex-theme="dark"] .ex-tg-bot-badge:hover {
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
}

:root[data-ex-theme="dark"] .ex-games-pill {
    border-color: rgba(251, 191, 36, 0.4);
    background: linear-gradient(90deg, rgba(120, 53, 15, 0.45), rgba(76, 29, 149, 0.45), rgba(120, 53, 15, 0.45));
    color: #fde68a;
}

:root[data-ex-theme="dark"] .ex-games-pill__brand {
    color: #c4b5fd;
}

/* Exchange form */
:root[data-ex-theme="dark"] .ex-info-tip__pop,
:root[data-ex-theme="dark"] .ex-amount-col--promo {
    background: var(--ex-surface-elevated);
    border-color: rgba(34, 201, 139, 0.3);
}

:root[data-ex-theme="dark"] .ex-amount-col--promo .ex-input-minimal,
:root[data-ex-theme="dark"] .ex-partner-api-badge {
    color: var(--ex-accent);
}

:root[data-ex-theme="dark"] .ex-amount-col--promo .ex-amount-strike__old {
    background: var(--ex-surface-hover);
    color: var(--ex-muted);
}

:root[data-ex-theme="dark"] .ex-amount-min-hint--warn,
:root[data-ex-theme="dark"] .ex-casino-reward__flash--error {
    color: #f87171;
}

:root[data-ex-theme="dark"] .ex-quote-hint {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    color: #fcd34d;
}

:root[data-ex-theme="dark"] .ex-recipient-input--primary {
    background: rgba(34, 201, 139, 0.06);
    border-color: rgba(34, 201, 139, 0.4);
}

:root[data-ex-theme="dark"] .ex-panel-list {
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

:root[data-ex-theme="dark"] .ex-panel-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
}

:root[data-ex-theme="dark"] .ex-panel-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

:root[data-ex-theme="dark"] .ex-modal-backdrop,
:root[data-ex-theme="dark"] .ex-games-how::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

:root[data-ex-theme="dark"] .ex-games-how {
    background: var(--ex-surface);
}

:root[data-ex-theme="dark"] .ex-games-how__kicker,
:root[data-ex-theme="dark"] .ex-casino-reward__flash,
:root[data-ex-theme="dark"] .ex-casino-reward__btn--ghost {
    color: #c4b5fd;
}

:root[data-ex-theme="dark"] .ex-games-how__num {
    background: rgba(139, 92, 246, 0.18);
}

:root[data-ex-theme="dark"] .ex-games-how__close {
    color: var(--ex-muted);
}

/* Order page */
:root[data-ex-theme="dark"] .ex-order-deposit {
    background: rgba(34, 201, 139, 0.05);
}

:root[data-ex-theme="dark"] .ex-order-deposit--recipient {
    border-color: #818cf8;
    background: rgba(129, 140, 248, 0.06);
}

:root[data-ex-theme="dark"] .ex-order-deposit--return {
    border-color: #475569;
}

:root[data-ex-theme="dark"] .ex-order-card-progress {
    background: rgba(148, 163, 184, 0.2);
}

:root[data-ex-theme="dark"] .ex-casino-reward__btn--ghost {
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5);
}

:root[data-ex-theme="dark"] .ex-casino-reward__btn--ghost:hover {
    background: rgba(167, 139, 250, 0.12);
}

/* Order-page / bonus-page casino plaque (order-bonus.css): same as on the dark Pay page. */
:root[data-ex-theme="dark"] .bx-strip {
    border-color: rgba(167, 139, 250, 0.25);
    background: linear-gradient(100deg, rgba(76, 29, 149, 0.28), rgba(30, 27, 75, 0.35));
}

:root[data-ex-theme="dark"] .bx-strip__title,
:root[data-ex-theme="dark"] .bx-teaser__copy b,
:root[data-ex-theme="dark"] .br-kv span {
    color: #f8fafc;
}

:root[data-ex-theme="dark"] .bx-strip__text,
:root[data-ex-theme="dark"] .br-proof {
    color: #cbd5e1;
}

:root[data-ex-theme="dark"] .bx-strip__note,
:root[data-ex-theme="dark"] .br-seal,
:root[data-ex-theme="dark"] .bx-teaser__copy span {
    color: #94a3b8;
}

:root[data-ex-theme="dark"] .bx-btn--ghost,
:root[data-ex-theme="dark"] .br-link,
:root[data-ex-theme="dark"] .bx-teaser__max {
    color: #c4b5fd;
}

:root[data-ex-theme="dark"] .br-proof {
    background: rgba(15, 23, 42, 0.6);
}

:root[data-ex-theme="dark"] .bx-teaser {
    border-color: rgba(167, 139, 250, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

:root[data-ex-theme="dark"] .bx-teaser__max b {
    background-image: linear-gradient(95deg, #c4b5fd, #f9a8d4);
}

:root[data-ex-theme="dark"] .bx-strip__note {
    border-top-color: rgba(167, 139, 250, 0.2);
}

:root[data-ex-theme="dark"] .bx-strip__note-icon {
    color: #34d399;
}

/* Bonus page from the campaign email (order-bonus.css .rb-*) and the casino demo card */
:root[data-ex-theme="dark"] .rb-kicker,
:root[data-ex-theme="dark"] .bx-strip__flash {
    color: #c4b5fd;
}

:root[data-ex-theme="dark"] .rb-lead {
    color: var(--ex-text);
}

:root .rb-how,
:root .rb-personal {
    color: var(--ex-muted);
}

:root[data-ex-theme="dark"] .bx-strip__flash--error,
:root[data-ex-theme="dark"] .br-error {
    color: #f87171;
}

:root[data-ex-theme="dark"] .bx-demo {
    border-color: var(--ex-border);
    background: var(--ex-surface);
}

:root[data-ex-theme="dark"] .br-verdict.is-ok {
    color: #34d399;
}

/* Static pages (page.css) */
:root[data-ex-theme="dark"] .ex-page-article {
    border-color: var(--ex-border);
    box-shadow: var(--ex-shadow-md);
}

:root[data-ex-theme="dark"] .ex-page-article__content code,
:root[data-ex-theme="dark"] .ex-page-article__content pre,
:root[data-ex-theme="dark"] .ex-page-article__content th {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-ex-theme="dark"] .ex-page-article__content td,
:root[data-ex-theme="dark"] .ex-page-article__content th {
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-ex-theme="dark"] .ex-page-article__content hr {
    border-top-color: rgba(255, 255, 255, 0.12);
}

:root[data-ex-theme="dark"] .ex-page-article__content blockquote {
    background: rgba(34, 201, 139, 0.07);
}

/* Support chat widget (chat-widget.css has fixed light colours) */
:root[data-ex-theme="dark"] .scw-panel {
    background: var(--ex-surface);
    color: var(--ex-text);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ex-border);
}

:root[data-ex-theme="dark"] .scw-msg--admin {
    background: var(--ex-surface-hover);
    color: var(--ex-text);
}

:root[data-ex-theme="dark"] .scw-welcome,
:root[data-ex-theme="dark"] .scw-status,
:root[data-ex-theme="dark"] .scw-textarea::placeholder {
    color: var(--ex-dim);
}

:root[data-ex-theme="dark"] .scw-input-area {
    border-top-color: var(--ex-border);
    background: var(--ex-surface-elevated);
}

:root[data-ex-theme="dark"] .scw-textarea {
    border-color: var(--ex-border-hover);
    background: var(--ex-bg);
    color: var(--ex-text-primary);
}

:root[data-ex-theme="dark"] .scw-messages {
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

:root[data-ex-theme="dark"] .scw-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
}

:root[data-ex-theme="dark"] .scw-dd-label {
    color: #fbbf24;
}

/* Footer: partner banners are dark (AntiSwap, KYCNotList) or black on transparent (RatesGuru) — a light plate keeps them visible */
:root[data-ex-theme="dark"] .ex-footer-banner {
    padding: 3px;
    border-radius: 6px;
    background: #e2e8f0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

:root[data-ex-theme="dark"] .ex-footer-banner--ratesguru {
    padding: 0;
    border-radius: 50%;
}

:root[data-ex-theme="dark"] .ex-footer-banner--ratesguru img {
    border-radius: 50%;
    background: #e2e8f0;
}

/* Telegram-exchange landing (telegram-exchange-landing.css, "glass / sky") */
:root[data-ex-theme="dark"] .txl-page {
    --txl-bg: linear-gradient(180deg, #0b1526 0%, #0b0f14 45%, #0b0f14 100%);
    --txl-surface: rgba(23, 31, 42, 0.72);
    --txl-text: #f1f5f9;
    --txl-muted: #b6c2d2;
    --txl-accent: #3b82f6;
    --ex-accent: #60a5fa;
}

:root[data-ex-theme="dark"] .txl-glow {
    background: #1d4ed8;
    opacity: 0.22;
}

:root[data-ex-theme="dark"] .txl-glow--b {
    background: #0369a1;
    opacity: 0.25;
}

:root[data-ex-theme="dark"] .txl-pills li,
:root[data-ex-theme="dark"] .txl-card,
:root[data-ex-theme="dark"] .txl-phone__bezel {
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-ex-theme="dark"] .txl-card,
:root[data-ex-theme="dark"] .txl-phone__bezel {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

:root[data-ex-theme="dark"] .txl-btn--ghost {
    border-color: rgba(255, 255, 255, 0.2);
}

:root[data-ex-theme="dark"] .txl-bubble--in {
    background: rgba(59, 130, 246, 0.18);
    color: #dbeafe;
}

:root[data-ex-theme="dark"] .txl-bubble--out {
    background: #2563eb;
}

/* ——— Readability in both themes ——— */
/* Light: the stock grey text (#94a3b8 / #64748b) is below 3:1 / 4.5:1 on the light background. */
:root:not([data-ex-theme="dark"]) {
    --ex-muted: #56657a;
    --ex-dim: #64748b;
}

/* Light: the brand green #10b981 is too light for white text and for green text on white (2.5:1) — darker shades.
   Dark: white on the bright green is 2.1:1 — dark text (--ex-accent-text). */
:root:not([data-ex-theme="dark"]) .ex-submit,
:root:not([data-ex-theme="dark"]) .ex-promo-plaque__copy {
    background: #047857;
    border-color: #047857;
}

:root:not([data-ex-theme="dark"]) .ex-submit:hover:not(:disabled),
:root:not([data-ex-theme="dark"]) .ex-promo-plaque__copy:hover {
    background: #065f46;
    border-color: #065f46;
}

:root[data-ex-theme="dark"] .ex-promo-plaque__copy {
    color: var(--ex-accent-text);
}

/* A disabled button stays readable: grey instead of a faded green. */
.ex-page .ex-submit:disabled {
    opacity: 1;
    background: var(--ex-surface-hover);
    border-color: var(--ex-border);
    color: var(--ex-muted);
    box-shadow: none;
}

:root:not([data-ex-theme="dark"]) .ex-page .ex-submit:disabled {
    background: #e2e8f0;
}

:root:not([data-ex-theme="dark"]) .ex-page-article__content a {
    color: #047857;
}

:root:not([data-ex-theme="dark"]) .ex-order-status-badge[data-status="completed"] {
    color: #047857;
}

:root:not([data-ex-theme="dark"]) .ex-footer {
    color: var(--ex-muted);
}

:root:not([data-ex-theme="dark"]) .ex-footer-link:hover {
    color: #047857;
}

:root:not([data-ex-theme="dark"]) .ex-legal-accept {
    color: var(--ex-muted);
}