/* =========================================================
   PREMIUM LIGHT THEME (Вариант B) — для VW
   Светлая премиум‑тема: строгая, солидная, "автомобильная"
   ========================================================= */

:root{
  --bg: #F6F7F9;              /* фон страницы */
  --surface: #FFFFFF;          /* карточки/поверхности */
  --text: #0B1220;             /* заголовки */
  --textBody: #111827;         /* основной текст */
  --muted: #6B7280;            /* вторичный текст */
  --border: #E5E7EB;           /* границы */
  --accent: #0B3D91;           /* глубокий синий акцент */
  --accentHover: #072E6D;
  --accentLight: #EBF5FF;      /* фон под акцентные элементы */
}

/* Глобально */
html, body{
  background: var(--bg) !important;
  color: var(--textBody) !important;
}
h1, h2, h3{ color: var(--text) !important; }
p{ color: var(--muted) !important; }

/* Убираем конфликт с чёрными ссылками в конце style.min.css */
a{ color: var(--accent) !important; text-decoration: none !important; }
a:hover{ color: var(--accentHover) !important; text-decoration: none !important; }

/* === ШАПКА === */
nav{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.logo h2{ color: var(--text) !important; }
.logo h2 span{ color: var(--accent) !important; }
.menu-top a{ color: var(--textBody) !important; }
.menu-top a:hover{ 
  background: var(--accentLight) !important; 
  color: var(--accent) !important; 
}
.top-tel a{ color: var(--textBody) !important; }
.top-tel p{ color: var(--muted) !important; }

/* === ГЛАВНЫЙ ЭКРАН === */
.main{
  position: relative;
  color: var(--text) !important;
  background-blend-mode: overlay;
}
.main::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(246,247,249,.85), rgba(235,245,255,.70));
  pointer-events: none;
}
.main > .container, .main > .container-fluid{
  position: relative;
  z-index: 1;
}
.main h1{ color: var(--text) !important; }
.main h1 span{ color: var(--accent) !important; }
.main h4{ color: var(--muted) !important; }

/* === СЕКЦИИ === */
.like, .why, .contacts{
  background: var(--bg) !important;
  color: var(--textBody) !important;
}
.like h3, .why h3{ color: var(--text) !important; }
.like h3 span, .why h3 span{ color: var(--accent) !important; }

/* Блок с "цифрами" (был ярко-синий #6ba5ed) */
.digitals{
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.digitals p{ color: var(--textBody) !important; }
.digitals p span{ color: var(--accent) !important; font-weight: bold; }

/* === ФОРМЫ === */
.zakaz{
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.zakaz h2{ color: var(--text) !important; }
.zakaz p{ color: var(--muted) !important; }

/* Инпуты */
.zakaz input, .zakaz textarea, .contacts textarea, .lab-wrp input{
  background: var(--surface) !important;
  color: var(--textBody) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.zakaz input::placeholder, .zakaz textarea::placeholder, .contacts textarea::placeholder{
  color: var(--muted) !important;
  opacity: 0.65;
}

/* Инпуты с иконками */
.lab-wrp span{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
}
.lab-wrp svg path{
  fill: var(--muted) !important;
}

/* Фокус */
.lab-wrp input:focus, .zakaz input:focus, .zakaz textarea:focus, .contacts textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accentLight) !important;
  outline: none !important;
}
.lab-wrp input:focus + span{
  background: var(--accentLight) !important;
  border-color: var(--accent) !important;
}
.lab-wrp input:focus + span path{
  fill: var(--accent) !important;
}

/* === КНОПКИ === */
.zakaz button, .contacts button, .form-cupon button, .popup button{
  background: linear-gradient(180deg, var(--accent), var(--accentHover)) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(11,61,145,.20);
  transition: all 0.2s ease;
}
.zakaz button:hover, .contacts button:hover, .form-cupon button:hover, .popup button:hover{
  background: linear-gradient(180deg, var(--accentHover), #05224F) !important;
  box-shadow: 0 4px 12px rgba(11,61,145,.30);
}

/* === БЛОК ORDER (табы) === */
.order{
  background: var(--surface) !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);
}
.order-items a:hover{
  color: var(--accent) !important;
  background: var(--accentLight) !important;
}
.order-items .active a{
  background: var(--accentLight) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent);
  font-weight: 600;
}
.order-items .active a::before{
  content: none !important;
}

/* Правая колонка (контент) */
.blue-section{
  background: var(--surface) !important;
  color: var(--textBody) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.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: linear-gradient(135deg, var(--accentLight), var(--surface)) !important;
}

/* === POPUP === */
.popup{
  background: var(--surface) !important;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.popup h2{ color: var(--text) !important; }
.popup form p{ color: var(--muted) !important; }
.popup input{
  background: var(--surface) !important;
  color: var(--textBody) !important;
  border: 1px solid var(--border) !important;
}
.popup .lab-wrp input{
  border-left: none !important;
}
.popup .lab-wrp span{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
}
.popup .lab-wrp svg path{
  fill: var(--muted) !important;
}
.popup input:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accentLight) !important;
}
.popup .lab-wrp input:focus + span{
  background: var(--accentLight) !important;
  border-color: var(--accent) !important;
}
.popup .lab-wrp input:focus + span path{
  fill: var(--accent) !important;
}
.close_btn{
  background: var(--surface) !important;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Затемнение фона под попапом */
.hiden{
  background: rgba(0,0,0,.40) !important;
}

/* === FOOTER === */
footer{
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
  color: var(--muted) !important;
}
footer a{ color: var(--muted) !important; }
footer a:hover{ color: var(--accent) !important; }

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

/* Специальные ссылки в контактах с эффектом мигания */
#contacts a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    animation: pulse-color 2s ease-in-out infinite;
}
#contacts a:hover{ 
    color: var(--accentHover) !important; 
    text-decoration: none !important; 
}

/* Анимация мигания (пульсация прозрачности) */
@keyframes pulse-color {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* === ДОПОЛНИТЕЛЬНО === */
.why h3{
  background: var(--surface) !important;
  border: 1px solid var(--border);
}
.five-items span{
  background: var(--accentLight) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-weight: 600;
}
.cupon{
  background: var(--surface) !important;
  border-top: 1px solid var(--border);
}
.form-cupon h2{ color: var(--text) !important; }
.form-cupon input{
  background: var(--surface) !important;
  color: var(--textBody) !important;
  border: 1px solid var(--border) !important;
}
.contacts address span{ color: var(--accent) !important; }