/**
 * БЛОКРЕЙН — стилизация страницы регистрации (форма WPUF Pro) под общий стиль сайта.
 *
 * ВЕРСИЯ 5 — растянут на всю ширину и уменьшен паддинг у блока "Надёжность пароля"
 * (класс .pass-strength-result). Это отдельный от .wpuf-fields-inline элемент — раньше
 * его в файле не было вообще, поэтому предыдущие попытки "растянуть индикатор" на самом
 * деле правили не тот элемент. Найден и его конкурирующий !important-стиль в layout1.css,
 * так что тот же приём с усиленной специфичностью применён и здесь.
 *
 * ВЕРСИЯ 4 — найдена настоящая причина того, что часть правил (отступы между полями,
 * отступы в выпадающем списке городов, ширина индикатора и кнопки) не применялась, хотя
 * файл доезжал до браузера правильно (это было проверено отдельно).
 *
 * Причина: у плагина WP User Frontend Pro есть собственный файл
 * wp-content/plugins/wp-user-frontend/assets/css/frontend-form/layout1.css, и в нём почти
 * ВСЕ правила (95 штук) висят с !important И с очень длинным, специфичным селектором вида:
 *   .wpuf-form-add.wpuf-form-layout1:not(.wpuf-theme-style) ul.wpuf-form li { margin-bottom: 40px !important; }
 *   .wpuf-form-add.wpuf-form-layout1:not(.wpuf-theme-style) ul.wpuf-form li.wpuf-submit input[type="submit"] { width: auto !important; }
 * У CSS есть правило: если два правила оба помечены !important, побеждает НЕ то, что
 * подключено позже, а то, у которого выше "специфичность" (грубо — сумма классов и
 * тегов в селекторе). Мой прежний селектор `.wpuf-form-add.wpuf-form-layout1 .wpuf-el`
 * был короче и проще, чем их селектор с `:not()` и полной цепочкой `ul.wpuf-form li` —
 * поэтому именно у WPUF, а не у меня, побеждали margin-bottom: 40px и width: auto,
 * несмотря на !important с обеих сторон. Порядок подключения (priority 100), который я
 * поправила раньше, тут вообще ни при чём — дело было только в специфичности селектора.
 * Это подтверждено напрямую: через JS прочитала все совпадающие CSS-правила для реальных
 * элементов формы и увидела, что именно эти правила из layout1.css побеждают.
 *
 * Исправление: у всех правил ниже, которые должны бороться с layout1.css, селектор начинается
 * с четырёхкратного повтора `.wpuf-form-add.wpuf-form-layout1` — это не меняет, к каким
 * элементам применяется правило (форме достаточно один раз иметь оба этих класса), но
 * искусственно поднимает специфичность выше, чем у любого правила в layout1.css, так что
 * теперь при прочих равных (оба !important) побеждает уже наш файл.
 *
 * Технические детали более старых версий (Clearfy Pro и кэш браузера, шрифт Gilroy и
 * иконки FontAwesome, карточка формы) — в истории версий 1-3, здесь оставлены только
 * актуальные комментарии.
 */

/* ===== Карточка формы: центрирована, с тенью, скруглением ===== */
.wpuf-form-add.wpuf-form-layout1 {
    max-width: 640px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(6, 11, 27, .08), 0 2px 8px rgba(6, 11, 27, .04) !important;
    padding: 28px 40px !important;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .wpuf-form-add.wpuf-form-layout1 {
        padding: 20px !important;
        border-radius: 14px !important;
    }
}

/* ===== Шрифт формы — как на сайте (кроме иконок, см. пояснение в версии 2) ===== */
.wpuf-form-add.wpuf-form-layout1,
.wpuf-form-add.wpuf-form-layout1 label,
.wpuf-form-add.wpuf-form-layout1 input,
.wpuf-form-add.wpuf-form-layout1 select,
.wpuf-form-add.wpuf-form-layout1 textarea,
.wpuf-form-add.wpuf-form-layout1 button,
.wpuf-form-add.wpuf-form-layout1 p,
.wpuf-form-add.wpuf-form-layout1 span:not([class*="fa-"]):not(.iti__flag):not(.iti__arrow),
.blockrain-city-suggest,
.blockrain-city-suggest li {
    font-family: 'Gilroy', Arial, sans-serif !important;
}

/* =====================================================================
   Ниже — правила с "усиленной" специфичностью селектора (повтор класса
   4 раза), чтобы гарантированно побеждать !important-правила из
   layout1.css плагина WP User Frontend Pro. Смотри объяснение в шапке.
   ===================================================================== */

/* ===== Ровные равные отступы между полями — компактнее, чем было ===== */
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-el {
    margin-bottom: 14px !important;
}

.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-el:last-of-type {
    margin-bottom: 0 !important;
}

.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-label {
    margin-bottom: 6px !important;
}

/* Блок с подсказкой/ошибкой под полем (например про надёжность пароля) — растянут на всю
   ширину поля и с компактным отступом, а не на всю ширину лишь "как получится" */
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-fields-inline {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    border-radius: 10px !important;
}

.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-help,
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-error-msg {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* ===== Подписи полей ===== */
.wpuf-form-add .wpuf-label label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #060b1b !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Иконки полей (FontAwesome) — не перекрашиваем шрифт, только цвет под акцент сайта ===== */
.wpuf-form-add .wpuf-field-icon {
    color: #db3e33 !important;
    font-size: 15px;
}

/* ===== Поля ввода (текст, email, пароль, число, select, textarea) ===== */
.wpuf-form-add input[type="text"],
.wpuf-form-add input[type="email"],
.wpuf-form-add input[type="password"],
.wpuf-form-add input[type="number"],
.wpuf-form-add select,
.wpuf-form-add textarea {
    background-color: #f3f4f6 !important;
    border: 1px solid #c9ccd2 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #060b1b !important;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wpuf-form-add input[type="text"]:focus,
.wpuf-form-add input[type="email"]:focus,
.wpuf-form-add input[type="password"]:focus,
.wpuf-form-add input[type="number"]:focus,
.wpuf-form-add select:focus,
.wpuf-form-add textarea:focus {
    outline: none !important;
    border-color: #db3e33 !important;
    box-shadow: 0 0 0 3px rgba(219, 62, 51, .12) !important;
}

.wpuf-form-add input::placeholder,
.wpuf-form-add textarea::placeholder {
    color: #9aa0ab;
}

/* ===== Поле телефона (intl-tel-input) — подгоняем под общий стиль полей ===== */
.wpuf-form-add .iti {
    width: 100%;
}

.wpuf-form-add .iti input[type="tel"] {
    background-color: #f3f4f6 !important;
    border: 1px solid #c9ccd2 !important;
    border-radius: 10px !important;
    padding: 12px 16px 12px 52px !important;
    font-size: 16px !important;
    color: #060b1b !important;
    width: 100%;
    box-sizing: border-box;
}

.wpuf-form-add .iti input[type="tel"]:focus {
    outline: none !important;
    border-color: #db3e33 !important;
    box-shadow: 0 0 0 3px rgba(219, 62, 51, .12) !important;
}

.wpuf-form-add .iti__flag-container {
    border-radius: 10px 0 0 10px;
}

.wpuf-form-add .iti__selected-flag {
    padding: 0 8px 0 12px;
    border-radius: 10px 0 0 10px;
}

/* ===== Индикатор надёжности пароля (.pass-strength-result) — отдельный элемент,
   не путать с .wpuf-fields-inline (розовая рамка вокруг самого поля при ошибке).
   По умолчанию у него фиксированная ширина 200px (frontend-forms.css, без !important —
   но мы всё равно ставим !important, чтобы не зависеть от их будущих правок) и паддинг
   10px 32px !important из layout1.css (тут !important обязателен, чтобы победить).
   Обёртывающий <li> у этого блока не имеет класса wpuf-el, поэтому общее правило
   ".wpuf-el { margin-bottom: 14px }" на него не действует — целимся через :has(). */
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .pass-strength-result {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 16px !important;
    margin: 0 !important;
}

.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 li:has(> .wpuf-fields > .pass-strength-result) {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

/* ===== Кнопка отправки — акцентный цвет сайта, на всю ширину карточки =====
   width: 100% усилен повтором класса — у layout1.css есть правило именно на
   input[type="submit"] с width: auto !important и более длинным селектором. */
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-submit {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .wpuf-submit-button,
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 input[type="submit"],
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 button[type="submit"] {
    background-color: #db3e33 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wpuf-form-add .wpuf-submit-button:hover,
.wpuf-form-add input[type="submit"]:hover,
.wpuf-form-add button[type="submit"]:hover {
    background-color: #c3352b !important;
}

/* ===== Выпадающий список автодополнения города =====
   .blockrain-city-suggest — наш собственный <ul>, но он физически вложен внутрь
   ul.wpuf-form (это структура самой формы WPUF), поэтому правило layout1.css
   "ul.wpuf-form li { margin-bottom: 40px !important; }" задевало и наши подсказки
   тоже — отсюда были гигантские отступы между городами. Тот же приём с усиленной
   специфичностью решает и это. */
.wpuf-el.city_field .wpuf-fields {
    position: relative;
}

.blockrain-city-suggest {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding: 4px !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(6, 11, 27, .12);
    max-height: 280px;
    overflow-y: auto;
}

.blockrain-city-suggest:empty {
    display: none;
    border: none;
    box-shadow: none;
    padding: 0 !important;
}

/* Каждая подсказка — плотная строка без зазоров между ними; при наведении/выборе
   подсветка заливает всю строку с нормальными паддингами, а не тонкую полоску */
.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1.wpuf-form-add.wpuf-form-layout1 .blockrain-city-suggest li {
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #060b1b !important;
    cursor: pointer;
}

.blockrain-city-suggest li:hover {
    background-color: #fdece9 !important;
    color: #db3e33 !important;
}