*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: var(--font-family);
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: inherit;
    font-size: inherit;
}
[hidden] {
    display: none !important;
}

/* ===== DESIGN TOKENS ===== */
:root {
    /* Colors */
    --color-purple: #CD82DD;
    --color-orange: #FB946C;
    --color-pink: #ff3b6c;
    --color-pink-dark: #e8255a;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-text-light: #94a3b8;
    --color-bg: #ffffff;
    --color-bg-soft: #f8f9fb;
    --color-bg-page: #fafbfd;
    --color-border: rgba(0, 0, 0, 0.06);
    --color-border-hover: rgba(205, 130, 221, 0.3);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-pink: 0 8px 18px rgba(255, 59, 108, 0.35);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    /* Typography */
    --font-family: 'Ubuntu', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* Shared hover lift */
    --hover-lift: translateY(-2px);
    --hover-press: translateY(0);

    /* Gradients */
    --gradient-pink: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
    --gradient-brand: linear-gradient(96deg, var(--color-purple) 4.34%, var(--color-orange) 100%);
    --gradient-bar: linear-gradient(90deg, var(--color-purple), var(--color-pink), var(--color-orange), var(--color-pink), var(--color-purple));

    /* Gradient bar animation — единый для всего сайта */
    --bar-size: 300% 100%;
    --bar-speed: 4s;
}

.d-flex{
    display: flex;
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
}
.container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* legacy styles removed — all redefined below */

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.d-none{
    display: none;
}

nav {
    display: flex;
    justify-content: center;
    margin: var(--space-lg) 0;
}

/* Контейнер пагинации */
.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Кнопки страниц — светлая тема */
.page-item .page-link,
.page-item span.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform 0.1s ease,
        box-shadow var(--transition-fast);
}

/* Ховер по ссылке */
.page-item:not(.disabled):not(.active) .page-link:hover {
    border-color: var(--color-border-hover);
    background: rgba(205, 130, 221, 0.04);
    transform: var(--hover-lift);
    box-shadow: 0 3px 10px rgba(205, 130, 221, 0.08);
}

/* Активная страница — gradient pink */
.page-item.active .page-link,
.page-item.active span.page-link {
    background: var(--gradient-pink);
    border-color: var(--color-pink);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--shadow-pink);
}

/* Disabled (стрелки) */
.page-item.disabled .page-link,
.page-item.disabled span.page-link {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
    color: var(--color-text-light);
    cursor: default;
    pointer-events: none;
}

/* Стрелки немного уже */
.page-item:first-child .page-link,
.page-item:last-child .page-link,
.page-item:first-child span.page-link,
.page-item:last-child span.page-link {
    min-width: 32px;
    padding: 0 8px;
}

/* ===== КНОПКА «ПОКАЗАТЬ ЕЩЁ» ===== */
/* .more-posts наследует .btn .btn--pink .btn--sm */
.more-posts {
    max-width: 220px;
    margin: var(--space-lg) auto;
    letter-spacing: 0.02em;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== БАЗОВЫЕ КНОПКИ ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-md);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2.5s ease infinite;
}

.btn:hover {
    transform: var(--hover-lift);
}

.btn:active {
    transform: var(--hover-press);
}

/* Pink вариант */
.btn--pink {
    background: var(--gradient-pink);
    box-shadow: 0 6px 18px rgba(255, 59, 108, 0.3);
}

.btn--pink:hover {
    box-shadow: 0 10px 24px rgba(255, 59, 108, 0.4);
}

.btn--pink:active {
    box-shadow: 0 4px 10px rgba(255, 59, 108, 0.25);
}

/* Brand вариант (purple → orange) */
.btn--brand {
    background: var(--gradient-brand);
    box-shadow: 0 6px 18px rgba(205, 130, 221, 0.3);
}

.btn--brand:hover {
    box-shadow: 0 10px 24px rgba(205, 130, 221, 0.4);
}

.btn--brand:active {
    box-shadow: 0 4px 10px rgba(205, 130, 221, 0.25);
}

/* Размеры */
.btn--sm {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
}

.btn--lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn--block {
    width: 100%;
}


.breadcrumbs {
    margin: var(--space-md) 0 var(--space-xl);
    font-size: var(--font-size-base);
}

.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
}

/* Элементы */
.breadcrumbs li {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

/* Ссылки с underline-анимацией */
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast);
}

.breadcrumbs a::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-purple);
    transition: width 0.3s ease;
}

.breadcrumbs a:hover {
    color: var(--color-purple);
}

.breadcrumbs a:hover::after {
    width: 100%;
}

/* SVG-шеврон как разделитель */
.breadcrumbs li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 4px;
    background: currentColor;
    opacity: 0.25;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Текущая страница */
.breadcrumbs li:last-child {
    color: var(--color-text);
    font-weight: 600;
}

.mySwiper {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: #000; /* фон под фото */
}

.mySwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.mySwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    color: #fff;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.15s ease, box-shadow var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mySwiper .swiper-button-next:hover,
.mySwiper .swiper-button-prev:hover {
    background: rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.mySwiper .swiper-button-next:active,
.mySwiper .swiper-button-prev:active {
    transform: scale(0.96);
}

.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
    font-family: inherit;
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2.5px solid #fff;
    border-top: 2.5px solid #fff;
    display: block;
}

.mySwiper .swiper-button-next::after {
    transform: rotate(45deg);
    margin-left: -3px;
}

.mySwiper .swiper-button-prev::after {
    transform: rotate(-135deg);
    margin-right: -3px;
}

/* Показываем стрелки только когда > 1 слайд */
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    opacity: 0.85;
}

.mySwiper:hover .swiper-button-next,
.mySwiper:hover .swiper-button-prev {
    opacity: 1;
}

/* Мобильные стрелки чуть меньше */
@media (max-width: 576px) {
    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
    .mySwiper .swiper-button-next::after,
    .mySwiper .swiper-button-prev::after {
        width: 8px;
        height: 8px;
        border-right-width: 2px;
        border-top-width: 2px;
    }
}

.mySwiper .swiper-pagination {
    bottom: 12px !important;
}

.mySwiper .swiper-pagination-bullet {
    background: rgba(255,255,255,0.6);
    width: 8px;
    height: 8px;
    opacity: 1;
}

.mySwiper .swiper-pagination-bullet-active {
    background: var(--color-pink);
}

.single {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xl);
    margin: var(--space-xl) 0 var(--space-2xl);
}

/* Левая колонка – фото */
.single .main-photo {
    width: 40%;
    min-width: 40%;
}

.single-video {
    margin-top: var(--space-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-md);
}

.single-video video {
    display: block;
    width: 100%;
    max-height: 500px;
    border-radius: var(--radius-lg);
}

/* Правая колонка – инфа об аниматоре */
.single .params {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* .phone наследует .btn .btn--pink .btn--lg */
.phone {
    font-size: 16px;
}

.body-params {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.body-params:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.body-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-xl);
}

.body-param-tem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
}

.body-param-name {
    min-width: 90px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.body-param-value {
    color: var(--color-text);
    font-weight: 600;
}

.single-price {
    display: flex;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.single-price:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.single-price--combined {
    flex-direction: row;
    gap: 0;
}

.single-price--combined .apart-price {
    flex: 1;
}

.price-divider {
    width: 1px;
    background: var(--color-border);
    margin: 0 var(--space-lg);
    align-self: stretch;
}

.apart-price {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.price-heading {
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.price-item-wrap {
    display: flex;
    gap: var(--space-sm);
}

.price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    padding: 8px 12px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    text-align: center;
    flex: 1;
}

.price-item span:first-child {
    color: var(--color-text-muted);
}

.price-item span:last-child {
    font-weight: 700;
    color: var(--color-pink);
}

.about-post {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.about-post:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.about-heading {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.about-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-muted);
    white-space: pre-line;
}

.map-wrap {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.map-wrap:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.map-wrap .about-heading {
    margin-bottom: var(--space-sm);
}

#map {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.service-wrap {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-wrap:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.service-wrap .about-heading {
    margin-bottom: var(--space-sm);
}

.service-wrap .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
}

.service-wrap .item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.service-wrap .item .label {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.service-wrap .item.done .label {
    color: #1a8b3b;
    font-weight: 600;
}

.service-wrap .item .label:hover {
    text-decoration: underline;
    color: var(--color-purple);
}

/* чекбокс с тенью */
.service-wrap .check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.service-wrap .item.done .check {
    background: #1a8b3b;
    border-color: #1a8b3b;
}

.service-wrap .check-icon {
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
}

/* ===== SIDE-MENU CUSTOM PROPERTIES (LIGHT) ===== */
.side-menu {
    --sm-bg-from: var(--color-bg-page);
    --sm-bg-to: var(--color-bg);
    --sm-glass: rgba(0, 0, 0, 0.02);
    --sm-glass-border: var(--color-border);
    --sm-purple: var(--color-purple);
    --sm-orange: var(--color-orange);
    --sm-pink: var(--color-pink);
    --sm-text: var(--color-text);
    --sm-text-muted: var(--color-text-muted);
    --sm-glow-purple: rgba(205, 130, 221, 0.35);
    --sm-glow-pink: rgba(255, 59, 108, 0.3);
    --sm-radius: var(--radius-md);
    --sm-transition: var(--transition-base);
}

/* ===== ОВЕРЛЕЙ ===== */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 998;
}

/* ===== SIDE-MENU ===== */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 340px;
    max-width: 88%;
    background: linear-gradient(170deg, var(--sm-bg-from) 0%, var(--sm-bg-to) 100%);
    box-shadow:
        10px 0 50px rgba(0, 0, 0, 0.1),
        -1px 0 0 var(--color-border);
    transform: translateX(-102%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 999;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 130, 221, 0.2) transparent;
}

.side-menu::-webkit-scrollbar { width: 3px; }
.side-menu::-webkit-scrollbar-track { background: transparent; }
.side-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sm-purple), var(--sm-orange));
    border-radius: 99px;
}

/* Анимированная градиентная полоса сверху */
.side-menu::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 3px;
    background: var(--gradient-bar);
    background-size: var(--bar-size);
    animation: gradient-bar var(--bar-speed) ease infinite;
    z-index: 10;
    flex-shrink: 0;
}

@keyframes gradient-bar {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Фоновое свечение */
.side-menu::after {
    content: "";
    position: fixed;
    top: -80px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(205, 130, 221, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ===== ШАПКА МЕНЮ ===== */
.side-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    position: sticky;
    top: 2px;
    background: linear-gradient(180deg,
        var(--sm-bg-from) 0%,
        rgba(250, 251, 253, 0.97) 80%,
        rgba(250, 251, 253, 0) 100%);
    z-index: 5;
}

.side-menu__logo img {
    height: 26px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.side-menu__logo:hover img {
    opacity: 1;
}

/* Кнопка закрытия */
.side-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--sm-glass-border);
    background: var(--sm-glass);
    color: var(--sm-text-muted);
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.side-menu__close:hover {
    background: rgba(255, 59, 108, 0.12);
    border-color: rgba(255, 59, 108, 0.25);
    color: var(--sm-pink);
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(255, 59, 108, 0.15);
}

.side-menu__close:active {
    transform: rotate(90deg) scale(0.92);
}

/* ===== РАЗДЕЛИТЕЛЬ ===== */
.side-menu__divider {
    height: 1px;
    margin: 2px var(--space-xl) var(--space-md);
    background: linear-gradient(90deg,
        rgba(205, 130, 221, 0.2),
        rgba(251, 148, 108, 0.12),
        transparent 85%);
}

/* ===== НАВИГАЦИЯ ===== */
.side-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-xl) var(--space-2xl);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Заголовок секции */
.side-menu__section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-purple);
    opacity: 0.6;
    margin-bottom: var(--space-sm);
    padding-left: 4px;
    position: relative;
}

/* ===== ОСНОВНЫЕ ССЫЛКИ ===== */
.side-menu__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.side-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sm-text);
    text-decoration: none;
    border-radius: var(--sm-radius);
    transition:
        background var(--sm-transition),
        color 0.2s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
    position: relative;
    /* Стаггер-анимация по умолчанию */
    opacity: 0;
    transform: translateX(-12px);
}

/* Левая полоска-индикатор */
.side-menu__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--sm-purple), var(--sm-orange));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-menu__link:hover {
    background: rgba(205, 130, 221, 0.06);
    color: var(--color-text);
    box-shadow: 0 2px 16px rgba(205, 130, 221, 0.06);
    transform: translateX(2px);
}

.side-menu__link:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.side-menu__link:active {
    transform: translateX(1px) scale(0.99);
}

/* Иконки ссылок */
.side-menu__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(205, 130, 221, 0.08);
    border: 1px solid rgba(205, 130, 221, 0.06);
    color: rgba(205, 130, 221, 0.6);
    flex-shrink: 0;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.3s ease;
}

.side-menu__link:hover .side-menu__link-icon {
    background: rgba(205, 130, 221, 0.15);
    border-color: rgba(205, 130, 221, 0.15);
    color: var(--sm-purple);
    box-shadow: 0 0 14px rgba(205, 130, 221, 0.12);
}

/* ===== АККОРДЕОН ===== */
.side-menu__accordion {
    margin-bottom: 2px;
    border-radius: var(--sm-radius);
    transition: background 0.25s ease;
    /* Стаггер-анимация */
    opacity: 0;
    transform: translateX(-12px);
}

.side-menu__accordion.open {
    background: rgba(205, 130, 221, 0.03);
}

.side-menu__acc-btn {
    width: 100%;
    border: none;
    background: none;
    outline: none;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--sm-text-muted);
    border-radius: var(--sm-radius);
    transition:
        background var(--sm-transition),
        color 0.2s ease,
        box-shadow 0.3s ease;
}

.side-menu__acc-btn:hover {
    background: rgba(205, 130, 221, 0.05);
    color: var(--color-text);
}

/* Иконка аккордеона */
.side-menu__acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(251, 148, 108, 0.08);
    border: 1px solid rgba(251, 148, 108, 0.06);
    color: rgba(251, 148, 108, 0.6);
    flex-shrink: 0;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.3s ease;
}

.side-menu__acc-btn:hover .side-menu__acc-icon {
    background: rgba(251, 148, 108, 0.15);
    border-color: rgba(251, 148, 108, 0.15);
    color: var(--sm-orange);
    box-shadow: 0 0 14px rgba(251, 148, 108, 0.1);
}

.side-menu__accordion.open .side-menu__acc-icon {
    background: rgba(251, 148, 108, 0.18);
    color: var(--sm-orange);
    box-shadow: 0 0 16px rgba(251, 148, 108, 0.12);
}

/* Бейдж с количеством */
.side-menu__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--sm-text-muted);
    margin-left: auto;
    margin-right: 4px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.side-menu__acc-btn:hover .side-menu__count {
    background: rgba(251, 148, 108, 0.1);
    border-color: rgba(251, 148, 108, 0.15);
    color: rgba(251, 148, 108, 0.8);
}

.side-menu__accordion.open .side-menu__count {
    background: rgba(251, 148, 108, 0.12);
    border-color: rgba(251, 148, 108, 0.2);
    color: var(--sm-orange);
}

/* ===== ШЕВРОН ===== */
.side-menu__chevron {
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}

.side-menu__chevron::before,
.side-menu__chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 1.5px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s ease;
}

.side-menu__chevron::before {
    transform: translate(-80%, -50%) rotate(45deg);
}
.side-menu__chevron::after {
    transform: translate(-20%, -50%) rotate(-45deg);
}

.side-menu__accordion.open .side-menu__chevron::before {
    transform: translate(-80%, -50%) rotate(-45deg);
}
.side-menu__accordion.open .side-menu__chevron::after {
    transform: translate(-20%, -50%) rotate(45deg);
}

.side-menu__accordion.open .side-menu__acc-btn {
    color: var(--color-text);
}

.side-menu__accordion.open .side-menu__chevron::before,
.side-menu__accordion.open .side-menu__chevron::after {
    background: rgba(251, 148, 108, 0.6);
}

.side-menu__acc-btn:hover .side-menu__chevron::before,
.side-menu__acc-btn:hover .side-menu__chevron::after {
    background: rgba(0, 0, 0, 0.4);
}

/* ===== ПАНЕЛЬ АККОРДЕОНА ===== */
.side-menu__acc-panel {
    padding: 0 0 0 54px;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    height: 0;
}

.side-menu__acc-panel[hidden] {
    display: block !important;
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.side-menu__acc-panel.is-expanded {
    opacity: 1;
    pointer-events: auto;
}

.side-menu__acc-panel-inner {
    padding: 4px 0 10px;
}

.side-menu__acc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 1px solid var(--color-border);
}

.side-menu__acc-link {
    display: block;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition:
        color 0.2s ease,
        padding-left 0.2s ease,
        background 0.2s ease;
    border-radius: 0 8px 8px 0;
    position: relative;
}

.side-menu__acc-link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--sm-orange);
    border-radius: 2px;
    transition: height 0.2s ease;
}

.side-menu__acc-link:hover {
    color: var(--color-text);
    padding-left: 20px;
    background: rgba(205, 130, 221, 0.05);
}

.side-menu__acc-link:hover::before {
    height: 14px;
}

/* ===== ОТКРЫТОЕ СОСТОЯНИЕ ===== */
body.is-menu-open .side-menu {
    transform: translateX(0);
}

body.is-menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Стаггер-анимация элементов при открытии */
body.is-menu-open .side-menu__link,
body.is-menu-open .side-menu__accordion {
    animation: sm-stagger-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.is-menu-open .side-menu__link:nth-child(1) { animation-delay: 0.08s; }
body.is-menu-open .side-menu__link:nth-child(2) { animation-delay: 0.11s; }
body.is-menu-open .side-menu__link:nth-child(3) { animation-delay: 0.14s; }
body.is-menu-open .side-menu__link:nth-child(4) { animation-delay: 0.17s; }
body.is-menu-open .side-menu__link:nth-child(5) { animation-delay: 0.20s; }
body.is-menu-open .side-menu__link:nth-child(6) { animation-delay: 0.23s; }
body.is-menu-open .side-menu__link:nth-child(7) { animation-delay: 0.26s; }
body.is-menu-open .side-menu__link:nth-child(8) { animation-delay: 0.29s; }
body.is-menu-open .side-menu__link:nth-child(9) { animation-delay: 0.32s; }

body.is-menu-open .side-menu__accordion:nth-child(1) { animation-delay: 0.18s; }
body.is-menu-open .side-menu__accordion:nth-child(2) { animation-delay: 0.22s; }
body.is-menu-open .side-menu__accordion:nth-child(3) { animation-delay: 0.26s; }
body.is-menu-open .side-menu__accordion:nth-child(4) { animation-delay: 0.30s; }
body.is-menu-open .side-menu__accordion:nth-child(5) { animation-delay: 0.34s; }
body.is-menu-open .side-menu__accordion:nth-child(6) { animation-delay: 0.38s; }
body.is-menu-open .side-menu__accordion:nth-child(7) { animation-delay: 0.42s; }
body.is-menu-open .side-menu__accordion:nth-child(8) { animation-delay: 0.46s; }

@keyframes sm-stagger-in {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Сброс при закрытии — мгновенно прячем */
body:not(.is-menu-open) .side-menu__link,
body:not(.is-menu-open) .side-menu__accordion {
    opacity: 0;
    transform: translateX(-12px);
    animation: none;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 576px) {
    .side-menu {
        width: 300px;
    }

    .side-menu__header {
        padding: var(--space-lg) var(--space-lg) var(--space-md);
    }

    .side-menu__nav {
        padding: 0 var(--space-lg) var(--space-xl);
    }

    .side-menu__divider {
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
    }

    .side-menu__link {
        padding: 8px 10px;
        font-size: 13px;
    }

    .side-menu__acc-btn {
        padding: 8px 10px;
        font-size: 13px;
    }

    .side-menu__link-icon,
    .side-menu__acc-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .side-menu__link-icon svg,
    .side-menu__acc-icon svg {
        width: 14px;
        height: 14px;
    }

    .side-menu__count {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        padding: 0 5px;
    }

    .side-menu__acc-panel {
        padding-left: 48px;
    }
}

.service-wrap .item.done .check-icon {
    opacity: 1;
}

@media (max-width: 992px) {
    .single {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .single .main-photo,
    .single .params {
        width: 100%;
    }


    .single-price--combined {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .price-divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
}

@media (max-width: 576px) {
    .single {
        margin-top: var(--space-lg);
    }

    .main-photo .mySwiper {
        border-radius: 10px;
    }

    .single-price,
    .about-post,
    .map-wrap,
    .service-wrap,
    .body-params,
    .reviews-wrap {
        padding: var(--space-md);
        border-radius: 10px;
    }

    .service-wrap .list {
        grid-template-columns: 1fr;
    }

    .body-params-grid {
        grid-template-columns: 1fr;
    }

    .single-badges {
        gap: var(--space-xs);
    }

    .contact-buttons {
        flex-wrap: wrap;
    }
}

/* ===== КАРТОЧКА ОБЪЯВЛЕНИЯ ===== */
.card {
    --card-radius: 18px;
    --card-pink: var(--color-pink);
    --card-purple: var(--color-purple);
    --card-orange: var(--color-orange);
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
    transform: var(--hover-lift);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 12px 28px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(205, 130, 221, 0.08);
}

/* Картинка */
.card-img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--color-bg-soft);
}

/* Градиент поверх фото снизу */
.card-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.card:hover .card-img::after {
    opacity: 1;
}

.card-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card-img img {
    transform: scale(1.06);
}

/* ===== КОНТЕНТ КАРТОЧКИ ===== */
.card-info {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

/* Имя + галочка + онлайн */
.card-info .name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--color-text);
    letter-spacing: -0.2px;
    margin-bottom: 0;
}

/* Галочка */
.card-info .check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(252, 177, 32, 0.3));
}

.card-info .check svg {
    width: 18px;
    height: 18px;
}

/* Онлайн-статус */
.card-info .online {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-info .online svg {
    width: 10px;
    height: 10px;
    filter: drop-shadow(0 0 4px rgba(107, 255, 137, 0.6));
}

/* Пульсация онлайн */
.card-info .online::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(107, 255, 137, 0.3);
    animation: card-online-pulse 2s ease-in-out infinite;
}

@keyframes card-online-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0; }
}

/* ===== ЦЕНА ===== */
.card-info .price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 800;
    font-size: 18px;
    color: var(--card-pink);
    letter-spacing: -0.3px;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    max-width: none;
    background: none;
    border-radius: 0;
    text-align: left;
}

/* Суффикс цены */
.card-info .price .price-suffix {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    margin-left: 1px;
}

/* ===== ПАРАМЕТРЫ ===== */
.card-info .params {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.card-info .param {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.card:hover .card-info .param {
    background: rgba(205, 130, 221, 0.08);
    color: var(--color-purple);
}

/* ===== КНОПКА «ПОКАЗАТЬ НОМЕР» ===== */
/* .card-phone наследует .btn .btn--pink .btn--sm */
.card-phone {
    margin: auto var(--space-md) var(--space-md);
    letter-spacing: 0.02em;
}

h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.25;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    margin-bottom: var(--space-lg);
    opacity: 0;
    transform: translateY(4px);
    animation: h1fade 0.35s ease-out forwards;
}

/* акцентная подчеркивающая линия */
h1::after {
    content: "";
    flex-grow: 1;
    height: 3px;
    background: var(--gradient-bar);
    background-size: var(--bar-size);
    animation: gradient-bar var(--bar-speed) ease infinite;
    border-radius: 4px;
    margin-left: var(--space-md);
    opacity: 0.35;
}

@keyframes h1fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== HEADER — «ночная вывеска»: единственная тёмная плоскость на светлой странице ===== */
.site-header {
    --hd-ink: #15101F;
    --hd-ink-raised: #221A33;
    --hd-ink-panel: #1B1428;
    --hd-text: #F7F3FC;
    --hd-muted: #A79CBE;
    --hd-line: rgba(255, 255, 255, 0.10);
    --hd-line-strong: rgba(255, 255, 255, 0.20);
    --hd-accent: linear-gradient(120deg, #CD82DD 0%, #FF3B6C 52%, #FB946C 100%);
    --hd-height: 66px;

    position: sticky;
    top: 0;
    z-index: 999;
    margin-bottom: 20px;
    background: var(--hd-ink);
    color: var(--hd-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

/* Свет, падающий из-за вывески */
.site-header__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 150% at 10% -20%, rgba(205, 130, 221, 0.34), transparent 68%),
        radial-gradient(52% 150% at 44% 130%, rgba(255, 59, 108, 0.24), transparent 70%),
        radial-gradient(48% 140% at 92% -10%, rgba(251, 148, 108, 0.20), transparent 70%);
    transition: opacity 0.5s ease;
}

/* Полоса света под вывеской */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gradient-bar);
    background-size: var(--bar-size);
    animation: gradient-bar var(--bar-speed) ease infinite;
}

/* Шапка остаётся над затемнением, пока открыта панель города */
.site-header > .container {
    position: relative;
    z-index: 12;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

.site-header.header-scrolled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 44px -28px rgba(8, 3, 18, 0.95);
}

.site-header.header-scrolled .site-header__aurora {
    opacity: 0.55;
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--hd-height);
}

.hdr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== ЛОГОТИП ===== */
.hdr-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}

.hdr-logo__mark {
    width: 30px;
    height: 32px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Знак — на узких экранах, надпись — на широких: один логотип за раз */
.hdr-logo__word {
    width: auto;
    height: 30px;
    filter: brightness(1.14) saturate(1.2) drop-shadow(0 0 10px rgba(205, 130, 221, 0.45));
    transition: filter 0.3s ease;
}

.hdr-logo:hover .hdr-logo__word {
    filter: brightness(1.24) saturate(1.3) drop-shadow(0 0 14px rgba(205, 130, 221, 0.7));
}

.hdr-logo:hover .hdr-logo__mark {
    transform: rotate(-6deg) scale(1.06);
}

/* ===== КНОПКА «КАТАЛОГ» ===== */
.hdr-catalog {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    flex-shrink: 0;
    border-radius: 13px;
    border: 1px solid var(--hd-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--hd-text);
    font-size: 14px;
    font-weight: 600;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.hdr-catalog:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--hd-line-strong);
}

.hdr-catalog__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
}

.hdr-catalog__bars i {
    height: 2px;
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hdr-catalog__bars i:nth-child(1) { width: 100%; background: var(--color-purple); }
.hdr-catalog__bars i:nth-child(2) { width: 62%;  background: var(--color-pink); }
.hdr-catalog__bars i:nth-child(3) { width: 84%;  background: var(--color-orange); }

.hdr-catalog:hover .hdr-catalog__bars i {
    width: 100%;
}

/* Бургер — мобильный вход в каталог */
.hdr-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--hd-line);
    background: rgba(255, 255, 255, 0.04);
}

.hdr-burger > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
}

.hdr-burger i {
    height: 2px;
    border-radius: 2px;
}

.hdr-burger i:nth-child(1) { width: 100%; background: var(--color-purple); }
.hdr-burger i:nth-child(2) { width: 62%;  background: var(--color-pink); }
.hdr-burger i:nth-child(3) { width: 84%;  background: var(--color-orange); }

/* ===== СТРОКА ПОИСКА: ГОРОД + ЗАПРОС ===== */
.hdr-scope {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
    height: 46px;
    margin: 0 auto;
    background: var(--hd-ink-raised);
    border: 1px solid var(--hd-line);
    border-radius: 14px;
    transition: background 0.3s ease;
}

/* Свечение под строкой — «вывеска зажигается» */
.hdr-scope::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -9px;
    height: 12px;
    border-radius: 50%;
    background: var(--hd-accent);
    filter: blur(11px);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Градиентная рамка при фокусе */
.hdr-scope::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--hd-accent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.hdr-scope:focus-within,
.hdr-scope.is-active {
    background: #271E3B;
}

.hdr-scope:focus-within::after,
.hdr-scope.is-active::after {
    opacity: 1;
}

.hdr-scope:focus-within::before,
.hdr-scope.is-active::before {
    opacity: 0.5;
}

.hdr-scope__city {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    max-width: 190px;
    padding: 0 14px;
    flex-shrink: 0;
    border-right: 1px solid var(--hd-line);
    border-radius: 13px 0 0 13px;
    color: var(--hd-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.25s ease;
}

.hdr-scope__city:hover {
    background: rgba(255, 255, 255, 0.06);
}

.hdr-scope__pin {
    flex-shrink: 0;
    color: var(--color-pink);
}

.hdr-scope__city-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-scope__chevron {
    flex-shrink: 0;
    color: var(--hd-muted);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hdr-scope__city[aria-expanded="true"] .hdr-scope__chevron {
    transform: rotate(180deg);
}

.hdr-scope__form {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.hdr-scope__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    font-size: 14px;
    color: var(--hd-text);
    background: transparent;
    border-radius: 14px;
}

.hdr-scope__input::placeholder {
    color: var(--hd-muted);
}

.hdr-scope__input::-webkit-search-cancel-button,
.city-panel__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--hd-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
}

.hdr-scope__submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin-right: 6px;
    padding: 0 16px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--hd-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(255, 59, 108, 0.75);
    transition: filter 0.25s ease, transform 0.15s ease;
}

.hdr-scope__submit:hover {
    filter: brightness(1.08);
}

.hdr-scope__submit:active {
    transform: scale(0.97);
}

/* ===== ДЕЙСТВИЯ СПРАВА ===== */
.hdr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hdr-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--hd-muted);
    transition: background 0.25s ease, color 0.25s ease;
}

.hdr-icon-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--hd-text);
}

.hdr-icon-btn__count {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--hd-ink);
}

.hdr-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--hd-line);
    color: var(--hd-text);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.hdr-user-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--hd-line-strong);
}

/* ===== ПАНЕЛЬ ВЫБОРА ГОРОДА ===== */
.city-panel {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0 15px;
}

.city-panel__box {
    max-width: 760px;
    margin: 0 auto;
    padding: 18px;
    background: var(--hd-ink-panel);
    border: 1px solid var(--hd-line);
    border-radius: 18px;
    box-shadow: 0 34px 70px -26px rgba(6, 2, 14, 0.9);
    animation: cityPanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cityPanelIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.city-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.city-panel__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hd-text);
}

.city-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--hd-muted);
    transition: background 0.25s ease, color 0.25s ease;
}

.city-panel__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--hd-text);
}

.city-panel__field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid var(--hd-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--hd-muted);
    transition: border-color 0.25s ease;
}

.city-panel__field:focus-within {
    border-color: rgba(205, 130, 221, 0.6);
    box-shadow: 0 0 0 3px rgba(205, 130, 221, 0.16);
}

.city-panel__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    font-size: 14px;
    color: var(--hd-text);
    background: transparent;
}

.city-panel__input::placeholder {
    color: var(--hd-muted);
}

.city-panel__section + .city-panel__section {
    margin-top: 18px;
}

.city-panel__label {
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hd-muted);
}

.city-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--hd-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--hd-text);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.city-chip:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--hd-line-strong);
}

.city-chip__count {
    font-size: 11px;
    font-weight: 500;
    color: var(--hd-muted);
}

.city-chip.is-current {
    border-color: rgba(255, 59, 108, 0.55);
    background: rgba(255, 59, 108, 0.12);
}

.city-panel__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 2px 10px;
    margin: 0;
    max-height: 232px;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.city-panel__list::-webkit-scrollbar {
    width: 6px;
}

.city-panel__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.city-link {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--hd-text);
    transition: background 0.18s ease;
}

.city-link:hover {
    background: rgba(255, 255, 255, 0.07);
}

.city-link.is-current {
    color: var(--color-pink);
    font-weight: 700;
}

.city-link__count {
    font-size: 11px;
    color: var(--hd-muted);
}

.city-panel__status {
    grid-column: 1 / -1;
    padding: 10px 2px;
    font-size: 13px;
    color: var(--hd-muted);
}

.hdr-scrim {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(9, 4, 18, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: cityScrimIn 0.3s ease;
}

@keyframes cityScrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Фокус с клавиатуры */
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* Рамка поля сама показывает фокус — кольцо от Tailwind forms здесь лишнее */
.hdr-scope__input:focus,
.hdr-scope__input:focus-visible,
.city-panel__input:focus,
.city-panel__input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/* ===== АДАПТАЦИЯ ===== */
@media (max-width: 1199px) {
    .hdr-scope {
        max-width: 460px;
    }
}

@media (max-width: 991px) {
    .hdr-catalog {
        display: none;
    }

    .hdr-burger {
        display: inline-flex;
    }

    .hdr-scope {
        max-width: none;
    }

    .hdr-scope__city {
        max-width: 150px;
    }
}

@media (max-width: 767px) {
    .site-header {
        --hd-height: auto;
    }

    .site-header__bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 0 12px;
    }

    .hdr-logo__word {
        height: 23px;
    }

    .hdr-actions {
        margin-left: auto;
    }

    .hdr-scope {
        order: 5;
        flex: 1 0 100%;
        height: 44px;
    }

    .hdr-user-btn {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .hdr-user-btn span {
        display: none;
    }

    .hdr-scope__submit span {
        display: none;
    }

    .hdr-scope__submit {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    body.is-city-open {
        overflow: hidden;
    }

    /* Панель города — шторка снизу */
    .city-panel {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        padding: 0;
    }

    .city-panel__box {
        max-width: none;
        max-height: 82vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        padding: 16px 15px calc(16px + env(safe-area-inset-bottom));
        animation: citySheetIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes citySheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .city-panel__list {
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 480px) {
    .hdr-logo__word {
        display: none;
    }

    .hdr-logo__mark {
        display: block;
    }

    .hdr-scope__city {
        max-width: 118px;
        padding: 0 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header *,
    .site-header *::before,
    .site-header *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== FILTER PANEL CUSTOM PROPERTIES ===== */
.filter-panel {
    --fp-bg: var(--color-bg-page);
    --fp-surface: var(--color-bg);
    --fp-border: var(--color-border);
    --fp-border-hover: var(--color-border-hover);
    --fp-text: var(--color-text);
    --fp-text-muted: var(--color-text-muted);
    --fp-purple: var(--color-purple);
    --fp-orange: var(--color-orange);
    --fp-pink: var(--color-pink);
    --fp-accent: var(--color-purple);
    --fp-radius: var(--radius-md);
    --fp-transition: var(--transition-base);
}

/* ===== КНОПКА «ПОКАЗАТЬ ФИЛЬТР» ===== */
.filter-bar {
    margin-bottom: var(--space-lg);
    z-index: 900;
    background: transparent;
}

.filter-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    scrollbar-width: thin;
}

.filter-chip {
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    border: 1px solid rgba(205, 130, 221, 0.2);
    background: var(--color-bg);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    position: relative;
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        transform 0.15s ease,
        background 0.25s ease;
}

.filter-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(205, 130, 221, 0.06), rgba(251, 148, 108, 0.06));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.filter-chip:hover {
    border-color: rgba(205, 130, 221, 0.35);
    box-shadow:
        0 4px 14px rgba(205, 130, 221, 0.12),
        0 0 0 3px rgba(205, 130, 221, 0.06);
    transform: var(--hover-lift);
}

.filter-chip:hover::before {
    opacity: 1;
}

.filter-chip:active {
    transform: var(--hover-press) scale(0.98);
}

.filter-chip .chip-value {
    font-weight: 700;
    color: var(--fp-purple);
}

.filter-chip--icon .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

/* ===== ОВЕРЛЕЙ ФИЛЬТРА ===== */
.filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 2, 12, 0.5);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 998;
}

/* ===== ПАНЕЛЬ ФИЛЬТРОВ ===== */
.filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: var(--fp-bg);
    box-shadow:
        -16px 0 50px rgba(0, 0, 0, 0.12),
        -1px 0 0 rgba(0, 0, 0, 0.04);
    transform: translateX(102%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 999;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 130, 221, 0.25) transparent;
}

.filter-panel::-webkit-scrollbar { width: 3px; }
.filter-panel::-webkit-scrollbar-track { background: transparent; }
.filter-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--fp-purple), var(--fp-orange));
    border-radius: 99px;
}

/* Анимированная градиентная полоса сверху */
.filter-panel::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        var(--fp-orange),
        var(--fp-pink),
        var(--fp-purple),
        var(--fp-pink),
        var(--fp-orange));
    background-size: 300% 100%;
    animation: fp-gradient-shift 4s ease infinite;
    z-index: 10;
    flex-shrink: 0;
}

@keyframes fp-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ===== ШАПКА ПАНЕЛИ ===== */
.filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    position: sticky;
    top: 2px;
    background: linear-gradient(180deg, var(--fp-bg) 70%, rgba(250, 251, 253, 0));
    z-index: 5;
}

.filter-panel__header h2,
.filter-panel__header p {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--fp-text);
    letter-spacing: -0.3px;
}

/* Кнопка закрытия */
.filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--fp-text-muted);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.filter-close:hover {
    background: rgba(255, 59, 108, 0.08);
    border-color: rgba(255, 59, 108, 0.2);
    color: var(--fp-pink);
    transform: rotate(90deg);
    box-shadow: 0 0 16px rgba(255, 59, 108, 0.1);
}

.filter-close:active {
    transform: rotate(90deg) scale(0.92);
}

/* ===== ФОРМА ===== */
.filter-panel form {
    padding: 0 var(--space-xl) var(--space-xl);
}

/* ===== СЕКЦИИ ФИЛЬТРА ===== */
.filter-section {
    margin-bottom: var(--space-lg);
    opacity: 0;
    transform: translateX(14px);
}

/* Стаггер-анимация секций */
body.is-filter-open .filter-section {
    animation: fp-section-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.is-filter-open .filter-section:nth-child(1) { animation-delay: 0.06s; }
body.is-filter-open .filter-section:nth-child(2) { animation-delay: 0.10s; }
body.is-filter-open .filter-section:nth-child(3) { animation-delay: 0.14s; }
body.is-filter-open .filter-section:nth-child(4) { animation-delay: 0.18s; }
body.is-filter-open .filter-section:nth-child(5) { animation-delay: 0.22s; }
body.is-filter-open .filter-section:nth-child(6) { animation-delay: 0.26s; }
body.is-filter-open .filter-section:nth-child(7) { animation-delay: 0.30s; }
body.is-filter-open .filter-section:nth-child(8) { animation-delay: 0.34s; }
body.is-filter-open .filter-section:nth-child(9) { animation-delay: 0.38s; }
body.is-filter-open .filter-section:nth-child(10) { animation-delay: 0.42s; }

@keyframes fp-section-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

body:not(.is-filter-open) .filter-section {
    opacity: 0;
    transform: translateX(14px);
    animation: none;
}

/* Заголовок секции */
.filter-section__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    color: var(--fp-text-muted);
    position: relative;
    padding-left: 10px;
}

.filter-section__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--fp-purple), var(--fp-orange));
}

/* ===== ИНПУТЫ ЦЕНА / ДИАПАЗОН ===== */
.filter-price,
.filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-input,
.range-input {
    width: 90px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--fp-text);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
    -moz-appearance: textfield;
}

.price-input::-webkit-inner-spin-button,
.range-input::-webkit-inner-spin-button,
.price-input::-webkit-outer-spin-button,
.range-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-input:focus,
.range-input:focus {
    border-color: rgba(205, 130, 221, 0.4);
    box-shadow:
        0 0 0 3px rgba(205, 130, 221, 0.08),
        0 2px 8px rgba(205, 130, 221, 0.1);
    background: #fff;
    outline: none;
}

.currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text-muted);
}

.dash {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.15);
    font-weight: 300;
}

/* ===== ТЕГИ / ЧИПЫ ===== */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-tags .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    user-select: none;
}

.filter-tags .tag:hover {
    border-color: rgba(205, 130, 221, 0.25);
    background: rgba(205, 130, 221, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(205, 130, 221, 0.08);
}

.filter-tags .tag:has(input:checked) {
    border-color: rgba(205, 130, 221, 0.4);
    background: rgba(205, 130, 221, 0.08);
    box-shadow: 0 2px 10px rgba(205, 130, 221, 0.1);
}

.filter-tags .tag input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--fp-purple);
    cursor: pointer;
}

/* ===== АККОРДЕОН ФИЛЬТРА ===== */
.filter-acc__btn {
    width: 100%;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.filter-acc__btn:hover {
    border-color: rgba(205, 130, 221, 0.25);
    box-shadow: 0 2px 10px rgba(205, 130, 221, 0.06);
}

.filter-section.open .filter-acc__btn {
    border-color: rgba(205, 130, 221, 0.3);
    background: rgba(205, 130, 221, 0.04);
    box-shadow: 0 2px 12px rgba(205, 130, 221, 0.08);
}

/* Шеврон аккордеона фильтра */
.acc__icon {
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}

.acc__icon::before,
.acc__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 1.6px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s ease;
}

.acc__icon::before {
    transform: translate(-80%, -50%) rotate(45deg);
}

.acc__icon::after {
    transform: translate(-20%, -50%) rotate(-45deg);
}

.filter-section.open .acc__icon::before {
    transform: translate(-80%, -50%) rotate(-45deg);
}

.filter-section.open .acc__icon::after {
    transform: translate(-20%, -50%) rotate(45deg);
}

.filter-section.open .acc__icon::before,
.filter-section.open .acc__icon::after {
    background: var(--fp-purple);
}

/* Панель аккордеона фильтра */
.acc__panel {
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    height: 0;
}

.acc__panel[hidden] {
    display: block !important;
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.acc__panel.is-expanded {
    opacity: 1;
    pointer-events: auto;
}

/* ===== ЧЕКЛИСТЫ ===== */
.filter-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 0 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 130, 221, 0.2) transparent;
}

.filter-checklist::-webkit-scrollbar { width: 3px; }
.filter-checklist::-webkit-scrollbar-track { background: transparent; }
.filter-checklist::-webkit-scrollbar-thumb {
    background: rgba(205, 130, 221, 0.25);
    border-radius: 99px;
}

.filter-checklist label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: 450;
    color: var(--color-text-muted);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease;
    user-select: none;
}

.filter-checklist label:hover {
    background: rgba(205, 130, 221, 0.05);
    color: var(--fp-text);
}

.filter-checklist label:has(input:checked) {
    background: rgba(205, 130, 221, 0.07);
    color: var(--fp-text);
    font-weight: 600;
}

.filter-checklist input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--fp-purple);
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== ФУТЕР ПАНЕЛИ ===== */
.filter-panel__footer {
    position: sticky;
    bottom: 0;
    padding: var(--space-lg) var(--space-xl) var(--space-lg);
    margin-top: 8px;
    background: linear-gradient(to top, var(--fp-bg) 60%, rgba(250, 251, 253, 0));
    display: flex;
    gap: 10px;
    z-index: 3;
}

.filter-submit {
    flex: 1;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--fp-pink) 0%, #e8255a 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 20px;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow:
        0 8px 24px rgba(255, 59, 108, 0.3),
        0 0 0 0 rgba(255, 59, 108, 0);
    transition:
        box-shadow 0.3s ease,
        transform 0.15s ease,
        background 0.25s ease;
}

.filter-submit:hover {
    transform: var(--hover-lift);
    box-shadow:
        0 12px 28px rgba(255, 59, 108, 0.4),
        0 0 0 3px rgba(255, 59, 108, 0.1);
}

.filter-submit:active {
    transform: var(--hover-press);
    box-shadow: 0 4px 12px rgba(255, 59, 108, 0.25);
}

.filter-reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.filter-reset:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--color-bg-soft);
    color: var(--fp-text);
}

/* ===== ОТКРЫТОЕ СОСТОЯНИЕ ===== */
body.is-filter-open .filter-panel {
    transform: translateX(0);
}

body.is-filter-open .filter-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===== АДАПТИВ ФИЛЬТР-ПАНЕЛИ ===== */
@media (max-width: 576px) {
    .filter-panel {
        width: 100%;
    }

    .filter-panel__header {
        padding: var(--space-lg) var(--space-lg) var(--space-md);
    }

    .filter-panel form {
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .filter-panel__footer {
        padding: var(--space-md) var(--space-lg) var(--space-lg);
    }

    .price-input,
    .range-input {
        width: 80px;
        padding: 8px 10px;
        font-size: 13px;
    }
}

@keyframes headerFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .breadcrumbs {
        font-size: 13px;
    }
    .breadcrumbs li:not(:last-child)::after {
        margin: 0 4px;
    }
}

/* Сетка карточек: плавные брейкпоинты */
/* 1 колонка: < 576px (по умолчанию) */

/* 2 колонки: 576px - 899px */
@media (min-width: 576px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 колонки: 900px - 991px */
@media (min-width: 900px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4 колонки: 992px - 1399px */
@media (min-width: 992px) {
    .cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 5 колонок: >= 1400px */
@media (min-width: 1400px) {
    .cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Мобильные оптимизации для карточек */
@media (max-width: 575px) {
    .card {
        --card-radius: 14px;
    }

    .card-info {
        padding: 10px 12px 6px;
        gap: 6px;
    }

    .card-info .name {
        font-size: 14px;
    }

    .card-info .price {
        font-size: 16px;
    }

    .card-info .param {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .card-info .params {
        gap: 4px;
    }

    .card-phone {
        margin: auto 10px 10px;
    }
}

/* Дополнительные улучшения для маленьких экранов */
@media (max-width: 375px) {
    .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .card-info .param {
        font-size: 11px;
        padding: 4px 6px;
    }

    h1 {
        font-size: 22px;
    }
}

/* ===== FOOTER ===== */
footer {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-bar);
    background-size: var(--bar-size);
    animation: gradient-bar var(--bar-speed) ease infinite;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-copy {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-purple);
}

/* ===== ALPHA NAV (letter bar) ===== */
.alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: sticky;
    top: 60px;
    z-index: 10;
    backdrop-filter: blur(12px);
    background: rgba(248, 249, 251, 0.85);
}

.alpha-nav__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.alpha-nav__letter:hover {
    color: #fff;
    background: var(--gradient-brand);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(205, 130, 221, 0.25);
}

/* ===== ALPHA INDEX (grouped list) ===== */
.alpha-index {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.alpha-group {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 var(--space-lg);
    scroll-margin-top: 110px;
}

@media (max-width: 575px) {
    .alpha-group {
        grid-template-columns: 1fr;
    }
}

.alpha-group__letter {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-top: 6px;
    position: sticky;
    top: 112px;
    align-self: start;
}

.alpha-group__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border);
}

.alpha-group__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-spring),
        box-shadow var(--transition-spring);
}

.alpha-group__link:hover {
    color: #fff;
    background: var(--gradient-brand);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(205, 130, 221, 0.3);
}

/* ===== AUTH PAGES ===== */
.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-2xl) 0;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

/* Градиентная полоса сверху карточки */
.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-bar);
    background-size: var(--bar-size);
    animation: gradient-bar var(--bar-speed) ease infinite;
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.auth-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.auth-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* Форма */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.auth-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.auth-input::placeholder {
    color: var(--color-text-light);
}

.auth-input:focus {
    background: var(--color-bg);
    border-color: var(--color-purple);
    box-shadow: 0 0 0 3px rgba(205, 130, 221, 0.12);
}

.auth-input--error {
    border-color: var(--color-pink);
    box-shadow: 0 0 0 3px rgba(255, 59, 108, 0.1);
}

.auth-input--error:focus {
    border-color: var(--color-pink);
    box-shadow: 0 0 0 3px rgba(255, 59, 108, 0.15);
}

.auth-error {
    font-size: var(--font-size-xs);
    color: var(--color-pink);
    font-weight: 500;
}

/* Подтверждение отправки письма на восстановление пароля */
.auth-status {
    margin-bottom: var(--space-lg);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(205, 130, 221, 0.35);
    background: rgba(205, 130, 221, 0.08);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Ряд: запомнить + забыли */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Кастомный чекбокс */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.auth-checkbox__mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.auth-checkbox input:checked + .auth-checkbox__mark {
    background: var(--color-purple);
    border-color: var(--color-purple);
    box-shadow: 0 2px 6px rgba(205, 130, 221, 0.3);
}

.auth-checkbox input:checked + .auth-checkbox__mark::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.auth-forgot {
    font-size: var(--font-size-sm);
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.auth-forgot:hover {
    color: var(--color-pink);
}

/* reCAPTCHA */
.auth-recaptcha {
    display: flex;
    justify-content: center;
}

/* Кнопка отправки */
/* .auth-btn наследует .btn .btn--brand .btn--block */
.auth-btn {
    border-radius: var(--radius-md);
}

/* Подвал карточки */
.auth-footer {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.auth-link {
    color: var(--color-purple);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--color-pink);
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-xl) var(--space-lg);
        border-radius: var(--radius-lg);
    }
    .auth-title {
        font-size: var(--font-size-xl);
    }
    .auth-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* ===== ДЕТАЛЬНАЯ СТРАНИЦА — БЕЙДЖИ ===== */
.single-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.single-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: none;
    transition: transform 0.15s ease, box-shadow var(--transition-fast);
    cursor: default;
}

.single-badge svg {
    flex-shrink: 0;
    opacity: 0.85;
}

a.single-badge:hover {
    transform: var(--hover-lift);
}

a.single-badge:active {
    transform: var(--hover-press);
}

.single-badge--age {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.single-badge--national {
    background: linear-gradient(135deg, #6366F1, #818CF8);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.single-badge--national:hover {
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
}

.single-badge--location {
    background: linear-gradient(135deg, #EC4899, #F472B6);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.single-badge--location:hover {
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.45);
}

.single-badge--metro {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.single-badge--metro:hover {
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.45);
}

.single-badge--place {
    background: linear-gradient(135deg, #14B8A6, #2DD4BF);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.35);
}

.single-badge--place:hover {
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.45);
}

.single-badge--express {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.single-badge--verified {
    background: linear-gradient(135deg, #10B981, #34D399);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* ===== КОНТАКТ-КНОПКИ МЕССЕНДЖЕРОВ ===== */
.contact-buttons {
    display: flex;
    gap: var(--space-sm);
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow var(--transition-fast);
}

.contact-btn:hover {
    transform: var(--hover-lift);
}

.contact-btn:active {
    transform: var(--hover-press);
}

.contact-btn--whatsapp {
    background: #25D366;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.contact-btn--whatsapp:hover {
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.45);
}

.contact-btn--telegram {
    background: #2AABEE;
    box-shadow: 0 6px 16px rgba(42, 171, 238, 0.35);
}

.contact-btn--telegram:hover {
    box-shadow: 0 10px 22px rgba(42, 171, 238, 0.45);
}

.contact-btn svg {
    flex-shrink: 0;
}

/* ===== МЕСТО ВСТРЕЧИ ===== */
/* ===== ОТЗЫВЫ ===== */
.reviews-wrap {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.reviews-wrap:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.reviews-header .about-heading {
    margin-bottom: 0;
}

.reviews-count {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: var(--font-size-base);
}

.reviews-avg {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.reviews-avg-num {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

.reviews-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.star--filled {
    color: #FBBF24;
}

.star--empty {
    color: var(--color-border);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.review-card {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
}

.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.review-card-name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.review-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.review-card-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ===== ЗАГОЛОВОК СЕКЦИИ ===== */
.section-heading {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: var(--space-2xl) 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
}

/* ===== КНОПКА «ИЗБРАННОЕ» (сердечко) ===== */
.favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    color: var(--color-text-muted);
}

.favorite-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.favorite-btn .favorite-icon-filled {
    display: none;
}

.favorite-btn .favorite-icon-outline {
    display: block;
}

.favorite-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.1);
    box-shadow: 0 2px 12px rgba(255, 59, 108, 0.2);
    color: var(--color-pink);
}

.favorite-btn:active {
    transform: scale(0.9);
}

/* Активное состояние */
.favorite-btn.is-active {
    background: rgba(255, 59, 108, 0.15);
    border-color: rgba(255, 59, 108, 0.3);
    color: var(--color-pink);
}

.favorite-btn.is-active .favorite-icon-filled {
    display: block;
}

.favorite-btn.is-active .favorite-icon-outline {
    display: none;
}

.favorite-btn.is-active:hover {
    background: rgba(255, 59, 108, 0.25);
}

/* Анимация при клике */
@keyframes favorite-pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.favorite-btn.is-animating {
    animation: favorite-pulse 0.4s ease;
}

/* Кнопка на single-странице — полноширинная */
.single .favorite-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 12px);
    padding: 12px 20px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    gap: 8px;
    justify-content: center;
    margin-top: var(--space-sm);
}

.single .favorite-btn::after {
    content: "В избранное";
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: inherit;
}

.single .favorite-btn.is-active::after {
    content: "В избранном";
}

.single .favorite-btn:hover {
    transform: none;
    background: rgba(255, 59, 108, 0.08);
    border-color: rgba(255, 59, 108, 0.3);
    color: var(--color-pink);
}

/* Бейдж-счётчик в сайдбаре */
.side-menu__fav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--color-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ===== СТРАНИЦА ИЗБРАННОГО ===== */
.favorites-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-md);
    color: var(--color-text-muted);
    gap: var(--space-md);
}

.favorites-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-pink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-md);
    text-align: center;
    gap: var(--space-md);
}

.favorites-empty svg {
    width: 64px;
    height: 64px;
    color: var(--color-text-muted);
    opacity: 0.4;
}

.favorites-empty p {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.favorites-empty a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    background: var(--color-pink);
    color: #fff;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.favorites-empty a:hover {
    background: var(--color-purple);
    transform: var(--hover-lift);
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {
    .favorite-btn {
        width: 34px;
        height: 34px;
    }

    .favorite-btn svg {
        width: 17px;
        height: 17px;
    }

    .single .favorite-btn {
        width: 100%;
        height: auto;
        padding: 10px 16px;
    }

    .single .favorite-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== SCROLL TO TOP ===== */
.scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 16px rgba(205, 130, 221, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-spring),
        box-shadow var(--transition-fast);
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    box-shadow: 0 6px 22px rgba(205, 130, 221, 0.5);
    transform: translateY(-3px);
}

.scroll-top:active {
    transform: translateY(0);
}

@media (max-width: 575px) {
    .scroll-top {
        bottom: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
    }
}

/* ===== ЖАЛОБА НА АНКЕТУ ===== */
/* Заголовок анкеты и кнопка «Пожаловаться» в одну строку; на телефоне кнопка под заголовком */
.single-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.single-head h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.report-btn svg {
    flex-shrink: 0;
}

.report-btn:hover,
.report-btn:focus-visible {
    background: rgba(255, 59, 108, 0.08);
    border-color: rgba(255, 59, 108, 0.3);
    color: var(--color-pink);
}

/* Окно жалобы — карточка .auth-card поверх затемнения */
.report-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.report-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 4, 18, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: cityScrimIn 0.3s ease;
}

.report-modal__box {
    max-width: 460px;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: cityPanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.report-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-text-muted);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.report-modal__close:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

/* у select после общего сброса стрелки не видно — рисуем свою */
.report-modal select.auth-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.report-modal__text {
    resize: vertical;
    min-height: 110px;
}

.report-modal__captcha {
    min-height: 78px;
}

body.is-report-open {
    overflow: hidden;
}

@media (max-width: 576px) {
    .single-head {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .single-head h1 {
        flex-basis: 100%;
    }
}

/* виджет reCAPTCHA шириной 304px не влезает в узкий экран */
@media (max-width: 380px) {
    .report-modal__captcha {
        transform: scale(0.86);
        transform-origin: center top;
    }
}