/*
 * Поле вопроса ИИ-гаданий (поведение — rg-question-field.js).
 * Строка без рамки, под ней линия с завитком и сердечком — как «Виньетки» в Ромашке и Цветах
 * (для гаданий про любовь). Завиток 160 px по центру, к нему с краёв подходит прямая линия;
 * при вводе всё темнеет, при пустом вопросе — малиновое, поле вздрагивает и под ним подсказка.
 * .rg-question--classic — классическое поле, как в подборе гаданий на странице «Другие гадания».
 */
.rg-question {
    position: relative;
    z-index: 1;   /* подсказка об ошибке — поверх кнопки под полем (кнопка при наведении приподнимается) */
    max-width: 460px;
    margin: 2px auto;
}
.rg-question__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.rg-question .rg-question__field {
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px 4px 14px;
    font-family: 'EB Garamond', 'Georgia', serif;
    font-size: 22px;
    font-style: italic;
    line-height: 1.3;
    color: #4a3828;
    text-align: center;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M4 6 C30 6 50 3 78 6 M122 6 C150 3 170 6 196 6' stroke='%23c6ba9d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='84' cy='6' r='1.9' fill='%23c6ba9d'/%3E%3Ccircle cx='116' cy='6' r='1.9' fill='%23c6ba9d'/%3E%3Cpath d='M100 11 C95 7.5 91 5.5 91 3 C91 1.2 92.6 0 94.6 0 C97 0 98.6 1.3 100 3 C101.4 1.3 103 0 105.4 0 C107.4 0 109 1.2 109 3 C109 5.5 105 7.5 100 11 Z' fill='%23b0245c'/%3E%3C/svg%3E") center bottom / 160px 12px no-repeat,
        linear-gradient(to right, #c6ba9d calc(50% - 77px), transparent calc(50% - 77px), transparent calc(50% + 77px), #c6ba9d calc(50% + 77px)) left bottom 5px / 100% 1.5px no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    overflow-y: hidden;   /* высоту ставит скрипт; длинный текст — с прокруткой */
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: text;   /* у некоторых гаданий выделение на странице выключено — в поле оно нужно */
    user-select: text;
}
@media (max-width: 600px) {
    .rg-question .rg-question__field {
        font-size: 20px;   /* не меньше 16 px — иначе iPhone увеличивает страницу при вводе */
    }
}
.rg-question .rg-question__field::placeholder {
    color: #8a7a62;
    opacity: 1;
}
/* Тема красит текст поля в фокусе в #111 — оставляем цвет сайта */
.rg-question .rg-question__field:focus {
    color: #4a3828;
    outline: none;
    box-shadow: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M4 6 C30 6 50 3 78 6 M122 6 C150 3 170 6 196 6' stroke='%238b5a2b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='84' cy='6' r='1.9' fill='%238b5a2b'/%3E%3Ccircle cx='116' cy='6' r='1.9' fill='%238b5a2b'/%3E%3Cpath d='M100 11 C95 7.5 91 5.5 91 3 C91 1.2 92.6 0 94.6 0 C97 0 98.6 1.3 100 3 C101.4 1.3 103 0 105.4 0 C107.4 0 109 1.2 109 3 C109 5.5 105 7.5 100 11 Z' fill='%23b0245c'/%3E%3C/svg%3E") center bottom / 160px 12px no-repeat,
        linear-gradient(to right, #8b5a2b calc(50% - 77px), transparent calc(50% - 77px), transparent calc(50% + 77px), #8b5a2b calc(50% + 77px)) left bottom 5px / 100% 1.5px no-repeat;
}

/* Пустой вопрос: поле вздрагивает, линия малиновая, под ней подсказка (пока посетитель не начнёт писать) */
@keyframes rg-question-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.rg-question--error {
    animation: rg-question-shake 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .rg-question--error {
        animation: none;
    }
}
.rg-question--error .rg-question__field,
.rg-question--error .rg-question__field:focus {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M4 6 C30 6 50 3 78 6 M122 6 C150 3 170 6 196 6' stroke='%23b0245c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='84' cy='6' r='1.9' fill='%23b0245c'/%3E%3Ccircle cx='116' cy='6' r='1.9' fill='%23b0245c'/%3E%3Cpath d='M100 11 C95 7.5 91 5.5 91 3 C91 1.2 92.6 0 94.6 0 C97 0 98.6 1.3 100 3 C101.4 1.3 103 0 105.4 0 C107.4 0 109 1.2 109 3 C109 5.5 105 7.5 100 11 Z' fill='%23b0245c'/%3E%3C/svg%3E") center bottom / 160px 12px no-repeat,
        linear-gradient(to right, #b0245c calc(50% - 77px), transparent calc(50% - 77px), transparent calc(50% + 77px), #b0245c calc(50% + 77px)) left bottom 5px / 100% 1.5px no-repeat;
}
/* Подсказка не сдвигает кнопку под полем */
.rg-question__hint {
    position: absolute;
    right: 0;
    bottom: -21px;
    left: 0;
    font-family: 'EB Garamond', 'Georgia', serif;
    font-size: 15px;
    line-height: 1.5;
    color: #b0245c;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;   /* нажатие по краю кнопки под подсказкой доходит до кнопки */
    transition: opacity 0.2s ease, visibility 0.2s;
}
.rg-question--error .rg-question__hint {
    visibility: visible;
    opacity: 1;
}

/* Классическое поле — как в подборе гаданий на странице «Другие гадания» (.cat-search__input темы):
   тонкая линия снизу, при вводе она темнеет; пустой вопрос — серым. Текст и подсказка — курсивом,
   20 px, как ответ гадания. <div class="rg-question rg-question--classic"> */
.rg-question--classic .rg-question__field {
    padding: 8px 0;
    font-size: 20px;
    font-style: italic;
    line-height: 1.5;
    background: none;
    border-bottom: 1px solid #c9b99a;
    transition: border-color 0.3s;
}
.rg-question--classic .rg-question__field::placeholder {
    color: #b8a88a;
}
.rg-question--classic .rg-question__field:focus {
    background: none;
    border-bottom-color: #8b7355;
}
.rg-question--classic.rg-question--error .rg-question__field,
.rg-question--classic.rg-question--error .rg-question__field:focus {
    background: none;
    border-bottom-color: #a09080;
}
.rg-question--classic .rg-question__hint {
    font-size: 14px;
    font-style: italic;
    color: #a09080;
}