/* =========================================================
   WCA — Registration Form Styles
   Файл: assets/css/wca-registration.css
   Отвечает ТОЛЬКО за форму регистрации
   (модель / пользователь / студия)
   ========================================================= */


/* =========================================================
   1. ОБЩИЙ КОНТЕЙНЕР ФОРМЫ
   .wca-registration-wrapper — белая карточка вокруг формы
   ========================================================= */

.wca-registration-wrapper {
    max-width: 460px;          /* ширина карточки формы */
    margin: 30px auto;         /* отступ сверху/снизу + центрирование */
    padding: 25px;             /* внутренние отступы карточки */
    box-sizing: border-box;
    background: #fff;          /* фон карточки */
    border: 1px solid #e0e0e0; /* рамка карточки */
    border-radius: 10px;       /* скругление углов */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06); /* мягкая тень */
}


/* =========================================================
   2. САМА ФОРМА
   .wca-registration-form — вертикальный список полей
   ========================================================= */

.wca-registration-form {
    display: flex;
    flex-direction: column; /* поля друг под другом */
    gap: 16px;              /* расстояние между полями */
}


/* =========================================================
   3. БЛОК ОДНОГО ПОЛЯ (label + input/select)
   .wca-reg-field — используется для:
   - выбора типа (модель/пользователь/студия)
   - никнейма
   - email
   - пароля
   - повтора пароля
   ========================================================= */

.wca-reg-field {
    display: flex;
    flex-direction: column;
    gap: 6px; /* отступ между подписью и полем */
}

.wca-reg-field label {
    font-size: 14px;
    font-weight: 600;
    color: blue;
}


/* =========================================================
   4. ПОЛЯ ВВОДА И ВЫПАДАЮЩИЙ СПИСОК
   Здесь стилизуются:
   - select (тип регистрации)
   - input[type=text] (никнейм)
   - input[type=email] (email)
   - input[type=password] (пароль и повтор)
   ========================================================= */

.wca-reg-field select,
.wca-reg-field input {
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

/* Состояние при клике в поле */
.wca-reg-field select:focus,
.wca-reg-field input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15);
}


/* =========================================================
   5. КНОПКА ОТПРАВКИ
   .wca-reg-submit — кнопка «Отправить заявку»
   ========================================================= */

.wca-reg-submit {
    margin-top: 5px;
    padding: 12px 20px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #0073aa;  /* цвет кнопки */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.wca-reg-submit:hover {
    background: #005f8d; /* цвет при наведении */
}

.wca-reg-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* =========================================================
   6. СООБЩЕНИЯ (успех / ошибка)
   .wca-registration-message — общий блок сообщения
   .is-success — зелёное (заявка отправлена)
   .is-error   — красное (ошибка валидации)
   ========================================================= */

.wca-registration-message {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
}

.wca-registration-message.is-success {
    color: #176b2c;
    background: #eaf7ec;
    border: 1px solid #bfe3c6;
}

.wca-registration-message.is-error {
    color: #8a1f24;
    background: #fdecec;
    border: 1px solid #f5c2c2;
}

/*новое*/
/* =========================================================
   8. ЦВЕТ ТЕКСТА В ПОЛЯХ ВВОДА
   Делаем вводимый текст чёрным,
   плейсхолдеры — серыми (видны, но не мешают)
   ========================================================= */

.wca-reg-field input,
.wca-reg-field select {
    color: #000 !important; /* чёрный текст, который вводит пользователь */
}

/* Текст-подсказка внутри поля (placeholder) */
.wca-reg-field input::placeholder {
    color: #777;
    opacity: 1;
}

/* Для старых браузеров */
.wca-reg-field input:-ms-input-placeholder {
    color: #777;
}

.wca-reg-field input::-ms-input-placeholder {
    color: #777;
}

/* =========================================================
   7. АДАПТИВ (телефоны)
   ========================================================= */

@media (max-width: 520px) {
    .wca-registration-wrapper {
        margin: 20px 10px;
        padding: 18px;
    }
}