/* ===================================
   PRIVACY PAGE — ДЕКОР
   Максимально сдержанный декор для юридического документа.
   Единственный мотив — щит (защита данных), без анимаций плавания/вращения.
   Плюс функциональный индикатор прогресса чтения (полезен для длинного документа).
   =================================== */

:root {
    --doodle-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='42' viewBox='0 0 36 42'%3E%3Cpath d='M18 2L33 8V19C33 29 26 36 18 40C10 36 3 29 3 19V8Z' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 20L16 25L26 14' stroke='%23EE7A5D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    --doodle-underline-privacy: 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");
}

/* ===================================
   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-privacy) no-repeat left center / contain;
    opacity: .7;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    right: 8%;
    width: 34px;
    height: 40px;
    background: var(--doodle-shield) no-repeat center / contain;
    opacity: .35;
    /* без анимации — сознательно, тема слишком формальная */
}

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

/* ===================================
   2. ИНДИКАТОР ПРОГРЕССА ЧТЕНИЯ
   Функциональный, не декоративный элемент — полезен для документа
   с 12 разделами. Требует минимального JS (см. ниже).
   =================================== */
.privacy-progress {
    position: sticky;
    top: calc(var(--header-height, 80px) + var(--space-2));
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-4);
    z-index: 5;
}

.privacy-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-full);
    transition: width 0.15s ease-out;
}

@media (max-width: 1024px) {
    .privacy-progress { display: none; } /* навигация не sticky на планшетах/мобильных */
}

/* ===================================
   3. ФОН ОСНОВНОГО КОНТЕНТА — едва заметная текстура
   =================================== */
.privacy-content {
    position: relative;
    overflow: hidden;
}

.privacy-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .06) 1.4px, transparent 1.6px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 40% 25% at 50% 0%, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 40% 25% at 50% 0%, black 0%, transparent 70%);
    opacity: .4;
}

.privacy-content > .container {
    position: relative;
    z-index: 1;
}

/* ===================================
   PRINT
   =================================== */
@media print {
    .page-hero::after,
    .page-hero__title::after,
    .privacy-content::before,
    .privacy-progress {
        display: none !important;
    }
}

/* ===================================
   9. СТРАНИЦА ПОСТАВЩИКА УСЛУГ — акцент на карточках мест
   Скоуп через data-page, т.к. .places-card общий класс с privacy.css
   =================================== */
body[data-page="social-provider"] .places-card__number {
    position: relative;
    display: inline-block;
}

body[data-page="social-provider"] .places-card--available .places-card__number::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-tertiary), transparent);
    border-radius: var(--radius-full);
}

/* Живой индикатор для "свободных мест" — едва заметная пульсация,
   единственная анимация на странице (кроме прогресс-бара), т.к. это
   единственный по-настоящему "живой", часто обновляемый показатель */
body[data-page="social-provider"] .places-card--available .places-card__icon {
    position: relative;
}

body[data-page="social-provider"] .places-card--available .places-card__icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, .4);
    animation: socialProviderPulse 2.4s ease-out infinite;
}

@keyframes socialProviderPulse {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="social-provider"] .places-card--available .places-card__icon::after {
        animation: none;
    }
}

@media print {
    body[data-page="social-provider"] .places-card--available .places-card__icon::after {
        display: none !important;
    }
}