/* ==========================================
   UEFA CHAMPIONS LEAGUE MATCH LIST CSS
   Extracted from official UEFA website
   ========================================== */

/* UEFA Champions League Base Variables */
:root {
  --pk-font-comp-bold: "Champions Bold", system-ui, sans-serif;
  --pk-font-comp-display: "Champions Display", system-ui, sans-serif;
  --pk-font-comp-regular: "Champions Regular", system-ui, sans-serif;
  --pk-primary-01--light: #00004b;
  --pk-primary-02--light: #61619f;
  --pk-primary-03--light: #363683;
  --pk-primary-04--light: #010141;
  --pk-secondary-01--light: #0d3aff;
  --pk-secondary-02--light: #0929c9;
  --pk-secondary-03--light: #061da5;
  --pk-secondary-04--light: #041181;
  --pk-tertiary-01--light: #5af7dc;
  --pk-tertiary-02--light: #a0fbeb;
  --pk-tertiary-03--light: #74f6e0;
  --pk-tertiary-04--light: #22e3c2;
  --pk-accent-01--light: #ff16ff;
  --pk-accent-02--light: #fc84fc;
  --pk-accent-03--light: #cc05cc;
  --pk-accent-alt-01--light: #fff;
  --pk-accent-alt-02--light: #fff;
  --pk-accent-alt-03--light: #fff;
  --pk-interaction--light: #0232ff;
  --pk-interaction-compl--light: #fff;
  --pk-interaction-high-contrast--light: #fff;
  --pk-text-01--light: #1a313c;
  --pk-text-02--light: #455c67;
  --pk-text-03--light: #637a85;
  --pk-text-04--light: #fff;
  --pk-text-05-light: #2c2c2c;
  --pk-ui-00--light: #fff;
  --pk-ui-01--light: #e8eaf3;
  --pk-ui-02--light: #dbdde9;
  --pk-ui-03--light: #c1c2d5;
  --pk-ui-04--light: #a3a4b7;
  --pk-ui-05--light: #252663;
  --pk-ui-06--light: #0a0a2f;
  --pk-data-01--light: #0232ff;
  --pk-data-02--light: #00e4eb;
  --pk-data-03--light: #ff51a2;
  --pk-data-04--light: #9a00ff;
  --pk-background--light: #f1f3f8;
  --pk-elevation-01--light: #fff;
  --pk-elevation-02--light: #fff;
  --pk-elevation-03--light: #fff;
  --pk-support-01--light: #32a72c;
  --pk-support-01a--light: #7ccb70;
  --pk-support-01b--light: #aef5a2;
  --pk-support-02--light: #0085e5;
  --pk-support-02a--light: #35b5ec;
  --pk-support-02b--light: #c1ecff;
  --pk-support-03--light: #df6817;
  --pk-support-03a--light: #d68d45;
  --pk-support-03b--light: #f8d5bd;
  --pk-support-04--light: #cb333b;
  --pk-support-04a--light: #d96464;
  --pk-support-04b--light: #f1c8ca;
  --pk-support-05--light: #ffcd44;
  --pk-support-05a--light: #ffd970;
  --pk-support-05b--light: #ffedbb;
  
  /* Dark theme variables */
  --pk-primary-01--dark: #00004b;
  --pk-primary-02--dark: #61619f;
  --pk-primary-03--dark: #363683;
  --pk-primary-04--dark: #010141;
  --pk-secondary-01--dark: #0d3aff;
  --pk-secondary-02--dark: #0929c9;
  --pk-secondary-03--dark: #061da5;
  --pk-secondary-04--dark: #041181;
  --pk-tertiary-01--dark: #5af7dc;
  --pk-tertiary-02--dark: #a0fbeb;
  --pk-tertiary-03--dark: #74f6e0;
  --pk-tertiary-04--dark: #22e3c2;
  --pk-accent-01--dark: #ff16ff;
  --pk-accent-02--dark: #fc84fc;
  --pk-accent-03--dark: #cc05cc;
  --pk-accent-alt-01--dark: #fff;
  --pk-accent-alt-02--dark: #fff;
  --pk-accent-alt-03--dark: #fff;
  --pk-interaction--dark: #0ef;
  --pk-interaction-compl--dark: #00004b;
  --pk-interaction-high-contrast--dark: #fff;
  --pk-text-01--dark: #fff;
  --pk-text-02--dark: #ffffffb3;
  --pk-text-03--dark: #ffffff80;
  --pk-text-04--dark: #fff;
  --pk-text-05--dark: #000041;
  --pk-ui-00--dark: #ffffff0d;
  --pk-ui-01--dark: #ffffff1a;
  --pk-ui-02--dark: #ffffff40;
  --pk-ui-03--dark: #ffffff59;
  --pk-ui-04--dark: #ffffff8c;
  --pk-ui-05--dark: #fffc;
  --pk-ui-06--dark: #fff;
  --pk-data-01--dark: #0ef;
  --pk-data-02--dark: #fff;
  --pk-data-03--dark: #ff51a2;
  --pk-data-04--dark: #385dff;
  --pk-background--dark: #000040;
  --pk-elevation-01--dark: #0a0a61;
  --pk-elevation-02--dark: #151573;
  --pk-elevation-03--dark: #17177a;
  --pk-support-01--dark: #32a72c;
  --pk-support-01a--dark: #7ccb70;
  --pk-support-01b--dark: #cffecd;
  --pk-support-02--dark: #0085e5;
  --pk-support-02a--dark: #35b5ec;
  --pk-support-02b--dark: #c1ecff;
  --pk-support-03--dark: #df6817;
  --pk-support-03a--dark: #d68d45;
  --pk-support-03b--dark: #f8d5bd;
  --pk-support-04--dark: #cb333b;
  --pk-support-04a--dark: #d96464;
  --pk-support-04b--dark: #f1c8ca;
  --pk-support-05--dark: #ffcd44;
  --pk-support-05a--dark: #ffd970;
  --pk-support-05b--dark: #ffedbb;
  
  /* UEFA specific variables */
  --uefacom-matches-calendar-bg-color: var(--pk-background);
  --uefacom-matches-calendar-bg-image: url(https://img.uefa.com/imgml/uefacom/ucl/2024/backgroundDark03L.jpg);
  --uefacom-matches-calendar-bg-size: cover;
  --uefacom-lv2-menu-h-desktop: 80px;
  --uefacom-lv2-menu-h-mobile: 54px;
  --uefacom-lv2-menu-h: var(--uefacom-lv2-menu-h-mobile, 54px);
  --uefacom-lv2-menu-h: var(--uefacom-lv2-menu-h-desktop, 80px);
  --menu-height: var(--uefacom-lv2-menu-h-mobile, 54px);
  --sponsor-height: 0px;
  --tabs-height: 0px;
  --header-top-transition: top .3s linear;
}

@media (width >= 768px) {
  :root {
    --menu-height: var(--uefacom-lv2-menu-h-desktop, 80px);
  }
}

/* Match Units Horizontal Layout */
.mu {
  position: relative;
}

.mu__highlights {
  text-align: left;
  width: auto;
  display: none;
}

.mu__highlights.video-available {
  display: block;
}

.mu__highlights .text-highlights {
  color: var(--pk-interaction);
  font-size: var(--pk-font-size-xs);
  font-family: var(--pk-font-base-regular);
  margin-left: var(--pk-spacing-xs2);
}

.mu--with-stroke .pk-match-unit::part(container) {
  border: 1px solid var(--pk-ui-02);
}

.mu--border-radius--l .pk-match-unit {
  --pk-match-unit--border-radius: var(--pk-border-radius-l);
}

.mu--border-radius--xl .pk-match-unit {
  --pk-match-unit--border-radius: var(--pk-border-radius-xl);
}

.mu.mu-horizontal .pk-match-unit:not(.hydrated) {
  background-color: var(--pk-elevation-01);
}

.mu.mu-horizontal--m,
.mu.mu-horizontal--m .pk-match-unit,
.mu.mu-horizontal--xl,
.mu.mu-horizontal--xl .pk-match-unit {
  min-height: 102px;
}

@media (width >= 768px) {
  .mu.mu-horizontal--xl,
  .mu.mu-horizontal--xl .pk-match-unit {
    min-height: 122px;
  }
}

/* Calendar Preload Styles */
.pk-container .matches-calendar .pk-container {
  padding: 0;
}

.livescores-calendar__container,
.matches-calendar__container {
  --menu-height: var(--uefacom-lv2-menu-h-mobile, 54px);
  --sponsor-height: 0px;
  --tabs-height: 0px;
  --header-top-transition: top .3s linear;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pk-spacing-m);
}

@media (width >= 768px) {
  .livescores-calendar__container,
  .matches-calendar__container {
    --menu-height: var(--uefacom-lv2-menu-h-desktop, 80px);
    padding: 0 var(--pk-spacing-xl);
  }
}

.livescores-calendar--sponsor,
.matches-calendar--sponsor {
  --sponsor-height: 60px;
}

.livescores-calendar--hide-sponsor,
.matches-calendar--hide-sponsor {
  --sponsor-height: 0px;
}

.livescores-calendar--tabs,
.matches-calendar--tabs {
  --tabs-height: 40px;
}

@media (width >= 768px) {
  .livescores-calendar--tabs,
  .matches-calendar--tabs {
    --tabs-height: 70px;
  }
}

.simple-header__container {
  z-index: 2;
  top: var(--menu-height, 0px);
  position: sticky;
}

.matches-calendar__tabs {
  z-index: 3;
  top: calc(var(--menu-height, 0px) + var(--sponsor-height, 0px));
  transition: var(--header-top-transition);
  height: var(--tabs-height);
  position: sticky;
}

.matches-calendar__tabs.pk-container {
  background-color: var(--uefacom-matches-calendar-bg-color, var(--pk-background));
  background-image: var(--uefacom-matches-calendar-bg-image, none);
  background-size: var(--uefacom-matches-calendar-bg-size, cover);
  padding-block: var(--pk-spacing-xs2);
}

@media (width >= 768px) {
  .matches-calendar__tabs.pk-container {
    padding-block: var(--pk-spacing-l) var(--pk-spacing-m);
  }
}

.matches-calendar__tabs .segmented-control-menu {
  width: 100%;
  max-width: 480px;
}

.skl-calendar__filters {
  min-height: var(--pk-spacing-xl2);
}

.skl-calendar__tabs {
  justify-content: flex-start;
  display: flex;
  overflow: hidden;
}

.skl-calendar .skl-item-flat {
  background-color: var(--pk-ui-01);
  min-width: 150px;
  height: 50px;
  margin-right: var(--pk-spacing-xs);
  border-radius: 100px;
}

.skl-calendar__header-sticky .skl-item-flat {
  height: 40px;
}

.skl-calendar .skl-divider {
  border-top-width: 1px;
  border-top-color: var(--pk-ui-02);
  width: 100%;
  margin: var(--pk-spacing-s) 0;
  border-top-style: solid;
  display: block;
}

.skl-calendar__content {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  gap: var(--pk-spacing-xl);
}

.skl-calendar__loading {
  z-index: 1;
  padding-top: var(--pk-spacing-xl);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: absolute;
  inset: 0;
}

.skl-calendar__loading pk-spinner {
  z-index: 2;
  position: sticky;
  top: 40vh;
}

/* UEFA Calendar Layout */
.skl-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--pk-spacing-xl);
}

.skl-calendar__section {
  background: var(--pk-background);
  border-radius: var(--pk-border-radius-l);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* UEFA Calendar Header */
.skl-calendar__header {
  padding: var(--pk-spacing-l);
  background: var(--pk-elevation-01);
  border-bottom: 1px solid var(--pk-ui-02);
}

.skl-calendar__header-info {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-m);
}

.skl-calendar__sport-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--pk-border-radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--pk-font-size-l);
}

.skl-calendar__sport-details {
  display: flex;
  flex-direction: column;
  gap: var(--pk-spacing-xs);
}

.skl-calendar__sport-name {
  font-family: var(--pk-font-base-bold);
  font-size: var(--pk-font-size-xl);
  color: var(--pk-text-01);
  margin: 0;
}

.skl-calendar__live-indicator,
.skl-calendar__upcoming-info {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-xs);
  font-size: var(--pk-font-size-s);
  color: var(--pk-text-02);
}

.skl-calendar__live-dot {
  width: 8px;
  height: 8px;
  background: var(--pk-error);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* UEFA Matches Grid */
.skl-calendar__matches {
  display: flex;
  flex-direction: column;
  gap: var(--pk-spacing-s);
  padding: var(--pk-spacing-l);
}

/* UEFA Match Unit Container */
.pk-match-unit {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.pk-match-unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.pk-match-unit__container {
  background: var(--pk-background);
  border: 1px solid var(--pk-ui-02);
  border-radius: var(--pk-match-unit--border-radius, var(--pk-border-radius-l));
  overflow: hidden;
  transition: all 0.2s ease;
}

.pk-match-unit:hover .pk-match-unit__container {
  border-color: var(--pk-interaction);
}

/* UEFA Match Header */
.pk-match-unit__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pk-spacing-s) var(--pk-spacing-m);
  background: var(--pk-elevation-01);
  border-bottom: 1px solid var(--pk-ui-02);
}

.pk-match-unit__competition-name {
  font-family: var(--pk-font-base-medium);
  font-size: var(--pk-font-size-s);
  color: var(--pk-text-02);
}

.pk-match-unit__status-text {
  font-family: var(--pk-font-base-bold);
  font-size: var(--pk-font-size-xs);
  padding: var(--pk-spacing-xs2) var(--pk-spacing-xs);
  border-radius: var(--pk-border-radius-s);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pk-match-unit__status-text--live {
  background: var(--pk-error);
  color: white;
}

.pk-match-unit__status-text--upcoming {
  background: var(--pk-warning);
  color: white;
}

/* UEFA Match Content */
.pk-match-unit__content {
  padding: var(--pk-spacing-m);
}

.pk-match-unit__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-spacing-m);
}

.pk-match-unit__team {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-s);
  flex: 1;
}

.pk-match-unit__team--home {
  justify-content: flex-start;
}

.pk-match-unit__team--away {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.pk-match-unit__team-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--pk-border-radius-m);
  overflow: hidden;
  flex-shrink: 0;
}

.pk-match-unit__team-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pk-match-unit__team-placeholder {
  width: 100%;
  height: 100%;
  background: var(--pk-ui-01);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pk-font-base-bold);
  font-size: var(--pk-font-size-s);
  color: var(--pk-text-02);
}

.pk-match-unit__team-info {
  display: flex;
  flex-direction: column;
  gap: var(--pk-spacing-xs2);
}

.pk-match-unit__team-name {
  font-family: var(--pk-font-base-medium);
  font-size: var(--pk-font-size-m);
  color: var(--pk-text-01);
  line-height: 1.2;
}

/* UEFA Score Display */
.pk-match-unit__score {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-xs);
  font-family: var(--pk-font-comp-bold);
  font-size: var(--pk-font-size-xl2);
  color: var(--pk-text-01);
}

.pk-match-unit__score-home,
.pk-match-unit__score-away {
  min-width: 24px;
  text-align: center;
}

.pk-match-unit__score-separator {
  color: var(--pk-text-03);
  font-weight: normal;
}

/* UEFA VS Display */
.pk-match-unit__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pk-font-base-bold);
  font-size: var(--pk-font-size-s);
  color: var(--pk-text-03);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* UEFA Single Event */
.pk-match-unit__single-event {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-m);
  justify-content: center;
}

/* UEFA Match Footer */
.pk-match-unit__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pk-spacing-s) var(--pk-spacing-m);
  background: var(--pk-elevation-01);
  border-top: 1px solid var(--pk-ui-02);
}

.pk-match-unit__time-text {
  font-family: var(--pk-font-base-medium);
  font-size: var(--pk-font-size-s);
  color: var(--pk-text-02);
}

.pk-match-unit__watch-btn {
  display: flex;
  align-items: center;
  gap: var(--pk-spacing-xs);
  padding: var(--pk-spacing-xs) var(--pk-spacing-s);
  background: var(--pk-interaction);
  color: white;
  border: none;
  border-radius: var(--pk-border-radius-m);
  font-family: var(--pk-font-base-medium);
  font-size: var(--pk-font-size-s);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pk-match-unit__watch-btn:hover {
  background: var(--pk-secondary-02--light);
  transform: translateY(-1px);
}

.pk-match-unit__watch-btn i {
  font-size: var(--pk-font-size-xs);
}

/* UEFA Responsive Design */
@media (max-width: 768px) {
  .matches-calendar__container {
    padding: 0 var(--pk-spacing-s);
  }
  
  .skl-calendar__header {
    padding: var(--pk-spacing-m);
  }
  
  .skl-calendar__matches {
    padding: var(--pk-spacing-m);
  }
  
  .pk-match-unit__content {
    padding: var(--pk-spacing-s);
  }
  
  .pk-match-unit__teams {
    gap: var(--pk-spacing-s);
  }
  
  .pk-match-unit__team-logo {
    width: 32px;
    height: 32px;
  }
  
  .pk-match-unit__team-name {
    font-size: var(--pk-font-size-s);
  }
  
  .pk-match-unit__score {
    font-size: var(--pk-font-size-l);
  }
  
  .mu-horizontal--xl {
    min-height: 102px;
  }
}

/* UEFA Dark Theme Support */
[data-theme="dark"] {
  --pk-background: #1a2133;
  --pk-elevation-01: #2a3142;
  --pk-elevation-02: #3a4151;
  --pk-elevation-03: #4a5161;
  --pk-elevation-04: #5a6171;
  --pk-ui-01: #2a3142;
  --pk-ui-02: #3a4151;
  --pk-ui-03: #4a5161;
  --pk-ui-04: #5a6171;
  --pk-text-01: #ffffff;
  --pk-text-02: #b0b7c3;
  --pk-text-03: #8a919d;
  --pk-text-04: #6a717d;
}

/* UEFA Loading States */
.pk-match-unit.loading {
  opacity: 0.7;
  pointer-events: none;
}

.pk-match-unit.loading .pk-match-unit__container {
  background: var(--pk-elevation-01);
}

/* UEFA Animation Classes */
.pk-match-unit {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* UEFA Hover Effects */
.pk-match-unit:hover .pk-match-unit__team-name {
  color: var(--pk-interaction);
}

.pk-match-unit:hover .pk-match-unit__watch-btn {
  box-shadow: 0 2px 8px rgba(13, 58, 255, 0.3);
}

/* UEFA Focus States */
.pk-match-unit:focus {
  outline: 2px solid var(--pk-interaction);
  outline-offset: 2px;
}

.pk-match-unit__watch-btn:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}