/*
 * Форма «Задайте вопрос» (фетвы, «Женщина в Исламе», вопрос-ответ) - приведена
 * к оформлению сайта 20.08.2026.
 *
 * Было в `main.css`: заголовок 40px «Manrope Bold» (шрифта в проекте нет),
 * поля кеглем 24 с жёсткими ширинами 470 и 662 - в колонку 481 они не влезали,
 * подложка растягивалась отрицательными полями по 50px под старый контейнер.
 *
 * Разметку не трогаем: те же классы отдают три шаблона (`Fetvy/ask_form`,
 * `Question/ask_form` и их включения), а форму показывает свой скрипт.
 */

.ask_form,
.ask_form * {
    box-sizing: border-box;
}

.ask_form {
    position: relative;
    margin: 0 0 var(--sp-20);
    padding: var(--sp-20);
    border-radius: var(--r-6);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-main);
}

.ask_form__header {
    max-width: none;
    margin: 0 0 var(--sp-8);
    font-family: var(--font-main);
    font-size: var(--fs-feed-title-big);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.ask_form__text {
    max-width: none;
    margin: 0 0 var(--sp-16);
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.5;
}

/* ---------- Поля ---------- */

.ask_form .control-group {
    margin: 0 0 var(--sp-12);
}

.ask_form .control-group:last-child {
    margin-bottom: 0;
}

/* 🛑 Ширины полей в старых правилах жёсткие (470 и 662) - в колонку 481 они
   не помещались. Здесь поле занимает ширину формы. */
.ask_form input[type="text"],
.ask_form input[type="email"],
.ask_form textarea {
    width: 100%;
    margin: 0;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.ask_form input[type="text"],
.ask_form input[type="email"] {
    height: 40px;
}

.ask_form textarea {
    height: 120px;
    padding: var(--sp-10) var(--sp-12);
    line-height: 1.5;
    resize: vertical;
}

.ask_form input::placeholder,
.ask_form textarea::placeholder {
    color: var(--c-text-meta);
}

/* Фокус - янтарной рамкой, как у поля поиска в шапке. */
.ask_form input:focus,
.ask_form textarea:focus {
    outline: none;
    border-color: var(--c-accent-amber);
}

/* ---------- Согласие на обработку ---------- */

.ask_form input[type="checkbox"] {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0 var(--sp-8) 0 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
    accent-color: var(--c-accent);
}

.ask_form input[type="checkbox"] + label {
    margin: 0;
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    line-height: 1.4;
    vertical-align: middle;
}

/* ---------- Кнопка отправки ---------- */

.ask_form button,
.ask_form .mbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 140px;
    height: 40px;
    margin: var(--sp-4) 0 0;
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--r-4);
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1;
    cursor: pointer;
}

.ask_form button:hover,
.ask_form .mbtn:hover {
    background: var(--c-accent-amber);
}

/* ---------- Ответ после отправки ---------- */

.ask_form__message {
    margin-top: var(--sp-10);
    font-size: var(--fs-14);
    line-height: 1.4;
}

.ask_form__message.success {
    color: #2f8f4e;
}

.ask_form__message.error {
    color: #c0392b;
}

/* ---------- Крестик закрытия ---------- */

.ask_form__hide {
    position: absolute;
    top: var(--sp-10);
    right: var(--sp-12);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-16);
    line-height: 1;
    text-decoration: none;
}

.ask_form__hide:hover {
    color: var(--c-text);
}