/* Статичные страницы (юридические, подтверждение почты, «спасибо», отписка, 404) — в виде нового сайта:
   фон как на сайте, стеклянные шапка и панель, шрифты бренда, плавное появление.
   Подключается после старого styles.css и переопределяет только внешний вид; тексты и логика не меняются. */
html { background: #0d0d10; }
body, body.subpage { background: transparent !important; }
body.subpage::before { display: none; }

.page-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 60% at 50% -10%, rgba(255, 59, 78, 0.10), transparent 60%), var(--aw-bg); overflow: hidden; }
/* Как в админке: два слоя мягких свечений плывут каждый своим путём (только transform — дёшево) */
.page-fx::before, .page-fx::after { content: ""; position: absolute; pointer-events: none; }
.page-fx::before { inset: -20%;
    background: radial-gradient(32% 38% at 22% 30%, rgba(255, 59, 78, 0.13), transparent 70%), radial-gradient(28% 34% at 82% 82%, rgba(255, 181, 71, 0.07), transparent 70%), radial-gradient(40% 40% at 70% 10%, rgba(255, 59, 78, 0.06), transparent 70%);
    animation: fx-drift 38s ease-in-out infinite alternate; }
.page-fx::after { inset: -10%;
    background: radial-gradient(26% 30% at 62% 55%, rgba(255, 59, 78, 0.08), transparent 70%), radial-gradient(22% 26% at 14% 86%, rgba(255, 181, 71, 0.05), transparent 70%);
    animation: fx-drift-b 22s ease-in-out infinite alternate; }
@keyframes fx-drift { to { transform: translate3d(4%, -3%, 0) scale(1.06); } }
@keyframes fx-drift-b { 40% { transform: translate3d(-5%, 4%, 0) scale(0.94); } to { transform: translate3d(3%, -5%, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .page-fx::before, .page-fx::after { animation: none; } }
/* «Жидкость» со страницы входа в админку (site.js рисует в canvas), сильнее размыта; поверх — затемнение,
   чтобы текст читался. Пока canvas не загорелся (или нет WebGL) — видны CSS-свечения выше. */
.page-fx canvas { position: absolute; inset: -8%; width: 116%; height: 116%; display: block; filter: blur(34px) saturate(0.9) brightness(1.1);
    opacity: 0; transition: opacity 1.6s ease; }
.page-fx.gl canvas { opacity: 1; }
.page-fx.gl::before { opacity: 0; transition: opacity 1.6s ease; }
.page-fx.gl::after { inset: 0; animation: none; transform: none;
    background: radial-gradient(80% 90% at 50% 40%, rgba(13,13,16,0.3), rgba(13,13,16,0.74)); }

/* Шапка — стеклянная «таблетка», как меню нового сайта */
.legal-topbar { position: sticky; top: 14px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: min(1100px, calc(100% - 28px)); margin: 14px auto 0; padding: 10px 12px 10px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 12, 14, 0.62); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); }
.legal-topbar a.legal-brand { font-family: var(--aw-font-display); font-weight: 600; letter-spacing: 0.18em; color: #fff; text-decoration: none; }
.legal-topbar a.legal-home, #legalLangToggle { border-radius: 999px; transition: background 0.3s, color 0.3s; }

/* Текст — в стеклянной панели */
.legal-wrap { width: min(880px, calc(100% - 28px)); max-width: none; margin: 28px auto 64px; padding: clamp(24px, 5vw, 56px); border-radius: 32px;
    background: rgba(16, 16, 20, 0.62); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.85); animation: page-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.legal-wrap h1 { font-family: var(--aw-font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.legal-wrap h2, .legal-wrap h3 { font-family: var(--aw-font-display); font-weight: 600; letter-spacing: -0.01em; }
.legal-wrap a { color: var(--aw-accent-soft); }
.legal-wrap table.legal-table { border-radius: 16px; overflow: hidden; }

/* Служебные страницы: подтверждение, «спасибо», отписка, 404 */
.util-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: none; }
.util-card { border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(16, 16, 20, 0.62);
    backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px -30px rgba(0, 0, 0, 0.85); animation: page-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.util-title { font-family: var(--aw-font-display); letter-spacing: -0.02em; }
.util-code { color: var(--aw-accent); text-shadow: 0 0 40px var(--aw-accent-glow); }
.util-btn { border-radius: 999px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.3s; }
.util-btn.primary { background: var(--aw-accent); color: #fff; box-shadow: 0 18px 40px -16px var(--aw-accent-glow); }
.util-btn:hover { transform: translateY(-2px); }

@keyframes page-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .legal-wrap, .util-card { animation: none; } }
/* таблица cookies на телефоне прокручивается сама, страница не шире экрана; кнопка «Configurar cookies» */
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table-wrap table.legal-table { min-width: 620px; }
.legal-wrap .cc-open { font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); }
.legal-wrap .cc-open:hover { background: rgba(255,255,255,0.16); }