/* Football match center — /football/match/ */

.mc-body {
  background: #eef1f6;
}

.mc-body .page-main.mc-page {
  padding-block: 20px 48px;
  gap: 0;
}

.mc-page .container {
  width: min(100% - 24px, 1280px);
}

.mc-head {
  margin: 0 0 16px;
}

.mc-head__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-navy-950);
}

.mc-head__sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mc-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

/* The sidebar sits in a slot the day switcher replaces wholesale, so the sticky
   behaviour belongs to the slot — on the inner element it would have nothing to
   travel inside. */
.mc-sidebar-slot,
.mc-aside {
  position: sticky;
  top: 84px;
  min-width: 0;
}

.mc-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mc-panel + .mc-panel {
  margin-top: 12px;
}

.mc-panel--stats .mc-panel__note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.mc-panel--stats .mc-panel__note + .mc-panel__note {
  margin-top: 8px;
}

.mc-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mc-stats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 0.8125rem;
}

.mc-stats strong {
  font-size: 0.9375rem;
  color: var(--color-navy-950);
}

.mc-leagues__heading {
  padding: 8px 10px 4px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.mc-leagues-more {
  margin-top: 10px;
}

.mc-leagues-more summary {
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-navy-950);
  cursor: pointer;
  list-style: none;
}

.mc-leagues-more summary::-webkit-details-marker {
  display: none;
}

.mc-league__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mc-league__label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-league__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: cover;
}

.mc-league__flag--placeholder {
  display: inline-block;
  visibility: hidden;
}

.mc-countries {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-country summary {
  list-style: none;
  cursor: pointer;
}

.mc-country summary::-webkit-details-marker {
  display: none;
}

.mc-country__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-navy-950);
}

.mc-country__head:hover {
  background: #edf3fb;
}

.mc-country__head span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.mc-country__head em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.mc-country .mc-leagues {
  padding-left: 20px;
}

.mc-aside__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-aside__head .mc-panel__title {
  margin: 0;
}

.mc-aside__select-wrap {
  display: block;
}

.mc-aside__select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy-950);
  cursor: pointer;
}

.mc-aside__hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.mc-table__team--link {
  color: inherit;
  text-decoration: none;
}

.mc-table__team--link:hover {
  color: var(--color-accent);
}

.mc-table__team--link:hover span {
  text-decoration: underline;
}

.mc-featured.is-hidden {
  display: none !important;
}

.mc-panel__title {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.mc-leagues,
.mc-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-league {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mc-league span {
  min-width: 0;
}

.mc-league em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.mc-league:hover {
  background: #edf3fb;
  color: var(--color-navy-950);
}

.mc-league.is-active {
  background: var(--color-accent);
  color: #fff;
}

.mc-league.is-active em {
  color: rgba(255, 255, 255, 0.8);
}

.mc-links a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mc-links a:hover {
  background: #edf3fb;
  color: var(--color-accent);
}

.mc-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Date navigation owns a full-width row of its own: sharing a grid row with the
   LIVE toggle left the old pill strip fighting for the leftover ~400px. */
.mc-datebar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mc-datebar__step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy-950);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.mc-datebar__step:hover:not(:disabled) {
  border-color: var(--color-navy-950);
}

.mc-datebar__step.is-disabled,
.mc-datebar__step:disabled {
  opacity: 0.35;
  cursor: default;
}

/* The step controls and "Today" are anchors now (each day has a URL), so they
   need the button reset that <button> gave them for free. */
.mc-datebar__step,
.mc-datebar__today {
  text-decoration: none;
  cursor: pointer;
}

.mc-datebar__step[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* flatpickr's anchor input: present for the library, never seen or focused. */
.mc-datepicker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.mc-datepicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy-950);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.mc-datepicker:hover,
.mc-datepicker.is-open {
  border-color: var(--color-navy-950);
}

.mc-datepicker__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mc-datepicker__caret {
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

.mc-datebar__today {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #edf3fb;
  color: var(--color-navy-950);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.mc-datebar__today:hover {
  background: #e2ebf7;
}

/* flatpickr: match-count badge per day + a marker for today. The calendar is
   appended to <body>, hence the .mc-calendar hook set in onReady.

   The count needs a line of its own. flatpickr's cell is 39x39 with
   line-height: 39px and a fully round border, so an absolutely positioned badge
   in the corner collided with the day number and got clipped by the selected
   circle (that is what "цифры кривые" looked like). Taller cell + shorter
   line-height puts the number on top and leaves the bottom strip for the count;
   a rounded square instead of a circle keeps both centred.  */
.flatpickr-calendar.mc-calendar {
  z-index: 120; /* above the sticky site header */
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  border: 1px solid var(--color-border);
  font-family: inherit;
}

.mc-calendar .flatpickr-day {
  position: relative;
  height: 46px;
  line-height: 28px;
  padding-top: 4px;
  border-radius: 12px;
  font-weight: 600;
}

.mc-calendar .flatpickr-day.selected,
.mc-calendar .flatpickr-day.selected:hover,
.mc-calendar .flatpickr-day.selected:focus {
  background: var(--color-navy-950);
  border-color: var(--color-navy-950);
  border-radius: 12px;
}

.mc-day__count {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 90, 31, 0.12);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
}

.mc-calendar .flatpickr-day.selected .mc-day__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.mc-calendar .flatpickr-day.mc-day--today:not(.selected) {
  border-color: var(--color-navy-950);
}

.mc-calendar .flatpickr-day.flatpickr-disabled {
  color: rgba(16, 24, 40, 0.22);
}

.mc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mc-toolbar__day {
  min-width: 0;
}

.mc-toolbar__date {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-navy-950);
}

.mc-toolbar__stats {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.mc-toolbar__live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.mc-live-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mc-live-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #cfd6e0;
  position: relative;
  transition: background 0.2s ease;
}

.mc-live-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.mc-live-toggle input:checked + .mc-live-toggle__track {
  background: var(--color-live);
}

.mc-live-toggle input:checked + .mc-live-toggle__track::after {
  transform: translateX(20px);
}

.mc-live-toggle__label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-navy-950);
}

.mc-toolbar__count {
  font-size: 0.8125rem;
  color: var(--color-live);
  font-weight: 700;
}

.mc-featured {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f2744 0%, #1a4470 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 39, 68, 0.18);
}

.mc-featured__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.mc-featured__head h2 {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.mc-featured__head .badge--live {
  color: #fff;
}

.mc-featured__head .badge--live::before {
  background: #fff;
}

.mc-featured__head .badge--upcoming {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.mc-featured__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.mc-featured__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mc-featured__team img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.mc-featured__team strong {
  font-size: 0.9375rem;
  line-height: 1.25;
}

.mc-featured__mid {
  text-align: center;
  min-width: 88px;
}

.mc-featured__score {
  display: block;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mc-featured__time {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.mc-featured__comp {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.mc-featured__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.mc-featured__actions .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.mc-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mc-group {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mc-group.is-hidden,
.mc-row.is-hidden {
  display: none !important;
}

.mc-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: #f8fafc;
}

.mc-group__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-navy-950);
}

.mc-group__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.mc-group__rows {
  display: flex;
  flex-direction: column;
}

.mc-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px 40px;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  transition: background 0.15s ease;
}

.mc-row:last-child {
  border-bottom: 0;
}

.mc-row:hover {
  background: #f8fbff;
}

.mc-row--live {
  background: linear-gradient(90deg, rgba(217, 48, 37, 0.04) 0%, var(--color-white) 120px);
}

.mc-row--live:hover {
  background: linear-gradient(90deg, rgba(217, 48, 37, 0.06) 0%, #f8fbff 120px);
}

.mc-row__main {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.mc-row__main:hover {
  color: inherit;
}

.mc-row__status,
.mc-row__teams,
.mc-row__scores,
.mc-row__name,
.mc-row__goals {
  cursor: pointer;
}

.mc-row__status {
  grid-column: 1;
  align-self: center;
  min-width: 0;
}

.mc-row__minute {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-live);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.mc-row__live {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--color-live);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mc-row__live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--color-live);
  animation: live-pulse 1.6s ease-out infinite;
}

.mc-row__ft {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mc-row__kickoff {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.mc-row__teams {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mc-row__team {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.mc-row__scores {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.mc-row__team .team-mark {
  width: 22px;
  height: 22px;
}

.mc-row__team .team-mark img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.mc-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.mc-row__goals {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1;
}

.mc-row--scheduled .mc-row__goals {
  font-weight: 600;
  color: var(--color-text-muted);
}

.mc-row__actions {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.mc-row__actions .btn-watch--icon {
  background: rgba(255, 90, 31, 0.1);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.22);
}

.mc-row__actions .btn-watch--icon:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: none;
}

.mc-row--live .mc-row__actions .btn-watch--icon {
  background: var(--color-accent);
  color: #fff;
  box-shadow: none;
}

.mc-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #c5cdd8;
  pointer-events: none;
}

.mc-row__chevron svg {
  width: 16px;
  height: 16px;
}

.mc-row:hover .mc-row__chevron {
  color: var(--color-text-muted);
}

.mc-aside__season {
  color: var(--color-text-muted);
  font-weight: 500;
}

.mc-table-wrap {
  overflow-x: auto;
}

.mc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.mc-table th,
.mc-table td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.mc-table th {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 800;
}

.mc-table td:last-child,
.mc-table th:last-child {
  text-align: right;
}

.mc-table__team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mc-table__team img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.mc-table__team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.mc-aside__league {
  margin: -4px 0 10px;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-navy-950);
}

.mc-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
}

.mc-empty--compact {
  padding: 12px 0;
  background: transparent;
  border: 0;
  font-size: 0.8125rem;
}

.mc-feed--sw-data {
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .mc-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .mc-aside {
    grid-column: 1 / -1;
    position: static;
  }

  .mc-sidebar-slot {
    position: static;
  }
}

@media (max-width: 860px) {
  .mc-layout {
    grid-template-columns: 1fr;
  }

  /* Day heading over the LIVE toggle instead of beside it. */
  .mc-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .mc-row {
    grid-template-columns: 40px minmax(0, 1fr) 32px 36px;
    gap: 6px 8px;
    padding: 8px 10px;
  }
}