/* === Rating pages (FIFA / UEFA) — Figma 266:2, 270:588 === */
/* §17.65 — косметика заголовка/sub-nav/таблицы (Этап 10 MINOR, 13.05) */

/* ---- Hero (§17.65) ---- */
.rating-hero {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(135deg, rgba(12,135,12,.06), rgba(12,135,12,.0));
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.rating-hero__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary, #0C870C);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(12,135,12,.18);
}
.rating-hero__icon--uefa {
    background: var(--c-accent-blue, #1E66E0);
    box-shadow: 0 4px 12px rgba(30,102,224,.18);
}
.rating-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}
.rating-hero__title {
    margin: 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    line-height: 1.2;
}
.rating-hero__subtitle {
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

/* ---- Segmented control: ФИФА ⇄ УЕФА (§17.65) ---- */
.rating-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--sp-4);
    background: var(--c-bg-muted, #f3f4f6);
    border-radius: 999px;
    border: 1px solid var(--c-border);
}
.rating-toggle__item {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
    text-decoration: none;
    background: transparent;
    border-radius: 999px;
    transition: background var(--tr-fast), color var(--tr-fast);
    white-space: nowrap;
}
.rating-toggle__item:hover {
    color: var(--c-text);
}
.rating-toggle__item.is-active {
    background: #ffffff;
    color: var(--c-primary, #0C870C);
    font-weight: var(--fw-bold);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---- UEFA sub-nav: underline-style (§17.65, единый стиль c match.css §17.64) ---- */
.rating-subnav {
    margin: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.rating-subnav__scroll {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.rating-subnav__scroll::-webkit-scrollbar { height: 4px; }
.rating-subnav__scroll::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }
.rating-subnav__item {
    position: relative;
    padding: var(--sp-3) var(--sp-3);
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    border: 0;
    border-radius: 0;
    transition: color var(--tr-fast);
    text-decoration: none;
    white-space: nowrap;
}
.rating-subnav__item::after {
    content: "";
    position: absolute;
    left: var(--sp-3); right: var(--sp-3);
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background var(--tr-fast);
}
.rating-subnav__item:hover { color: var(--c-text); }
.rating-subnav__item.is-active {
    color: var(--c-accent-blue, #1E66E0);
    font-weight: var(--fw-bold);
}
.rating-subnav__item.is-active::after {
    background: var(--c-accent-blue, #1E66E0);
}

/* ---- Info block (existing, slightly polished) ---- */
.rating-page__info {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg-subtle, rgba(0,0,0,.02));
    border-left: 3px solid var(--c-accent-blue, #1E66E0);
    border-radius: var(--r-sm);
}

/* ---- Rating table — wrap + sticky thead + hover (§17.65) ---- */
.rating-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-sm);
}
.rating-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.rating-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--c-bg, #fff);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: var(--sp-3) var(--sp-3);
    white-space: nowrap;
    border-bottom: 2px solid var(--c-border);
    text-align: left;
}
.rating-table tbody td {
    padding: var(--sp-2) var(--sp-3);
    vertical-align: middle;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--c-border-subtle, rgba(0,0,0,.04));
}
.rating-table tbody tr:hover {
    background: var(--c-bg-hover, rgba(12,135,12,.04));
}
.rating-table img {
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
}
/* Column widths + alignment */
.rating-table__col-rank   { width: 48px; text-align: center; }
.rating-table__col-trend  { width: 32px; text-align: center; }
.rating-table__col-flag   { width: 36px; text-align: center; }
.rating-table__col-points { width: 80px; text-align: right; }
.rating-table__col-change { width: 64px; text-align: right; }
.rating-table__col-confed { width: 140px; }
.rating-table__col-cup    { width: 48px; text-align: center; }
.rating-table__rank       { font-weight: var(--fw-bold); text-align: center; color: var(--c-text); }
.rating-table__trend      { text-align: center; }
.rating-table__flag       { text-align: center; }
.rating-table__country    { font-weight: var(--fw-medium); }
.rating-table__points     { text-align: right; font-weight: var(--fw-bold); }
.rating-table__change     { text-align: right; }
.rating-table__cup        { text-align: center; color: var(--c-text-muted); }
.rating-table__confed     { color: var(--c-text-muted); }

/* Trend pip — заготовка под ▲/▼/• (§17.65) */
.rating-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}
.rating-trend--up      { color: var(--c-success, #0C870C); background: rgba(12,135,12,.10); }
.rating-trend--down    { color: var(--c-error,   #E63946); background: rgba(230,57,70,.10); }
.rating-trend--neutral { color: var(--c-text-muted); background: var(--c-bg-muted, rgba(0,0,0,.04)); }

/* ---- Empty-state card (§17.65) ---- */
.rating-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    background: var(--c-bg-subtle, rgba(0,0,0,.015));
    border: 1px dashed var(--c-border);
    border-radius: var(--r-md);
}
.rating-empty__icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(12,135,12,.08);
    color: var(--c-primary, #0C870C);
}
.rating-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text);
}
.rating-empty__text {
    max-width: 640px;
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    line-height: 1.55;
}
.rating-empty__hint {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}
.rating-empty__hint a {
    color: var(--c-accent-blue, #1E66E0);
    text-decoration: underline;
}
.rating-empty__hint a:hover { text-decoration: none; }

/* ---- Sidebar rating nav (existing) ---- */
.sp-list__item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
    opacity: .6;
}
.sp-list__item.is-active .sp-list__item-icon {
    opacity: 1;
}

/* ---- Mobile (§17.65) ---- */
@media (max-width: 768px) {
    .rating-hero {
        padding: var(--sp-3) var(--sp-3);
        gap: var(--sp-3);
    }
    .rating-hero__icon {
        flex-basis: 44px;
        width: 44px; height: 44px;
    }
    .rating-hero__title { font-size: var(--text-xl, 1.25rem); }
    .rating-hero__subtitle { font-size: var(--text-xs); }
    .rating-toggle { width: 100%; justify-content: center; }
    .rating-toggle__item { flex: 1 1 0; text-align: center; padding: var(--sp-2) var(--sp-3); }
    .rating-subnav__item { padding: var(--sp-2) var(--sp-2); font-size: var(--text-xs); }
    .rating-subnav__item::after { left: var(--sp-2); right: var(--sp-2); }
    .rating-empty { padding: var(--sp-4) var(--sp-3); }
    .rating-empty__icon { width: 56px; height: 56px; }
    .rating-empty__title { font-size: var(--text-base, 1rem); }
}