/* Premium theme A — подключать ПОСЛЕДНИМ */
:root{
  --bg:#0B0F14;
  --surface:#0F172A;
  --surface2:#111827;
  --text:#E5E7EB;
  --muted:#9CA3AF;
  --border:rgba(255,255,255,.10);
  --accent:#2F80FF;
  --accentHover:#1C6FE8;
}

/* Убираем белый фон и чёрный текст */
html, body{ background:var(--bg); color:var(--text); }
p{ color:var(--muted); }

/* Критично: перебиваем ваш финальный a,a:hover {color:#000} */
a{ color:var(--accent) !important; text-decoration:none !important; }
a:hover{ color:var(--accentHover) !important; text-decoration:none !important; }

/* Шапка */
nav{
  background: rgba(17,24,39,.75) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.logo h2{ color:var(--text) !important; }
.logo h2 span{ color:var(--accent) !important; }
.menu-top a{ color:var(--text) !important; }
.menu-top a:hover{ background: rgba(47,128,255,.14) !important; color:var(--text) !important; }
.top-tel a{ color:var(--text) !important; }
.top-tel p{ color:var(--muted) !important; }

/* Главный экран: затемнение картинки (чтобы выглядело “дороже” и читалось) */
.main{ position:relative; color:var(--text) !important; }
.main::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.55));
  pointer-events:none;
}
.main > .container, .main > .container-fluid{ position:relative; z-index:1; }
.main h1 span{ color:var(--accent) !important; }

/* Секции */
.digitals, .zakaz{
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.92)) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.zakaz h2, .contacts h2{ color:var(--text) !important; }
.zakaz p{ color:var(--muted) !important; }

/* Инпуты */
.zakaz input, .zakaz textarea, .contacts textarea, .lab-wrp input{
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.lab-wrp span{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
}

/* Кнопки: убираем жёлтый/красный градиент → делаем единый акцент */
.zakaz button, .contacts button, .form-cupon button, .popup button{
  background: linear-gradient(180deg, var(--accent), #2563EB) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.zakaz button:hover, .contacts button:hover, .form-cupon button:hover, .popup button:hover{
  background: linear-gradient(180deg, var(--accentHover), #1D4ED8) !important;
}

/* Footer */
footer{
  background: rgba(17,24,39,.92) !important;
  border-top: 1px solid var(--border);
  color: var(--muted) !important;
}
footer a{ color: var(--muted) !important; }
footer a:hover{ color: var(--text) !important; }

/* Карта */
#map{ border-top: 3px solid var(--accent) !important; }

/* Ваши спец-правила контактов */
#contacts a:hover{ color: var(--accentHover) !important; text-decoration: none !important; }
/* #contacts a{ color: var(--accent) !important; text-decoration: underline !important; } */
#contacts a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    animation: pulse-color 2s ease-in-out infinite;
}

@keyframes pulse-color {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* ============================================
   Блок ORDER (табы + контент) 
   ============================================ */

/* Убираем старый двухцветный градиент, делаем единую премиальную поверхность */
.order{
  background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.96)) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Список табов слева: убираем серый фон, делаем тёмный */
.order-items{ padding-left:0 !important; }
.order-items a{
  color: var(--muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s ease;
}
.order-items a:hover{
  color: var(--text) !important;
  background: rgba(47,128,255,.06) !important;
}

/* Активный таб: делаем акцентным, но без "яркого синего" */
.order-items .active a{
  background: rgba(47,128,255,.14) !important;
  color: var(--text) !important;
  border-left: 3px solid var(--accent);
}
.order-items .active a::before{
  /* убираем старый "треугольник" — он был для синего фона */
  content: none !important;
  border: none !important;
}

/* Правая колонка (контент): убираем светло-серый фон */
.blue-section{
  background: rgba(15,23,42,.70) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.blue-section .list-it > li{
  color: var(--text) !important;
  border-bottom: 1px dotted var(--border) !important;
}
.blue-section .list-it > li span,
.blue-section .list-it > li > ul{
  color: var(--muted) !important;
}
.blue-section p{
  color: var(--muted) !important;
}

/* Звёздочки и фото тоже чуть подтягиваем */
.stars li{ border-bottom: none !important; }
.photo-z{
  background: radial-gradient(ellipse, rgba(17,24,39,.85), rgba(11,15,20,.92) 67%) !important;
}
.ramka{
  /* рамка у вас с PNG-картинкой, оставляем */
}
/* ============================================
   POPUP (всплывающая форма)
   ============================================ */

/* Фон попапа: делаем графитовым (был светло-серый #f0f0f0) */
.popup{
  background: var(--surface2) !important;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.65);
}

/* Заголовок попапа */
.popup h2{
  color: var(--text) !important;
  font: 45px OpenSansExtraBold, sans-serif;
}

/* Параграфы/подписи */
.popup form p{
  color: var(--muted) !important;
  font-size: 13px;
}

/* Инпуты: тёмные, аккуратные */
.popup input{
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.popup input::placeholder{
  color: rgba(229,231,235,.40) !important;
}

/* Инпуты в связке с иконками (.lab-wrp) */
.popup .lab-wrp input{
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-left: none !important; /* чтобы не было двойной границы с иконкой */
  border-radius: 0 8px 8px 0 !important;
}
.popup .lab-wrp span{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
}

/* Иконки внутри span: делаем видимыми (путь SVG заливаем светлым) */
.popup .lab-wrp svg path{
  fill: var(--muted) !important;
}

/* Фокус на инпуте */
.popup input:focus{
  border-color: rgba(47,128,255,.65) !important;
  box-shadow: 0 0 0 3px rgba(47,128,255,.14) !important;
  outline: none !important;
}
.popup .lab-wrp input:focus{
  border-left: none !important; /* оставляем без границы слева при фокусе */
}
.popup .lab-wrp input:focus + span{
  background: rgba(47,128,255,.10) !important;
  border-color: rgba(47,128,255,.40) !important;
}
.popup .lab-wrp input:focus + span path{
  fill: var(--accent) !important; /* иконка становится акцентной при фокусе */
}

/* Кнопка попапа */
.popup button{
  background: linear-gradient(180deg, var(--accent), #2563EB) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.popup button:hover{
  background: linear-gradient(180deg, var(--accentHover), #1D4ED8) !important;
}

/* Кнопка закрытия (крестик) */
.close_btn{
  background: var(--surface2) !important;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.40);
}
.close_btn img{
  /* если иконка крестика тёмная — можно инвертировать */
  filter: invert(1) brightness(0.9);
}

/* Затемнение фона под попапом */
.hiden{
  background: rgba(0,0,0,.75) !important; /* было 0.5, делаем плотнее для премиальности */
}