/* Кнопки и контролы шапки раздела «Новостройки Батуми». Один источник на весь раздел.

   До 27.08 цветов главного действия было три, независимых друг от друга:
   --bt-primary (#C99A5B) на карточке проекта, --gold-dk (#E2553C, красно-коралловый)
   на листинге и зашитый #E8850C в шапке и подвале. Плюс три высоты контролов в одной
   строке шапки: 32 у языка, 30 у темы, 38 у заявки.

   Теперь всё считается от токенов ниже. Тема меняет только подложку и контраст,
   цвет бренда в обеих темах один. */

:root {
  /* ── действие ─────────────────────────────────────────────────────── */
  /* Бренд WSE. Одинаков в тёмной и светлой теме: меняется фон вокруг, не сам цвет. */
  --btn-primary-bg:     #E8850C;
  --btn-primary-hover:  #D47A09;
  /* 🔴 Текст на оранжевом почти чёрный, а не белый: белый даёт контраст 2,7
     и не проходит WCAG AA, чёрный даёт 6,7. Решение Арама 27.08. */
  --btn-primary-text:   #14161A;

  --btn-secondary-bg:   transparent;
  --btn-secondary-text: var(--bt-text, #16181D);
  --btn-secondary-line: var(--bt-line-2, rgba(0, 0, 0, .18));
  --btn-secondary-hover-line: var(--btn-primary-bg);

  --btn-ghost-text:     var(--bt-text-2, #4A4A4D);
  --btn-ghost-hover:    var(--bt-text, #16181D);

  --btn-disabled-bg:    rgba(0, 0, 0, .05);
  --btn-disabled-text:  var(--bt-text-3, #8B898B);

  /* ── геометрия ────────────────────────────────────────────────────── */
  --btn-radius:   999px;          /* пилюля везде, решение Арама 27.08 */
  --control-h:    34px;           /* одна высота на всю группу шапки */
  --control-gap:   8px;
  --control-icon: 16px;
}

:root[data-theme="dark"] {
  --btn-secondary-text: var(--bt-text, #F1F1F1);
  --btn-secondary-line: var(--bt-line-2, rgba(255, 255, 255, .16));
  --btn-disabled-bg:    rgba(255, 255, 255, .06);
}

/* ══ группа контролов шапки ══════════════════════════════════════════ */

.bt-ctls {
  display: flex; align-items: center; gap: var(--control-gap);
  margin-left: auto;
}

/* общая основа: одна высота, одна геометрия, один фокус */
.bt-ctl {
  box-sizing: border-box;
  height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--btn-radius);
  font-family: var(--bt-font-body, var(--sans, inherit));
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, filter .2s;
}
.bt-ctl:focus-visible { outline: 2px solid var(--btn-primary-bg); outline-offset: 2px; }

/* язык: сегментированный переключатель */
.bt-ctl--seg {
  padding: 0; overflow: hidden;
  border: 1px solid var(--btn-secondary-line);
  background: var(--btn-secondary-bg);
}
.bt-ctl--seg button {
  height: 100%; padding: 0 11px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 inherit; color: var(--btn-ghost-text);
}
.bt-ctl--seg button[aria-pressed="true"] {
  background: var(--bt-surface-3, rgba(0, 0, 0, .07)); color: var(--btn-secondary-text);
}
.bt-ctl--seg button:focus-visible { outline: 2px solid var(--btn-primary-bg); outline-offset: -2px; }

/* тема: строгий круг. width = height, поэтому форма не зависит от содержимого */
.bt-ctl--icon {
  position: relative;
  width: var(--control-h); padding: 0;
  border: 1px solid var(--btn-secondary-line);
  background: var(--btn-secondary-bg); color: var(--btn-ghost-text);
  border-radius: 50%;
}
.bt-ctl--icon:hover { color: var(--btn-ghost-hover); border-color: var(--btn-secondary-hover-line); }
.bt-ctl--icon svg { display: block; width: var(--control-icon); height: var(--control-icon); }
/* тач-таргет 44×44 при видимых 34: палец попадает, вид не меняется */
.bt-ctl--icon::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }

.bt-ctl__sun { display: none; }
:root[data-theme="dark"] .bt-ctl__moon { display: none; }
:root[data-theme="dark"] .bt-ctl__sun { display: block; }

/* заявка: главное действие шапки */
.bt-ctl--cta {
  gap: 7px; padding: 0 16px; border: 0;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  font: 700 13px/1 var(--bt-font-display, var(--disp, inherit));
}
.bt-ctl--cta:hover { background: var(--btn-primary-hover); }
.bt-ctl--cta svg { display: none; width: var(--control-icon); height: var(--control-icon); flex: none; }

/* На узком экране от заявки остаётся иконка: логотип и язык она не выдавливает. */
@media (max-width: 560px) {
  .bt-ctls { --control-gap: 6px; }
  .bt-ctl--cta { padding: 0; width: var(--control-h); }
  .bt-ctl--cta span { display: none; }
  .bt-ctl--cta svg { display: block; }
}

/* Шапка листинга лежит поверх тёмного кадра в любой теме, поэтому контролы там
   всегда светлые. Цвет бренда у заявки при этом тот же самый. */
.top .bt-ctl--seg, .top .bt-ctl--icon {
  --btn-secondary-line: rgba(255, 255, 255, .32);
  --btn-secondary-text: #fff;
  --btn-ghost-text: rgba(255, 255, 255, .8);
  --btn-ghost-hover: #fff;
}
.top .bt-ctl--seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); }
.top .bt-ctl:focus-visible { outline-color: #fff; }