/* off-season.css */
/* Стили для off-season режима страниц лиг */
/* Подключать: <link rel="stylesheet" href="/assets/css/off-season.css"> */

/* ─── Off-Season Standings ─────────────────────────────────────────────── */

.off-season-standings {
background: var(--card-bg, #1a1d2e);
border: 1px solid var(--border-color, rgba(255,255,255,0.08));
border-radius: 16px;
padding: 28px 32px;
margin: 32px 0;
}
.off-season-standings__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.off-season-standings__title-wrap {
display: flex;
align-items: flex-start;
gap: 14px;
}
.off-season-standings__trophy {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.off-season-standings__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
margin: 0 0 5px;
line-height: 1.3;
}
.off-season-standings__subtitle {
font-size: 0.83rem;
color: var(--text-muted, #8b92a9);
margin: 0;
}
.off-season-standings__season-badge {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 99px;
font-size: 0.82rem;
font-weight: 700;
background: rgba(99,102,241,0.18);
color: #a5b4fc;
border: 1px solid rgba(99,102,241,0.3);
white-space: nowrap;
flex-shrink: 0;
}

/* ─── Standings Table ─────────────────────────────────────────────────── */

.standings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.standings-table thead th {
padding: 10px 8px;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted, #8b92a9);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
white-space: nowrap;
}
.standings-table thead th.standings-table__team {
text-align: left;
}
.standings-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.15s ease;
}
.standings-table tbody tr:hover {
background: rgba(255,255,255,0.035);
}
.standings-table tbody tr:last-child {
border-bottom: none;
}
.standings-row--champion {
background: rgba(251,191,36,0.05);
}
.standings-row--champion:hover {
background: rgba(251,191,36,0.09);
}
.standings-table__pos {
width: 48px;
padding: 10px 6px 10px 12px;
text-align: center;
vertical-align: middle;
}
.standings-table__team {
padding: 10px 12px 10px 8px;
text-align: left;
vertical-align: middle;
}
.standings-table__num {
width: 40px;
padding: 10px 6px;
text-align: center;
vertical-align: middle;
color: var(--text-secondary, #a8b0c8);
}
.standings-table__num--win {
color: #4ade80;
}
.standings-table__num--loss {
color: #f87171;
}
.standings-table__num--gd {
font-weight: 600;
}
.gd--positive {
color: #4ade80;
}
.gd--negative {
color: #f87171;
}
.standings-table__pts {
width: 44px;
padding: 10px 8px;
text-align: center;
vertical-align: middle;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
}
.standings-table__form {
width: 120px;
padding: 10px 12px 10px 8px;
text-align: left;
vertical-align: middle;
}

/* Position number */
.standings-pos-num {
font-size: 0.85rem;
color: var(--text-secondary, #a8b0c8);
font-weight: 600;
}
.standings-pos-num--champion {
color: #fbbf24;
}

/* Zone dot */
.standings-zone-dot {
display: inline-block;
width: 4px;
height: 28px;
border-radius: 99px;
vertical-align: middle;
margin-right: 6px;
flex-shrink: 0;
}
.zone-champion { background: #fbbf24; }
.zone-cl       { background: #3b82f6; }
.zone-el       { background: #f97316; }
.zone-ecl      { background: #22c55e; }
.zone-promo    { background: #06b6d4; }
.zone-promo2   { background: #a78bfa; }
.zone-rel      { background: #ef4444; }
.zone-rel-po   { background: #f87171; }

/* Standings pos cell — flex for dot + number */
.standings-table__pos {
position: relative;
}
.standings-table__pos > .standings-zone-dot {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

/* Team cell */
.standings-team-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.standings-team-logo {
border-radius: 4px;
flex-shrink: 0;
object-fit: contain;
}
.standings-team-logo-placeholder {
width: 22px;
height: 22px;
border-radius: 4px;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
.standings-team-name {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-primary, #e8eaf0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.standings-champion-badge {
font-size: 0.85rem;
flex-shrink: 0;
}

/* Form bubbles — same as existing tables.css but scoped here too */
.form-bubbles {
display: flex;
gap: 3px;
align-items: center;
}
.form-bubble {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
}
.form-w {
background: rgba(34,197,94,0.2);
color: #4ade80;
}
.form-d {
background: rgba(234,179,8,0.2);
color: #facc15;
}
.form-l {
background: rgba(239,68,68,0.15);
color: #f87171;
}
.form-u {
background: rgba(255,255,255,0.06);
color: var(--text-muted, #8b92a9);
}

/* ─── Legend ──────────────────────────────────────────────────────────── */

.standings-legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.standings-legend__item {
display: flex;
align-items: center;
gap: 7px;
}
.standings-legend__item .standings-zone-dot {
width: 10px;
height: 10px;
border-radius: 50%;
position: static;
transform: none;
}
.standings-legend__label {
font-size: 0.78rem;
color: var(--text-muted, #8b92a9);
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
.off-season-standings {
padding: 20px 16px;
}
/* Скрываем GF/GA на планшете — оставляем GD */
.standings-table th:nth-child(7),
.standings-table td:nth-child(7),
.standings-table th:nth-child(8),
.standings-table td:nth-child(8) {
display: none;
}
}
@media (max-width: 640px) {
/* На мобиле скрываем W/D/L тоже — оставляем P, GD, Pts, Form */
.standings-table th:nth-child(4),
.standings-table td:nth-child(4),
.standings-table th:nth-child(5),
.standings-table td:nth-child(5),
.standings-table th:nth-child(6),
.standings-table td:nth-child(6) {
display: none;
}
.standings-table__form {
width: auto;
}
.off-season-standings__header {
flex-direction: column;
gap: 10px;
}
}

/* ─── Best of Season Awards ───────────────────────────────────────────── */

.awards-block {
background: var(--card-bg, #1a1d2e);
border: 1px solid var(--border-color, rgba(255,255,255,0.08));
border-radius: 16px;
padding: 28px 32px;
margin: 32px 0;
}
.awards-block__header {
margin-bottom: 24px;
}
.awards-block__title-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.awards-block__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.awards-block__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
margin: 0 0 5px;
line-height: 1.3;
}
.awards-block__subtitle {
font-size: 0.83rem;
color: var(--text-muted, #8b92a9);
margin: 0;
}
/* Grid */
.awards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Card */
.award-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.award-card:hover {
background: rgba(255,255,255,0.055);
border-color: rgba(255,255,255,0.13);
}
.award-card--champion {
border-color: rgba(251,191,36,0.35);
background: rgba(251,191,36,0.06);
}
.award-card--champion:hover {
border-color: rgba(251,191,36,0.55);
background: rgba(251,191,36,0.1);
}
.award-card__badge {
font-size: 2rem;
line-height: 1;
}
.award-card__title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
line-height: 1.3;
}
.award-card__subtitle {
font-size: 0.75rem;
color: var(--text-muted, #8b92a9);
line-height: 1.4;
}
/* Team */
.award-card__team {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 4px 0;
}
.award-card__logo {
border-radius: 6px;
object-fit: contain;
}
.award-card__logo-placeholder {
width: 40px;
height: 40px;
border-radius: 6px;
background: rgba(255,255,255,0.06);
}
.award-card__team-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary, #e8eaf0);
line-height: 1.2;
}
/* Stat */
.award-card__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 4px;
}
.award-card__stat-value {
font-size: 1.6rem;
font-weight: 800;
color: #a5b4fc;
line-height: 1;
}
.award-card--champion .award-card__stat-value {
color: #fbbf24;
}
.award-card__stat-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted, #8b92a9);
}
.award-card__stat-detail {
font-size: 0.75rem;
color: var(--text-muted, #8b92a9);
line-height: 1.4;
}
/* Responsive */
@media (max-width: 900px) {
.awards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.awards-block {
padding: 20px 16px;
}
}
@media (max-width: 480px) {
.awards-grid {
grid-template-columns: 1fr;
}
}

/* ─── Off-Season FAQ ──────────────────────────────────────────────────── */

.faq-block {
background: var(--card-bg, #1a1d2e);
border: 1px solid var(--border-color, rgba(255,255,255,0.08));
border-radius: 16px;
padding: 28px 32px;
margin: 32px 0;
}
.faq-block__header {
margin-bottom: 20px;
}
.faq-block__title-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.faq-block__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.faq-block__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
margin: 0 0 5px;
line-height: 1.3;
}
.faq-block__subtitle {
font-size: 0.83rem;
color: var(--text-muted, #8b92a9);
margin: 0;
}
/* FAQ list */
.faq-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.faq-item {
border-radius: 10px;
overflow: hidden;
}
.faq-item__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
cursor: pointer;
background: rgba(255,255,255,0.03);
border-radius: 10px;
list-style: none;
transition: background 0.15s ease;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__question {
border-radius: 10px 10px 0 0;
background: rgba(99,102,241,0.1);
}
.faq-item__question:hover {
background: rgba(255,255,255,0.055);
}
.faq-item[open] .faq-item__question:hover {
background: rgba(99,102,241,0.14);
}
.faq-item__q-text {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-primary, #e8eaf0);
line-height: 1.4;
flex: 1;
}
/* Chevron */
.faq-item__chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
}
.faq-item__chevron::before,
.faq-item__chevron::after {
content: '';
position: absolute;
background: var(--text-muted, #8b92a9);
border-radius: 2px;
transition: transform 0.2s ease;
}
.faq-item__chevron::before {
width: 8px;
height: 2px;
top: 9px;
left: 2px;
transform: rotate(45deg);
}
.faq-item__chevron::after {
width: 8px;
height: 2px;
top: 9px;
left: 9px;
transform: rotate(-45deg);
}
.faq-item[open] .faq-item__chevron::before {
transform: rotate(-45deg);
}
.faq-item[open] .faq-item__chevron::after {
transform: rotate(45deg);
}
/* Answer */
.faq-item__answer {
padding: 14px 18px 18px;
background: rgba(99,102,241,0.06);
border-radius: 0 0 10px 10px;
}
.faq-item__answer p {
margin: 0;
font-size: 0.88rem;
color: var(--text-secondary, #a8b0c8);
line-height: 1.7;
}
.faq-item__answer a {
color: #a5b4fc;
text-decoration: none;
}
.faq-item__answer a:hover {
text-decoration: underline;
}

/* ─── Where to Bet Next (Redirect) ───────────────────────────────────── */

.redirect-block {
background: var(--card-bg, #1a1d2e);
border: 1px solid var(--border-color, rgba(255,255,255,0.08));
border-radius: 16px;
padding: 28px 32px;
margin: 32px 0;
}
.redirect-block__header {
margin-bottom: 20px;
}
.redirect-block__title-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.redirect-block__icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}
.redirect-block__title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary, #e8eaf0);
margin: 0 0 5px;
line-height: 1.3;
}
.redirect-block__subtitle {
font-size: 0.83rem;
color: var(--text-muted, #8b92a9);
margin: 0;
max-width: 520px;
}
/* Grid */
.redirect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
/* Card */
.redirect-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.redirect-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.14);
transform: translateY(-1px);
}
.redirect-card__logo-wrap {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.redirect-card__logo {
border-radius: 4px;
object-fit: contain;
}
.redirect-card__flag {
font-size: 1.5rem;
line-height: 1;
}
.redirect-card__info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.redirect-card__name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary, #e8eaf0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.redirect-card__country {
font-size: 0.75rem;
color: var(--text-muted, #8b92a9);
}
.redirect-card__arrow {
font-size: 1rem;
color: var(--text-muted, #8b92a9);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.redirect-card:hover .redirect-card__arrow {
transform: translateX(3px);
}
/* Footer CTA */
.redirect-block__footer {
text-align: center;
padding-top: 4px;
}
.redirect-block__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
background: rgba(99,102,241,0.15);
border: 1px solid rgba(99,102,241,0.3);
border-radius: 99px;
font-size: 0.88rem;
font-weight: 600;
color: #a5b4fc;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.redirect-block__cta:hover {
background: rgba(99,102,241,0.25);
border-color: rgba(99,102,241,0.5);
}

/* ─── Responsive FAQ + Redirect ──────────────────────────────────────── */

@media (max-width: 900px) {
.redirect-grid {
grid-template-columns: repeat(2, 1fr);
}
.faq-block,
.redirect-block {
padding: 20px 16px;
}
}
@media (max-width: 480px) {
.redirect-grid {
grid-template-columns: 1fr;
}
.faq-item__question {
padding: 14px;
}
.faq-item__answer {
padding: 12px 14px 16px;
}
}