/* =============================================================
   CSS-анимированные баннеры для catalogvn.ru
   Использует FontAwesome (уже подключён в шаблоне)
============================================================= */

/* Обёртка одиночного баннера (cn_ad_show.php) */
.cn-ad-img-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}
.cn-ad-img-wrap img,
.cn-ad-img-wrap video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

/* Когда зона содержит живой слайдер — убираем плейсхолдер-декор */
.cn-ad-zone:has(.cn-ad-slider) {
  background: transparent;
  border: 0 !important;
  padding: 0 !important;
  text-transform: none;
  margin-bottom: 26px; /* резерв под .cn-ad-dots (bottom: -18px) + воздух */
}
/* Fallback для браузеров без :has() (Firefox <=120, старые Safari) */
.cn-ad-zone.cn-ad-has-slider {
  background: transparent;
  border: 0 !important;
  padding: 0 !important;
  text-transform: none;
  margin-bottom: 26px;
}

/* Слайдер баннеров (cn_ad_slider.php) - fade-переключение */
.cn-ad-slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
}
/* Верхний баннер (в зоне cn-ad-banner) — горизонтальный leaderboard 1000×100 */
.cn-ad-banner .cn-ad-slider {
  max-width: 1000px;
  aspect-ratio: 1000 / 100;
}
/* Вертикальный (в зоне cn-ad-side) */
.cn-ad-side .cn-ad-slider {
  max-width: 280px;
  aspect-ratio: 280 / 340;
}
/* Квадратный (в зоне cn-ad-side-sq) — оффер-баннеры B-GS */
.cn-ad-side-sq .cn-ad-slider {
  max-width: 280px;
  aspect-ratio: 280 / 200;
}
/* Средний (в зоне cn-ad-mid) — для будущего */
.cn-ad-mid .cn-ad-slider {
  max-width: 680px;
  aspect-ratio: 680 / 90;
}

/* === Мобильная адаптация — менее агрессивный aspect-ratio на узких экранах === */
@media (max-width: 700px) {
  /* Верхний баннер: 10:1 слишком "пилюля" на мобиле, делаем 5:1 (выше) */
  .cn-ad-banner .cn-ad-slider { aspect-ratio: 5 / 1; }
  /* Средний баннер: чуть выше */
  .cn-ad-mid .cn-ad-slider { aspect-ratio: 6 / 1; }
}
@media (max-width: 480px) {
  .cn-ad-banner .cn-ad-slider { aspect-ratio: 4 / 1; }
  .cn-ad-mid .cn-ad-slider { aspect-ratio: 5 / 1; }
}
.cn-ad-slider .cn-ad-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  line-height: 0;
}
.cn-ad-slider .cn-ad-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.cn-ad-slider .cn-ad-slide img,
.cn-ad-slider .cn-ad-slide video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.cn-ad-slider .cn-ad-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* HTML-баннеры (iframe, Three.js/CSS анимация) */
.cn-ad-slide-html {
  cursor: pointer;
}
.cn-ad-slide-html .cn-ad-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #040914;
}
.cn-ad-dots {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
  font-size: 0;
  line-height: 0;
}
.cn-ad-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(212, 175, 55, .35);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
  border: 0;
  padding: 0;
}
.cn-ad-dot:hover {
  background: rgba(212, 175, 55, .65);
}
.cn-ad-dot.is-active {
  background: #D4AF37;
  transform: scale(1.3);
}


/* Контейнер баннера */
.cn-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 470px;
  height: 62px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.cn-banner:hover {
  box-shadow: 0 4px 14px rgba(212, 175, 55, .35);
  transform: translateY(-1px);
}

/* Левая золотая полоска */
.cn-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #D4AF37, #B8941F);
}

/* Иконка слева */
.cn-banner__ico {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #D4AF37;
  font-size: 22px;
  animation: cnAdGlow 2.4s ease-in-out infinite;
}
@keyframes cnAdGlow {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(212,175,55,.55)); }
}

/* Текстовый блок */
.cn-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px 4px 4px;
  min-width: 0;
}
.cn-banner__title {
  font-size: 14px;
  font-weight: 700;
  color: #1A3A5F;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-banner__sub {
  font-size: 11px;
  color: #5A6473;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 2px;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кнопка CTA справа */
.cn-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  padding: 6px 12px;
  background: #D4AF37;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  animation: cnAdPulse 2.2s ease-in-out infinite;
}
.cn-banner__cta::after {
  /* Бегущий блик */
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  animation: cnAdShine 3.2s ease-in-out infinite;
}
@keyframes cnAdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}
@keyframes cnAdShine {
  0%   { left: -60%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}

/* Слайдер */
.cn-banner-slider {
  position: relative;
  width: 470px;
  height: 62px;
}
.cn-banner-slider .cn-banner {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
.cn-banner-slider .cn-banner.is-active {
  opacity: 1;
  visibility: visible;
}

/* Индикаторы (точки) */
.cn-banner-dots {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}
.cn-banner-dots span {
  width: 6px; height: 6px;
  background: #D4AF37; opacity: .35;
  border-radius: 50%;
  transition: opacity .3s, transform .3s;
  cursor: pointer;
}
.cn-banner-dots span.is-active {
  opacity: 1;
  transform: scale(1.4);
}

/* Адаптив - сжимается для узких контейнеров */
@media (max-width: 500px) {
  .cn-banner, .cn-banner-slider { width: 100%; }
  .cn-banner__title { font-size: 13px; }
  .cn-banner__cta   { padding: 5px 9px; font-size: 10px; }
}