/* ══════════════════════════════════════════════════════════════════
   CYBERPUNK HEADER — WESTELECOM
   Global Dark Glassmorphism Header with Neon Accents
   Created: 06.02.2026
   ══════════════════════════════════════════════════════════════════ */

/* ─── ANIMATIONS ─── */
@keyframes cyberHoloLine {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

@keyframes cyberGlowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes cyberScanline {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ─── TOP LINE — Верхняя панель ─── */
header .top-line {
    background: linear-gradient(180deg, #050810 0%, #0c1020 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
    position: relative;
}

/* Голографическая линия в самом верху */
header .top-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        #00d4ff 0%, #ff00ff 25%, #00d4ff 50%, #ff00ff 75%, #00d4ff 100%);
    background-size: 200% 100%;
    animation: cyberHoloLine 4s linear infinite;
    z-index: 100;
}

/* Ссылки верхнего меню */
header .top-line__menu-link {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
    position: relative;
}

header .top-line__menu-link:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.5) !important;
}

header .top-line__menu-link.active {
    color: #00d4ff !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

/* Иконка Особистий кабінет */
header .tools__item {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

header .tools__item:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

header .tools__item svg,
header .personal__icon {
    stroke: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

header .tools__item:hover svg,
header .tools__item:hover .personal__icon {
    stroke: #00d4ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}

/* Dots (три точки) в верхнем меню */
header .more .dots,
header .top-line .dots {
    fill: rgba(255, 255, 255, 0.5) !important;
    transition: fill 0.3s ease !important;
}

header .more:hover .dots,
header .top-line .dots:hover {
    fill: #00d4ff !important;
}

/* Dropdown меню */
header .more__dropdown {
    background: rgba(10, 14, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 255, 0.15) !important;
}

header .more__dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

header .more__dropdown-item:hover {
    color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.08) !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* ─── MIDDLE LINE — Логотип, контакты ─── */
header .middle-line,
header .container > .row:nth-child(2) .middle-line {
    background: transparent !important;
}

/* Сам контейнер хедера — фон */
header > .container {
    background: linear-gradient(180deg, #050810 0%, #0c1020 100%) !important;
}

/* Лого — неоновое свечение */
header .logo img {
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.35)) !important;
    transition: all 0.4s ease !important;
}

header .logo:hover img {
    filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.7)) brightness(1.1) !important;
}

/* Рейтинг под логотипом */
header .header-rating__star {
    fill: #f59e0b !important;
}

header .header-rating__score {
    color: #f59e0b !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

header .header-rating__label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Email */
header .middle-line__email {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}

header .middle-line__email:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* Телефон */
header .middle-line__tel {
    color: #fff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

header .middle-line__tel:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.6) !important;
}

/* Dots рядом с телефоном */
header .dots-phone {
    fill: rgba(255, 255, 255, 0.4) !important;
    transition: fill 0.3s ease !important;
}

header .middle-line__tel-main:hover .dots-phone {
    fill: #00d4ff !important;
}

/* Dropdown телефонов */
header .middle-line__tel-dropdown {
    background: rgba(10, 14, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 255, 0.15) !important;
    padding: 12px 16px !important;
}

header .middle-line__tel-low {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    padding: 6px 0 !important;
    white-space: nowrap !important;
}

header .middle-line__tel-low:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* Соцсети */
header .footer-link__social-item {
    transition: all 0.3s ease !important;
}

header .footer-link__social-item:hover {
    transform: translateY(-3px) !important;
}

header .footer-link__social-item:hover img {
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.7)) brightness(1.2) !important;
}

/* ─── BOTTOM LINE — Навигация ─── */
header + .bottom-line,
.bottom-line {
    background: linear-gradient(180deg, #0c1020 0%, #111827 100%) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
    border-bottom: none !important;
    position: relative;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Голографическая линия внизу навигации */
.bottom-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        #ff00ff 0%, #00d4ff 25%, #ff00ff 50%, #00d4ff 75%, #ff00ff 100%);
    background-size: 200% 100%;
    animation: cyberHoloLine 4s linear infinite reverse;
    z-index: 100;
}

/* Сканирующая неоновая линия */
.bottom-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 212, 255, 0.03), 
        rgba(0, 212, 255, 0.06), 
        rgba(0, 212, 255, 0.03), 
        transparent);
    animation: cyberScanline 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Навигационные ссылки */
.bottom-line__link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.bottom-line__link:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

.bottom-line__link.active {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* Неоновое подчёркивание при hover */
.bottom-line__link::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #00d4ff, #ff00ff) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(-50%) !important;
    border-radius: 1px !important;
}

.bottom-line__link:hover::after {
    width: 80% !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
}

.bottom-line__link.active::after {
    width: 60% !important;
    background: #00d4ff !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* Иконки навигации */
.bottom-line__icon {
    fill: rgba(255, 255, 255, 0.5) !important;
    stroke: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
}

.bottom-line__link:hover .bottom-line__icon {
    fill: #00d4ff !important;
    stroke: #00d4ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5)) !important;
}

.bottom-line__link.active .bottom-line__icon {
    fill: #00d4ff !important;
    stroke: #00d4ff !important;
}

/* ─── ALERT LINE ─── */
header .alert-line {
    background: linear-gradient(90deg, #0c1020, #1a0a2e, #0c1020) !important;
    border-bottom: 1px solid rgba(255, 0, 255, 0.2) !important;
    color: #fff !important;
}

header .alert-line .alert-line__text {
    color: #fff !important;
}

/* ─── BURGER BUTTON (mobile) ─── */
header .burger-item {
    background: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

header .burger:hover .burger-item {
    background: #00d4ff !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
}

/* ─── MOBILE MENU ─── */
.right-menu {
    background: linear-gradient(180deg, #0a0e1a 0%, #0f172a 100%) !important;
}

.right-menu .category__item a {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
}

.right-menu .category__item a:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

.right-menu .right-line__link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease !important;
}

.right-menu .right-line__link:hover {
    color: #00d4ff !important;
}

.right-menu .right-line__icon {
    fill: rgba(255, 255, 255, 0.5) !important;
    stroke: rgba(255, 255, 255, 0.5) !important;
}

.right-menu .right-line__link:hover .right-line__icon {
    fill: #00d4ff !important;
    stroke: #00d4ff !important;
}

/* Mobile menu contacts block */
.mobile-menu-contacts {
    background: linear-gradient(135deg, #0c1020 0%, #1a0a2e 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
}

.mobile-menu-contacts__phone-main {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

.mobile-menu-contacts__phone-main:hover {
    background: rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}

.mobile-menu-contacts__messenger {
    background: rgba(0, 212, 255, 0.08) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
}

.mobile-menu-contacts__messenger:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3) !important;
}

/* ─── STICKY CALL BUTTON — Неоновый стиль ─── */
.sticky-call-btn {
    background: linear-gradient(135deg, #00d4ff 0%, #0072ff 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4) !important;
}

.sticky-call-btn:hover {
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.6) !important;
}

/* ─── LANGUAGE SELECTOR ─── */
header .top-line__left-lang a,
header .top-line__left-lang .dropdown-toggle {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

header .top-line__left-lang a:hover,
header .top-line__left-lang .dropdown-toggle:hover {
    color: #00d4ff !important;
}

/* Language dropdown */
header .top-line__left-lang .dropdown-menu {
    background: rgba(10, 14, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 8px !important;
}

header .top-line__left-lang .dropdown-menu a {
    color: rgba(255, 255, 255, 0.8) !important;
}

header .top-line__left-lang .dropdown-menu a:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}

/* ─── BREADCRUMBS (если после хедера) ─── */
.breadcrumbs-wrap,
.visual-breadcrumbs {
    background: #0c1020 !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
}

.breadcrumbs-wrap a,
.visual-breadcrumbs a {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.3s ease !important;
}

.breadcrumbs-wrap a:hover,
.visual-breadcrumbs a:hover {
    color: #00d4ff !important;
}

.breadcrumbs-wrap .active,
.visual-breadcrumbs .active {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SUBTLE DATA GRID — Фоновая сетка
   ══════════════════════════════════════════════════════════════════ */
header > .container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

header > .container {
    position: relative;
}

header > .container > * {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CRITICAL OVERRIDE — Перезаписываем белый фон header
   ══════════════════════════════════════════════════════════════════ */
header {
    background: linear-gradient(180deg, #050810 0%, #0c1020 80%, #111827 100%) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 212, 255, 0.08) !important;
}

/* Контейнер внутри header тоже прозрачный */
header .container {
    background: transparent !important;
}

/* Row внутри header */
header .row {
    background: transparent !important;
}

/* Col внутри header */
header .col-md-12 {
    background: transparent !important;
}

/* Middle line wrapper */
header .middle-line__wrapper-left,
header .middle-line__wrapper-right {
    background: transparent !important;
}

/* ─── ACTIVE MENU LINK — Специальная перезапись градиента ─── */
header .top-line__menu-link.active.top__link-Home,
header .top-line__menu-link.active.top__link-Business,
header .top-line__menu-link.active.top__link-Pay {
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #00d4ff !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
}

/* ─── HOVER MENU LINK — Перезапись градиента при hover ─── */
header .top-line__menu-link:hover {
    background: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #00d4ff !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.5) !important;
}

/* ─── BOTTOM LINE LINK COLORS ─── */
.bottom-line__link-text {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.3s ease !important;
}

.bottom-line__link:hover .bottom-line__link-text {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

.bottom-line__link.active .bottom-line__link-text {
    color: #00d4ff !important;
}

/* ─── FIXED HEADER VARIANT ─── */
.bottom-line-fixed {
    background-color: rgba(5, 8, 16, 0.92) !important;
    backdrop-filter: blur(12px) !important;
}

.bottom-line-fixed::before {
    background-color: rgba(5, 8, 16, 0.95) !important;
}

/* ─── WRAP BACKGROUND ─── */
.wrap {
    background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   LOGO CYBERPUNK EFFECTS — 5 эффектов
   ══════════════════════════════════════════════════════════════════ */

/* 1. BREATHING GLOW — постоянная пульсация неонового свечения */
@keyframes logoBreathing {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4)); 
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.7)) 
               drop-shadow(0 0 40px rgba(0, 212, 255, 0.3)); 
    }
}

header .logo img {
    animation: logoBreathing 3s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
}

/* 2. HOLOGRAPHIC SWEEP — блик проходит по лого */
header .logo {
    position: relative !important;
    overflow: visible !important;
    display: inline-block !important;
}

header .logo a {
    position: relative !important;
    display: inline-block !important;
    overflow: hidden !important;
}

header .logo a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(0, 212, 255, 0.12), 
        rgba(255, 255, 255, 0.18), 
        rgba(0, 212, 255, 0.12), 
        transparent
    );
    animation: holoSweep 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes holoSweep {
    0%, 70% { left: -100%; }
    100% { left: 200%; }
}

/* 3. GLITCH ON HOVER — глитч при наведении */
header .logo:hover img {
    animation: logoGlitch 0.4s ease-in-out forwards !important;
}

@keyframes logoGlitch {
    0% { 
        transform: translate(0); 
        filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.8)); 
    }
    20% { 
        transform: translate(-3px, 2px); 
        filter: drop-shadow(3px 0 0 rgba(255, 0, 100, 0.7)) 
               drop-shadow(-3px 0 0 rgba(0, 212, 255, 0.7)); 
    }
    40% { 
        transform: translate(3px, -1px); 
        filter: drop-shadow(-2px 0 0 rgba(255, 0, 100, 0.5)) 
               drop-shadow(2px 0 0 rgba(0, 212, 255, 0.5)); 
    }
    60% { 
        transform: translate(-1px, 1px); 
        filter: drop-shadow(2px 0 0 rgba(255, 0, 100, 0.7)) 
               drop-shadow(-2px 0 0 rgba(0, 212, 255, 0.7)); 
    }
    80% { 
        transform: translate(2px, -2px); 
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.9)); 
    }
    100% { 
        transform: translate(0); 
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8)) 
               drop-shadow(0 0 40px rgba(0, 212, 255, 0.3)); 
    }
}

/* 4. NEON REFLECTION — отражение на мокром асфальте */
header .logo::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 15%;
    right: 15%;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
    animation: reflectionPulse 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes reflectionPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* 5. RATING STARS — золотое пульсирующее свечение */
header .header-rating__star {
    animation: starGlow 2.5s ease-in-out infinite !important;
    will-change: filter;
}

@keyframes starGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4)); 
    }
    50% { 
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 1)) 
               drop-shadow(0 0 20px rgba(245, 158, 11, 0.5))
               drop-shadow(0 0 35px rgba(245, 158, 11, 0.3)); 
    }
}

/* Rating score — тоже пульсирует */
header .header-rating__score {
    animation: scoreGlow 2.5s ease-in-out infinite !important;
    will-change: text-shadow;
}

@keyframes scoreGlow {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(245, 158, 11, 0.3); 
    }
    50% { 
        text-shadow: 0 0 15px rgba(245, 158, 11, 0.9), 
                     0 0 30px rgba(245, 158, 11, 0.5); 
    }
}

/* ══════════════════════════════════════════════════════════════════ */