/* ============================================================
   ClickShot — contact-method.css
   Поле «Способ связи»: табы-иконки + одно поле ввода.
   Общий компонент для попапа, страницы контактов и брифов.
   Разметка: sections/contact-method.php · Логика: js/contact-method.js
   ============================================================ */

.cmethod { display: block; }

/* Ряд табов выбора способа связи */
.cmethod__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cmethod__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-700);
  background: var(--white);
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}
.cmethod__tab:hover { border-color: var(--ink-400); color: var(--ink-950); }
.cmethod__tab:focus-visible {
  outline: none;
  border-color: var(--ink-950);
  box-shadow: 0 0 0 3px var(--lime);
}

.cmethod__tab.is-active {
  background: var(--lime);
  border-color: var(--ink-950);
  color: var(--ink-950);
}

.cmethod__ico {
  display: inline-flex;
  flex: none;
  color: currentColor;
}
.cmethod__ico svg { display: block; }

/* Поле ввода значения выбранного способа */
.cmethod__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-950);
  background: var(--white);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--r-3);
  padding: 13px 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.cmethod__input::placeholder { color: var(--ink-400); }
.cmethod__input:focus {
  border-color: var(--ink-950);
  box-shadow: 0 0 0 4px var(--lime);
}

/* Подсветка ошибки внутри брифа (.bf-field.has-error) */
.bf-field.has-error .cmethod__input {
  border-color: #e0483d;
  box-shadow: 0 0 0 4px rgba(224, 72, 61, 0.1);
}

@media (max-width: 380px) {
  .cmethod__tab { font-size: 13px; padding: 7px 11px 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmethod__tab,
  .cmethod__input { transition: none; }
}