/* =============================================
   Тема: Smoker
   Дымная лаборатория — лёд, сталь и плывущий пар
   Активация: $shop_theme = 'smoker'; в config/shop.php
   ============================================= */

:root {
    --bg-body: #020712;
    --bg-card: rgba(8, 18, 36, 0.88);
    --bg-input: rgba(6, 15, 30, 0.92);
    --accent: #4db8ff;
    --accent-hover: #2a93e0;
    --accent-secondary: #8fe6ff;
    --text-primary: #e4efff;
    --text-secondary: #8ca6cc;
    --text-muted: #4a5f80;
    --border: rgba(77, 184, 255, 0.13);
    --success: #4db8ff;
    --error: #ff4d6d;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    --radius: 14px;
}

/* Фон — холодная дымка (без bg_image) */
body:not(.has-bg) {
    background: radial-gradient(ellipse at 50% 15%, #0d2340 0%, #061428 45%, #020712 100%) !important;
    background-attachment: fixed !important;
}

/* С bg_image — гасим кадр целиком и дополнительно центр,
   где идёт колонка с карточками */
body.has-bg::before {
    background:
        radial-gradient(ellipse 58% 100% at 50% 50%, rgba(2, 7, 18, 0.86) 0%, rgba(2, 7, 18, 0.45) 70%, rgba(2, 7, 18, 0.1) 100%),
        linear-gradient(180deg, rgba(2, 7, 18, 0.82) 0%, rgba(4, 14, 30, 0.66) 45%, rgba(2, 7, 18, 0.88) 100%);
}

/* На мобильных базовый style.css переводит фон в background-attachment: scroll,
   и cover начинает считаться от всей высоты страницы — кадр вырождается в пятно.
   Привязываем высоту картинки к экрану, ниже уходит тёмный фон с дымом. */
@media (max-width: 768px) {
    body.has-bg {
        background-size: auto 100vh;
        /* сдвигаем кадр к колбам: по центру снимка одно чёрное небо */
        background-position: 72% center;
        background-repeat: no-repeat;
        background-color: #020712;
    }

    /* колонка узкая и карточки сами тёмные — плотная вуаль тут лишняя,
       иначе от снимка остаётся чёрное пятно */
    body.has-bg::before {
        background:
            radial-gradient(circle at 50% 10%, rgba(77, 184, 255, 0.12) 0%, rgba(77, 184, 255, 0) 55%),
            linear-gradient(180deg, rgba(2, 7, 18, 0.58) 0%, rgba(2, 7, 18, 0.34) 45%, rgba(2, 7, 18, 0.78) 100%);
    }
}

/* Клубы пара, медленно ползущие вверх по фону.
   z-index 0 — под контентом (у body > * стоит z-index 1) */
body::after {
    content: '';
    position: fixed;
    inset: -40%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background:
        radial-gradient(ellipse 40% 26% at 18% 82%, rgba(77, 184, 255, 0.16) 0%, rgba(77, 184, 255, 0) 70%),
        radial-gradient(ellipse 32% 22% at 76% 68%, rgba(143, 230, 255, 0.13) 0%, rgba(143, 230, 255, 0) 70%),
        radial-gradient(ellipse 46% 30% at 52% 96%, rgba(42, 107, 255, 0.14) 0%, rgba(42, 107, 255, 0) 72%);
    animation: smokeDrift 34s ease-in-out infinite;
}

@keyframes smokeDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -7%, 0) scale(1.12); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Лого — ледяной градиент с медленным свечением */
.navbar .logo,
.auth-logo {
    background: linear-gradient(135deg, #8fe6ff, #4db8ff, #dff4ff, #4db8ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    animation: smokeShift 9s ease-in-out infinite, smokeGlow 4s ease-in-out infinite;
}

.auth-logo {
    border-image: linear-gradient(135deg, #8fe6ff, #4db8ff, #8fe6ff) 1;
}

@keyframes smokeShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes smokeGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(77, 184, 255, 0.4)); }
    50%      { filter: drop-shadow(0 0 16px rgba(143, 230, 255, 0.55)); }
}

.auth-card h1 {
    background: linear-gradient(135deg, #8fe6ff, #4db8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Навбар */
.navbar {
    background: rgba(4, 11, 24, 0.94);
    border-bottom: 1px solid rgba(77, 184, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Струйка пара под шапкой, стелющаяся слева направо */
.navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4db8ff, #dff4ff, transparent);
    background-size: 50% 100%;
    animation: smokeSweep 7s linear infinite;
}

@keyframes smokeSweep {
    from { background-position: -100% 0; }
    to   { background-position: 200% 0; }
}

/* Карточки — матовое стекло с ледяными гранями */
.city-card,
.product-card,
.what-card,
.raion-card,
.balance-card,
.pay-method-card,
.contact-item,
.welcome-card,
.rules-card,
.order-summary,
.topup-card,
.auth-card,
.result-card,
.order-detail-card {
    background: rgba(8, 18, 36, 0.78);
    border: 1px solid rgba(77, 184, 255, 0.11);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(77, 184, 255, 0.05);
}

.city-card:not(.city-empty):hover,
.product-card:hover,
.what-card:hover,
.raion-card:hover,
.balance-card:hover,
.pay-method-card:hover,
.contact-item:hover {
    border-color: rgba(77, 184, 255, 0.4);
    box-shadow: 0 0 24px rgba(77, 184, 255, 0.14), 0 4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

/* Города с наличием — светятся ледяной рамкой */
.city-card:not(.city-empty) {
    border-color: rgba(77, 184, 255, 0.5);
    box-shadow: 0 0 14px rgba(77, 184, 255, 0.1), inset 0 0 0 0.5px rgba(77, 184, 255, 0.12);
}

.city-card:not(.city-empty):hover {
    border-color: rgba(143, 230, 255, 0.85);
    background: rgba(77, 184, 255, 0.07);
}

/* Пустые города — приглушённый красный */
.city-empty {
    border-color: rgba(255, 77, 109, 0.35);
}

.city-empty:hover {
    border-color: rgba(255, 77, 109, 0.55);
    background: rgba(255, 77, 109, 0.05);
}

/* Кнопки — стальной градиент с бликом, пробегающим при наведении */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1f6dbf, #2a93e0);
    color: #fff;
    box-shadow: 0 0 16px rgba(77, 184, 255, 0.22), 0 0 8px rgba(143, 230, 255, 0.14);
    border: 1px solid rgba(77, 184, 255, 0.28);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2a93e0, #6fd2ff);
    color: #fff;
    box-shadow: 0 0 26px rgba(77, 184, 255, 0.34), 0 0 14px rgba(143, 230, 255, 0.22);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    opacity: 0;
}

.btn-primary:hover::after {
    opacity: 1;
    animation: smokeShine 0.8s ease;
}

@keyframes smokeShine {
    from { left: -60%; }
    to   { left: 120%; }
}

/* Навигация — десктоп кнопки */
.nav-btn {
    background: rgba(6, 15, 30, 0.8);
    border: 1px solid rgba(77, 184, 255, 0.1);
}

.nav-btn:hover {
    border-color: rgba(77, 184, 255, 0.4);
    background: rgba(77, 184, 255, 0.07);
    color: #6fd2ff;
    box-shadow: 0 0 12px rgba(77, 184, 255, 0.15);
}

/* Drawer */
.nav-drawer {
    background: rgba(4, 11, 24, 0.98);
    border-left: 1px solid rgba(77, 184, 255, 0.1);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.7);
}

.nav-drawer-link:hover {
    background: rgba(77, 184, 255, 0.07);
    color: #6fd2ff;
}

/* Инпуты */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.captcha-row input {
    background: rgba(5, 13, 27, 0.9);
    border: 1px solid rgba(77, 184, 255, 0.1);
}

.form-group input:focus,
.captcha-row input:focus {
    border-color: rgba(77, 184, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(77, 184, 255, 0.1), 0 0 14px rgba(77, 184, 255, 0.12);
}

/* Цены — светлый лёд */
.product-price,
.order-price,
.order-row-sum {
    color: #8fe6ff;
    text-shadow: 0 0 10px rgba(143, 230, 255, 0.3);
}

/* Балансы — RUB */
.balance-rub .balance-value,
.balance-rub .balance-card-value,
.balance-rub .topup-current-value {
    color: #4db8ff;
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
}

/* Балансы — BTC */
.balance-btc .balance-value,
.balance-btc .balance-card-value,
.balance-btc .topup-current-value {
    color: #f7931a;
}

/* Балансы — LTC */
.balance-ltc .balance-value,
.balance-ltc .balance-card-value,
.balance-ltc .topup-current-value {
    color: #bfbbbb;
}

/* Баланс оплаты */
.pay-method-balance {
    border-color: rgba(77, 184, 255, 0.28);
}

.pay-method-balance:hover {
    border-color: rgba(77, 184, 255, 0.5);
    background: rgba(77, 184, 255, 0.05);
}

/* Иконка способа оплаты */
.pay-method-icon {
    background: rgba(6, 15, 30, 0.8);
}

/* Панель балансов */
.balance-bar {
    background: rgba(77, 184, 255, 0.03);
    border-bottom: 1px solid rgba(77, 184, 255, 0.07);
}

.balance-item {
    background: rgba(4, 11, 24, 0.9);
}

.balance-item:hover {
    background: rgba(77, 184, 255, 0.05);
}

/* Бейдж темы / logout */
.btn-theme {
    border: 1px solid rgba(77, 184, 255, 0.1);
}

.btn-theme:hover {
    border-color: rgba(77, 184, 255, 0.4);
    background: rgba(77, 184, 255, 0.07);
}

.navbar .btn-logout {
    border: 1px solid rgba(77, 184, 255, 0.1);
}

.navbar .btn-logout:hover {
    border-color: rgba(255, 77, 109, 0.45);
    color: #ff7d94;
}

/* Бургер */
.nav-burger {
    border: 1px solid rgba(77, 184, 255, 0.1);
}

.nav-burger:hover {
    border-color: rgba(77, 184, 255, 0.4);
}

.nav-burger:hover span {
    background: #6fd2ff;
}

/* Активная заявка баннер */
.active-order-banner {
    background: linear-gradient(135deg, rgba(77, 184, 255, 0.09), rgba(143, 230, 255, 0.05));
    border-bottom: 1px solid rgba(77, 184, 255, 0.16);
}

.active-order-spinner {
    border-color: rgba(77, 184, 255, 0.15);
    border-top-color: #4db8ff;
}

.active-order-link {
    background: linear-gradient(135deg, #1f6dbf, #2a93e0);
}

.active-order-link:hover {
    background: linear-gradient(135deg, #2a93e0, #6fd2ff);
}

/* Страница загрузки */
.page-loader {
    background: linear-gradient(90deg, #4db8ff, #dff4ff, #4db8ff);
    box-shadow: 0 0 14px rgba(77, 184, 255, 0.55);
}

.page-spinner-ring {
    border-color: rgba(77, 184, 255, 0.1);
    border-top-color: #4db8ff;
}

/* Focus ring */
*:focus-visible {
    outline-color: #4db8ff;
}

/* Ссылки */
a {
    color: #4db8ff;
}

a:hover {
    color: #9fe4ff;
}

/* Хлебные крошки */
.breadcrumb a {
    color: #5a7095;
}

.breadcrumb a:hover {
    color: #4db8ff;
}

/* Модальное окно */
.modal-box {
    background: rgba(5, 13, 27, 0.98);
    border: 1px solid rgba(77, 184, 255, 0.16);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(77, 184, 255, 0.07);
}

.modal-btn {
    background: linear-gradient(135deg, #1f6dbf, #2a93e0);
    box-shadow: 0 0 10px rgba(77, 184, 255, 0.16);
}

.modal-btn-cancel {
    background: transparent;
    border: 1px solid rgba(77, 184, 255, 0.12);
    box-shadow: none;
}

.modal-btn-cancel:hover {
    background: rgba(77, 184, 255, 0.07);
}

/* Заказы */
.order-row {
    background: rgba(8, 18, 36, 0.78);
    border: 1px solid rgba(77, 184, 255, 0.08);
}

.order-row:hover {
    border-color: rgba(77, 184, 255, 0.32);
    background: rgba(77, 184, 255, 0.04);
}

.order-row-id {
    color: #4db8ff;
}

/* Крипто блок */
.key-address {
    background: rgba(5, 13, 27, 0.9);
    border: 1px solid rgba(77, 184, 255, 0.08);
}

.key-address-text {
    background: rgba(6, 15, 30, 0.8);
    border: 1px solid rgba(77, 184, 255, 0.06);
}

.key-address-title {
    color: #4db8ff;
}

.crypto-notice {
    background: rgba(5, 13, 27, 0.9);
    border: 1px solid rgba(77, 184, 255, 0.08);
}

/* Копировать кнопка */
.btn-copy-sm {
    background: linear-gradient(135deg, #1f6dbf, #2a93e0);
}

.btn-copy-sm:hover {
    opacity: 0.85;
}

/* Алерты */
.alert-success {
    background: rgba(77, 184, 255, 0.08);
    border-color: rgba(77, 184, 255, 0.2);
    color: #4db8ff;
}

/* Пагинация */
.page-link:hover {
    border-color: rgba(77, 184, 255, 0.45);
    color: #4db8ff;
}

.page-link.active {
    background: linear-gradient(135deg, #1f6dbf, #2a93e0);
    border-color: transparent;
}

/* Топ-ап метод */
.topup-method {
    background: rgba(6, 15, 30, 0.8);
    border: 1px solid rgba(77, 184, 255, 0.08);
}

.topup-method-status {
    background: rgba(77, 184, 255, 0.1);
    color: #8ca6cc;
}

/* Секции */
.section-title {
    color: #5a7095;
}

/* Overlay */
.nav-overlay.open {
    background: rgba(0, 0, 0, 0.7);
}

/* SBP модалка */
.sbp-modal {
    background: rgba(5, 13, 27, 0.98);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.sbp-modal-header {
    border-bottom-color: rgba(77, 184, 255, 0.08);
}

/* Стоки карточки */
.city-stock,
.product-stock,
.balance-card-action {
    border-color: rgba(77, 184, 255, 0.1);
    color: #4a5f80;
}

.balance-card:hover .balance-card-action {
    border-color: rgba(77, 184, 255, 0.35);
    color: #4db8ff;
}

/* Выделение текста */
::selection {
    background: rgba(77, 184, 255, 0.28);
    color: #fff;
}

/* Скроллбар */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(2, 7, 18, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(77, 184, 255, 0.35), rgba(143, 230, 255, 0.35));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(77, 184, 255, 0.6), rgba(143, 230, 255, 0.6));
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    body::after,
    .navbar::after,
    .navbar .logo,
    .auth-logo {
        animation: none;
    }

    .btn-primary:hover::after {
        animation: none;
        opacity: 0;
    }
}