/*
 * Страница "Отзывы".
 * Отступ между заголовком и блоками ниже: в text-styles.css у #page_mayor h1
 * задан margin-bottom: -2mm — здесь переопределяем только для страницы отзывов.
 */

#page_mayor .rv-page-heading {
    margin-bottom: 6mm;
    margin-top: 0;
}

/*
 * Максимально переиспользуем классы из blog/blog-messages.css:
 *   - карточки (.c_blog-message, .c_blog-message-title, .c_blog-message-main, .c_blog-message-subscript)
 *   - контейнер (#blog-cont)
 * Здесь определяем только то, что отсутствует в blog-стилях:
 *   - форма ввода отзыва (карточка сверху)
 *   - блок ответа администратора
 *   - сообщения об успехе/ошибке
 */

/* Карточка формы сверху - во всю ширину (вне двухколоночной блоговой сетки). */
.rv-form-card {
    margin-bottom: 7mm;
    margin-top: 0;
    border-top-left-radius: 6mm;
    border-top-right-radius: 6mm;
    border-bottom-left-radius: 6mm;
    border-bottom-right-radius: 6mm;
}

/*
 * Сворачиваемая форма на <details>/<summary>.
 * Плавное выдвижение — через анимацию псевдоэлемента ::details-content
 * + interpolate-size: allow-keywords (для анимации к block-size: auto).
 * content-visibility переключается «дискретно», с allow-discrete он
 * корректно переключается по таймингу перехода.
 */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
}

.rv-form-card::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition-property: block-size, opacity, content-visibility;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
}

.rv-form-card[open]::details-content {
    block-size: auto;
    opacity: 1;
}

/* Шапка с заголовком и стрелкой — нижняя граница только в раскрытом состоянии.
   В blog-messages.css у .c_blog-message-title задана сплошная border-bottom 0.4mm —
   перебиваем с повышенной специфичностью и полностью убираем, когда форма свёрнута. */
.rv-form-card:not([open]) .c_blog-message-title.rv-form-toggle {
    border-bottom: 0 none transparent;
}

/* Шапка сворачиваемой формы — светло-зелёный фирменный цвет вместо жёлтого #FFDA22. */
.rv-form-card > .c_blog-message-title.rv-form-toggle {
    background-color: #CDE99A;
}

/* Симметричные вертикальные паддинги, чтобы текст/стрелка стояли по центру шапки.
   Специфичность поднята до (0,2,0), чтобы перебить .c_blog-message .c_blog-message-title. */
.c_blog-message-title.rv-form-toggle {
    list-style: none;
    cursor: pointer;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5mm;

    padding-top: 3mm;
    padding-bottom: 3mm;
    padding-left: 5mm;
    padding-right: 7mm;
}

.rv-form-toggle__pencil {
    flex: 0 0 auto;
    font-size: 1.05em;
    line-height: 1;
}

.rv-form-toggle::-webkit-details-marker {
    display: none;
}
.rv-form-toggle::marker {
    content: "";
}

/* Сбрасываем собственные отступы h4 — иначе заголовок сдвигается от вертикального
   центра флекс-контейнера. Специфичность (0,2,1) == родительскому правилу
   .c_blog-message .c_blog-message-title h4, побеждаем порядком загрузки. */
.c_blog-message-title.rv-form-toggle h4 {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

/*
 * Стрелка-шеврон — SVG polyline, геометрия определена в viewBox и не зависит от каскада.
 * В закрытом состоянии указывает вниз (v), в открытом — вверх (^) через поворот на 180°.
 */
.rv-form-toggle__chevron {
    flex: 0 0 auto;
    width: 5mm;
    height: 2.5mm;
    margin-left: auto;
    color: black;
    transform-origin: center;
    transition: transform 0.25s ease-in-out;
}

.rv-form-card[open] .rv-form-toggle__chevron {
    transform: rotate(180deg);
}

.rv-form-toggle:hover {
    background-color: #A3DB59;
}
.rv-form-toggle:focus-visible {
    outline: 0.4mm solid #1C4012;
    outline-offset: -0.6mm;
}

/* Список отзывов без правой колонки -> забираем всю ширину. */
#blog-cont.rv-list {
    float: none;
    width: 100%;
    margin-right: 0;
}

/* Форма */
.rv-form {
    display: flex;
    flex-direction: column;
    gap: 3mm;
    padding: 3mm 4mm 4mm 0;
    font-family: "Georgia", "sans-serif";
}

.rv-field {
    display: flex;
    flex-direction: column;
    gap: 1mm;
}

.rv-field label {
    font-family: "Futura", "sans-serif";
    font-style: italic;
    font-size: smaller;
}

.rv-input {
    width: 100%;
    padding: 1.8mm 2.5mm;
    border: 0.4mm solid black;
    border-radius: 2mm;
    background-color: #EFF2F3;
    font-family: "Georgia", "sans-serif";
    font-size: inherit;
}

.rv-input:focus {
    outline: none;
    border-color: #1C4012;
    background-color: #FFFFFF;
}

.rv-textarea {
    resize: vertical;
    line-height: 1.45;
}

/*
 * По умолчанию ровно одна строка по высоте (line-height + вертикальные отступы как у .rv-input).
 * Рост по высоте — скрипт в reviews.html (сброс height в 0 → scrollHeight).
 */
.rv-textarea--grow {
    display: block;
    box-sizing: border-box;
    resize: none;
    overflow-y: hidden;
    /* 1.45 — как у .rv-input в этом блоке; 3.6mm ≈ 1.8mm padding сверху и снизу */
    min-height: calc(1.45em + 3.6mm);
    max-height: none;
}

.rv-textarea--grow::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Honeypot — скрыт от живых пользователей, виден ботам. */
.rv-honeypot {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Кнопка — фирменный зелёный (#A3DB59 как блок контента страницы). */
.rv-actions {
    display: flex;
    justify-content: flex-end;
}

.rv-submit {
    padding: 2mm 7mm;
    border: 0.4mm solid black;
    border-radius: 4mm;
    background-color: #A3DB59;
    color: black;
    font-family: "Futura", "sans-serif";
    font-style: italic;
    font-size: larger;
    cursor: pointer;
}

.rv-submit:hover {
    background-color: #82816D;
    color: #EFF2F3;
}

.rv-submit:active {
    background-color: #023436;
    color: #EFF2F3;
}

/* Блок ответа администратора внутри карточки отзыва. */
.rv-response {
    margin-top: 4mm;
    margin-bottom: 2mm;
    padding: 2mm 4mm 1mm 4mm;
    border-left: 1mm solid #1C4012;
    background-color: rgba(163, 219, 89, 0.30); /* оттенок базового #A3DB59 */
    border-top-right-radius: 2mm;
    border-bottom-right-radius: 2mm;
}

.rv-response__label {
    font-family: "Futura", "sans-serif";
    font-style: italic;
    font-size: smaller;
    color: #1C4012;
    margin-bottom: -2mm;
}

.rv-response__date {
    color: #606060;
    font-size: x-small;
    font-family: "PT Sans Caption", "sans-serif";
    text-align: right;
    margin-top: -2mm;
}

/* Ошибки и flash-сообщения. */
.rv-errors {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #7a1f1f;
    font-size: smaller;
    font-family: "PT Sans Caption", "sans-serif";
}

.rv-errors li {
    margin: 1mm 0 0 0;
}

.rv-messages {
    list-style: none;
    margin: 0 0 5mm 0;
    padding: 0;
}

.rv-message {
    padding: 2mm 4mm;
    border: 0.4mm solid black;
    border-radius: 3mm;
    font-family: "Futura", "sans-serif";
}

.rv-message--success {
    background-color: #A3DB59;
}

.rv-message--error {
    background-color: #FFDA22;
}

/* Заглушка, когда отзывов нет. */
.rv-empty .c_blog-message-main {
    padding: 4mm 4mm 4mm 4mm;
    font-style: italic;
    color: #606060;
}