/* ═══════════════════════════════════════════════════════════════════════
   ELSA Tweaks — ускорение анимаций + фиксы layout
   Подключается ПОСЛЕ основного CSS electrosila.ru
   Приоритет через !important чтобы перебить Lovable-стили
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. УСКОРЕНИЕ ВСЕХ АНИМАЦИЙ ──────────────────────────────────────── */
/* Все transitions в 2× быстрее (по умолчанию 0.3s → 0.15s) */
*, *::before, *::after {
  transition-duration: 0.15s !important;
  transition-delay: 0s !important;
}

/* Все scroll-reveal / fade-in / slide-up — мгновенно (≤ 0.25s) */
*, *::before, *::after {
  animation-duration: 0.25s !important;
  animation-delay: 0s !important;
}

/* ── 2. УДАЛЕНИЕ "ПОЛОСЫ ОСЦИЛЛОГРАФА" ────────────────────────────────── */
/* Lovable часто использует эти классы для waveform-эффектов */
.waveform, .wave, .oscilloscope, .oscillograph,
.equlaizer, .bars, .signal-bars, .chart-line,
canvas[aria-label*="wave" i], canvas[aria-label*="signal" i],
svg[aria-label*="wave" i], svg[aria-label*="signal" i] {
  display: none !important;
}

/* ── 3. СПЕЦИФИКАЦИЯ — фикс растянутых таблиц ─────────────────────────── */
/* Таблицы получают фиксированный layout, колонки делятся равномерно */
table {
  table-layout: fixed !important;
  width: 100% !important;
}
table th, table td {
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  vertical-align: top !important;
  padding: 8px 12px !important;
}

/* Типичные селекторы таблиц в Lovable */
[class*="specification"] table,
[class*="specs"] table,
section table {
  table-layout: fixed !important;
}

/* ── 4. SVG-картинки (станция могла быть inline SVG) ──────────────────── */
/* Если раньше крутилось — отключаю spin и делаю статичным */
[class*="rotate"], [class*="spin"], [class*="rotating"] {
  animation: none !important;
  transform: none !important;
}

/* ── 5. КОНТЕЙНЕРЫ — не растягиваются за пределы 1400px на 4K ─────────── */
.container, [class*="container"], main, section {
  max-width: min(1400px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 6. HERO / большие блоки — фиксированная высота для предотвращения странного поведения ── */
[class*="hero"] {
  min-height: auto !important;
  max-height: none !important;
}

/* ── 7. HEADER (на случай если плавающая кнопка перекрывает) ──────────── */
.header {
  z-index: 100 !important;
}

/* ── 8. КОНТЕНТ ВНУТРИ СТЕКЛЯННОЙ КНОПКИ (если пересекается с формой) ─ */
#elsa-lead-btn {
  z-index: 9999 !important;
}
# ═══════════════════════════════════════════════════════════════════════
# КНОПКА "ОТПРАВИТЬ ЗАПРОС" — бирюзовый фон + белый текст
# (вместо белого фона + primary текста)
# Применяется к:
#  - шапка (desktop nav): .bg-white.text-primary
#  - CTA блок "Отправить запрос"
# Бирюзовый = #0d47a0 (accent в теме)
# ═══════════════════════════════════════════════════════════════════════

/* Кнопки с bg-white text-primary → бирюзовые.
   Исключаем ссылки/контейнеры с <img> внутри — это ссылка-логотип в шапке,
   белая картинка на синем фоне делает её блеклой/невидимой.
   Добавлено 2026-08-15: фикс «бледного логотипа в шапке». */
button.bg-white.text-primary:not(:has(img)),
a.bg-white.text-primary:not(:has(img)),
[class*="bg-white"][class*="text-primary"]:not(:has(img)) {
  background-color: #0d47a0 !important;
  color: #ffffff !important;
  border: none !important;
}

button.bg-white.text-primary:not(:has(img)):hover,
a.bg-white.text-primary:not(:has(img)):hover,
[class*="bg-white"][class*="text-primary"]:not(:has(img)):hover {
  background-color: #0a3580 !important;
  color: #ffffff !important;
}

/* Hover для bg-white/90 → тоже бирюзовый */
.hover\:bg-white\/90:hover,
[class*="hover:bg-white/90"]:hover {
  background-color: #0a3580 !important;
  color: #ffffff !important;
}

/* Секция логотипа удалена 2026-08-15 — откат по запросу юзера. */

/* ── 10. ЛОГОТИП ШАПКИ — фикс инвертированной opacity (15.08.2026) ────── */
/* Bundle ставит style.opacity неправильно. elsa-header-fix.js переключает
   класс, CSS ниже перебивает inline style через !important. */
header span.header-logo--visible {
  opacity: 1 !important;
}
header span.header-logo--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Плавный переход между состояниями */
header span[style*="filter" i] {
  transition: opacity 0.15s ease-out !important;
}

/* ── 10. ЛОГОТИП ШАПКИ — фикс инвертированной opacity (15.08.2026) ────── */
/* Bundle ставит style.opacity неправильно. elsa-header-fix.js переключает
   класс, CSS ниже перебивает inline style через !important. */
span.header-logo--visible {
  opacity: 1 !important;
}
span.header-logo--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Плавный переход между состояниями */
span[style*="filter" i]:has(img[src*="electrosila-logo" i]) {
  transition: opacity 0.15s ease-out !important;
}

/* ── 11. HERO LOGO PILL — пилюля флеш с левым краем viewport ─────────── */
/* По запросу юзера 2026-08-21 13:34: «просто притяни левый край пилюли к
   левому краю страницы и сохрани соотношение и положение надписи внутри
   пилюли таким же по отношению к пилюле».

   Контейнер #photo-hero НЕ трогаем — остаётся при max-w из правила 5
   (min(1400px,100vw)). Ширина пилюли = col-span-7 этого контейнера,
   текст «ЭЛЕКТРОСИЛА» (pl-12=48px от левого края пилюли, max-w-[500px])
   сохраняет свою относительную позицию и размер — как в оригинале.

   Override только сдвигает пилюлю к x=0 viewport (без него источник
   тащит пилюлю на -((vw-1280)/2+80); для vw≥1400 это константа -92px,
   Э обрезается overflow-hidden секции #photo-hero):
   - vw < 1400px: container = vw, content_left = 48 → margin = -48px
   - vw ≥ 1400px: container = 1400, content_left = (vw-1400)/2+48 →
     margin = -((vw-1400)/2+48) = (1280-vw)/2 + 12px */
#hero-logo-pill {
  margin-left: -48px !important;
}

@media (min-width: 1400px) {
  #hero-logo-pill {
    margin-left: calc((1280px - 100vw) / 2 + 12px) !important;
  }
}

/* ── 12. HERO LOGO PILL — сдвиг надписи ещё на ~одну букву вправо ─────── */
/* По запросу юзера 2026-08-21 13:49. Источник даёт pl-12 = 3rem = 48px.
   Wordmark 1920×263 на lg рендерится 500×~68px; «ЭЛЕКТРОСИЛА» = 10 букв,
   средняя ширина ~50px, но «Э» пошире (квадратная). Добавляем +4rem
   (=64px ≈ одна широкая буква), итого pl-12+4rem = 7rem = 112px.
   Скоупим в lg+ чтобы на мобилке не сломать уменьшенный pl-[calc(...)].
   «Если что вернём» — удалить эту секцию целиком. */
@media (min-width: 1024px) {
  #hero-logo-pill {
    padding-left: 7rem !important;
  }
}

/* ── 13. HEADER NAV ACTIVE — белая «формочка» тогглера как в Tabs ──────── */
/* Bug 21.08.2026 16:11: «Электрические зарядные станции» (и «Контакты»)
   в шапке не подсвечиваются белой «формочкой» при клике, как это делает
   <Tabs> из StationsFullSection.tsx для «Продукция / Калькулятор».

   Две причины (см. memory/21-08-2026.md):
   A) Navigation.tsx:107 manual active считается только для type="link",
      scroll-type items (станции, контакты) никогда не получают active=true.
      → Fix в source (source rebuild). Не делаю — прошлый билд сломал фото.
   B) elsa-tweaks.css секция 9 перекрашивает ВСЕ button.bg-white.text-primary
      в cyan — это нужно для CTA «Отправить запрос» (он last-child), но
      убивает визуал активных nav-кнопок (тоже имеют эти классы когда
      active=true). Решение тут:
      1. Override для nav-кнопок (NOT last-child = NOT CTA):
         active = белый «формочка» на тёмном pill
      2. :focus для мгновенной обратной связи при клике:
         - scroll-type: focus остаётся после клика → «формочка» сохраняется
         - link-type: focus теряется при navigate, но Fix 1 подхватит
           через React-state className
         - CTA: на focus станет белой. Юзер явно видит клик. OK.

   Сравнение с Tabs из StationsFullSection.tsx:99:
   Там Tailwind data-[state=active]:bg-white через атрибут, не класс — и
   section 9 его НЕ задевает. Здесь у нас section 9 уже применена, и
   единственный безопасный путь без source rebuild — override через
   :not(:last-child) (отделяем CTA) + :focus (мгновенный feedback). */

/* 13.1 — desktop pill (xl+) nav buttons, NOT last-child (исключаем CTA) */
header [class*="bg-primary"] > button.bg-white.text-primary:not(:last-child) {
  background-color: #ffffff !important;
  color: #013F7C !important;
}

/* 13.2 — mobile/tablet menu nav buttons, NOT last-child (исключаем CTA) */
div.bg-white\/30 button.bg-white.text-primary:not(:last-child) {
  background-color: #ffffff !important;
  color: #013F7C !important;
}

/* 13.3 — :focus даёт мгновенную обратную связь (для scroll-type и как
   подстраховка для всех nav-кнопок). Применяется и к CTA — на ней
   click → белая «формочка», как визуальное подтверждение. */
header [class*="bg-primary"] > button:focus,
div.bg-white\/30 button:focus {
  background-color: #ffffff !important;
  color: #013F7C !important;
}