/* Кнопки, карточки, поля формы — то, что повторяется в разных секциях. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--glow);
}

.btn--primary:hover {
  box-shadow: 0 16px 52px rgba(107, 43, 255, 0.6);
}

/* Вторая кнопка — стеклянная, как у обоих образцов. */
.btn--ghost {
  background: var(--glass);
  color: var(--ink-strong);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: var(--glass-strong);
  border-color: rgba(107, 43, 255, 0.55);
  /* Свечение наружу плюс подсветка изнутри — кнопка загорается, а не просто
     меняет фон. */
  box-shadow: 0 10px 30px rgba(107, 43, 255, 0.35),
    inset 0 0 20px rgba(107, 43, 255, 0.18);
}

.btn--wide {
  width: 100%;
}

.btn--sm {
  padding: 11px 22px;
  font-size: 15px;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
}

/* Списку нужен свой фон: раскрытые пункты рисует система, и на тёмном
   поле без этого получается белое на белом. */
.field select option {
  background: var(--surface-2);
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.field--error input,
.field--error textarea {
  border-color: var(--err);
}

.field__hint {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.field__hint--error {
  color: var(--err);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.consent a {
  color: var(--ink-soft);
  text-decoration: underline;
}

.consent input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--brand);
}

.form-status {
  margin: 16px 0 0;
  padding: 14px 17px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  display: none;
}

.form-status--ok {
  display: block;
  background: var(--accent-soft);
  border: 1px solid rgba(46, 230, 168, 0.32);
  color: var(--ok);
}

.form-status--err {
  display: block;
  background: rgba(255, 95, 109, 0.12);
  border: 1px solid rgba(255, 95, 109, 0.32);
  color: var(--err);
}

@media (max-width: 940px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Выбор мессенджера. Кнопки равноправные: у клиента установлен один
   мессенджер из трёх, и «главного» среди них для него нет. */
.messengers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.messengers__label {
  font-size: 14px;
  color: var(--ink-muted);
}

.messengers__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Плашка в цветах площадки. Знак внутри — белый силуэт с прозрачным фоном,
   поэтому одна и та же картинка ложится на любой цвет (make_messenger_icons.py). */
.btn--msg {
  color: #fff;
  /* Одна ширина на все кнопки выбора: без неё они выглядят случайным набором,
     а не одним выбором. Считается вместе с «Заказать своего бота» рядом. */
  min-width: var(--btn-choice-width);
  /* Высота задана прямо, а не подогнана рамкой в 1px под стеклянную кнопку:
     прозрачная рамка поверх градиента давала по краю светящуюся кромку —
     градиент считается по padding-box, а рисуется по border-box, и полоса
     рамки заполнялась его повтором. */
  min-height: var(--btn-choice-height);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.btn--msg:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  filter: brightness(1.08);
}

.btn__icon {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Цвета взяты с самих площадок, а не подобраны на глаз. */
.btn--msg-telegram {
  background: linear-gradient(180deg, #2aabee 0%, #229ed9 100%);
}

.btn--msg-vk {
  background: #0077ff;
}

/* У MAX фирменный градиент: голубой снизу слева к фиолетовому справа сверху —
   тот же, что на иконке приложения. */
.btn--msg-max {
  background: linear-gradient(45deg, #4fc3fd 0%, #5a66fb 50%, #8354ea 100%);
}

@media (max-width: 560px) {
  /* На узком экране три кнопки в ряд не помещаются — растягиваем на всю
     ширину, иначе они ломаются на неровные две строки. */
  .messengers__row {
    width: 100%;
  }

  .btn--msg {
    flex: 1 1 100%;
  }
}

/* Ссылка мессенджера в подвале: знак белый и на тёмном фоне подвала
   читается сам, поэтому подложка не нужна. */
.footer__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__msg img {
  width: 18px;
  height: 18px;
  flex: none;
  /* Белый знак на тёмном фоне слишком яркий рядом с приглушённым текстом. */
  opacity: 0.72;
}

.footer__msg:hover img {
  opacity: 1;
}