/* ============================================================
   ASHLEY — page.reviews.form/style.css
   Accent: #F68C2C  |  BG: #FBF5EE
   ============================================================ */

:root {
    --a-accent:        #F68C2C;
    --a-accent-dark:   #D9730F;
    --a-accent-light:  #FEF0E3;
    --a-accent-glow:   rgba(246, 140, 44, 0.22);
    --a-bg:            #FBF5EE;
    --a-card:          #FFFFFF;
    --a-text:          #2B2118;
    --a-muted:         #A0897A;
    --a-border:        #EDE0D4;
    --a-sh-dark:       rgba(180, 140, 100, 0.18);
    --a-sh-light:      rgba(255, 255, 255, 0.95);
    --a-r-card:        18px;
    --a-r-btn:         50px;
    --a-r-input:       12px;
    --a-font:          'Georgia', 'Times New Roman', serif;
    --a-font-ui:       'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* ============================================================
   КОНТЕЙНЕР ФОРМЫ / МОДАЛКА
   ============================================================ */
.chili-modal,
.chili-page-review-form-wrap {
    background: var(--a-card);
    border-radius: var(--a-r-card);
    padding: 36px 40px;
    max-width: 580px;
    width: 100%;
    font-family: var(--a-font-ui);
    color: var(--a-text);
    box-shadow:
            10px 10px 28px var(--a-sh-dark),
            -8px -8px 20px var(--a-sh-light);
}

/* ============================================================
   ЗАГОЛОВОК ФОРМЫ
   ============================================================ */
.chili-page-review-form-wrap h2,
.chili-modal h2 {
    font-family: var(--a-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--a-accent);
    margin: 0 0 28px;
}

/* ============================================================
   ЛЕЙБЛЫ
   ============================================================ */
.chili-page-review-form-wrap label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--a-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ============================================================
   ПОЛЯ ВВОДА
   ============================================================ */
.chili-page-review-form-wrap input[type="text"],
.chili-page-review-form-wrap input[type="email"],
.chili-page-review-form-wrap textarea,
.chili-page-review-form-wrap select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--a-border);
    border-radius: var(--a-r-input);
    font-size: 0.93rem;
    font-family: var(--a-font-ui);
    color: var(--a-text);
    background: var(--a-bg);
    outline: none;
    box-sizing: border-box;
    margin-bottom: 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow:
            inset 3px 3px 7px var(--a-sh-dark),
            inset -2px -2px 6px var(--a-sh-light);
}

.chili-page-review-form-wrap input[type="text"]:focus,
.chili-page-review-form-wrap input[type="email"]:focus,
.chili-page-review-form-wrap textarea:focus,
.chili-page-review-form-wrap select:focus {
    border-color: var(--a-accent);
    box-shadow:
            inset 3px 3px 7px var(--a-sh-dark),
            inset -2px -2px 6px var(--a-sh-light),
            0 0 0 3px var(--a-accent-glow);
}

.chili-page-review-form-wrap textarea {
    min-height: 130px;
    resize: vertical;
}

/* ============================================================
   ИНТЕРАКТИВНЫЕ ЗВЁЗДЫ РЕЙТИНГА
   ============================================================ */
.chili-page-review-form-wrap .chili-stars,
.chili-page-review-form-wrap .red-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.chili-page-review-form-wrap .chili-stars input[type="radio"],
.chili-page-review-form-wrap .red-stars input[type="radio"] {
    display: none;
}

.chili-page-review-form-wrap .chili-stars label,
.chili-page-review-form-wrap .red-stars label {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-color: var(--a-border);
    cursor: pointer;
    transition: background-color 0.15s;
    text-indent: -9999px;
    overflow: hidden;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Hover: подсвечиваем звезду и все после неё (т.к. flex-direction: row-reverse) */
.chili-page-review-form-wrap .chili-stars label:hover,
.chili-page-review-form-wrap .chili-stars label:hover ~ label {
    background-color: var(--a-accent);
}

/* Выбранные звёзды */
.chili-page-review-form-wrap .chili-stars input:checked ~ label {
    background-color: var(--a-accent);
}

/* ============================================================
   ЧЕКБОКС «РЕКОМЕНДУЮ»
   ============================================================ */
.chili-page-review-form-wrap input[type="checkbox"] {
    accent-color: var(--a-accent);
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin-right: 8px;
    vertical-align: middle;
}

/* ============================================================
   КНОПКА ОТПРАВКИ
   ============================================================ */
.chili-page-review-form-wrap button[type="submit"] {
    width: 100%;
    padding: 15px 40px;
    margin-top: 8px;
    background: var(--a-accent);
    color: #fff;
    border: none;
    border-radius: var(--a-r-btn);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--a-font-ui);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 4px 18px var(--a-accent-glow);
    letter-spacing: 0.3px;
}

.chili-page-review-form-wrap button[type="submit"]:hover {
    background: var(--a-accent-dark);
    box-shadow: 0 6px 24px var(--a-accent-glow);
    transform: translateY(-2px);
}

.chili-page-review-form-wrap button[type="submit"]:active {
    transform: none;
    box-shadow: 0 2px 8px var(--a-accent-glow);
}

/* ============================================================
   СООБЩЕНИЯ: УСПЕХ / ОШИБКА
   ============================================================ */
.chili-page-review-form-wrap .chili-success,
.chili-page-review-form-wrap .red-success {
    background: var(--a-accent-light);
    border-left: 4px solid var(--a-accent);
    color: var(--a-accent-dark);
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    margin-top: 16px;
}

.chili-page-review-form-wrap .chili-error,
.chili-page-review-form-wrap .red-error {
    background: #FDECEA;
    border-left: 4px solid #C0392B;
    color: #C0392B;
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    margin-top: 16px;
}

/* ============================================================
   КНОПКА ЗАКРЫТИЯ МОДАЛКИ
   ============================================================ */
.chili-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--a-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}

.chili-modal-close:hover {
    color: var(--a-accent);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 600px) {
    .chili-modal,
    .chili-page-review-form-wrap {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .chili-page-review-form-wrap button[type="submit"] {
        padding: 14px 24px;
    }
}