/* =========================================
   ГЛОБАЛЬНЫЙ СБРОС И ТАКТИЧЕСКИЙ ФОН
========================================= */
*, *::before, *::after {
    box-sizing: border-box !important;
}

body, html {
    font-family: 'Courier New', Courier, monospace !important; 
    color: #aaaaaa !important; /* Серый текст */
    background-color: #050505 !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(10, 10, 10, 0.95) !important; /* Темно-серый почти черный */
    border-bottom: 1px solid #222222 !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: #888888 !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 #555555 !important; 
    color: #eeeeee !important; /* Белый текст */
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05) !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: #111111 !important; border: 1px solid #262626 !important; color: #cccccc !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: #666666 !important; outline: none !important; }

.products-types-buttons button, .products-types-buttons .app-button {
    background-color: #111111 !important; color: #777777 !important; border: 1px solid #222222 !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: #222222 !important; color: #eeeeee !important; border-color: #555555 !important; }

/* =========================================
   БИОРАДАР (ТОЛЬКО ЦИФРЫ)
========================================= */
.monitoring, .profile-sidebar {
    background-color: #111111 !important; 
    border: 1px solid #262626 !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: #666666 !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.8) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !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(50, 50, 50, 0.8),
        rgba(50, 50, 50, 0.8) 10px,
        rgba(30, 30, 30, 0.8) 10px,
        rgba(30, 30, 30, 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: #d85d00 !important; /* Единственное яркое пятно */
    font-size: 15px !important; 
    font-weight: bold !important; 
    text-shadow: 1px 1px 3px #000, -1px -1px 3px #000, 0 0 15px rgba(216, 93, 0, 0.8) !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: #111111 !important; border: 1px solid #262626 !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 #444444 !important; border-left: 2px solid #444444 !important; opacity: 0.4 !important; }
.product-card::after { bottom: -1px !important; right: -1px !important; border-bottom: 2px solid #222222 !important; border-right: 2px solid #222222 !important; }
.product-card:hover { background-color: #1a1a1a !important; border-color: transparent !important; }
.product-card:hover::before { width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; opacity: 1 !important; border-color: #eeeeee !important; }
.product-card-image-container { background: #050505 !important; border: 1px solid #262626 !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: #dddddd !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: #555555 !important; text-decoration: line-through !important; font-size: 11px !important; }
.product-card-price { color: #eeeeee !important; font-weight: bold !important; font-size: 15px !important; }
.product-card-badge-percentage { background-color: #222222 !important; color: #aaaaaa !important; border: 1px solid #444444 !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(0, 0, 0, 0.75) !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(10, 10, 10, 0.4) !important; /* ОЧЕНЬ прозрачная */
    backdrop-filter: blur(25px) !important; /* СИЛЬНЫЙ эффект матового стекла */
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !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: #eeeeee !important; font-size: 22px !important; margin-bottom: 20px !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !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 #333333 !important; border-radius: 4px !important; padding: 10px !important; margin: 0 !important; cursor: pointer !important; }
.recharge-panel-provider.selected, .recharge-panel-provider:hover { border-color: #d85d00 !important; } /* Оранжевый акцент при наведении */

/* Баннеры и Профиль */
.profile-sidebar__link { display: block !important; padding: 12px 15px !important; color: #888888 !important; border: 1px solid #262626 !important; background: #111111 !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: #1a1a1a !important; border-color: #555555 !important; color: #eeeeee !important; }
.banner-elem { background-color: #111111 !important; border: 1px solid #262626 !important; transition: all 0.3s ease !important; border-radius: 4px !important; }
.banner-elem:hover { border-color: #555555 !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05) !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: #eeeeee !important; font-size: 22px !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 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 #262626 !important; 
    padding: 16px !important; border-radius: 4px !important; margin-bottom: 20px !important; 
    display: flex !important; 
}
.product-modal-description { 
    color: #aaaaaa !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(255, 255, 255, 0.15) !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: #888888 !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(255, 255, 255, 0.15) !important; border-radius: 4px !important; 
    width: 100% !important; text-align: center !important; padding: 10px !important; color: #eeeeee !important; font-weight: bold !important; 
}
/* Кнопки модалки */
.modal-footer-buttons, .product-modal-footer {
    background: transparent !important; border-top: 1px dashed rgba(255, 255, 255, 0.15) !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 #555555 !important; color: #888888 !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: #cccccc !important; color: #ffffff !important; }

/* КНОПКА ПРИОБРЕСТИ: ЧИСТЫЙ БЕЛЫЙ ТЕКСТ И ОРАНЖЕВЫЙ АКЦЕНТ */
.modal .modal-primary-button, .modal .app-button--primary {
    background: rgba(216, 93, 0, 0.15) !important; 
    border: 1px solid #d85d00 !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(216, 93, 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: #d85d00 !important; box-shadow: 0 0 20px rgba(216, 93, 0, 0.5) !important;
}
.modal .modal-primary-button:hover *, .modal .app-button--primary:hover * {
    color: #000000 !important; 
}