/*
 * Рейтинг студий (шорткод [epil_studio_ranking], epil-core / StudioRanking).
 * Палитра kit Elementor: розовый #E898F7, текст #374B5C / #73818C, линии #D5E3EE, фон #F2F4F8.
 */
.epil-ranking {
    --rk-accent: #E898F7;
    --rk-accent-dark: #c86ad9;
    --rk-accent-soft: #fbeefe;
    --rk-text: #374B5C;
    --rk-muted: #73818C;
    --rk-line: #D5E3EE;
    --rk-soft: #F2F4F8;
    --rk-green: #22c55e;
    --rk-red: #ef4444;
    --rk-star: #FFB800;
    --rk-gold: #f5b301;
    --rk-silver: #a3b1bf;
    --rk-bronze: #d08a4f;

    box-sizing: border-box;
    max-width: 1072px;
    margin: 0 auto;
    padding: 32px 16px 56px;
    color: var(--rk-text);
    font-family: var(--epil-font-text, inherit);
}

.epil-ranking [hidden] {
    display: none !important;
}

/* Шапка страницы: текст слева, кубок и пьедестал с тремя лидерами справа */
.epil-ranking-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: end;
    gap: 32px;
    margin-bottom: 28px;
    padding: 36px 40px 0;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 10%, rgba(232, 152, 247, .35) 0, rgba(232, 152, 247, 0) 45%),
        linear-gradient(135deg, #fbeefe 0%, #f2f4f8 60%, #eef3fa 100%);
}

.epil-ranking-hero__text {
    align-self: center;
    padding-bottom: 36px;
}

.epil-ranking-hero__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--rk-accent-dark);
    font-size: var(--epil-fs-xs, 13px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.epil-ranking-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 12px;
    padding: 0;
    list-style: none;
    color: var(--rk-muted);
    font-size: var(--epil-fs-sm, 14px);
}

.epil-ranking-hero__stats li {
    margin: 0;
}

.epil-ranking-hero__stats b {
    display: block;
    color: var(--rk-text);
    font-family: var(--epil-font-heading, inherit);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.epil-ranking-hero__art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.epil-ranking-hero__trophy {
    width: 92px;
    height: 92px;
    margin-bottom: -4px;
    filter: drop-shadow(0 8px 14px rgba(217, 142, 0, .3));
}

.epil-ranking-hero__podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.epil-ranking-hero__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.epil-ranking-hero__photo {
    position: relative;
    width: 76px;
    height: 76px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--rk-line);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .15);
}

.epil-ranking-hero__step.is-gold .epil-ranking-hero__photo {
    width: 96px;
    height: 96px;
    border-color: var(--rk-gold);
}

.epil-ranking-hero__photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.epil-ranking-hero__medal {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.is-gold .epil-ranking-hero__medal { background: var(--rk-gold); }
.is-silver .epil-ranking-hero__medal { background: var(--rk-silver); }
.is-bronze .epil-ranking-hero__medal { background: var(--rk-bronze); }

.epil-ranking-hero__name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--rk-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.epil-ranking-hero__block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
    border-radius: 14px 14px 0 0;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .06);
    color: var(--rk-text);
    font-family: var(--epil-font-heading, inherit);
    font-size: 16px;
    font-weight: 800;
}

.is-gold .epil-ranking-hero__block {
    height: 110px;
    background: linear-gradient(180deg, #fff6d6 0%, #fff 70%);
}

.is-silver .epil-ranking-hero__block { height: 80px; }
.is-bronze .epil-ranking-hero__block { height: 60px; }

html body .epil-ranking__title {
    margin: 0 0 14px;
    font-family: var(--epil-font-heading, inherit);
    font-size: var(--epil-fs-h1, 44px);
    font-weight: 700;
    line-height: 1.15;
}

.epil-ranking__lead {
    max-width: 720px;
    margin: 0 0 6px;
    font-size: var(--epil-fs-lg, 18px);
    line-height: 1.55;
}

.epil-ranking__updated {
    margin: 0;
    color: var(--rk-muted);
    font-size: var(--epil-fs-xs, 13px);
}

/* Фильтр */
.epil-ranking__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

html body .epil-ranking__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 8px 14px;
    border: 1px solid var(--rk-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rk-text);
    font-size: var(--epil-fs-sm, 14px);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

html body .epil-ranking__chip em {
    color: var(--rk-muted);
    font-size: 12px;
    font-style: normal;
}

html body .epil-ranking__chip:hover {
    border-color: var(--rk-accent);
}

html body .epil-ranking__chip.is-active {
    border-color: var(--rk-text);
    background: var(--rk-text);
    color: #fff;
}

html body .epil-ranking__chip.is-active em {
    color: rgba(255, 255, 255, .7);
}

html body .epil-ranking__chip:focus-visible {
    outline: 3px solid var(--rk-accent-soft);
    outline-offset: 2px;
}

/* Список */
.epil-ranking__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.epil-ranking-row {
    display: grid;
    grid-template-columns: 52px 120px minmax(0, 1fr) auto;
    grid-template-areas: "place photo info actions";
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 14px 18px 14px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.epil-ranking-row:hover {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

.epil-ranking-row.is-top {
    border-color: var(--rk-accent-soft);
}

/* Место */
.epil-ranking-row__place {
    grid-area: place;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rk-soft);
    color: var(--rk-text);
    font-family: var(--epil-font-heading, inherit);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.epil-ranking-row.is-gold .epil-ranking-row__place,
.epil-ranking-row.is-silver .epil-ranking-row__place,
.epil-ranking-row.is-bronze .epil-ranking-row__place {
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}

.epil-ranking-row.is-gold .epil-ranking-row__place { background: var(--rk-gold); }
.epil-ranking-row.is-silver .epil-ranking-row__place { background: var(--rk-silver); }
.epil-ranking-row.is-bronze .epil-ranking-row__place { background: var(--rk-bronze); }

/* Фото */
.epil-ranking-row__photo {
    grid-area: photo;
    position: relative;
    display: block;
    width: 120px;
    height: 96px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--rk-soft);
}

.epil-ranking-row__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.epil-ranking-row__badges {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
}

.epil-ranking-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.epil-ranking-badge--recommended {
    background: var(--rk-green);
}

.epil-ranking-badge--license {
    background: #fff;
    color: var(--rk-red);
    font-size: 16px;
}

/* Название и оценки */
.epil-ranking-row__info {
    grid-area: info;
    min-width: 0;
}

html body .epil-ranking-row__name {
    margin: 0 0 6px;
    font-family: var(--epil-font-heading, inherit);
    font-size: var(--epil-fs-h5, 18px);
    font-weight: 700;
    line-height: 1.3;
}

html body .epil-ranking-row__name a {
    color: var(--rk-text);
    text-decoration: none;
}

html body .epil-ranking-row__name a:hover {
    color: var(--rk-accent-dark);
}

.epil-ranking-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: var(--epil-fs-sm, 14px);
}

.epil-ranking-stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.epil-ranking-stars__row {
    display: inline-flex;
    gap: 1px;
}

.epil-ranking-stars__star {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.epil-ranking-stars__star svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: var(--rk-line);
}

.epil-ranking-stars__star > span {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
}

.epil-ranking-stars__star > span svg {
    fill: var(--rk-star);
}

.epil-ranking-stars b {
    font-weight: 700;
}

.epil-ranking-row__count {
    color: var(--rk-muted);
}

.epil-ranking-price {
    color: #16a34a;
    font-weight: 700;
    letter-spacing: .5px;
}

.epil-ranking-price i {
    color: var(--rk-line);
    font-style: normal;
}

.epil-ranking-row__address {
    overflow: hidden;
    margin: 6px 0 0;
    color: var(--rk-muted);
    font-size: var(--epil-fs-xs, 13px);
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.epil-ranking-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.epil-ranking-row__tags li {
    margin: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--rk-soft);
    color: var(--rk-text);
    font-size: 12px;
    line-height: 1.5;
}

/* Кнопки */
.epil-ranking-row__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html body .epil-ranking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 10px 16px;
    border: 1px solid var(--rk-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rk-text);
    font-size: var(--epil-fs-sm, 14px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

html body .epil-ranking-btn:hover {
    border-color: var(--rk-text);
    color: var(--rk-text);
}

/* «Записаться онлайн» — жёлтый градиент, как кнопка записи на странице студии */
html body .epil-ranking-btn--booking {
    border-color: transparent;
    background: linear-gradient(135deg, #ffe259 0%, #ffb700 100%);
    color: #3b2f00;
}

html body .epil-ranking-btn--booking:hover {
    border-color: transparent;
    color: #3b2f00;
    filter: brightness(1.03);
}

.epil-ranking__empty {
    padding: 24px;
    border-radius: 16px;
    background: var(--rk-soft);
    color: var(--rk-muted);
    text-align: center;
}

/* SEO-текст: «Как выбрать студию» и частые вопросы */
.epil-ranking__seo {
    max-width: 780px;
    margin-top: 48px;
    font-size: var(--epil-fs-text, 16px);
    line-height: 1.7;
}

html body .epil-ranking__seo h2 {
    margin: 0 0 14px;
    font-size: var(--epil-fs-h2, 32px);
    line-height: 1.2;
}

html body .epil-ranking__seo h3 {
    margin: 32px 0 12px;
    font-size: var(--epil-fs-h4, 22px);
}

html body .epil-ranking__seo h4 {
    margin: 20px 0 6px;
    font-size: var(--epil-fs-h6, 16px);
}

.epil-ranking__seo p {
    margin: 0 0 14px;
}

.epil-ranking__seo ul {
    margin: 0;
    padding-left: 20px;
}

.epil-ranking__seo li + li {
    margin-top: 10px;
}

.epil-ranking__seo a {
    color: var(--rk-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Как считается */
.epil-ranking__method {
    margin-top: 32px;
    padding: 22px 26px;
    border-radius: 18px;
    background: var(--rk-soft);
}

html body .epil-ranking__method h2 {
    margin: 0 0 10px;
    font-size: var(--epil-fs-h5, 18px);
}

.epil-ranking__method ul {
    margin: 0;
    padding-left: 20px;
    color: var(--rk-text);
    font-size: var(--epil-fs-sm, 14px);
    line-height: 1.6;
}

.epil-ranking__method li + li {
    margin-top: 4px;
}

.epil-ranking__method a {
    color: var(--rk-accent-dark);
}

/* Планшет: кнопки под информацией, пьедестал под текстом */
@media (max-width: 900px) {
    .epil-ranking-hero {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 28px 24px 0;
    }

    .epil-ranking-hero__text {
        padding-bottom: 8px;
    }

    .epil-ranking-hero__art {
        width: 100%;
        max-width: 400px;
        justify-self: center;
    }

    .epil-ranking-row {
        grid-template-columns: 44px 100px minmax(0, 1fr);
        grid-template-areas:
            "place photo info"
            "actions actions actions";
        gap: 12px 14px;
    }

    .epil-ranking-row__photo {
        width: 100px;
        height: 84px;
    }

    .epil-ranking-row__actions {
        flex-direction: row;
    }

    html body .epil-ranking-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Телефон: место на фото, всё в одну колонку справа от фото */
@media (max-width: 560px) {
    .epil-ranking-row {
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-areas:
            "photo info"
            "actions actions";
        padding: 12px;
    }

    .epil-ranking-row__place {
        position: relative;
        z-index: 1;
        grid-area: photo;
        align-self: start;
        width: 30px;
        height: 30px;
        margin: -6px 0 0 -6px;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .epil-ranking-row__photo {
        width: 84px;
        height: 84px;
    }

    .epil-ranking-row__badges {
        top: auto;
        bottom: 6px;
    }

    html body .epil-ranking-row__name {
        font-size: 16px;
    }

    .epil-ranking-row__tags {
        display: none;
    }

    .epil-ranking-hero {
        margin: 0 -16px 20px;
        padding: 24px 16px 0;
        border-radius: 0 0 24px 24px;
    }

    .epil-ranking-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        font-size: 12px;
        line-height: 1.3;
    }

    .epil-ranking-hero__stats b {
        font-size: 22px;
    }

    .epil-ranking-hero .epil-ranking__lead {
        font-size: var(--epil-fs-text, 16px);
    }

    .epil-ranking-hero__photo {
        width: 60px;
        height: 60px;
    }

    .epil-ranking-hero__step.is-gold .epil-ranking-hero__photo {
        width: 76px;
        height: 76px;
    }

    .epil-ranking-hero__trophy {
        width: 72px;
        height: 72px;
    }

    /* Категории — одной строкой с прокруткой, чтобы список был виден сразу */
    .epil-ranking__filters {
        flex-wrap: nowrap;
        margin: 0 -16px 16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .epil-ranking__filters::-webkit-scrollbar {
        display: none;
    }

    html body .epil-ranking__chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .epil-ranking__method {
        padding: 18px;
    }
}