/* ============================================================================
   01.11.2026. ПРИВЕДЕНИЕ ВСЕГО СЕРВИСА К БРЕНДБУКУ v1.2.
   Подключается последним — только цвета, кнопки, поля, радиусы и тени.
   Разметку и механику не меняет.
   ========================================================================== */

:root {
  --bb-teal: #0F766E;
  --bb-teal-hover: #115E59;
  --bb-teal-soft: #ECFDFB;
  --bb-teal-line: #A3EFE9;
  --bb-teal-line-hover: #6CE2DA;
  --bb-ink: #14181F;
  --bb-muted: #5C6470;
  --bb-line: #D3D9E3;
  --bb-field: #B4BCC9;
  --bb-field-bg: #FAFBFC;
  --bb-danger: #B91C1C;
  --bb-danger-soft: #FBEAEA;
  --bb-danger-line: #F3C9C9;
  --bb-disabled-bg: #EEF1F5;
  --bb-disabled-ink: #8A94A6;
}

html, body, button, input, select, textarea {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

/* ---------------------------------------------------------------- кнопки */
.btn {
  border-radius: 14px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn.primary,
.btn.btn-primary {
  background: var(--bb-teal);
  border: 1px solid var(--bb-teal);
  color: #fff;
}
.btn.primary:hover,
.btn.btn-primary:hover { background: var(--bb-teal-hover); border-color: var(--bb-teal-hover); }
.btn.secondary,
.btn.btn-secondary {
  background: transparent;
  border: 1px solid var(--bb-teal-line);
  color: var(--bb-teal);
}
.btn.secondary:hover,
.btn.btn-secondary:hover {
  background: var(--bb-teal-soft);
  border-color: var(--bb-teal-line-hover);
  color: var(--bb-teal-hover);
}
.btn.ghost,
.btn.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bb-teal);
}
.btn.ghost:hover,
.btn.btn-ghost:hover { background: var(--bb-teal-soft); color: var(--bb-teal-hover); }
.btn.danger {
  background: transparent;
  border: 1px solid var(--bb-danger-line);
  color: var(--bb-danger);
}
.btn.danger:hover { background: var(--bb-danger-soft); }
.btn:disabled,
.btn[disabled] {
  background: var(--bb-disabled-bg);
  border-color: #E6E8EF;
  color: var(--bb-disabled-ink);
  opacity: 1;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- поля */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-color: var(--bb-field);
  background-color: var(--bb-field-bg);
  border-radius: 10px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--bb-teal);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(15,118,110,.15);
  background-color: #fff;
}

/* --------------------------------------------------------- рамки/карточки */
.card,
.side-card,
.wizard-body {
  border-color: var(--bb-line);
  border-radius: 18px;
}
.card { box-shadow: none; }

/* -------------------------------------------------------------- ссылки */
a { color: var(--bb-teal); }
a:hover { color: var(--bb-teal-hover); }

/* ------------------------------------------------------- служебные метки */
.kicker, .mono, .num, .bl, .bv, .pill, .badge {
  font-variant-numeric: tabular-nums;
}

/* Полоса отметки — забираем место у прокрутки, а не накрываем карточки. */
@media (min-width: 901px) {
  body.vac-ubar-on #content {
    margin-bottom: calc(var(--vac-ubar-h, 54px) + 16px);
  }
}

.btn.ghost, .btn.btn-ghost { padding-left: 12px; padding-right: 12px; }

/* Ghost на тёмных поверхностях: brand-700 на navy даёт 3.36 — ниже AA.
   Брендбук §3.3: на тёмном текст яркий (brand-300/navy-text). */
.final .btn-ghost, .cta-band .btn-ghost, .hero-cta .btn-ghost,
.task-panel .btn-ghost, .balance-card .btn-ghost, .selection-bar .btn-ghost,
.calc-sum .btn-ghost { color: #EEF2F7; border-color: rgba(255,255,255,.2); }
.final .btn-ghost:hover, .cta-band .btn-ghost:hover, .hero-cta .btn-ghost:hover,
.task-panel .btn-ghost:hover, .balance-card .btn-ghost:hover,
.selection-bar .btn-ghost:hover, .calc-sum .btn-ghost:hover {
  background: rgba(255,255,255,.08); color: #fff;
}

/* Мелкие кнопки: зона нажатия 44 на телефоне, внешний вид не меняется (брендбук §9.2). */
@media (max-width: 900px) {
  .btn.small, .btn.tiny, .btn.ghost.small, .btn.ghost.tiny { position: relative; }
  .btn.small::after { content: ""; position: absolute; inset: -5px; }
  .btn.tiny::after { content: ""; position: absolute; inset: -8px; }
}

/* Кнопки в карточках кабинета на телефоне: 40px -> зона нажатия 44 (брендбук §9). */
@media (max-width: 900px) {
  #sec-billing .btn, #sec-dossier .btn, body.vac-ui .vac-actions .btn,
  .card .btn, .card-actions .btn { min-height: 44px; }
}

@media (max-width: 900px) {
  .pass-toggle button { min-height: 44px; }
}

/* Выпадающие меню — один вид по брендбуку: граница gray-300, тень md,
   пункты 40–44px, наведение gray-50. */
.th-more-menu {
  background: #fff; border-color: var(--color-gray-300, #D3D9E3);
  border-radius: 14px; box-shadow: 0 8px 22px rgba(20,24,31,.08);
  padding: 8px; gap: 2px;
}
.th-more-menu .btn {
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  justify-content: flex-start; color: #14181F;
}
.th-more-menu .btn:hover { background: var(--color-gray-50, #F5F6FA); color: #14181F; }
.nav-drop-menu { border-radius: 14px; border-color: var(--color-gray-300, #D3D9E3); box-shadow: 0 8px 22px rgba(20,24,31,.08); }