/* === MAIL.CSS — УНИВЕРСАЛЬНЫЙ СТИЛЬ ДЛЯ ВСЕХ ПОЧТОВЫХ ФОРМ === */

/* === ИЗОЛЯЦИЯ ОТ ГЛОБАЛЬНЫХ СТИЛЕЙ === */
#unique-mail-wrapper {
  position: relative;
  z-index: 1000;
}

/* === СБРОС ВНУТРИ ОБЁРТКИ === */
#unique-mail-wrapper *,
#unique-mail-wrapper *::before,
#unique-mail-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  line-height: 1.4;
}

/* === ОСНОВНОЙ КОНТЕЙНЕР === */
#unique-mail-wrapper .mail-form {
  max-width: 500px;
  font-family: 'Geologica', Arial, sans-serif;
  color: #030;
}

/* === ЗВЁЗДОЧКИ — ВСЕ КРАСНЫЕ И КРУПНЕЕ === */
#unique-mail-wrapper sup {
  color: #c00 !important;
  font-weight: bold !important;
  font-size: 1.3em !important;
}

/* === ГРУППИРОВКА ПОЛЕЙ === */
#unique-mail-wrapper .form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
}

/* === НАЗВАНИЕ ПОЛЯ — ТОЛЬКО ДЛЯ input И select (слева) === */
#unique-mail-wrapper .form-row:not(.textarea-row) label {
  font-size: 14px;
  color: #333;
  flex: 0 0 140px;
  white-space: nowrap;
}

/* === TEXTAREA: label сверху, поле 70% ширины === */
#unique-mail-wrapper .textarea-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

#unique-mail-wrapper .textarea-row label {
  font-size: 14px;
  color: #333;
  width: 100%;
  margin-bottom: 6px;
  text-align: left;
}

#unique-mail-wrapper .textarea-row textarea {
  width: 70% !important;
  min-height: 80px;
}

/* === ОБЁРТКА ПОЛЯ ВВОДА — ДЛЯ КОРРЕКТНОГО ПОЗИЦИОНИРОВАНИЯ ОШИБКИ === */
#unique-mail-wrapper .input-wrapper {
  position: relative;
  width: 100%;
}

/* === ПОЛЯ ВВОДА — ПЕРЕОПРЕДЕЛЕНИЕ ИЗ base.css === */
#unique-mail-wrapper input,
#unique-mail-wrapper select {
  width: 50% !important;
  max-width: 250px;
  padding: 8px 12px 24px 12px; /* Увеличенный padding-bottom для подсказки */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  transition: border 0.2s ease;
  background: #fff !important;
}

#unique-mail-wrapper textarea {
  width: 100% !important;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  transition: border 0.2s ease;
  background: #fff !important;
  resize: vertical;
}

/* Улучшаем фокус */
#unique-mail-wrapper input:focus,
#unique-mail-wrapper textarea:focus,
#unique-mail-wrapper select:focus {
  background-color: #fff !important;
  border-color: #AB261B !important;
}

/* === ОШИБКИ — НАД НИЖНЕЙ РАМКОЙ ПОЛЯ, БЕЗ РАМКИ, МЕНЬШИЙ ШРИФТ === */
#unique-mail-wrapper .error-message {
  font-size: 10.8px; /* Уменьшено на 10% от 12px */
  color: #c00;
  padding: 2px 4px;
  display: none;
  position: absolute;
  bottom: 8px; /* Расположение над нижней рамкой */
  left: 0;
  width: 100%;
  max-width: 250px;
  background-color: #fff;
  z-index: 10;
  pointer-events: none;
  line-height: 1.2;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* При ошибке — красная рамка у поля */
#unique-mail-wrapper input.error,
#unique-mail-wrapper textarea.error,
#unique-mail-wrapper select.error {
  border-color: #c00 !important;
  background-color: #fff0f0;
}

/* === АДАПТИВ: НА ТЕЛЕФОНЕ — ВСЁ ВЕРТИКАЛЬНО === */
@media (max-width: 500px) {
  #unique-mail-wrapper label {
    display: none;
  }
  #unique-mail-wrapper .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #unique-mail-wrapper input,
  #unique-mail-wrapper select,
  #unique-mail-wrapper textarea {
    width: 90% !important;
  }
  #unique-mail-wrapper .textarea-row textarea {
    width: 90% !important;
  }
  #unique-mail-wrapper .error-message {
    bottom: 8px;
  }
}

/* === КНОПКА ОТПРАВКИ — С ОРИГИНАЛЬНЫМ СТИЛЕМ ИЗ decor.css === */
#unique-mail-wrapper .but {
  margin-top: 10px;
  font-size: 130%;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  pointer-events: auto;
}

#unique-mail-wrapper .but {
  background: #84b0d4;
  background: linear-gradient(top, #75A4C9 0, #c3dcf2 2px, #8ebedc 40%, #71a6cf 50%, #84b0d4 94%, #9ec1de 95%, #b7d2e9 100%);
  background: -o-linear-gradient(top, #75A4C9 0, #c3dcf2 2px, #8ebedc 40%, #71a6cf 50%, #84b0d4 94%, #9ec1de 95%, #b7d2e9 100%);
  background: -webkit-linear-gradient(top, #75A4C9 0, #c3dcf2 2px, #8ebedc 40%, #71a6cf 50%, #84b0d4 94%, #9ec1de 95%, #b7d2e9 100%);
  background: -moz-linear-gradient(top, #75A4C9 0, #c3dcf2 2px, #8ebedc 40%, #71a6cf 50%, #84b0d4 94%, #9ec1de 95%, #b7d2e9 100%);
  background: -ms-linear-gradient(top, #75A4C9 0, #c3dcf2 2px, #8ebedc 40%, #71a6cf 50%, #84b0d4 94%, #9ec1de 95%, #b7d2e9 100%);
}

#unique-mail-wrapper .but:hover {
  opacity: 1;
}

#unique-mail-wrapper .but:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === СООБЩЕНИЕ ПОСЛЕ ОТПРАВКИ === */
#unique-mail-wrapper .form-message {
  margin-top: 15px;
  padding: 12px;
  background-color: #AB261B;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  display: none;
}

#unique-mail-wrapper .form-message-close {
  float: right;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 1;
  margin-left: 10px;
}