/* ============================================================
   ТЕМА — цветной живой дизайн поверх base стилей
============================================================ */

/* --- Переопределяем токены --- */
:root {
    --bg:           #FFF8F0;
    --surface:      #FFFFFF;
    --border:       #F0E6D8;
    --border-focus: #E07A3A;
    --text-primary: #1C1410;
    --text-secondary:#6B5B4E;
    --text-muted:   #B09A8A;
    --accent:       #E07A3A;
    --accent-hover: #C96830;
    --star-off:     #E8D8C8;
    --star-on:      #F5A623;
    --star-hover:   #FFBE40;
    --error:        #D94F3A;
    --success-bg:   #F0FBF4;
    --success-border:#A8E6C0;
}

/* --- Фон страницы с мягким градиентом --- */
body {
    background: linear-gradient(160deg, #FFF3E6 0%, #FFF8F0 40%, #F0F7FF 100%);
    background-attachment: fixed;
}

/* --- Декоративные плавающие пятна --- */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body::before {
    width: 420px; height: 420px;
    top: -120px; right: -100px;
    background: radial-gradient(circle, rgba(224,122,58,.13) 0%, transparent 70%);
}

body::after {
    width: 360px; height: 360px;
    bottom: -80px; left: -80px;
    background: radial-gradient(circle, rgba(100,160,240,.10) 0%, transparent 70%);
}

.page-wrapper { position: relative; z-index: 1; }

/* --- Шапка --- */
.site-header {
    padding-top: 36px;
}

.header-inner {
    background: linear-gradient(135deg, #E07A3A 0%, #F5A040 100%);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 4px 20px rgba(224,122,58,.3);
    gap: 14px;
}

.header-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.header-title {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.header-sub {
    color: rgba(255,255,255,.8);
    font-size: 0.76rem;
    margin-top: 2px;
}

/* --- Карточка --- */
.card {
    border: 1px solid var(--border);
    box-shadow:
        0 2px 4px rgba(224,122,58,.04),
        0 8px 32px rgba(0,0,0,.07),
        0 1px 0 rgba(255,255,255,.9) inset;
    border-radius: 24px;
}

/* --- Заголовок карточки --- */
.card-title {
    font-size: 1.4rem;
    background: linear-gradient(135deg, #1C1410 30%, #8B4513 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Блок со звёздами --- */
.rating-wrap {
    background: linear-gradient(135deg, #FFF3E6 0%, #FFF8F2 100%);
    border: 1px solid #F0D8C0;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.rating-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E07A3A, #F5A623, #E07A3A);
    border-radius: 16px 16px 0 0;
}

.rating-label {
    color: #A07050;
    font-weight: 600;
}

/* --- Поле textarea --- */
.field-textarea {
    border-color: #EAD8C8;
    background: #FFFAF6;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.field-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(224,122,58,.12);
    background: #FFFFFF;
}

.field-textarea.is-error {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(217,79,58,.10);
}

/* --- Кнопка отправки --- */
.btn-submit {
    background: linear-gradient(135deg, #E07A3A 0%, #F5943A 100%);
    box-shadow: 0 4px 18px rgba(224,122,58,.4), 0 1px 0 rgba(255,255,255,.2) inset;
    border-radius: 14px;
    font-size: 1rem;
    letter-spacing: .01em;
}

.btn-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #C96830 0%, #E07A3A 100%);
    box-shadow: 0 6px 24px rgba(224,122,58,.5);
    transform: translateY(-2px);
}

.btn-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(224,122,58,.3);
}

.btn-submit:focus-visible { outline-color: #E07A3A; }

/* --- Карточка успеха --- */
.card--success {
    background: linear-gradient(135deg, #F0FBF4 0%, #FAFFFD 100%);
    border-color: #B8E8C8;
    box-shadow: 0 8px 32px rgba(40,160,80,.10);
}

.success-title {
    background: linear-gradient(135deg, #1C6B3A 0%, #2D9E58 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-again {
    border-color: #C0DEC8;
    color: #3A7A50;
}

.btn-again:hover {
    border-color: #2D9E58;
    color: #1C6B3A;
    background: rgba(45,158,88,.05);
}

/* --- Разделитель — небольшое украшение в форме --- */
.form::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #F0D8C0 30%, #F0D8C0 70%, transparent);
    margin-bottom: 2px;
}

/* --- Метка поля --- */
.field-label {
    color: #5C4030;
    font-size: 0.9rem;
}

/* --- Footer --- */
.site-footer {
    color: #C0A898;
}

/* --- Мобильный --- */
@media (max-width: 480px) {
    .header-inner {
        padding: 12px 16px;
        border-radius: 14px;
    }
    .card {
        border-radius: 20px;
    }
}