/* Хром общих компонентов: попап заявки, кнопка "наверх", переключатель темы.

   Здесь нет собственной палитры. Всё берётся из токенов страницы, которая этот
   файл подключила, с запасным значением на случай, если токен не объявлен.
   Поэтому попап в светлой теме светлый, в тёмной тёмный - без единой строчки
   в самом файле темы.

   Форма внутри попапа намеренно использует те же классы (.form, .field, .btn),
   что и форма в секции контактов: она наследует оформление страницы целиком. */

/* ================= Попап ================= */
.ui-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  width: 100%;
  overflow: visible;
  color: var(--text, #14161A);
}
.ui-dialog::backdrop {
  background: rgba(8, 9, 11, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ui-dialog__panel {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line, #E3E6EA);
  border-radius: var(--r-card, 14px);
  background: var(--bg, #FFFFFF);
  box-shadow: 0 24px 64px rgba(8, 9, 11, .34);
}
/* Заголовок формы стоит первой строкой панели, а кнопка закрытия висит в её
   правом верхнем углу: держим под неё место, иначе на узком экране первая
   строка заголовка уезжает под крестик. Раньше это делал .ui-dialog__head. */
.ui-dialog--lead .form__title { padding-right: 40px; }
.ui-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--muted, #5A6472);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
.ui-dialog__close:hover { color: var(--text, #14161A); border-color: var(--line-2, #CFD4DB); }

/* Появление попапа. Только opacity и transform, длительность ниже 300ms,
   ease-out на входе. При prefers-reduced-motion анимации нет. */
@media (prefers-reduced-motion: no-preference) {
  .ui-dialog[open] .ui-dialog__panel {
    animation: ui-dialog-in .22s cubic-bezier(.16, 1, .3, 1);
  }
  .ui-dialog[open]::backdrop { animation: ui-backdrop-in .22s ease-out; }
}
@keyframes ui-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ui-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Страница под открытым попапом не прокручивается. */
.ui-dialog-open { overflow: hidden; }

/* Форма в попапе занимает всю ширину панели: двухколоночная раскладка варианта
   на 560px читается тесно. */
.ui-dialog--lead .form {
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
@media (min-width: 520px) {
  .ui-dialog--lead .form { grid-template-columns: 1fr 1fr; }
  .ui-dialog--lead .form .field--full { grid-column: 1 / -1; }
}

/* Скрипт прячет панель карусели атрибутом hidden, когда листать нечего
   (три товара помещаются в три колонки). Правило .has-js .carousel__bar
   с display:flex перебивало hidden по специфичности, и мёртвая панель
   оставалась на экране. Этот файл подключается последним, поэтому побеждает. */
.carousel__bar[hidden] { display: none; }

/* Кнопка отправки и строка статуса всегда во всю ширину формы.
   Правило живёт здесь, а не в каждом варианте: это контракт формы, а не
   дизайнерское решение. В вариантах кнопка занимала одну колонку из двух
   и выглядела как половина - замерено, не на глаз. */
[data-lead-form] > [type="submit"],
[data-lead-form] > .form__status { grid-column: 1 / -1; }

/* ================= Плавающие кнопки =================
   Кнопка "наверх" и переключатель темы стоят друг над другом в одной
   колонке с зазором, а не в одной точке: перекрыть друг друга они не могут. */
.ui-dock {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 60;
  display: flex;
  flex-direction: column;   /* "наверх" сверху, переключатель в самом углу */
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;             /* кликается только сама кнопка */
}
.ui-dock__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2, #CFD4DB);
  border-radius: var(--r-pill, 999px);
  background: var(--bg, #FFFFFF);
  color: var(--text, #14161A);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(8, 9, 11, .12), 0 10px 28px rgba(8, 9, 11, .16);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              border-color .2s var(--ease, ease), background-color .2s var(--ease, ease);
}
.ui-dock__btn i { font-size: 1.15rem; }
.ui-dock__btn:hover { transform: translateY(-2px); border-color: var(--accent, #FF9800); }
.ui-dock__btn:active { transform: translateY(0); }
.ui-dock__btn[hidden] { display: none; }
.ui-dock__btn--accent {
  background: var(--accent, #FF9800);
  border-color: var(--accent, #FF9800);
  color: var(--on-accent, #1A1000);
}
.ui-dock__btn--accent:hover { border-color: var(--accent, #FF9800); }
.ui-top, .ui-theme { width: 46px; padding: 0; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ui-dock__btn, /* Заголовок формы стоит первой строкой панели, а кнопка закрытия висит в её
   правом верхнем углу: держим под неё место, иначе на узком экране первая
   строка заголовка уезжает под крестик. Раньше это делал .ui-dialog__head. */
.ui-dialog--lead .form__title { padding-right: 40px; }
.ui-dialog__close { transition: none; }
  .ui-dock__btn:hover { transform: none; }
}