/*
 * Dark theme (site-wide)
 * Toggle via: html.theme-dark
 * Accent palette is controlled via CSS variables below.
 */

html.theme-dark {
    /* Accent: keep in sync with chosen colors */
    --accent: #0d6efd;
    --accent-hover: #3d8bfd;
    --accent-dark: #0b5ed7;
    --accent-rgb: 13, 110, 253;

    /* Remap site theme variables (used across styles.css) */
    --primary-color: var(--accent);
    --primary-hover: var(--accent-dark);
    --secondary-color: #ff6b6b;

    --darker-bg: #0b0e11;
    --dark-bg: #232a31;
    --card-bg: #1e2329;
    --border-color: #2b3139;
    --text-color: #eaecef;
    --text-secondary: #848e9c;

    /* Чуть более «живой» тёмно‑серый градиент, хорошо виден и сверху, и снизу */
    --gradient-bg: linear-gradient(180deg, #111827 0%, #1f2933 45%, #020617 100%);
}

/* Background + global text */
html.theme-dark body {
    background: var(--gradient-bg) !important;
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: var(--text-color) !important;
}

/* iOS safe-area / "чёлка": фон должен быть тёмно-серым, не фиолетовым */
html.theme-dark {
    /* Для Safari / iOS: явно говорим, что тёмная тема */
    color-scheme: dark;
    background-color: #0b0e11 !important;
}

html.theme-dark body {
    background-color: #0b0e11 !important;
    min-height: 100vh;
}

/* На мобильных убираем фиксированный фон (исчезает чёрная шапка/светлый низ),
   используем обычный тёмно‑серый градиент по всей высоте */
@media (max-width: 768px) {
    html.theme-dark,
    html.theme-dark body {
        background: var(--gradient-bg) !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
    }
}

/* Disable the purple mesh background layer from styles.css */
html.theme-dark body {
    background-image: var(--gradient-bg) !important;
}

/* Tone down decorative layers */
html.theme-dark .colorful-pattern {
    opacity: 0.06 !important;
}

html.theme-dark .colorful-pattern .pattern-circle {
    background: linear-gradient(135deg, #2b3139, #1e2329) !important;
}

/* Header / footer */
html.theme-dark header {
    background: rgba(14, 18, 22, 0.95) !important;
    border-bottom-color: var(--border-color) !important;
}

html.theme-dark footer {
    background-color: #0e1115 !important;
    border-top-color: var(--border-color) !important;
}

/* Common panels/cards */
html.theme-dark .transactions-table-container,
html.theme-dark .advantage-card,
html.theme-dark .step,
html.theme-dark .faq-item,
html.theme-dark .about-content,
html.theme-dark .terms-content,
html.theme-dark .privacy-content,
html.theme-dark .exchange-widget,
html.theme-dark .exchange-details,
html.theme-dark .transaction-details,
html.theme-dark .deposit-info,
html.theme-dark .deposit-address,
html.theme-dark .exchange-summary,
html.theme-dark .network-info {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html.theme-dark .exchange-row,
html.theme-dark .stat-item,
html.theme-dark .network-selector {
    /* строки калькулятора и похожие блоки — серые, не почти чёрные */
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* В калькуляторе селект токена и сумма должны "сидеть" на сером фоне строки */
html.theme-dark .coin-selector select {
    background-color: transparent !important;
}

html.theme-dark .coin-selector select option {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Tables */
html.theme-dark .transactions-table th {
    background-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.theme-dark .transactions-table th,
html.theme-dark .transactions-table td {
    border-bottom-color: var(--border-color) !important;
}

html.theme-dark .transactions-table tbody tr:hover {
    background-color: rgba(43, 49, 57, 0.6) !important;
}

/* Icons circles (How it works / Advantages) */
html.theme-dark .step-icon,
html.theme-dark .advantage-icon {
    background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    color: #0b0e11 !important;
}

/* Buttons */
html.theme-dark .exchange-button,
html.theme-dark .btn-primary {
    background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    border-color: var(--accent) !important;
    color: #0b0e11 !important;
}

html.theme-dark .exchange-button:hover,
html.theme-dark .btn-primary:hover {
    background: linear-gradient(180deg, #79b6ff 0%, var(--accent-hover) 100%) !important;
}

html.theme-dark .copy-btn {
    background-color: var(--accent) !important;
    color: #0b0e11 !important;
}

html.theme-dark .copy-btn:hover {
    background-color: var(--accent-hover) !important;
}

/* Inputs/selects */
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark .form-control,
html.theme-dark .network-select {
    background-color: #1e2329 !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.theme-dark ::placeholder {
    color: var(--text-secondary) !important;
}

/* Links underline accents in nav/footer */
html.theme-dark nav ul li a::after,
html.theme-dark .footer-col ul li a::after {
    background: var(--accent) !important;
}

/* Theme toggle button (works in both themes) */
.theme-toggle-btn {
    margin-left: 0.75rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #262645);
    background: transparent;
    color: var(--text-color, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-toggle-btn i {
    pointer-events: none;
}

/* Cookie consent (override purple gradients) */
html.theme-dark .cookie-consent-banner {
    background: linear-gradient(135deg, rgba(30, 35, 41, 0.98) 0%, rgba(43, 49, 57, 0.98) 100%) !important;
    border-top-color: var(--border-color) !important;
}

html.theme-dark .cookie-consent-title i,
html.theme-dark .cookie-consent-text a {
    color: var(--accent) !important;
}

html.theme-dark .cookie-consent-btn-accept {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    color: #0b0e11 !important;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35) !important;
}

html.theme-dark .cookie-settings-content {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html.theme-dark .cookie-category {
    background: var(--dark-bg) !important;
    border-color: var(--border-color) !important;
}

/* Chat button (if present) */
html.theme-dark .chat-widget-button,
html.theme-dark #chat-button {
    background: linear-gradient(135deg, #2b3139 0%, #1e2329 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px #3e4348 !important;
}

html.theme-dark .chat-widget-button:hover,
html.theme-dark #chat-button:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.3) !important;
}

/* Chat widget (site chat) — make it match dark site */
html.theme-dark .chat-widget {
    background: var(--card-bg) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow:
        0 12px 42px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.08) !important;
}

html.theme-dark .chat-header {
    background: linear-gradient(135deg, rgba(30, 35, 41, 0.98) 0%, rgba(35, 42, 49, 0.96) 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: var(--text-color) !important;
}

html.theme-dark .chat-messages {
    background: linear-gradient(180deg, rgba(30, 35, 41, 0.65) 0%, rgba(30, 35, 41, 0.45) 100%) !important;
}

html.theme-dark .chat-input {
    background: rgba(35, 42, 49, 0.92) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
}

/* Override mobile_chat_improvements hardcoded purple backgrounds */
@media (max-width: 768px) {
    html.theme-dark .chat-widget.active .chat-input {
        background: rgba(35, 42, 49, 0.96) !important;
        border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
    }
}

html.theme-dark .chat-input input {
    background: rgba(11, 14, 17, 0.35) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--text-color) !important;
}

html.theme-dark .chat-input input:focus {
    border-color: rgba(var(--accent-rgb), 0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14) !important;
    background: rgba(11, 14, 17, 0.55) !important;
}

html.theme-dark .chat-input input::placeholder {
    color: rgba(234, 236, 239, 0.55) !important;
}

html.theme-dark .chat-input button {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    color: #0b0e11 !important;
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.28) !important;
}

html.theme-dark .chat-input button:hover {
    background: linear-gradient(135deg, #79b6ff 0%, var(--accent-hover) 100%) !important;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.40) !important;
}

html.theme-dark .operator-message {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.72)) !important;
    color: #0b0e11 !important;
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.22) !important;
}

/* Время в сообщениях админа — тёмное (как текст) */
html.theme-dark .operator-message .chat-message-time {
    color: rgba(11, 14, 17, 0.70) !important;
}

html.theme-dark .user-message {
    background: rgba(35, 42, 49, 0.80) !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: var(--text-color) !important;
}

html.theme-dark .typing-indicator {
    background: rgba(35, 42, 49, 0.85) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30) !important;
}