/********************************************************************************************
 *                                                                                           *
 *   ██████╗░██╗░░░██╗░██████╗░█████╗░██████╗░███████╗░█████╗░████████╗██╗██╗░░░██╗███████╗  *
 *   ██╔══██╗██║░░░██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██║██║░░░██║██╔════╝  *
 *   ██████╔╝██║░░░██║╚█████╗░██║░░╚═╝██████╔╝█████╗░░███████║░░░██║░░░██║╚██╗░██╔╝█████╗░░  *
 *   ██╔══██╗██║░░░██║░╚═══██╗██║░░██╗██╔══██╗██╔══╝░░██╔══██║░░░██║░░░██║░╚████╔╝░██╔══╝░░  *
 *   ██║░░██║╚██████╔╝██████╔╝╚█████╔╝██║░░██║███████╗██║░░██║░░░██║░░░██║░░╚██╔╝░░███████╗  *
 *   ╚═╝░░╚═╝░╚═════╝░╚═════╝░░╚════╝░╚═╝░░╚═╝╚══════╝╚═╝░░╚═╝░░░╚═╝░░░╚═╝░░░╚═╝░░░╚══════╝  *
 *                                                                              © 2013-2026  *
 * ----------------------------------------------------------------------------------------- *
 * This is commercial software, only users who have purchased a valid license and accept     *
 * to the terms of the License Agreement can install and use this program.                   *
 * ----------------------------------------------------------------------------------------- *
 * www: https://ruscreative.com                                                              *
 * email: info@ruscreative.com                                                               *
 * @license       Commercial                                                                 *
 * @copyright (C) 2013-2026 RusCreative.com | All rights reserved.                           *
 ********************************************************************************************/
/**
 * mod_rcmforms — neutral BEM base (Auto render mode).
 * No Bootstrap / Tailwind. Theme via CSS custom properties on .rcmforms.
 */

.rcmforms {
    /* Design tokens — override per theme/preset later. */
    --rcmf-gap: 1rem;
    --rcmf-accent: #2e7d32;
    --rcmf-accent-text: #ffffff;
    --rcmf-radius: 6px;
    --rcmf-control-bg: #ffffff;
    --rcmf-control-border: #c4c8cc;
    --rcmf-control-text: #1a1a1a;
    --rcmf-label-text: #1a1a1a;
    --rcmf-muted: #6b7177;
    --rcmf-error: #c62828;
    --rcmf-success: #2e7d32;
    --rcmf-control-padding: 0.55rem 0.75rem;
    --rcmf-font-size: 1rem;

    display: flex;
    flex-direction: column;
    gap: var(--rcmf-gap);
    font-size: var(--rcmf-font-size);
    color: var(--rcmf-control-text);
}

/* Author-template mode (markup_mode=template). The author markup owns the layout
 * and its own vertical rhythm (Bootstrap `mb-3`, Tailwind `space-y-*`, grids), so
 * the form must NOT impose the flex column + gap of the auto layout — otherwise the
 * flex `gap` stacks on top of the template margins (doubling spacing) and inflates
 * height around hidden/empty flex children. Reset to plain block flow = 1:1 with the
 * original legacy forms. (Auto-layout forms keep the flex+gap above.) */
.rcmforms--custom {
    display: block;
}

.rcmforms__title {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0;
    color: var(--rcmf-label-text);
}

.rcmforms__messages:empty {
    display: none;
}

.rcmforms__messages {
    padding: 0.6rem 0.85rem;
    border-radius: var(--rcmf-radius);
    border: 1px solid var(--rcmf-control-border);
}

.rcmforms__messages--error {
    color: var(--rcmf-error);
    border-color: var(--rcmf-error);
    background: rgba(198, 40, 40, 0.06);
}

.rcmforms__messages--success {
    color: var(--rcmf-success);
    border-color: var(--rcmf-success);
    background: rgba(46, 125, 50, 0.06);
}

/* Инлайн-возвратка успеха: .rcmforms__success заменяет форму после отправки.
   Раньше была без стилей («просто текст», почти незаметна). Делаем заметную
   карточку: рамка/фон в тон успеха, кружок-галочка, крупный текст. Темизируется
   через --rcmf-success/--rcmf-radius; пресет может переопределить (см. bliss). */
.rcmforms__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    padding: 1.85rem 1.35rem;
    border: 1px solid var(--rcmf-success);
    border-radius: var(--rcmf-radius);
    background: rgba(46, 125, 50, 0.08);
    color: var(--rcmf-success);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.45;
}

.rcmforms__success::before {
    content: "";
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--rcmf-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}

.rcmforms__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rcmforms__label {
    font-weight: 500;
    color: var(--rcmf-label-text);
}

.rcmforms__req {
    color: var(--rcmf-error);
    margin-left: 0.15em;
}

.rcmforms__control {
    width: 100%;
    box-sizing: border-box;
    padding: var(--rcmf-control-padding);
    font: inherit;
    color: var(--rcmf-control-text);
    background: var(--rcmf-control-bg);
    border: 1px solid var(--rcmf-control-border);
    border-radius: var(--rcmf-radius);
}

.rcmforms__control:focus {
    outline: 2px solid var(--rcmf-accent);
    outline-offset: 1px;
    border-color: var(--rcmf-accent);
}

textarea.rcmforms__control {
    min-height: 6em;
    resize: vertical;
}

.rcmforms__field--number,
.rcmforms__field--range {
    /* allow inline unit/value next to the control */
}

.rcmforms__field--number {
    flex-flow: row wrap;
    align-items: center;
}

.rcmforms__field--number .rcmforms__label {
    flex: 1 0 100%;
}

.rcmforms__field--number .rcmforms__control {
    width: auto;
    flex: 1 1 auto;
}

.rcmforms__unit {
    color: var(--rcmf-muted);
    white-space: nowrap;
}

.rcmforms__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.rcmforms__radio,
.rcmforms__checkbox,
.rcmforms__consent {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-weight: 400;
    cursor: pointer;
}

.rcmforms__consent {
    color: var(--rcmf-muted);
    font-size: 0.92em;
}

/* Чекбокс согласия/выбора: крупнее и заметнее; цвет галки — акцент формы.
   Покрывает нейтральную (.rcmforms__consent-input) и легаси-bootstrap (.form-check-input--v1) разметку. */
.rcmforms__consent-input,
.rcmforms .form-check-input--v1,
.rcmforms__checkbox input[type="checkbox"],
.rcmforms__radio input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    flex-shrink: 0;
    margin: 0.12em 0 0;
    accent-color: var(--rcmf-accent, #2e7d32);
    cursor: pointer;
}

.rcmforms__consent a {
    color: var(--rcmf-accent);
}

.rcmforms__range-value {
    display: inline-block;
    margin-left: 0.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--rcmf-muted);
}

.rcmforms__marks {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.8em;
    color: var(--rcmf-muted);
}

.rcmforms__help {
    color: var(--rcmf-muted);
    font-size: 0.85em;
}

.rcmforms__submit {
    align-self: flex-start;
    padding: 0.6rem 1.4rem;
    font: inherit;
    font-weight: 600;
    color: var(--rcmf-accent-text);
    background: var(--rcmf-accent);
    border: 0;
    border-radius: var(--rcmf-radius);
    cursor: pointer;
}

.rcmforms__submit:hover {
    filter: brightness(0.95);
}

.rcmforms__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Honeypot — visually removed but still focusable-by-bots; clip method. */
.rcmforms__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===========================================================================
 * Button-modal mode (render_mode = modal / lazy_modal) + success overlay
 *
 * Stable <div> overlays (NOT <dialog>): the trigger button and the overlay live
 * OUTSIDE the <form>, so the --rcmf-* tokens declared on .rcmforms are not in
 * their cascade scope. Each var() carries a literal fallback (matching the neutral
 * defaults) so the chrome is never unstyled. The inner <form> still gets full
 * token/preset treatment. modal.js toggles [hidden] / .is-open and traps focus.
 *
 * z-index: the cookie banner sits at 1040 (mod_rcm_cookie); these overlays sit at
 * 1050 so a modal always covers the banner. Keep that ordering intact.
 * ======================================================================== */

.rcmforms-trigger {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font: inherit;
    font-weight: 600;
    color: var(--rcmf-accent-text, #ffffff);
    background: var(--rcmf-accent, #2e7d32);
    border: 0;
    border-radius: var(--rcmf-radius, 6px);
    cursor: pointer;
}

.rcmforms-trigger:hover {
    filter: brightness(0.95);
}

.rcmforms-trigger:focus-visible {
    outline: 2px solid var(--rcmf-accent, #2e7d32);
    outline-offset: 2px;
}

/* CTA-блок (instance_mode='trigger' с заголовком/описанием): нейтральный центрированный
 * контент-блок (заголовок + описание + кнопка + текст-после), паритет с mod_calltoaction.
 * Тема-пресет (latte/tailwind) дорабатывает оформление сверху через .rcmforms--preset-*. */
.rcmforms-cta {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}

.rcmforms-cta__heading {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.rcmforms-cta__text {
    margin: 0 0 1rem;
}

.rcmforms-cta__text-after {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Hidden by default (server emits the overlay with the [hidden] attribute). */
.rcmforms-modal[hidden],
.rcmforms-success[hidden] {
    display: none;
}

/* Overlay: full-viewport flex centering layer. */
.rcmforms-modal,
.rcmforms-success {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.rcmforms-modal__backdrop,
.rcmforms-success__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* The dialog box itself (above the backdrop, scrollable when tall). */
.rcmforms-modal__dialog,
.rcmforms-success__dialog {
    position: relative;
    max-height: 90vh;
    overflow: auto;
    padding: 1.5rem;
    background: var(--rcmf-control-bg, #ffffff);
    color: var(--rcmf-control-text, #1a1a1a);
    border: 1px solid var(--rcmf-control-border, #c4c8cc);
    border-radius: var(--rcmf-radius, 6px);
}

.rcmforms-modal__dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-width: 100%;
}

.rcmforms-success__dialog {
    width: min(28rem, calc(100vw - 2rem));
    max-width: 100%;
}

/* Modal heading slots filled by rcmFormsOpenModal(options); hidden while empty. */
[data-rcmforms-modal-title]:empty,
[data-rcmforms-modal-desc]:empty {
    display: none;
}

.rcmforms-modal__title {
    margin: 0 0 0.25rem;
    padding-right: 1.5rem;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--rcmf-label-text, #1a1a1a);
}

.rcmforms-modal__desc {
    margin: 0 0 1rem;
    color: var(--rcmf-muted, #6b7177);
}

.rcmforms-success__msg {
    padding-right: 1.5rem;
}

.rcmforms-modal__close,
.rcmforms-success__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rcmf-muted, #6b7177);
    background: transparent;
    border: 0;
    border-radius: var(--rcmf-radius, 6px);
    cursor: pointer;
}

.rcmforms-modal__close:hover,
.rcmforms-success__close:hover {
    color: var(--rcmf-control-text, #1a1a1a);
    background: rgba(0, 0, 0, 0.05);
}

.rcmforms-modal__close:focus-visible,
.rcmforms-success__close:focus-visible {
    outline: 2px solid var(--rcmf-accent, #2e7d32);
    outline-offset: 1px;
}

/* ── Подсветка ошибочных полей в режиме валидации 'bootstrap' ────────────────────────────
   JS вешает .is-invalid на поле и создаёт .invalid-feedback с текстом. На темах БЕЗ
   Bootstrap-CSS (loxley/bliss/celeris и т.п.) поле не краснело, а сообщение для обычных
   (не consent) полей оставалось скрытым. Здесь — нейтральные правила, не зависящие от
   фреймворка. На Bootstrap-темах (academy) дублируют штатное поведение, не ломая его. */
.rcmforms .rcmforms__control.is-invalid,
.rcmforms input.is-invalid,
.rcmforms select.is-invalid,
.rcmforms textarea.is-invalid {
    border-color: var(--rcmf-error, #c62828);
}

.rcmforms .rcmforms__control.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25);
}

.rcmforms .invalid-feedback {
    margin-top: 0.25rem;
    color: var(--rcmf-error, #c62828);
    font-size: 0.85em;
}

.rcmforms .is-invalid ~ .invalid-feedback,
.rcmforms .is-invalid + .invalid-feedback {
    display: block;
}

/* ── Стиль валидации 'neutral' (собственный BEM, для тем без Bootstrap/Tailwind) ──────────
   JS-режим 'neutral' вешает .rcmforms__field--error на обёртку поля, кладёт сообщение в
   .rcmforms__error РЯДОМ с полем (и рядом с лейблом галки, не внутри — раскладка не ломается). */
.rcmforms .rcmforms__field--error .rcmforms__control,
.rcmforms .rcmforms__control.rcmforms__field--error {
    border-color: var(--rcmf-error, #c62828);
}

.rcmforms .rcmforms__field--error .rcmforms__control:focus {
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25);
}

.rcmforms .rcmforms__error {
    margin-top: 0.25rem;
    color: var(--rcmf-error, #c62828);
    font-size: 0.85em;
}

.rcmforms .rcmforms__consent--error {
    color: var(--rcmf-error, #c62828);
}