/* # 1. Типографика */

/* Заголовки секций — общие стили (брейкпоинты TW: sm 640 / md 768 / lg 1024 / xl 1280) */
.title {
    font-family: 'Buyan', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2.5rem;
}

/* h1 — крупный hero */
h1.title { font-size: 6rem; font-weight: 400; }

/* h2 — заголовок секции */
h2.title { font-size: 4rem; }

/* h3 — компактный заголовок карточки */
h3.title { font-size: 2rem; margin-bottom: 0.75rem; }

@media (max-width: 1023px) {
    h1.title { font-size: 4.5rem; }
    h2.title { font-size: 3rem; }
    h3.title { font-size: 1.5rem; }
}

@media (max-width: 767px) {
    h1.title { font-size: 3rem; }
    h2.title { font-size: 2.25rem; }
    h3.title { font-size: 1.25rem; }
}

/* Утилита: принудительно Buyan на любом элементе (бейджи, цифры и т.п. — там где .title не подходит) */
.font-buyan { font-family: 'Buyan', sans-serif; }

/* Заголовки из HTML-полей (p/ul/li) — без класса; заголовки блоков идут через .title */
h1 { font-family: 'Buyan', sans-serif; font-weight: 700; font-size: 2.25rem; margin-top: 2rem; margin-bottom: 1rem; }
h2 { font-family: 'Buyan', sans-serif; font-weight: 700; font-size: 1.875rem; margin-top: 2rem; margin-bottom: 0.875rem; }
h3 { font-family: 'Buyan', sans-serif; font-weight: 700; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; }

/* Текстовый контент из HTML-полей (p/ul/li) — только внутри .text-content, чтобы не задеть вёрстку (например меню в header) */
.text-content p { margin-bottom: 1rem; }
.text-content p:last-child { margin-bottom: 0; }
.text-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.text-content li { margin-bottom: 0.375rem; }

/* # 2. Элементы UI */

/* ## 2.1 Формы (input, select, textarea, checkbox) */

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--c-light);
    color: var(--c-dark);
    font-size: 1rem;
    line-height: 1.25;
    outline: 0;
}
.form-input::placeholder { color: color-mix(in srgb, var(--c-dark) 50%, transparent); }
.form-input:focus { box-shadow: 0 0 0 2px var(--c-primary); }

select.form-input { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%231f2937'><path d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/></svg>"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; cursor: pointer; }

.form-check { accent-color: var(--c-primary); flex-shrink: 0; cursor: pointer; width: 1.125rem; height: 1.125rem; }

/* Кнопка внутри формы неактивна, пока форма невалидна (required-поля пустые) */
form:invalid .btn-cta { opacity: .5; pointer-events: none; }

/* ## 2.2 Кнопки */

/* CTA-кнопка: яркая, с shine-эффектом и объёмным border-bottom (как в hero). Размеры: --s/--m/--l */
.btn-cta {
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 0.5rem;
    color: #000;
    background: var(--c-primary);
    border-bottom: 4px solid color-mix(in srgb, var(--c-primary) 60%, black);
    cursor: pointer;
}
.btn-cta--s { padding: 0.375rem 2.5rem; }
.btn-cta--s > span:first-child { font-size: 1rem; }
.btn-cta--s > span + span { font-size: 0.75rem; }
.btn-cta--m { padding: 0.4rem 3.5rem; }
.btn-cta--m > span:first-child { font-size: 1.4rem; }
.btn-cta--m > span + span { font-size: 0.875rem; }
.btn-cta--l { padding: 0.75rem 5rem; }
.btn-cta--l > span:first-child { font-size: 1.875rem; }
.btn-cta--l > span + span { font-size: 1rem; }
@media (max-width: 767px) {
    .btn-cta--s { padding: 0.375rem 1.5rem; }
    .btn-cta--m { padding: 0.4rem 2rem; }
    .btn-cta--l { padding: 0.75rem 3rem; }
}
.btn-cta > span:first-child { display: block; font-family: 'Buyan', sans-serif; line-height: 1; font-weight: 700; }
.btn-cta > span + span { display: block; line-height: 1; font-weight: 400; text-transform: none; opacity: .8; }
/* Неактивная CTA (управляется JS, напр. квиз до ответа) */
.btn-cta.is-disabled { opacity: .5; pointer-events: none; }

/* ## 2.3 Квиз (liga-remont/quiz.html) */

/* Кликабельные элементы квиза */
.quiz-option, .quiz-msg, .quiz-back { cursor: pointer; }

/* Полоса прогресса: бар на всю ширину, позиция — через transform. Анимация идёт на компоузере
   и не дёргается, пока главный поток перестраивает DOM шага (в отличие от анимации width).
   Кривая = easeOutCubic, должна совпадать с easeOut в quiz.js (счётчик процентов) */
.quiz-bar { transition: transform .45s cubic-bezier(.33, 1, .68, 1); }

/* Процент в прогресс-баре */
.quiz-progress-label { color: var(--c-dark); }

/* Финал: панель консультанта скрыта, квиз на всю ширину */
.quiz-done .quiz-aside { display: none; }
.quiz-done .quiz-main { grid-column: 1 / -1; }

/* Вращение pdf-кольца в таймере финала */
.quiz-spin { animation: quiz-spin 14s linear infinite; }
@keyframes quiz-spin { to { transform: rotate(360deg); } }

/* Галочка на карточке-варианте: серая → primary при hover/выборе */
.quiz-check { color: #d1d5db; transition: color .2s; }
.quiz-option:hover .quiz-check,
.quiz-option.is-selected .quiz-check { color: var(--c-primary); }
.quiz-option.is-selected .quiz-thumb { outline: 3px solid var(--c-primary); outline-offset: -1px; }
/* Индикатор выбора: single — кружок (по умолчанию rounded-full в HTML), multiple — квадрат */
.quiz-step[data-type="multiple"] .quiz-check { border-radius: .375rem; }
.quiz-check svg { width: 1.15rem; height: 1.15rem; }

/* Вариант-«чип» (шаг без картинок) */
.quiz-chip { border: 1px solid #d1d5db; border-radius: .5rem; padding: .6rem 1.25rem; background: #fff; color: var(--c-dark); transition: border-color .2s, background .2s; }
.quiz-chip:hover { border-color: var(--c-primary); }
.quiz-option.is-selected.quiz-chip { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, #fff); font-weight: 600; }

/* Выбор мессенджера на финале: неактивные приглушены, активный — полноцветный с обводкой */
.quiz-msg .quiz-msg-circle { transition: box-shadow .2s, opacity .2s; opacity: .55; }
.quiz-msg:hover .quiz-msg-circle { opacity: 1; }
.quiz-msg.is-selected .quiz-msg-circle { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-primary); }

/* # 3. Эффекты */

/* Плавный скролл по якорям (кнопки «к блоку») */
html { scroll-behavior: smooth; }

/* Диагональные движущиеся полосы (прогресс-бар квиза и т.п.) — накладываются поверх background-color */
.progress-stripes {
    background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
    background-size: 1.5rem 1.5rem;
    animation: progress-stripes 1.5s linear infinite;
}
@keyframes progress-stripes { from { background-position: 0 0; } to { background-position: 1.5rem 0; } }

/* Пульсация точек "Цена фиксируется..." по очереди */
@keyframes hero-dot-pulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1); }
}
.hero-dot { animation: hero-dot-pulse 1.4s ease-in-out infinite; }
.hero-dot:nth-child(2) { animation-delay: .2s; }

/* Эффект перелива (shine) — переиспользуемый, для кнопок и других акцентных элементов */
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    animation: shine-sweep 3s ease-in-out infinite;
}
@keyframes shine-sweep {
    0% { left: -75%; }
    50%, 100% { left: 125%; }
}

/* Появление элементов при прокрутке в зону видимости (управляется common.js) */
.fade-in { opacity: 0; transform: translateY(-30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Слайд-подчёркивание: по умолчанию полная ширина, на ховере сужается до 50% слева */
.hover-underline { position: relative; display: inline-block; width: fit-content; line-height: 1.2; }
.hover-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--c-primary); transition: width .3s ease; pointer-events: none; }
.hover-underline:hover::after { width: 50%; }

/* # 4. Блоки */

/* ## 4.1 Хотспот (liga-remont/house.html) */
.hotspot { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; user-select: none; cursor: pointer; border: none; padding: 0; animation: pulse-ring 1.6s ease-out infinite; position: relative; }
@media (max-width: 767px) {
    .hotspot { width: 16px; height: 16px; font-size: 12px; }
}
/* z-index на враппере (transform создаёт stacking context), чтобы z реально сравнивался с соседними врапперами */
.hotspot-wrap { z-index: 1; }
.hotspot-wrap:hover, .hotspot-wrap:focus-within { z-index: 2; }
.hotspot-tip { z-index: -1; opacity: 0; visibility: hidden; max-width: calc(100vw - 2rem); }
@media (max-width: 767px) {
    .hotspot-tip { left: calc(50vw - var(--x) * 1vw); }
}
.hotspot-wrap:hover .hotspot-tip, .hotspot-wrap:focus-within .hotspot-tip { opacity: 1; visibility: visible; }

/* Пульсирующая обводка — переиспользуемая на любых круглых кнопках (play, hotspot и т.п.) */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary) 70%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-primary) 0%, transparent); }
}
.pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }