/* coupon content placeholder (sports-coupon-default, widgetssettings -> spinloader.couponPlaceholder)
   colors can be overwritten from the theme, e.g.
   app-coupon-content-placeholder { --coupon-placeholder-color: #2b2b2b; --coupon-placeholder-shine: #3a3a3a; } */
app-coupon-content-placeholder {
  display: block;
  --coupon-placeholder-color: rgba(128, 128, 128, 0.18);
  --coupon-placeholder-shine: rgba(255, 255, 255, 0.14);
  --coupon-placeholder-border: rgba(128, 128, 128, 0.12);
  /* keep in sync with HEADER_HEIGHT / ROW_HEIGHT (row + border) in the component */
  --coupon-placeholder-row-height: 56px;
  --coupon-placeholder-radius: 4px;
}

app-coupon-content-placeholder .coupon-placeholder {
  width: 100%;
  overflow: hidden;
}

app-coupon-content-placeholder .coupon-placeholder-header,
app-coupon-content-placeholder .coupon-placeholder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

app-coupon-content-placeholder .coupon-placeholder-header {
  height: 36px;
}

app-coupon-content-placeholder .coupon-placeholder-row {
  height: var(--coupon-placeholder-row-height);
  border-top: 1px solid var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .coupon-placeholder-match {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

app-coupon-content-placeholder .coupon-placeholder-teams {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

app-coupon-content-placeholder .coupon-placeholder-odds {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

app-coupon-content-placeholder .ph {
  display: block;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-color) linear-gradient(
      90deg,
      transparent 0%,
      var(--coupon-placeholder-shine) 50%,
      transparent 100%
  ) no-repeat;
  background-size: 200% 100%;
  animation: coupon-placeholder-shimmer 1.4s ease-in-out infinite;
}

app-coupon-content-placeholder .ph-title {
  flex: 1 1 auto;
  max-width: 180px;
  height: 14px;
}

app-coupon-content-placeholder .ph-heading {
  width: 56px;
  height: 10px;
}

app-coupon-content-placeholder .ph-time {
  flex: 0 0 auto;
  width: 36px;
  height: 12px;
}

app-coupon-content-placeholder .ph-team {
  width: 60%;
  max-width: 220px;
  height: 12px;
}

app-coupon-content-placeholder .ph-team-short {
  width: 45%;
}

app-coupon-content-placeholder .ph-odd {
  width: 56px;
  height: 36px;
}

/* mobile list: a league header line (37px), then a card of 131px:
   time + 2 team lines on top, the market name bar, then 3 odds on the full width */
app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-header {
  padding: 0 8px;
  gap: 8px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-heading {
  width: 44px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row {
  position: relative;
  display: block;
  height: 168px;
  padding: 0;
}

/* league header */
app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 8px;
  width: 55%;
  height: 14px;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-color);
}

/* market name bar */
app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::after {
  content: '';
  position: absolute;
  top: 86px;
  right: 1px;
  left: 1px;
  height: 32px;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  position: absolute;
  top: 41px;
  right: 8px;
  left: 3px;
  align-items: flex-start;
  gap: 10px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time {
  width: 42px;
  height: 20px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  flex: 0 0 auto;
  gap: 8px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team {
  width: 130px;
  height: 13px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team-short {
  width: 110px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-odds {
  position: absolute;
  top: 127px;
  right: 9px;
  left: 9px;
  gap: 4px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-odd {
  flex: 1 1 0;
  width: auto;
  height: 32px;
}

/* livebooked block ("Upcoming Live Events"; "Upcoming Matches" has the same class + coupon-light and is a list): horizontal cards (250x66),
   so the placeholder too: no header, no odds, a time badge and two team lines centered in each card */
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-header,
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-odds {
  display: none;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-row {
  flex: 0 0 250px;
  height: 66px;
  padding: 0;
  border-top: 0;
  justify-content: center;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-match {
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-teams {
  flex: 0 0 auto;
  align-items: center;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .ph-time {
  width: 56px;
  height: 18px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .ph-team {
  width: 120px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .ph-team-short {
  width: 100px;
}

/* livebooked on mobile: cards of 150x66, next to each other */
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile {
  padding: 0;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row {
  position: static;
  display: flex;
  flex: 0 0 150px;
  height: 66px;
  justify-content: center;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::before,
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::after {
  content: none;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  position: static;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time {
  width: 40px;
  height: 16px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  align-items: center;
  gap: 6px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team {
  width: 95px;
  height: 12px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team-short {
  width: 85px;
}

/* highlights carousel (top of the home page): cards of 400x225, 10px apart,
   date/time top left, the two teams left/right of a "VS" circle, the odds at the bottom */
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  height: 100%;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-header {
  display: none;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-row {
  position: relative;
  display: block;
  flex: 0 0 400px;
  height: 225px;
  padding: 0;
  border-top: 0;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-card-bg, rgba(128, 128, 128, 0.08));
}

/* the "VS" circle */
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-row::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--coupon-placeholder-color);
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-match {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

/* the flag top right */
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-match::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: var(--coupon-placeholder-color);
}

.carousel-content.highlights app-coupon-content-placeholder .ph-time {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 44px;
  height: 34px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-teams {
  position: absolute;
  top: 105px;
  right: 18px;
  left: 18px;
  flex-direction: row;
  justify-content: space-between;
}

.carousel-content.highlights app-coupon-content-placeholder .ph-team,
.carousel-content.highlights app-coupon-content-placeholder .ph-team-short {
  width: 110px;
  height: 14px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-odds {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  gap: 8px;
}

.carousel-content.highlights app-coupon-content-placeholder .ph-odd {
  flex: 1 1 0;
  width: auto;
  height: 28px;
}

/* highlights carousel on mobile: cards of 280x157, date/time on one line, smaller "VS" circle */
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row {
  flex: 0 0 280px;
  height: 157px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::before {
  top: 73px;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::after {
  content: none;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  top: 0;
  right: 0;
  left: 0;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match::after {
  top: 15px;
  right: 14px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time {
  position: absolute;
  top: 15px;
  left: 22px;
  width: 107px;
  height: 16px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  top: 64px;
  right: 10px;
  left: 10px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team,
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team-short {
  width: 90px;
  height: 14px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-odds {
  top: 111px;
  right: 15px;
  bottom: auto;
  left: 10px;
  gap: 9px;
}

.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder.mobile .ph-odd {
  height: 32px;
}

@keyframes coupon-placeholder-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  app-coupon-content-placeholder .ph {
    animation: none;
  }
}