/* =============================================
   Тема: Neon
   Неоновая трасса — циан и маджента, живое свечение
   Активация: $shop_theme = 'neon'; в config/shop.php
   ============================================= */

:root {
    --bg-body: #05030f;
    --bg-card: rgba(12, 8, 28, 0.88);
    --bg-input: rgba(14, 10, 32, 0.92);
    --accent: #29c5ff;
    --accent-hover: #0aa5e6;
    --accent-secondary: #ff2bd1;
    --text-primary: #e6ecff;
    --text-secondary: #8b9ccc;
    --text-muted: #4a5578;
    --border: rgba(41, 197, 255, 0.13);
    --success: #29c5ff;
    --error: #ff2d5e;
    --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%, #131038 0%, #0a0620 45%, #05030f 100%) !important;
    background-attachment: fixed !important;
}

/* С bg_image — затемняем кадр целиком и дополнительно центр,
   где идёт колонка с карточками */
body.has-bg::before {
    background:
        radial-gradient(ellipse 55% 100% at 50% 50%, rgba(5, 3, 15, 0.72) 0%, rgba(5, 3, 15, 0.3) 70%, rgba(5, 3, 15, 0) 100%),
        linear-gradient(180deg, rgba(5, 3, 15, 0.72) 0%, rgba(10, 6, 32, 0.56) 45%, rgba(5, 3, 15, 0.8) 100%);
}

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

/* Неоновые трассеры, медленно ползущие по фону.
   z-index 0 — под контентом (у body > * стоит z-index 1) */
body::after {
    content: '';
    position: fixed;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
        repeating-linear-gradient(
            108deg,
            transparent 0 140px,
            rgba(41, 197, 255, 0.16) 140px 142px,
            transparent 142px 300px
        ),
        repeating-linear-gradient(
            72deg,
            transparent 0 190px,
            rgba(255, 43, 209, 0.14) 190px 192px,
            transparent 192px 420px
        );
    animation: neonDrift 26s linear infinite;
}

@keyframes neonDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-300px, -180px, 0); }
}

/* Лого — переливающийся градиент с пульсацией свечения */
.navbar .logo,
.auth-logo {
    background: linear-gradient(135deg, #29c5ff, #ff2bd1, #29c5ff, #ff2bd1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    animation: neonShift 8s ease-in-out infinite, neonGlow 3.5s ease-in-out infinite;
}

.auth-logo {
    border-image: linear-gradient(135deg, #29c5ff, #ff2bd1, #29c5ff) 1;
}

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

@keyframes neonGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(41, 197, 255, 0.45)); }
    50%      { filter: drop-shadow(0 0 14px rgba(255, 43, 209, 0.55)); }
}

.auth-card h1 {
    background: linear-gradient(135deg, #29c5ff, #ff2bd1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Навбар */
.navbar {
    background: rgba(7, 4, 20, 0.94);
    border-bottom: 1px solid rgba(41, 197, 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, #29c5ff, #ff2bd1, transparent);
    background-size: 50% 100%;
    animation: neonSweep 6s linear infinite;
}

@keyframes neonSweep {
    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(12, 8, 28, 0.78);
    border: 1px solid rgba(41, 197, 255, 0.11);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(41, 197, 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(41, 197, 255, 0.4);
    box-shadow: 0 0 24px rgba(41, 197, 255, 0.14), 0 4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

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

.city-card:not(.city-empty):hover {
    border-color: rgba(41, 197, 255, 0.85);
    background: rgba(41, 197, 255, 0.07);
}

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

.city-empty:hover {
    border-color: rgba(255, 45, 94, 0.6);
    background: rgba(255, 45, 94, 0.05);
}

/* Кнопки — неоновый градиент с бликом, пробегающим при наведении */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0aa5e6, #c41ba3);
    color: #fff;
    box-shadow: 0 0 16px rgba(41, 197, 255, 0.22), 0 0 8px rgba(255, 43, 209, 0.16);
    border: 1px solid rgba(41, 197, 255, 0.28);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #29c5ff, #ff2bd1);
    color: #fff;
    box-shadow: 0 0 26px rgba(41, 197, 255, 0.34), 0 0 14px rgba(255, 43, 209, 0.24);
}

.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: neonShine 0.8s ease;
}

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

/* Навигация — десктоп кнопки */
.nav-btn {
    background: rgba(14, 10, 32, 0.8);
    border: 1px solid rgba(41, 197, 255, 0.1);
}

.nav-btn:hover {
    border-color: rgba(41, 197, 255, 0.4);
    background: rgba(41, 197, 255, 0.07);
    color: #29c5ff;
    box-shadow: 0 0 12px rgba(41, 197, 255, 0.15);
}

/* Drawer */
.nav-drawer {
    background: rgba(7, 4, 20, 0.98);
    border-left: 1px solid rgba(41, 197, 255, 0.1);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.7);
}

.nav-drawer-link:hover {
    background: rgba(41, 197, 255, 0.07);
    color: #29c5ff;
}

/* Инпуты */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.captcha-row input {
    background: rgba(10, 6, 24, 0.9);
    border: 1px solid rgba(41, 197, 255, 0.1);
}

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

/* Цены — розовый неон */
.product-price,
.order-price,
.order-row-sum {
    color: #ff5cdb;
    text-shadow: 0 0 10px rgba(255, 43, 209, 0.3);
}

/* Балансы — RUB */
.balance-rub .balance-value,
.balance-rub .balance-card-value,
.balance-rub .topup-current-value {
    color: #29c5ff;
    text-shadow: 0 0 10px rgba(41, 197, 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(41, 197, 255, 0.28);
}

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

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

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

.balance-item {
    background: rgba(7, 4, 20, 0.9);
}

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

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

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

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

.navbar .btn-logout:hover {
    border-color: rgba(255, 43, 209, 0.45);
    color: #ff5cdb;
}

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

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

.nav-burger:hover span {
    background: #29c5ff;
}

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

.active-order-spinner {
    border-color: rgba(41, 197, 255, 0.15);
    border-top-color: #29c5ff;
}

.active-order-link {
    background: linear-gradient(135deg, #0aa5e6, #c41ba3);
}

.active-order-link:hover {
    background: linear-gradient(135deg, #29c5ff, #ff2bd1);
}

/* Страница загрузки */
.page-loader {
    background: linear-gradient(90deg, #29c5ff, #ff2bd1, #29c5ff);
    box-shadow: 0 0 14px rgba(41, 197, 255, 0.55);
}

.page-spinner-ring {
    border-color: rgba(41, 197, 255, 0.1);
    border-top-color: #29c5ff;
}

/* Focus ring */
*:focus-visible {
    outline-color: #29c5ff;
}

/* Ссылки */
a {
    color: #29c5ff;
}

a:hover {
    color: #7ddcff;
}

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

.breadcrumb a:hover {
    color: #29c5ff;
}

/* Модальное окно */
.modal-box {
    background: rgba(10, 6, 24, 0.98);
    border: 1px solid rgba(41, 197, 255, 0.16);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(41, 197, 255, 0.07);
}

.modal-btn {
    background: linear-gradient(135deg, #0aa5e6, #c41ba3);
    box-shadow: 0 0 10px rgba(41, 197, 255, 0.16);
}

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

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

/* Заказы */
.order-row {
    background: rgba(12, 8, 28, 0.78);
    border: 1px solid rgba(41, 197, 255, 0.08);
}

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

.order-row-id {
    color: #29c5ff;
}

/* Крипто блок */
.key-address {
    background: rgba(10, 6, 24, 0.9);
    border: 1px solid rgba(41, 197, 255, 0.08);
}

.key-address-text {
    background: rgba(14, 10, 32, 0.8);
    border: 1px solid rgba(41, 197, 255, 0.06);
}

.key-address-title {
    color: #29c5ff;
}

.crypto-notice {
    background: rgba(10, 6, 24, 0.9);
    border: 1px solid rgba(41, 197, 255, 0.08);
}

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

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

/* Алерты */
.alert-success {
    background: rgba(41, 197, 255, 0.08);
    border-color: rgba(41, 197, 255, 0.2);
    color: #29c5ff;
}

/* Пагинация */
.page-link:hover {
    border-color: rgba(41, 197, 255, 0.45);
    color: #29c5ff;
}

.page-link.active {
    background: linear-gradient(135deg, #0aa5e6, #c41ba3);
    border-color: transparent;
}

/* Топ-ап метод */
.topup-method {
    background: rgba(14, 10, 32, 0.8);
    border: 1px solid rgba(41, 197, 255, 0.08);
}

.topup-method-status {
    background: rgba(41, 197, 255, 0.1);
    color: #8b9ccc;
}

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

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

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

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

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

.balance-card:hover .balance-card-action {
    border-color: rgba(41, 197, 255, 0.35);
    color: #29c5ff;
}

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

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

::-webkit-scrollbar-track {
    background: rgba(5, 3, 15, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(41, 197, 255, 0.35), rgba(255, 43, 209, 0.35));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(41, 197, 255, 0.6), rgba(255, 43, 209, 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;
    }
}