/* ---------------------------------------------------------------------------
 * launchstart.ru — выравнивание формы обратной связи
 * FeedbackForm.tsx -> <DialogContent className="feedback-dialog …">
 *
 * ПРИЧИНА
 * Базовый DialogContent из shadcn/ui центрируется утилитами Tailwind
 * `translate-x-[-50%] translate-y-[-50%]`. В Tailwind CSS v4 (в сборке сайта —
 * v4.1.14) эти утилиты задают отдельное CSS-свойство `translate`, а не
 * `transform`:
 *
 *     .translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}
 *     .translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}
 *
 * Кастомные правила `.feedback-dialog` переопределяют только `transform`.
 * `transform` и `translate` — независимые свойства, браузер применяет оба и
 * складывает сдвиги:
 *
 *   Десктоп (>=640px): inset:50% auto auto 50%
 *                      + transform:translate(-50%)translateY(-50%)
 *                      + translate:-50% -50%
 *                      = сдвиг на 100% ширины и высоты вместо 50%.
 *                      Форма уезжает влево-вверх, шапка уходит за экран.
 *
 *   Мобильные (<640px): inset:auto 0 0!important и transform:none!important
 *                      применяются, но translate:-50% -50% остаётся.
 *                      Нижний шит шириной 100% уезжает на пол-экрана влево
 *                      и на половину своей высоты вверх.
 *
 * РЕШЕНИЕ
 * Центрировать ровно одним механизмом — свойством `translate`, как и задумано
 * в shadcn/ui на Tailwind v4, а `transform` оставить свободным: его использует
 * анимация открытия `data-[state=open]:zoom-in-95`.
 *
 * Селектор `[data-slot='dialog-content'].feedback-dialog` специфичнее исходного
 * `.feedback-dialog`, поэтому правила ниже перекрывают его независимо от порядка
 * в файле. `!important` стоит только на `translate`; на `transform` его ставить
 * нельзя — important-объявление перебивает CSS-анимацию и убьёт зум при открытии.
 *
 * ПРИМЕНЕНИЕ
 * Вариант A (без пересборки): положить файл в корень сайта и подключить в
 * index.html после основного CSS:
 *     <link rel="stylesheet" href="/form-position-fix.css" />
 * Вариант B: дописать эти правила в конец собранного assets/index-*.css
 *     (см. scripts/patch-bundle.mjs и scripts/apply-fix.sh).
 * ------------------------------------------------------------------------- */

@media (max-width: 639px) {
  /* Нижний шит: прижат к низу, во всю ширину, без сдвигов. */
  [data-slot='dialog-content'].feedback-dialog {
    translate: none !important;
    transform: none;
  }
}

@media (min-width: 640px) {
  /* Десктоп: центрирование только через `translate`. */
  [data-slot='dialog-content'].feedback-dialog {
    inset: 50% auto auto 50%;
    translate: -50% -50% !important;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Четыре тарифа в секции #pricing.
 * На <640px карточки остаются в мобильной карусели (одна видимая).
 * С 640px бандл включает sm:grid-cols-2 (два столбца).
 * С 1280px — четыре карточки в ряд. Утилиты xl:grid-cols-4 в сборке нет,
 * поэтому колонки задаются здесь, без фиксированной высоты карточек.
 * ------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #pricing .pricing-carousel.mobile-carousel,
  #pricing .pricing-carousel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Мобильное меню шапки: непрозрачная панель на весь экран под хедером,
 * чтобы не просвечивал hero и его вторая кнопка CTA.
 * Панель есть в DOM только когда меню открыто (см. SiteHeader.tsx).
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Шапка с backdrop-filter создаёт containing block: position:fixed
     у панели не выходит за пределы хедера. Поэтому непрозрачно
     растягиваем сам header на весь экран, пока меню открыто. */
  header:has(.mobile-nav-panel) {
    bottom: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    background: #05060c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  header .mobile-nav-panel {
    min-height: calc(100dvh - 88px);
    padding-bottom: 6rem;
    background: #05060c !important;
  }

  body:has(header .mobile-nav-panel) {
    overflow: hidden;
  }
}

/* ---------------------------------------------------------------------------
 * MobileDetails.tsx: кнопка «Продолжение» только для узкого экрана
 * (`sm:hidden`). Кастомный CSS задаёт .mobile-details-trigger { display:flex }
 * позже Tailwind и снова показывает её на десктопе в FAQ, Passport и др.
 * На ≥640px контент уже раскрыт через matchMedia — прячем триггер.
 * ------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .mobile-details-trigger {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * audience=business: горизонтальная карусель тарифов.
 * Стили только под html.audience-business, остальные версии не меняются.
 * ------------------------------------------------------------------------- */
html.audience-business #pricing {
  overflow-x: clip;
  scroll-margin-top: 5.5rem;
}

html.audience-business [data-business-anchor] {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

html.audience-business #prices {
  scroll-margin-top: 5.5rem;
}

html.audience-business #pricing .container {
  position: relative;
}

html.audience-business #pricing .business-pricing-nav,
html.audience-business #pricing .pricing-carousel,
html.audience-business #pricing .pricing-carousel.mobile-carousel {
  width: min(100%, var(--biz-track-w, 1280px));
  max-width: var(--biz-track-w, 1280px);
  margin-left: auto;
  margin-right: auto;
}

html.audience-business #pricing .pricing-carousel p:empty {
  display: none;
}

html.audience-business .business-pricing-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0.35rem 0 0;
}

html.audience-business .business-pricing-nav button {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0c1018;
  color: #c4b5fd;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

html.audience-business .business-pricing-nav button svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

html.audience-business .business-pricing-nav button:hover:not(:disabled) {
  border-color: rgba(129, 140, 248, 0.55);
  background: #12182a;
  box-shadow: 0 0 22px -8px rgba(79, 43, 255, 0.75);
}

html.audience-business .business-pricing-nav button:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

html.audience-business .business-pricing-nav button:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

html.audience-business #pricing .pricing-carousel,
html.audience-business #pricing .pricing-carousel.mobile-carousel {
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  align-items: stretch !important;
  gap: 22px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.audience-business #pricing .pricing-carousel::-webkit-scrollbar,
html.audience-business #pricing .pricing-carousel.mobile-carousel::-webkit-scrollbar {
  display: none;
}

html.audience-business #pricing [id^="pricing-plan-"] {
  flex: 0 0 var(--biz-card-w, 360px);
  width: var(--biz-card-w, 360px);
  max-width: var(--biz-card-w, 360px);
  min-width: 320px;
  height: auto !important;
  align-self: stretch;
  scroll-snap-align: start;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

html.audience-business #pricing .mobile-carousel-meta,
html.audience-business #pricing .mobile-carousel-dots {
  display: none !important;
}

html.audience-business #pricing [id^="pricing-plan-"] h3,
html.audience-business #pricing [id^="pricing-plan-"] p {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

html.audience-business #pricing [id^="pricing-plan-"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(79, 43, 255, 0.7);
}

@media (min-width: 1280px) {
  html.audience-business #pricing {
    --biz-card-w: 360px;
    --biz-track-w: 1200px;
  }
}

@media (min-width: 1440px) {
  html.audience-business #pricing {
    --biz-card-w: 372px;
    --biz-track-w: 1220px;
  }
}

@media (max-width: 1279px) {
  html.audience-business #pricing {
    --biz-card-w: 340px;
  }
}

@media (max-width: 639px) {
  html.audience-business #pricing {
    --biz-card-w: calc(100vw - 48px);
  }

  html.audience-business #pricing [id^="pricing-plan-"] {
    min-width: 0;
  }

  html.audience-business .business-pricing-nav button {
    width: 40px;
    height: 40px;
  }
}

/* ---------------------------------------------------------------------------
 * audience=business: финальный CTA — синее словосочетание «на основе данных».
 * --------------------------------------------------------------------------- */
html.audience-business #contact h2 [data-loc="client/src/components/sections/FinalCta.tsx:21"] {
  color: #4f2bff;
}

@media (min-width: 640px) {
  html.audience-business #contact h2 [data-loc="client/src/components/sections/FinalCta.tsx:21"] {
    white-space: nowrap;
  }
}

html.audience-business #pricing-plan-biz_express li,
html.audience-business #pricing-plan-biz_express [data-loc*="Pricing"] li {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ---------------------------------------------------------------------------
 * audience=business: упрощённый footer — логотип, подпись, «Связаться с нами».
 * Общий SiteFooter остаётся для остальных audience.
 * --------------------------------------------------------------------------- */
html.audience-business footer.business-footer .container,
html.audience-business footer .container {
  padding-top: 4.5rem;
  padding-bottom: 2.75rem;
}

html.audience-business footer .container > .grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: start;
  justify-items: stretch;
  gap: 2rem 3rem;
}

html.audience-business footer .container > .grid > :not(:first-child):not(:last-child),
html.audience-business footer .container > .grid > .business-footer-hide,
html.audience-business footer .container > .business-footer-hide,
html.audience-business footer .container > .grid ~ * {
  display: none !important;
}

html.audience-business footer .container > .grid > :first-child,
html.audience-business footer .business-footer-brand {
  grid-column: 1;
  justify-self: start;
  max-width: 320px;
}

html.audience-business footer .container > .grid > :last-child,
html.audience-business footer .business-footer-contact {
  grid-column: 2;
  justify-self: center;
}

html.audience-business footer [hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  html.audience-business footer .container {
    padding-top: 3.25rem;
    padding-bottom: 2.25rem;
  }

  html.audience-business footer .container > .grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 1.75rem;
  }

  html.audience-business footer .container > .grid > :first-child,
  html.audience-business footer .business-footer-brand,
  html.audience-business footer .container > .grid > :last-child,
  html.audience-business footer .business-footer-contact {
    grid-column: auto;
    justify-self: center;
    max-width: 22rem;
  }

  html.audience-business footer .container > .grid > :first-child .flex {
    justify-content: center;
  }

  html.audience-business footer .container > .grid > :last-child ul,
  html.audience-business footer .container > .grid > :last-child [class*="flex"] {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Прямой заход без ?audience=: gateway из трёх карточек.
 * Стили только под html.audience-default, остальные версии не меняются.
 * ------------------------------------------------------------------------- */
html.audience-default .mobile-quick-nav,
html.audience-default header button[aria-label*="корзин" i],
html.audience-default header button[aria-label*="Корзина"],
html.audience-default header button[aria-label*="корзину"] {
  display: none !important;
}

/* Desktop: «Контакты» уезжает из левой навигации и встаёт перед CTA. */
@media (min-width: 1024px) {
  html.audience-default header .container > nav {
    margin-left: auto !important;
    margin-right: 0;
  }

  html.audience-default header .container > .ml-auto {
    margin-left: 0 !important;
  }

  html.audience-default header nav button,
  html.audience-default header nav a {
    color: #c7cbd8;
    font-weight: 500;
    line-height: 1;
  }
}

html.audience-default #pricing {
  padding-top: 7.25rem;
  padding-bottom: 4.5rem;
}

html.audience-default #pricing .container {
  max-width: 1180px;
}

html.audience-default #pricing .pricing-carousel,
html.audience-default #pricing .pricing-carousel.mobile-carousel {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  width: 100% !important;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible !important;
  transform: none !important;
  scroll-snap-type: none !important;
  touch-action: auto;
}

html.audience-default #pricing .mobile-carousel-meta,
html.audience-default #pricing .mobile-carousel-dots,
html.audience-default #pricing .business-pricing-nav,
html.audience-default #pricing .panel.reveal.mt-8 {
  display: none !important;
}

html.audience-default #pricing [id^="pricing-plan-"] {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

html.audience-default #pricing [id^="pricing-plan-"]:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, 0.55) !important;
  box-shadow:
    0 22px 48px -28px rgba(79, 43, 255, 0.75),
    0 0 0 1px rgba(139, 92, 246, 0.28),
    0 0 36px -16px rgba(56, 189, 248, 0.45);
}

html.audience-default #pricing [id^="pricing-plan-"] p:empty,
html.audience-default #pricing [id^="pricing-plan-"] .text-\[17px\].text-\[\#a7adbe\],
html.audience-default #pricing [id^="pricing-plan-"] .mt-4.text-\[14px\] {
  display: none !important;
}

html.audience-default #pricing [id^="pricing-plan-"] > div:has(a[href*="audience"]) {
  margin-top: auto;
  width: 100%;
}

html.audience-default #pricing [id^="pricing-plan-"] a[href*="audience"] {
  width: 100%;
  justify-content: center;
}

html.audience-default footer > .pointer-events-none.absolute {
  height: 168px !important;
  opacity: 0.22 !important;
}

html.audience-default footer.gateway-footer .container,
html.audience-default footer .container {
  padding-top: 5rem !important;
  padding-bottom: 3.75rem !important;
}

html.audience-default footer .container > .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.44fr) minmax(0, 0.18fr);
  align-items: start;
  justify-items: start;
  text-align: left;
  gap: 2.5rem 3rem;
}

html.audience-default footer .container > .grid > :not(:first-child):not(.gateway-footer-contact),
html.audience-default footer .container > .grid > .gateway-footer-hide,
html.audience-default footer .container > .gateway-footer-hide,
html.audience-default footer .container > .grid ~ * {
  display: none !important;
}

html.audience-default footer .container > .grid > :first-child,
html.audience-default footer .gateway-footer-brand {
  grid-column: 1;
  justify-self: start;
  max-width: 22rem;
  text-align: left;
}

html.audience-default footer .gateway-footer-brand > p {
  margin-top: 2rem !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #8b90a1 !important;
}

html.audience-default footer .container > .grid > .gateway-footer-contact,
html.audience-default footer .gateway-footer-contact {
  grid-column: 2;
  justify-self: start;
  max-width: 26rem;
  text-align: left;
}

html.audience-default footer .gateway-footer-contact h3 {
  margin-bottom: 0;
}

html.audience-default footer .gateway-footer-contact h3 + ul,
html.audience-default footer .gateway-footer-contact ul {
  margin-top: 2.125rem !important;
  gap: 1.625rem !important;
}

html.audience-default footer .gateway-footer-contact li {
  gap: 0.75rem !important;
}

html.audience-default footer .gateway-footer-contact li:last-child {
  padding-top: 0.55rem !important;
}

html.audience-default footer .gateway-footer-contact li:last-child > p {
  margin-bottom: 0.9rem !important;
}

html.audience-default footer .container > .grid > :first-child .flex,
html.audience-default footer .gateway-footer-brand .flex,
html.audience-default footer .gateway-footer-contact ul,
html.audience-default footer .gateway-footer-contact [class*="flex"] {
  justify-content: flex-start;
}

html.audience-default footer [hidden] {
  display: none !important;
}

@media (max-width: 1023px) {
  html.audience-default footer.gateway-footer .container,
  html.audience-default footer .container {
    padding-top: 3.75rem !important;
    padding-bottom: 3rem !important;
  }

  html.audience-default footer .container > .grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }

  html.audience-default footer .container > .grid > :first-child,
  html.audience-default footer .gateway-footer-brand,
  html.audience-default footer .container > .grid > .gateway-footer-contact,
  html.audience-default footer .gateway-footer-contact {
    grid-column: auto;
    justify-self: center;
    max-width: 22rem;
    text-align: center;
  }

  html.audience-default footer .gateway-footer-brand > p {
    margin-top: 1.5rem !important;
  }

  html.audience-default footer .container > .grid > :first-child .flex,
  html.audience-default footer .gateway-footer-brand .flex,
  html.audience-default footer .gateway-footer-contact ul,
  html.audience-default footer .gateway-footer-contact [class*="flex"] {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  html.audience-default #pricing {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  html.audience-default #pricing .pricing-carousel,
  html.audience-default #pricing .pricing-carousel.mobile-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) and (min-width: 640px) {
  html.audience-default #pricing .pricing-carousel,
  html.audience-default #pricing .pricing-carousel.mobile-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.audience-default #pricing [id^="pricing-plan-"]:nth-child(3) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc((100% - 22px) / 2);
    justify-self: center;
  }
}

@media (max-width: 639px) {
  html.audience-default #pricing {
    padding-top: 6.5rem;
    padding-bottom: 3rem;
  }

  html.audience-default #pricing .pricing-carousel,
  html.audience-default #pricing .pricing-carousel.mobile-carousel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
  }

  html.audience-default #pricing [id^="pricing-plan-"] {
    padding: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
 * audience=startup / product_team: скрыть колонку «Компания» и
 * перераспределить footer. Классы разные, чтобы не задеть другие audience.
 * ------------------------------------------------------------------------- */
html.audience-startup footer.startup-footer .startup-footer-hide,
html.audience-startup footer .startup-footer-hide,
html.audience-startup footer [hidden],
html.audience-product_team footer.product-team-footer .product-team-footer-hide,
html.audience-product_team footer .product-team-footer-hide,
html.audience-product_team footer [hidden] {
  display: none !important;
}

html.audience-startup [data-startup-anchor] {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

html.audience-startup #pricing,
html.audience-startup #prices,
html.audience-startup #idea-check {
  scroll-margin-top: 5.5rem;
}

html.audience-product_team [data-product-team-anchor] {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

html.audience-product_team #pricing,
html.audience-product_team #prices,
html.audience-product_team #passport,
html.audience-product_team #product-discovery {
  scroll-margin-top: 5.5rem;
}

html.audience-startup #pricing-plan-idea h3,
html.audience-product_team #pricing-plan-idea h3 {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 1024px) {
  /* После скрытия «Компания» остаются 4 видимых ребёнка: бренд, Продукт,
     Поддержка, контакты. Бренд не должен занимать две колонки — иначе справа
     остаётся пустой трек. Три колонки: бренд | Продукт | Поддержка; контакты
     встают под брендом (как в исходном 5-колоночном футере). */
  html.audience-startup footer.startup-footer .container > .grid,
  html.audience-product_team footer.product-team-footer .container > .grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 0.85fr) !important;
    gap: 2.5rem 3.5rem;
  }
  html.audience-startup footer.startup-footer .container > .grid > :first-child,
  html.audience-product_team footer.product-team-footer .container > .grid > :first-child {
    grid-column: 1;
  }
}