/* ==========================================================================
Видеонаблюдение — popup-videosurveillance.css (Full-screen 1080×1920 + отступы)
Инкапсуляция стилей: всё под #popup-videosurveillance
Палитра выровнена с основной страницей (тёмный фон, белые границы, красные акценты)
Без вертикальной прокрутки, контент умещается в 100vh, добавлены внешние отступы.
========================================================================== */

/* [0a] Видимость: по умолчанию скрыт, показывается только с .active */
#popup-videosurveillance{ display:none; }
#popup-videosurveillance.active{ display:block; }

#popup-videosurveillance.popup{
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden; /* без прокрутки */
}

/* [1] Локальные переменные */
#popup-videosurveillance {
  --vs-bg: #2a2a2a;
  --vs-panel: #242424;
  --vs-text: #ffffff;
  --vs-muted: #cccccc;
  --vs-border: rgba(255,255,255,0.35);
  --vs-accent: #ff0000;
  --vs-accent-hover: #cc0000;
  --vs-radius-lg: 10px;
  --vs-radius-md: 6px;
  --vs-gutter: 12px;
  --vs-header-h: 140px;
  --vs-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* [2a] Оверлей для клика вне попапа */
#popup-videosurveillance .vs__overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: pointer;
}

/* [2b] Основной контент фрейм */
#popup-videosurveillance .popup-content{
  pointer-events: auto;
}

#popup-videosurveillance .vs__frame{
  position: fixed;
  top: 20px; right: 20px; bottom: 20px; left: 20px;
  background: var(--vs-bg);
  color: var(--vs-text);
  border: 2px solid var(--vs-border);
  border-radius: 12px;
  box-shadow: var(--vs-shadow);
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  pointer-events: auto;
}

/* [2c] Кнопка закрытия */
#popup-videosurveillance .vs__close{
  position: fixed;
  top: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--vs-accent);
  color: var(--vs-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  pointer-events: auto;
}

#popup-videosurveillance .vs__close:hover{
  background: var(--vs-accent-hover);
}

/* [3] Структура контента */
#popup-videosurveillance .vs__header{
  flex: 0 0 var(--vs-header-h);
  display: grid;
  align-content: center;
  gap: 6px;
  padding-right: 60px;
}

#popup-videosurveillance .vs__title{
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

#popup-videosurveillance .vs__subtitle{
  font-size: 14px;
  color: var(--vs-muted);
  margin: 0;
}

#popup-videosurveillance .vs__bullets{
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--vs-muted);
}

#popup-videosurveillance .vs__bullets li{
  margin-left: 18px;
}

#popup-videosurveillance .vs__bullets li:before{
  content: "✓";
  position: absolute;
  margin-left: -18px;
  color: var(--vs-accent);
}

#popup-videosurveillance .vs__main{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  overflow: hidden;
  min-height: 0;
}

#popup-videosurveillance .vs__section{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#popup-videosurveillance .vs__section-title{
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--vs-text);
}

#popup-videosurveillance .vs__row{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--vs-gutter);
  min-height: 0;
  flex: 1 1 auto;
}

#popup-videosurveillance .vs__kits{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: var(--vs-gutter);
  min-height: 0;
}

/* [4] Kit cards */
#popup-videosurveillance .vs-kit{
  background: var(--vs-panel);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#popup-videosurveillance .vs-kit__img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
    border: 3px solid var(--vs-accent);
  border-radius: var(--vs-radius-md);
  box-sizing: border-box;
  display: block;
}

#popup-videosurveillance .vs-kit__body{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

#popup-videosurveillance .vs-kit__title{
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--vs-text);
}

#popup-videosurveillance .vs-kit__list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--vs-muted);
  gap: 4px;
  display: flex;
  flex-direction: column;
}

#popup-videosurveillance .vs-kit__list li{
  line-height: 1.3;
}

#popup-videosurveillance .vs-kit__meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

#popup-videosurveillance .vs-kit__price{
  font-size: 14px;
  font-weight: 600;
  color: var(--vs-accent);
}

#popup-videosurveillance .vs-kit__price span{
  font-size: 12px;
  color: var(--vs-muted);
}

/* [5] Buttons */
#popup-videosurveillance .vs-btn{
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: var(--vs-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: transparent;
  color: var(--vs-text);
  border: 1px solid var(--vs-border);
}

#popup-videosurveillance .vs-btn:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

#popup-videosurveillance .vs-btn--accent{
  background: var(--vs-accent);
  color: var(--vs-text);
  border: none;
}

#popup-videosurveillance .vs-btn--accent:hover{
  background: var(--vs-accent-hover);
}

/* [6] Aside panel */
#popup-videosurveillance .vs__aside{
  background: var(--vs-panel);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

#popup-videosurveillance .vs-aside__title{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--vs-text);
}

#popup-videosurveillance .vs-aside__list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--vs-muted);
  gap: 8px;
  display: flex;
  flex-direction: column;
}

#popup-videosurveillance .vs-aside__list li{
  line-height: 1.3;
}

#popup-videosurveillance .vs-aside__cta{
  margin-top: auto;
}


/* [3a] Скрываем шапку по ТЗ */
#popup-videosurveillance .vs__header{display:none;}

#popup-videosurveillance .vs__section-title{text-align:center;}

#popup-videosurveillance .vs__row{grid-template-columns: 4fr 1fr;}

#popup-videosurveillance .vs__kits{grid-template-rows: repeat(3, 1fr);}
#popup-videosurveillance .vs__kits.vs__kits--wireless{grid-template-rows: repeat(2, 1fr);}
#popup-videosurveillance .vs__kits, #popup-videosurveillance .vs__kits.vs__kits--wireless{min-height:0;}

/* [4a] Горизонтальные карточки комплектов */
#popup-videosurveillance .vs-kit--horizontal{
  display: grid;
  grid-template-columns: 38% 1fr;
  min-height: 180px;
}
#popup-videosurveillance .vs-kit--horizontal .vs-kit__img{
  height: 100%;
  object-fit: fill;
}
#popup-videosurveillance .vs-kit--horizontal .vs-kit__content{
  display:flex;
  flex-direction: column;
  min-width:0;
}
/* Тело и мета остаются, но мета в одну линию (цена слева, кнопки справа) */
#popup-videosurveillance .vs-kit__meta{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content: space-around;
  gap: 12px;
}
#popup-videosurveillance .vs-kit__buttons{ display:flex; gap: 8px; }

#popup-videosurveillance .vs__aside{height: 100%;}

/* [6a] Правый столбец — блоки преимуществ для беспроводных */
#popup-videosurveillance .vs__features{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--vs-gutter);
}
#popup-videosurveillance .vs-feature{
  background-color: var(--vs-panel);    /* ← Используйте background-color вместо background */
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("components/popups/videosurveillance/fon2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;

}
#popup-videosurveillance .vs-feature__title{
  font-size: 19px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  color: var(--vs-text);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);  /* ← Текст видно на фоне */
  position: relative;
  z-index: 1;    
}

#popup-videosurveillance .vs-kit__title{font-size:30px;}

#popup-videosurveillance .vs-kit__list{font-size:13px;}

#popup-videosurveillance .vs-kit__price{font-size:16px;}

#popup-videosurveillance .vs-kit__body{padding: 12px 12px 0 12px;}

/* [layout override] ужимаем правую колонку еще сильнее */
@media (min-width: 900px){
  #popup-videosurveillance .vs__row{
    grid-template-columns: 4fr 1fr !important;
  }
}

/* [Typography bump per task] */
#popup-videosurveillance .vs__section-title{font-size:35px;}

#popup-videosurveillance .vs-kit__title{font-size:35px;}
#popup-videosurveillance .vs-kit__list{font-size:14px;}
#popup-videosurveillance .vs-kit__desc{font-size:20px; color: var(--vs-muted); margin: 6px 0 0 0;}

#popup-videosurveillance .vs-aside__title{font-size:16px;}
#popup-videosurveillance .vs-aside__list{font-size:13px;}

#popup-videosurveillance .vs__callwrap{
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}
#popup-videosurveillance .vs-callbtn{
  display:inline-flex;
  align-items:center;
  gap:40px;
  background: var(--vs-accent);
  color: var(--vs-text);
  border: 2px solid #ffffff;
  border-radius: var(--vs-radius-lg);
  padding: 12px 80px;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
}
#popup-videosurveillance .vs-callbtn__icon{
  display:inline-flex;
}
#popup-videosurveillance .vs-callbtn:hover{
  background: var(--vs-accent-hover);
}

#popup-videosurveillance .vs-kit__meta{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
}
#popup-videosurveillance .vs-kit__buttons{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
#popup-videosurveillance .vs-kit__buttons .vs-btn{
  width: 180px;
}

#popup-videosurveillance .vs-aside__list li{
  display:flex;
  flex-direction: column;
  gap: 6px;
}


/* Восстанавливаем горизонтальные кнопки в проводных решениях */
#popup-videosurveillance .vs-kit__meta{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-around;
  gap: 12px;
}
#popup-videosurveillance .vs-kit__buttons{
  display:flex;
  flex-direction: row;
  gap: 8px;
}
#popup-videosurveillance .vs-kit__buttons .vs-btn{
  width:auto;
}

/* Изображения в блоке преимуществ */
#popup-videosurveillance .vs-aside__list li{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap:8px;
}
#popup-videosurveillance .vs-aside__img{
  width:55px;
  height:auto;
  opacity:0.9;
}

/* === Adjustments per latest request === */

/* Center and enlarge images in vs__aside; make aside white with red border and dark text */
#popup-videosurveillance .vs__aside{
  background: #ffffff;
  border: 2px solid var(--vs-accent);
  color: var(--vs-bg);
  align-items: center;
  text-align: center;
}
#popup-videosurveillance .vs-aside__item{ position: relative; display:flex; flex-direction: column; align-items:center; }
#popup-videosurveillance .vs-tip{
  position: absolute;
  top: calc(100% + 8px); /* мобильное / узкое: ниже блока */
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #000000;
  border: 3px solid var(--vs-accent);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  padding: 16px 20px 18px 20px;
  width: min(480px, 90vw);
  z-index: 12050; /* выше фрейма и оверлея */
  display: none;
  text-align: left;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
#popup-videosurveillance .vs-tip--open{
  display:block;
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Desktop reposition: show tip LEFT of trigger ===== */
@media (min-width: 900px){
  #popup-videosurveillance .vs-aside__item[data-tip]{
    position: relative;
  }
  #popup-videosurveillance .vs-aside__item[data-tip]:not(.vs-aside__item--calc) .vs-tip{
    top: 50%;
    left: auto;
    right: calc(100% + 18px);
    transform: translateY(-50%);
    width: 420px;
  }
  #popup-videosurveillance .vs-aside__item[data-tip]:not(.vs-aside__item--calc) .vs-tip--open{
    transform: translateY(-50%);
  }
  #popup-videosurveillance .vs-aside__item[data-tip]:not(.vs-aside__item--calc) .vs-tip:before{
    content:'';
    position:absolute;
    top:50%;
    left:100%;
    transform:translateY(-50%);
    width:0; height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:14px solid #ffffff; /* цвет фона плашки */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  #popup-videosurveillance .vs-aside__item[data-tip]:not(.vs-aside__item--calc) .vs-tip--open:before{opacity:1;}
}
#popup-videosurveillance .vs-tip__close{
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--vs-accent);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#popup-videosurveillance .vs-tip__content{
  font-size: 16px;
  color: #000000;
  line-height: 1.45;
  padding-right: 22px; /* под кнопку */
}
#popup-videosurveillance .vs__aside .vs-kit__desc{
  color: var(--vs-bg);
  font-size: 21px;
  margin: 4px 0 12px 0;
  font-weight: 600;
}
#popup-videosurveillance .vs__aside .vs-aside__img{
  width: 80px;
  height: auto;
  opacity: 1;
  margin: 2px auto 6px auto;
  display: block;
}
/* Make the cost note smaller (last paragraph inside aside) */
#popup-videosurveillance .vs__aside p:last-of-type{
  font-size: 20px;
  opacity: 0.85;
  margin-top: 6px;
  font-style: italic;
}

/* Center kit titles above description */
#popup-videosurveillance .vs-kit__title{
  text-align: center;
  margin-bottom: 4px;
}

/* Bigger price and buttons */
#popup-videosurveillance .vs-kit__price{
  font-size: 27px;
}
#popup-videosurveillance .vs-btn{
  height: 42px;
  padding: 0 16px;
  font-size: 18px;
  border-width: 2px;
}

/* Background images for feature blocks */
#popup-videosurveillance .vs-feature{
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#popup-videosurveillance .vs-feature__title{
  position: relative;
  z-index: 1;
}

/* Make section titles a bit larger for emphasis */
#popup-videosurveillance .vs__section-title{
  font-size: 36px;
}

/* === Robust feature background via <img> layer to avoid background conflicts === */
#popup-videosurveillance .vs-feature{
  position: relative;
  overflow: hidden;
}
#popup-videosurveillance .vs-feature__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#popup-videosurveillance .vs-feature__title{
  position: relative;
  z-index: 1;
}
/* Neutralize any background from earlier rules if present */
#popup-videosurveillance .vs-feature{
  background: none;
}

/* === Correct badge positioning relative to horizontal kit === */
#popup-videosurveillance .vs-kit--horizontal {
  position: relative;
  overflow: visible; /* чтобы бейдж не обрезался */
}

#popup-videosurveillance .vs-kit__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

#popup-videosurveillance .vs-kit__badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#popup-videosurveillance .vs-kit__badge span {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--vs-accent);
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}