/* =========================================

   ГЛОБАЛЬНЫЙ СБРОС И ТАКТИЧЕСКИЙ ФОН

========================================= */

*, *::before, *::after {

    box-sizing: border-box !important;

}



body, html {

    font-family: 'Courier New', Courier, monospace !important; 

    color: #d87b2e !important; 

    background-color: #030406 !important; 

}



/* Легкие полосы ЭЛТ-развертки монитора */

body::after {

    content: ""; 

    position: fixed; 

    top: 0; left: 0; width: 100vw; height: 100vh;

    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 50%) !important;

    background-size: 100% 4px !important; 

    pointer-events: none; 

    z-index: 9999;

}



#app, .app-wrapper, .wrapper, main, .grid-wrapper {

    transform: none !important;

    perspective: none !important;

    backdrop-filter: none !important;

}



.left-column, .right-column, .grid-wrapper, .product-cards {

    background: transparent !important; border: none !important; box-shadow: none !important;

}



/* =========================================

   ШАПКА И УНИЧТОЖЕНИЕ БЕЛЫХ "NAV-ITEM"

========================================= */

header.wrapper {

    background-color: rgba(5, 7, 10, 0.95) !important; /* Сделали фон чуть плотнее */

    border-bottom: 1px solid #14202e !important; 

    padding: 15px 20px !important; 

    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;

    /* ЖЕСТКОЕ ОСВОБОЖДЕНИЕ МОДАЛКИ (Выпускаем кассу из шапки): */

    position: static !important; 

    transform: none !important;

    backdrop-filter: none !important; 

    -webkit-backdrop-filter: none !important;

}



.navbar, .navbar-mobile, .navbar-links, .navbar-nav, .nav-item {

    background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important;

}



/* Жестко глушим фон на всех уровнях вложенности меню */

.nav-item, .nav-item > a, .nav-link, .navbar-nav a, .auth-btn, .profile-btn, .balance-btn, .language-switcher {

    background: transparent !important; background-color: transparent !important; background-image: none !important;

    border: 1px solid transparent !important; 

    color: #728a9e !important; 

    font-family: 'Courier New', Courier, monospace !important;

    font-weight: bold !important; 

    text-transform: uppercase;

    font-size: 14px !important; 

    padding: 8px 14px !important;

    border-radius: 4px !important;

    margin: 0 3px !important;

    transition: all 0.3s ease !important;

    text-decoration: none !important;

    display: inline-flex !important; align-items: center !important; box-shadow: none !important;

}



/* Эффект ТОЛЬКО оранжевой рамки при наведении */

.nav-item:hover, .nav-item:hover > a, .nav-link:hover, .navbar-nav a:hover, 

.auth-btn:hover, .profile-btn:hover, .balance-btn:hover,

.nav-link.router-link-exact-active, .navbar-nav a.router-link-exact-active {

    background: transparent !important; background-color: transparent !important; background-image: none !important;

    border: 1px solid #ff8c00 !important; 

    color: #ff8c00 !important; 

    box-shadow: inset 0 0 10px rgba(255, 140, 0, 0.15) !important;

}



/* Блокируем системные подложки движка */

.nav-item::before, .nav-item::after, .nav-link::before, .nav-link::after { display: none !important; }



/* =========================================

   ПОИСК И КАТЕГОРИИ

========================================= */

.search-input, input[type="text"], input[type="search"], .recharge-panel-input, .promo-wrapper input {

    background-color: #05070a !important; border: 1px solid #14202e !important; color: #ff8c00 !important; 

    padding: 12px 20px !important; border-radius: 4px !important; width: 100% !important; margin-bottom: 15px !important; transition: all 0.3s ease !important;

}

.search-input:focus, .recharge-panel-input:focus, .promo-wrapper input:focus { border-color: #ff8c00 !important; outline: none !important; }



.products-types-buttons button, .products-types-buttons .app-button {

    background-color: #0a0502 !important; color: #8c4211 !important; border: 1px solid #3a1c09 !important; border-radius: 4px !important; padding: 10px 20px !important; text-transform: uppercase !important; font-weight: bold !important; transition: all 0.3s ease !important;

}

.products-types-buttons button.active, .products-types-buttons button:hover { background-color: #1a0e06 !important; color: #ff8c00 !important; border-color: #8c4211 !important; }



/* =========================================

   БИОРАДАР (ТОЛЬКО ЦИФРЫ)

========================================= */

.monitoring, .profile-sidebar {

    background-color: #05070a !important; 

    border: 1px solid #14202e !important; 

    padding: 20px !important; 

    margin-bottom: 20px !important; 

    border-radius: 4px !important;

    position: relative !important; 

    z-index: 1 !important;

}

.monitoring::before {

    content: "[ БИОРАДАР ]" !important; 

    display: block !important; 

    color: #8c4211 !important; 

    font-weight: bold !important; 

    margin-bottom: 15px !important; 

    text-align: center !important;

}



/* Контейнер прогресс-бара (Темная капсула) */

.monitoring-progress, .monitoring > div:last-child {

    background-color: rgba(0, 0, 0, 0.6) !important; 

    border: 1px solid rgba(255, 140, 0, 0.3) !important; 

    border-radius: 20px !important; /* Закругляем края */

    height: 32px !important; /* Высота бара */

    position: relative !important; 

    display: flex !important; 

    align-items: center !important; 

    justify-content: center !important;

    overflow: hidden !important; 

    padding: 0 !important;

    width: 100% !important;

}



/* Возвращаем закрашивающуюся полосу (Оранжевая штриховка) */

.monitoring-status-overlay, .monitoring-progress-bar, .progress-bar { 

    display: block !important; 

    opacity: 1 !important;

    position: absolute !important;

    top: 0 !important; left: 0 !important; bottom: 0 !important;

    height: 100% !important;

    background: repeating-linear-gradient(

        -45deg,

        rgba(255, 140, 0, 0.8),

        rgba(255, 140, 0, 0.8) 10px,

        rgba(200, 100, 0, 0.8) 10px,

        rgba(200, 100, 0, 0.8) 20px

    ) !important;

    border-radius: inherit !important;

    z-index: 1 !important;

}



/* Цифры онлайна поверх полосы (Аккуратные, отцентрированные) */

.monitoring-status-text, .monitoring-progress span, .monitoring-progress div {

    display: flex !important; 

    visibility: visible !important; 

    opacity: 1 !important;

    position: relative !important; 

    z-index: 2 !important; /* Вытягиваем текст поверх оранжевой полосы */

    color: #ffffff !important; /* Белый текст для контраста */

    font-size: 15px !important; 

    font-weight: bold !important; 

    /* Мощная черная тень, чтобы текст читался и на оранжевом, и на черном фоне */

    text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000, 0 0 10px rgba(0,0,0,0.9) !important; 

    letter-spacing: 1px !important;

    text-align: center !important;

    justify-content: center !important;

    align-items: center !important;

    width: 100% !important;

    background: transparent !important;

}



/* =========================================

   ИДЕАЛЬНЫЕ КАРТОЧКИ ТОВАРОВ

========================================= */

.product-cards { gap: 15px !important; }

.product-card { background-color: #05070a !important; border: 1px solid #14202e !important; border-radius: 4px !important; padding: 16px !important; position: relative !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; }

.product-card::before, .product-card::after { content: "" !important; position: absolute !important; width: 14px !important; height: 14px !important; transition: all 0.3s ease !important; pointer-events: none !important; z-index: 2 !important; }

.product-card::before { top: -1px !important; left: -1px !important; border-top: 2px solid #ff8c00 !important; border-left: 2px solid #ff8c00 !important; opacity: 0.4 !important; }

.product-card::after { bottom: -1px !important; right: -1px !important; border-bottom: 2px solid #14202e !important; border-right: 2px solid #14202e !important; }

.product-card:hover { background-color: #080d14 !important; border-color: transparent !important; }

.product-card:hover::before { width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; opacity: 1 !important; border-color: #ff8c00 !important; }

.product-card-image-container { background: #020305 !important; border: 1px solid #14202e !important; border-radius: 4px !important; padding: 10px !important; margin-bottom: 12px !important; }

.product-card-image-container img { transition: transform 0.3s ease !important; }

.product-card:hover .product-card-image-container img { transform: scale(1.05) !important; }

.product-card-name { color: #d1dbe5 !important; font-family: 'Trebuchet MS', Arial, sans-serif !important; font-weight: bold !important; font-size: 13px !important; margin: 0 !important; text-transform: uppercase; }

.product-card-old-price { color: #5c3211 !important; text-decoration: line-through !important; font-size: 11px !important; }

.product-card-price { color: #ff8c00 !important; font-weight: bold !important; font-size: 15px !important; }

.product-card-badge-percentage { background-color: #8a1c1c !important; color: #ffffff !important; border: 1px solid #bf2626 !important; padding: 4px 8px !important; border-radius: 2px !important; position: absolute !important; top: 15px !important; right: 15px !important; z-index: 10 !important;}

.product-card-footer { background: transparent !important; border-top: none !important; padding: 0 !important; margin-top: auto !important; display: flex !important; justify-content: space-between !important; align-items: flex-end !important;}

.product-card-footer > div { display: flex !important; flex-direction: column !important; align-items: flex-end !important; }



/* =========================================

   ИСПРАВЛЕННЫЙ ОВЕРЛЕЙ И МАТОВАЯ МОДАЛКА

========================================= */

.modal-overlay {

    position: center !important; 

    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;

    width: 100% !important; height: 100% !important; /* ЗАЩИТА ОТ СДВИГА ВПРАВО */

    background-color: rgba(3, 4, 6, 0.6) !important; 

    display: flex !important; align-items: center !important; justify-content: center !important;

    z-index: 999999 !important; margin: 0 !important; padding: 0 !important;

}



/* ОГРОМНАЯ И ПРОЗРАЧНАЯ МАТОВАЯ МОДАЛКА */

.modal {

    position: relative !important; transform: none !important; margin: auto !important;

    background-color: rgba(5, 7, 10, 0.25) !important; /* ОЧЕНЬ прозрачная */

    backdrop-filter: blur(25px) !important; /* СИЛЬНЫЙ эффект матового стекла */

    -webkit-backdrop-filter: blur(25px) !important;

    border: 1px solid rgba(255, 140, 0, 0.4) !important; 

    border-radius: 8px !important;

    max-width: 800px !important; /* СИЛЬНО РАСШИРИЛИ (теперь касса влезет идеально) */

    width: 95% !important;

    min-height: 400px !important; /* Чтобы окно было больше */

    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;

    padding: 30px !important;

    box-shadow: 0 10px 50px rgba(0,0,0,0.9) !important;

}



/* Оболочка внутри модалки стала блочной, чтобы элементы не сжимались */

.modal-content, .product-modal { 

    width: 100% !important; 

    display: flex !important; 

    flex-direction: column !important; 

    align-items: center !important; 

    justify-content: center !important; 

    text-align: center !important; 

    padding: 15px !important; 

}



/* =========================================

   СТАБИЛЬНАЯ КАССА (RECHARGE PANEL)

========================================= */

.recharge-panel { background-color: transparent !important; width: 100% !important; text-align: center !important; padding: 30px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;}

.recharge-panel-header { color: #ff8c00 !important; font-size: 22px !important; margin-bottom: 20px !important; border-bottom: 1px dashed rgba(255, 140, 0, 0.2) !important; padding-bottom: 12px !important; text-transform: uppercase !important; width: 100% !important; text-align: center !important;}

.recharge-panel-section { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important;}

.recharge-panel-providers { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; width: 100% !important;}

.recharge-panel-provider { background-color: #ffffff !important; border: 2px solid #14202e !important; border-radius: 4px !important; padding: 10px !important; margin: 0 !important; cursor: pointer !important; }

.recharge-panel-provider.selected, .recharge-panel-provider:hover { border-color: #ff8c00 !important; }



/* Баннеры и Профиль */

.profile-sidebar__link { display: block !important; padding: 12px 15px !important; color: #728a9e !important; border: 1px solid #14202e !important; background: #080b11 !important; margin-bottom: 5px !important; border-radius: 4px !important; text-decoration: none !important; transition: all 0.2s ease !important; }

.profile-sidebar__link:hover, .profile-sidebar__link.router-link-exact-active { background-color: #121822 !important; border-color: #ff8c00 !important; color: #ff8c00 !important; }

.banner-elem { background-color: #05070a !important; border: 1px solid #14202e !important; transition: all 0.3s ease !important; border-radius: 4px !important; }

.banner-elem:hover { border-color: #ff8c00 !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(255, 140, 0, 0.1) !important; }

/* =========================================

   ВНУТРЕННОСТИ ТОВАРА

========================================= */



.product-modal-title, 

.product-modal-gallery, 

.product-modal-description, 

.amount-control, 

.modal-footer-buttons, 

.product-modal-footer {

    margin-left: auto !important; 

    margin-right: auto !important;

    align-items: center !important;

    justify-content: center !important;

}



.product-modal-title { 

    color: #ff8c00 !important; font-size: 22px !important; 

    border-bottom: 1px solid rgba(255, 140, 0, 0.15) !important; 

    padding-bottom: 12px !important; margin-bottom: 20px !important; width: 100% !important; 

}

.product-modal-gallery { 

    background-color: rgba(0,0,0,0.4) !important; border: 1px solid #14202e !important; 

    padding: 16px !important; border-radius: 4px !important; margin-bottom: 20px !important; 

    display: flex !important; 

}

.product-modal-description { 

    color: #d87b2e !important; font-size: 15px !important; line-height: 1.6 !important; 

    margin-bottom: 25px !important; text-align: center !important; 

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 

    letter-spacing: 0.5px !important;

}



/* Счётчики количества */

.amount-control { 

    display: flex !important; flex-direction: column !important; 

    width: 100% !important; max-width: 280px !important; gap: 10px !important; 

    margin-bottom: 20px !important;

}

.amount-control-counter { 

    background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(140, 66, 17, 0.4) !important; border-radius: 4px !important; 

    display: flex !important; justify-content: space-between !important; width: 100% !important; padding: 8px 15px !important; 

}

.amount-control-counter-button { background: transparent !important; border: none !important; color: #728a9e !important; font-size: 20px !important; cursor: pointer !important; }

.amount-control-count { color: #ffffff !important; font-weight: bold !important; }

.amount-control-total { 

    background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(140, 66, 17, 0.4) !important; border-radius: 4px !important; 

    width: 100% !important; text-align: center !important; padding: 10px !important; color: #ff8c00 !important; font-weight: bold !important; 

}

/* Кнопки модалки */

.modal-footer-buttons, .product-modal-footer {

    background: transparent !important; border-top: 1px dashed rgba(140, 66, 17, 0.3) !important;

    padding-top: 20px !important; margin-top: 10px !important;

    display: flex !important; flex-direction: row !important; gap: 15px !important; width: 100% !important;

}



.modal-close-button { background: transparent !important; border: 1px solid #728a9e !important; color: #728a9e !important; padding: 12px 30px !important; border-radius: 4px !important; text-transform: uppercase !important; font-weight: bold !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;}

.modal-close-button:hover { border-color: #ff8c00 !important; color: #ff8c00 !important; }



/* КНОПКА ПРИОБРЕСТИ: ЧИСТЫЙ БЕЛЫЙ ТЕКСТ И ЦЕНТРИРОВАНИЕ */

.modal .modal-primary-button, .modal .app-button--primary {

    background: rgba(255, 140, 0, 0.15) !important; 

    border: 1px solid #ff8c00 !important;

    text-transform: uppercase !important; font-weight: bold !important;

    padding: 12px 35px !important; border-radius: 4px !important;

    transition: all 0.3s ease !important; cursor: pointer !important;

    display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;

    box-shadow: 0 0 15px rgba(255, 140, 0, 0.2) !important;

}

.modal .modal-primary-button, .modal .app-button--primary, .modal .modal-primary-button *, .modal .app-button--primary *, .modal-primary-button-text {

    color: #ffffff !important; 

}

.modal .modal-primary-button:hover, .modal .app-button--primary:hover {

    background: #ff8c00 !important; box-shadow: 0 0 25px rgba(255, 140, 0, 0.6) !important;

}

.modal .modal-primary-button:hover *, .modal .app-button--primary:hover * {

    color: #000000 !important; 

}



/* Баннеры и Профиль */

.profile-sidebar__link { display: block !important; padding: 12px 15px !important; color: #728a9e !important; border: 1px solid #14202e !important; background: #080b11 !important; margin-bottom: 5px !important; border-radius: 4px !important; text-decoration: none !important; transition: all 0.2s ease !important; }

.profile-sidebar__link:hover, .profile-sidebar__link.router-link-exact-active { background-color: #121822 !important; border-color: #ff8c00 !important; color: #ff8c00 !important; }

.banner-elem { background-color: #05070a !important; border: 1px solid #14202e !important; transition: all 0.3s ease !important; border-radius: 4px !important; }

.banner-elem:hover { border-color: #ff8c00 !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(255, 140, 0, 0.1) !important; }