/* ===================================
   REVIEWS PAGE — ДЕКОР
   Тема: сердце-признательность / рукописная звезда / водяной знак-кавычка.
   =================================== */

:root {
    --doodle-heart-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30'%3E%3Cpath d='M17 27C17 27 2 18 2 9C2 4 6 1 10 1C13 1 16 3 17 6C18 3 21 1 24 1C28 1 32 4 32 9C32 18 17 27 17 27Z' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-star-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 2L18.5 11L28 12L20.5 18.5L23 28L15 22.5L7 28L9.5 18.5L2 12L11.5 11Z' fill='none' stroke='%2352CC9A' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doodle-underline-reviews: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M2 9C12 2 18 12 28 6C38 0 44 12 54 6C64 0 72 12 82 6' fill='none' stroke='%23EE7A5D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-quote-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32'%3E%3Cpath d='M0 32V19C0 8 7 1 16 0V6C10 7 7 11 7 16H14V32H0ZM24 32V19C24 8 31 1 40 0V6C34 7 31 11 31 16H38V32H24Z' fill='rgba(238,122,93,0.08)'/%3E%3C/svg%3E");
}

@keyframes reviewsDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(6deg); }
}

@keyframes reviewsStarPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.12) rotate(8deg); }
}

/* ===================================
   1. HERO — сердце + подчёркивание
   =================================== */
.page-hero__title {
    position: relative;
    display: inline-block;
}

.page-hero__title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 6px;
    background: var(--doodle-underline-reviews) no-repeat left center / contain;
    opacity: .8;
}

.page-hero {
    position: relative;
}

.page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 12%;
    right: 8%;
    width: 34px;
    height: 30px;
    background: var(--doodle-heart-review) no-repeat center / contain;
    opacity: .5;
    animation: reviewsDoodleFloat 8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .page-hero::after { display: none; }
}

/* ===================================
   2. ФОН СЕТКИ ОТЗЫВОВ — водяные кавычки
   =================================== */
.reviews-page {
    position: relative;
    overflow: hidden;
}

.reviews-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
            var(--doodle-quote-mark),
            var(--doodle-quote-mark);
    background-repeat: no-repeat, no-repeat;
    background-position: 4% 8%, 94% 88%;
    background-size: 60px 48px, 70px 56px;
    opacity: .6;
}

.reviews-page > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   3. ЗВЁЗДОЧКА-АКЦЕНТ РЯДОМ С РЕЙТИНГОМ КАРТОЧКИ
   Едва заметная декоративная звезда в углу карточки с рейтингом 5 —
   выделяет лучшие отзывы без явного текста "топ"
   =================================== */
.review-card:has(.review-card__stars svg:nth-child(5)) {
    position: relative;
}

.review-card:has(.review-card__stars svg:nth-child(5))::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: var(--doodle-star-review) no-repeat center / contain;
    opacity: .5;
    z-index: 3;
    pointer-events: none;
}

.review-card--photo:has(.review-card__stars svg:nth-child(5))::after,
.review-card--video:has(.review-card__stars svg:nth-child(5))::after {
    display: none; /* не мешаем медиа-зоне, актуально только для text-карточек */
}

.review-card:hover::after {
    animation: reviewsStarPulse 1.6s ease-in-out infinite;
}

/* ===================================
   4. CTA — сердце + звезда
   =================================== */
.reviews-cta {
    position: relative;
}

.reviews-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 18%;
    left: 6%;
    width: 30px;
    height: 26px;
    background: var(--doodle-heart-review) no-repeat center / contain;
    opacity: .35;
    animation: reviewsDoodleFloat 9s ease-in-out infinite reverse;
}

@media (max-width: 768px) {
    .reviews-cta::after { display: none; }
}

/* ===================================
   5. LIGHTBOX — тонкая рамка-акцент вокруг звёзд в инфо-панели
   =================================== */
.review-lightbox__stars {
    position: relative;
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .page-hero::after,
    .reviews-cta::after,
    .review-card:hover::after {
        animation: none;
    }
}

@media print {
    .page-hero::after,
    .page-hero__title::after,
    .reviews-page::before,
    .reviews-cta::after,
    .review-card::after {
        display: none !important;
    }
}

/* ===================================
   ДОПОЛНЕНИЕ К REVIEWS-PAGE-DECOR.CSS
   =================================== */

/* ===================================
   6. МОТИВАЦИОННЫЙ БЛОК ПЕРЕД CTA — прогресс "почему стоит оставить отзыв"
   Добавляет смысловой контент в конец сетки отзывов
   =================================== */
.reviews-motivation {
    max-width: 720px;
    margin: var(--space-12) auto 0;
    text-align: center;
}

.reviews-motivation__title {
    font-family: var(--font-heading), sans-serif;
    font-size: var(--fz-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

/* ===================================
   7. ЗВЁЗДЫ-РАЗДЕЛИТЕЛЬ (замена волнистого divider для тематики "отзывы")
   =================================== */
.reviews-star-split {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-10) 0;
}

.reviews-star-split::before,
.reviews-star-split::after {
    content: '';
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border));
}

.reviews-star-split::after {
    background: linear-gradient(to left, transparent, var(--color-border));
}

.reviews-star-split__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--doodle-star-review) no-repeat center / contain;
    opacity: 0.7;
}