/*
 * Біржа ↔ дизайн-система ТАТ: дошка лідів /birzha, «Мої ліди» /birzha/my-own, картка ліда, модалки (SPEC-T81, підзадача S2).
 *
 * Підключається ЛИШЕ в templates/agency.html.twig (після ds/cabinet.css).
 * Макетів сторінок немає — «за духом» сторібука https://crm.tat.ua/docs/storybook/ і робочої CRM (список добірок у Турсканері:
 * білі рядки-картки з рамкою border-default, radius, сірий підпис tertiary над значенням, кнопки brand).
 * Правила: лише токени (var(--…)) і похідні `--ds-*` з ds/base.css; кожен блок — з посиланням на сторі/компонент CRM.
 * Спільні компоненти (.ds-btn, .ds-field, .ds-badge, .ds-modal, .ds-card, .ds-link, .ds-icon-btn) — у ds/components.css;
 * тут лише розкладка картки/сторінки.
 * Довідник: docs/sdd/specs/SPEC-T81-design-system/ds-guide.md. Брейкпоінти: ≤640px — мобільний (картка у стовпчик, згортання),
 * 641–1099px — планшет (дві колонки + блок дії знизу), ≥1100px — три зони в ряд.
 */

/* ==========================================================================================================
   Верх сторінки: Telegram-підписка, «Сторінка оновиться через…», кнопка автооновлення
   Тексти — Foundation/Typography (.ds-text-secondary), посилання — Controls/Link (.ds-link), кнопка — Foundation/Icon (.ds-icon-btn).
   https://crm.tat.ua/docs/storybook/?path=/story/foundation-typography--docs
   ========================================================================================================== */
.lead-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  width: 100%;
  margin: 0 0 var(--size-16);
  text-align: left;
}

.lead-toolbar__description {
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
}

.lead-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-8) var(--size-16);
}

.lead-toolbar__telegram {
  min-width: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
  overflow-wrap: anywhere;
}

.lead-toolbar .lead-toolbar__reload {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--size-4);
  margin-left: auto;
}

.lead-toolbar .page-update {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-1-43);
  letter-spacing: normal;
  text-align: left;
}

.lead-toolbar #reboot-time {
  display: inline-block;
  min-width: var(--size-34);
  color: var(--text-primary);
  font-weight: var(--font-weight-600);
  font-variant-numeric: tabular-nums;
}

/* Автооновлення вимкнено: кнопка «натиснута» (фон bg-tertiary з .is-active) + перекреслений годинник */
.lead-toolbar .update-timer-button {
  position: relative;
}

.lead-toolbar .update-timer-button.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-2);
  height: var(--size-20);
  margin: -10px 0 0 -1px;
  border-radius: var(--radius-xs);
  background: currentColor;
  transform: rotate(45deg);
}

/* ==========================================================================================================
   Фільтри (По місту / По країні / По джерелу + очищення)
   Поле — Controls/TextField (select — як у CRM): https://crm.tat.ua/docs/storybook/?path=/story/controls-textfield--docs
   select2 4.0.x — у обгортці .ds-select2 (вигляд — components.css, ініціалізація з dropdownParent у templates/parts/reguests-filter.html.twig).
   ========================================================================================================== */
.lead-filters {
  width: 100%;
  margin: 0 0 var(--size-16);
  text-align: left;
}

.lead-filters .lead-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-12);
  margin: 0;
  padding: 0;
}

.lead-filters__field {
  position: relative; /* точка прив'язки списку select2 (dropdownParent) */
  flex: 1 1 var(--size-120);
  max-width: var(--size-220);
  min-width: 0;
}

/* Мобільний: селекти по одному в рядок, кнопка очищення — поруч із останнім */
@media (max-width: 640px) {
  .lead-filters__field {
    flex: 1 1 100%;
    max-width: none;
  }

  .lead-filters__field:nth-of-type(3) {
    flex-basis: calc(100% - var(--size-48));
  }
}

.lead-filters .filter-btn[hidden] {
  display: none;
}

.lead-filters .lead-filters__clear {
  width: var(--ds-control-height);
  height: var(--ds-control-height);
  border: var(--size-1) var(--border-solid) var(--color-border-default);
  background: var(--color-white);
}

.lead-filters .lead-filters__clear:hover,
.lead-filters .lead-filters__clear:focus {
  border-color: var(--color-neutral-300);
  background: var(--bg-secondary);
}

/* ==========================================================================================================
   Список і картка ліда — аналог Data/List («Із зображенням», «Дія праворуч»):
   https://crm.tat.ua/docs/storybook/?path=/story/data-list--docs  +  Layout/View (.ds-card)
   Контейнер .table-items-container лишається flex-колонкою: порядок карток задає inline `order` (нові ліди — першими).
   ========================================================================================================== */
/* Обгортки дошки — на всю ширину контейнера: .container-main — flex із центруванням, тож без width:100% блок
   стискається до вмісту й список лідів виходить вужчим за вкладки (помічено власником на широких екранах) */
.datagrid-header-tools,
.content-panel,
.content-panel-body,
.lead-list-wrap {
  width: 100%;
}

.lead-list.table-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
}

.lead-card.ds-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(var(--size-240), var(--size-300));
  grid-template-areas: "info client action";
  align-items: start;
  margin: 0;
  padding: var(--size-16);
  text-align: left;
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
}

.lead-card__info {
  grid-area: info;
  min-width: 0;
  padding-right: var(--size-24);
}

.lead-card__client {
  grid-area: client;
  min-width: 0;
  align-self: stretch;
  padding: 0 var(--size-24);
  border-left: var(--size-1) var(--border-solid) var(--color-border-default);
}

.lead-card__action {
  grid-area: action;
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  min-width: 0;
  align-self: stretch;
  padding-left: var(--size-24);
  border-left: var(--size-1) var(--border-solid) var(--color-border-default);
}

/* Згорнуті/розгорнуті кнопки і мініатюра — лише на мобільному */
.lead-card__more,
.lead-card__less,
.lead-card__summary {
  display: none;
}

/* Викуплена/анульована картка напівпрозора й без кліків (клас statusN додає шаблон за статусом заявки) */
.lead-card.status3,
.lead-card.status6 {
  opacity: .5;
  pointer-events: none;
}

/* --- Ліва зона: ілюстрація + параметри туру ------------------------------------------------------------ */
.lead-card__details {
  display: flex;
  align-items: flex-start;
  gap: var(--size-16);
}

.lead-card__media {
  flex: none;
  width: var(--size-174);
}

.lead-card__hero,
.lead-card__thumb {
  border-radius: var(--radius-lg);
  background-color: var(--bg-tertiary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lead-card__hero {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* Дата ліда під фото (T-81, рішення власника 2026-10-10): дрібний tertiary-текст, як підписи Data/List у сторібуку */
.lead-card__date {
  display: block;
  margin-top: var(--size-4);
  font-size: var(--font-size-12);
  line-height: var(--line-height-1-33);
  color: var(--color-text-tertiary);
  text-align: center; /* по центру під фото — і на десктопі, і в згорнутій мобільній картці */
  white-space: nowrap;
}

/* заглушка «немає фото готелю» — вектор у центрі, а не на всю площу */
.lead-card__hero[style*='blank-hotel'],
.lead-card__thumb[style*='blank-hotel'] {
  background-size: auto 60%;
}

.lead-card__params {
  flex: 1 1 auto;
  min-width: 0;
}

.lead-card__title {
  margin: 0 0 var(--size-4);
  color: var(--text-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
}

.lead-card__country {
  display: flex;
  align-items: center;
  gap: var(--size-4);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
}

.lead-card__country .country-flag,
.lead-card__summary .country-flag {
  margin-left: 0;
  vertical-align: middle;
}

.lead-card__tourscanner {
  display: inline-block;
  margin: var(--size-12) 0 0; /* окремим рядком під параметрами туру */
  font-size: var(--font-size-14);
}

/* Параметри: підпис tertiary 12px над значенням 14px (пари в сітці); відступ від заголовка/країни над ними */
.lead-card dl.lead-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-96), 1fr));
  gap: var(--size-12) var(--size-16);
  margin: var(--size-12) 0 0;
}

.lead-card .lead-param {
  min-width: 0;
  margin: 0;
}

.lead-card .lead-param dt,
.lead-card .lead-field__label {
  margin: 0 0 var(--size-2);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-1-33);
}

.lead-card .lead-param dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-1-43);
  overflow-wrap: anywhere;
}

/* --- Середня зона: клієнт ---------------------------------------------------------------------------- */
.lead-card .lead-field {
  min-width: 0;
  margin: 0 0 var(--size-12);
}

.lead-card .lead-field:last-child {
  margin-bottom: 0;
}

.lead-card .lead-field__value {
  color: var(--text-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
  overflow-wrap: anywhere;
}

.lead-card .lead-field__value--name {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
}

.lead-card .lead-field__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-4);
  margin-top: var(--size-2);
  font-size: var(--font-size-14);
}

.lead-card .lead-field__note {
  color: var(--color-text-tertiary);
}

/* Замаскований контакт у частковій картці (як було: blur 2px) */
.lead-card .lead-masked {
  display: inline-block;
  filter: blur(2px);
  user-select: none;
}

/* Місто клієнта одним рядком: «Київ (за IP визначено Кишинів)» або «Київ ✓» — підтверджено за IP (рішення власника 2026-10-10) */
.lead-card .lead-city__ip {
  color: var(--color-text-tertiary);
}

.lead-card .lead-city__ip-ok {
  display: inline-flex;
  color: var(--color-green-600);
  cursor: help;
}

.lead-card .lead-city__ip-ok svg {
  width: var(--size-16);
  height: var(--size-16);
}

/* --- Права зона: статус, ціна, ставка ---------------------------------------------------------------- */
.lead-card__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-4);
}

.lead-card .sale-price {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

.lead-card .sale-price b {
  color: var(--text-primary);
  font-weight: var(--font-weight-700);
}

/* Ціна продажу на мобільному — у згорнутій картці (показується лише ≤640px) */
.lead-card .sale-price-mobile {
  display: none;
  margin: var(--size-8) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-14);
}

.lead-card .sale-price-mobile b {
  color: var(--text-primary);
}

.lead-card__purchase {
  font-size: var(--font-size-13);
  line-height: var(--line-height-1-4);
}

.lead-card .lead-card__sum {
  color: var(--text-primary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
}

.lead-card .lead-card__number {
  margin-top: calc(var(--size-4) * -1);
  font-size: var(--font-size-12);
}

.lead-card .crm-lead-link {
  font-size: var(--font-size-14);
}

.lead-card .crm-send-error {
  max-width: 100%;
  white-space: normal;
}

/* Кнопка «Взяти в роботу за N грн» — Controls/Button brand, на всю ширину блоку.
   Ціна (span.time.price-{id}, оновлюється таймером в agency.html.twig) наслідує шрифт кнопки. */
.lead-card .lead-buy {
  margin: 0;
  padding: 0;
}

.lead-card .lead-buy__btn {
  width: 100%;
  padding: 0 var(--size-12);
}

.lead-card .lead-buy__btn .time {
  font-weight: var(--font-weight-700);
}

/* Зафіксована ціна на час модалки купівлі (span.secondary) показується з JS (board.js / agency.html.twig) */
.lead-card .lead-buy__btn .time.secondary {
  display: none;
}

.lead-card .lead-auction-info {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  font-size: var(--font-size-12);
  line-height: var(--line-height-1-33);
}

.lead-card .lead-auction-info .min-price,
.lead-card .lead-auction-info .auction-date-info {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Форма ставки: «Купити коли ціна знизиться до [___ грн] [Зробити ставку]» — Controls/TextField + Button brand-outline */
.lead-card .lead-bid__label {
  color: var(--text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-1-25);
}

.lead-card .lead-bid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--size-8);
  margin: 0;
}

.lead-card .lead-bid__row {
  display: flex;
  align-items: center;
  gap: var(--size-8);
}

.lead-card .lead-bid__input {
  position: relative;
  flex: 0 0 var(--size-120);
}

html.theme-tat .lead-card .lead-bid__input .ds-field__input {
  padding-right: var(--size-40);
  -moz-appearance: textfield;
}

.lead-card .lead-bid__currency {
  position: absolute;
  top: 50%;
  right: var(--size-12);
  margin-top: -9px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-14);
  line-height: var(--size-18);
  pointer-events: none;
}

.lead-card .lead-bid__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--size-8);
}

/* Помилка валідації ставки: .form_error (клас — хук JS) + .ds-field__error */
.lead-card .form_error {
  margin: 0;
}

.lead-card .form_error:empty {
  display: none;
}

.lead-card .lead-bid__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4) var(--size-8);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-14);
}

.lead-card .min-bid {
  margin: 0;
  font-size: var(--font-size-12);
}

/* --- Запит на повернення (повна картка покупця) — Data/StatusBadge + Controls/Button -------------------- */
.lead-card .return-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-8);
  margin: 0;
  padding: var(--size-12);
  border: var(--size-1) var(--border-solid) var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  font-size: var(--font-size-14);
}

.lead-card .return-box__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
}

/* Чіп статусу повернення: .ds-badge (колір — .ds-badge--info/warning/success/danger) */
.lead-card .return-chip.ds-badge {
  padding: 0 var(--size-8);
  border-radius: var(--radius-md);
  font-size: var(--font-size-12);
  line-height: var(--line-height-1);
}


.lead-card .return-box__note,
.lead-card .return-box__label {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-12);
}

.lead-card .return-box__answer {
  margin: 0;
  font-size: var(--font-size-14);
}

.lead-card .return-box .btn-add-evidence {
  margin: 0;
}

/* ==========================================================================================================
   Мобільний ≤640px: картка у стовпчик, згорнутий вигляд (мініатюра 80×60 + назва + короткий рядок) і «Детальніше»/«Згорнути».
   Блок дії (ціна, кнопка, ставка) лишається видимим і на всю ширину — як у попередній версії.
   ========================================================================================================== */
@media (max-width: 640px) {
  .lead-card.ds-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "client"
      "action";
    row-gap: var(--size-12);
    padding: var(--size-12);
  }

  .lead-card__info {
    padding-right: 0;
  }

  .lead-card__client,
  .lead-card__action {
    padding: var(--size-12) 0 0;
    border-top: var(--size-1) var(--border-solid) var(--color-border-default);
    border-left: 0;
  }

  .lead-card__summary {
    display: flex;
    align-items: center;
    gap: var(--size-12);
  }

  .lead-card__thumb-col {
    flex: none;
    width: calc(var(--size-40) * 2); /* 80×60 — мініатюра, як у переліку продуктів CRM; під нею дата */
  }

  .lead-card__thumb {
    width: 100%;
    height: var(--size-60);
  }


  .lead-card__summary-text {
    min-width: 0;
  }

  .lead-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-4);
    color: var(--text-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-1-25);
  }

  .lead-card__name .country-flag {
    margin-left: 0;
  }

  .lead-card__brief {
    margin-top: var(--size-2);
    font-size: var(--font-size-13);
    line-height: var(--line-height-1-33);
  }

  .lead-card__brief .country-flag {
    margin: 0 var(--size-2);
    vertical-align: middle;
  }

  .lead-card__media,
  .lead-card__title { /* заголовок ліда на мобільному — поруч із мініатюрою (.lead-card__name), у деталях не дублюємо */
    display: none;
  }

  .lead-card__details {
    margin-top: var(--size-12);
  }

  .lead-card__more,
  .lead-card__less {
    margin-left: calc(var(--size-12) * -1); /* ghost-кнопка: текст вирівнюється по лівому краю картки */
  }

  .lead-card__more {
    display: inline-flex;
    margin-top: var(--size-8);
  }

  .lead-card .sale-price-mobile {
    display: block;
  }

  /* Згорнуто: ховаємо деталі, клієнта й коротку інформацію; на розгорнутій — короткий рядок зайвий */
  .lead-card:not(.is-expanded) .lead-card__details,
  .lead-card:not(.is-expanded) .lead-card__client,
  .lead-card:not(.is-expanded) .lead-card__status--sold {
    display: none;
  }

  .lead-card.is-expanded .lead-card__brief,
  .lead-card.is-expanded .lead-card__more {
    display: none;
  }

  .lead-card.is-expanded .lead-card__less {
    display: inline-flex;
    justify-self: start;
  }

  /* викуплений лід не розгортається: на дошці лише рядок «Викуплений, ціна продажу…» */
  .lead-card.status3 .lead-card__action {
    display: none;
  }

  .lead-card--full .lead-card__action {
    padding-top: var(--size-12);
  }

  .lead-card .lead-bid__input {
    flex-basis: var(--size-100);
  }
}

/* ==========================================================================================================
   Планшет 641–1099px: ліворуч лід на всю висоту, праворуч — клієнт, під ним блок дії
   ========================================================================================================== */
@media (min-width: 641px) and (max-width: 1099px) {
  .lead-card.ds-card {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      "info client"
      "info action";
    row-gap: var(--size-16);
  }

  .lead-card__client {
    align-self: start;
    padding-right: 0;
  }

  .lead-card__action {
    align-self: start;
    padding: var(--size-16) 0 0 var(--size-24);
    border-top: var(--size-1) var(--border-solid) var(--color-border-default);
    border-left: 0;
  }

  .lead-card__media {
    width: var(--size-120);
  }
}

/* ==========================================================================================================
   Модалки: купівля (#modal-buy, 432) і запит на повернення (#modal-return, 640)
   DS: Overlays/Modal + Backdrop — https://crm.tat.ua/docs/storybook/?path=/story/overlays-modal--docs (.ds-modal у components.css).
   Тут — лише вміст: текст, повідомлення, правила повернення, поля форми й список файлів.
   ========================================================================================================== */
html.lead-modal-open {
  overflow: hidden;
}

.lead-modal .ds-modal__title {
  color: var(--text-primary);
}

.lead-modal .ds-modal__body {
  text-align: left;
}

.lead-modal .lead-modal__text {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
}

.lead-modal #modal-price {
  display: inline;
  min-width: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.lead-modal .message-text {
  margin-top: var(--size-12);
  font-size: var(--font-size-14);
}

.lead-modal .message-text[hidden] {
  display: none;
}

/* Правила повернення — відкритий блок без згортання, звичайний текст 14px основним кольором (рішення власника 2026-10-10) */
.lead-modal .help-for-refund {
  margin: 0 0 var(--size-16);
  padding: var(--size-12) var(--size-16);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  line-height: var(--line-height-1-43);
}

.lead-modal .help-for-refund__heading {
  margin-bottom: var(--size-4);
  font-weight: var(--font-weight-600);
}

.lead-modal .help-for-refund ol {
  margin: var(--size-8) 0 0 var(--size-20);
  padding: 0;
}

.lead-modal .help-for-refund li {
  margin-bottom: var(--size-6);
}

/* Підписи полів форми повернення («Що сталося», «Докази») — звичайним чорним шрифтом, як основний текст */
.lead-modal .return-form .ds-field__label {
  color: var(--text-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
}

/* Форма повернення (фрагмент form/form.html.twig) */
.lead-modal .return-form .ds-field {
  margin-bottom: var(--size-16);
}

.lead-modal .return-evidence-request {
  margin-bottom: var(--size-16);
  padding: var(--size-12);
  border: var(--size-1) var(--border-solid) var(--color-yellow-700);
  border-radius: var(--radius-lg);
  background: var(--color-yellow-50);
  font-size: var(--font-size-14);
}

.lead-modal .return-form .ds-field__error:empty {
  display: none;
}

.lead-modal .return-files-error {
  margin: var(--size-6) 0;
  color: var(--color-danger);
  font-size: var(--font-size-13);
}

.lead-modal .return-files__list {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  margin-top: var(--size-8);
}

.lead-modal .return-file {
  display: flex;
  align-items: center;
  gap: var(--size-8);
  min-width: 0;
}

.lead-modal .return-file__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-14);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-modal .return-file__name:empty {
  display: none;
}

.lead-modal .return-file__remove {
  order: 2;
  flex: none;
}

.lead-modal .return-files-limit {
  margin-top: var(--size-8);
}

.lead-modal .return-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--size-8);
}

.lead-modal .return-form__done {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
}

@media (max-width: 480px) {
  .lead-modal .return-form__actions > .ds-btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================================================
   Пагінація (KnpPaginator, parts/pagination.html.twig): кнопки сторінок — .ds-btn--white --small, активна — --brand
   https://crm.tat.ua/docs/storybook/?path=/story/controls-button--docs
   ========================================================================================================== */
.lead-pagination.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  margin: var(--size-16) 0 0;
}

.lead-pagination .ds-btn {
  display: inline-flex;
  width: auto;
  min-width: var(--size-32);
  height: var(--size-32);
  margin: 0;
  padding: 0 var(--size-8);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-14);
  line-height: var(--line-height-1);
}

.lead-pagination .ds-btn.current {
  width: auto;
  height: var(--size-32);
  margin: 0;
  padding: 0 var(--size-8);
  border: var(--size-1) var(--border-solid) var(--color-main);
  background: var(--color-main);
  color: var(--btn-color-2);
  font-size: var(--font-size-14);
  cursor: default;
}

.lead-pagination .ds-btn--square {
  width: var(--size-32);
  padding: 0;
}

.lead-pagination .lead-pagination__prev svg {
  transform: rotate(180deg);
}

.lead-pagination .lead-pagination__gap {
  color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
  .lead-pagination .lead-pagination__num,
  .lead-pagination .lead-pagination__gap {
    display: none;
  }
}