/* 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; }

   The layout of each coupon is set with the --cph-* variables, per coupon block class and resolution
   (.coupon-placeholder.mobile = mobile page size). The optional parts (coupon title, inline sports filter,
   league line, extra market columns, "view all" footer) are hidden unless a coupon turns them on. */
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);
  --coupon-placeholder-radius: 4px;

  /* heights of the parts (the optional ones are shown with --cph-*-display) */
  --cph-title-h: 0px;        /* coupon title, e.g. "Upcoming Matches" */
  --cph-filter-h: 0px;       /* inline sports filter (+ other filter bars above the list) */
  --cph-header-h: 36px;      /* sport header with the market headings (+ date heading) */
  --cph-league-h: 0px;       /* league line above each match */
  --cph-row-h: 56px;         /* match row (desktop) */
  --cph-footer-h: 0px;       /* "view all matches" button */
  /* desktop row: match info column, then the odds up to --cph-odds-right from the right edge */
  --cph-info-w: minmax(0, 1fr);
  --cph-odds-col: auto;
  --cph-odds-right: 12px;
  --cph-odd-flex: 0 0 auto;  /* 1 1 0: the odds share the odds column */
  --cph-odd-w: 56px;
  --cph-odd-h: 36px;
  --cph-odd-gap: 6px;
  --cph-extra-space: 60px;   /* space before the extra market columns (line selector) */
  /* mobile card: height of the card under the league line, top of the odds in the card */
  --cph-card-h: 131px;
  --cph-card-gap: 4px;
  --cph-card-odds-top: 90px;
}

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

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;
}

/* ---------- top: coupon title + inline sports filter ---------- */

app-coupon-content-placeholder .coupon-placeholder-top {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

app-coupon-content-placeholder .ph-coupon-title {
  display: var(--cph-title-display, none);
  flex: 0 0 auto;
  width: 170px;
  height: 16px;
  margin: calc((var(--cph-title-h) - 16px) / 2) 12px;
}

app-coupon-content-placeholder .coupon-placeholder-filter {
  display: var(--cph-filter-display, none);
  flex: 0 0 var(--cph-filter-h);
  height: var(--cph-filter-h);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
}

app-coupon-content-placeholder .ph-pill {
  flex: 0 0 72px;
  height: 28px;
  border-radius: 14px;
}

/* ---------- desktop: header (sport + market headings) and rows (league line, match info, odds)
   on the same columns ---------- */

app-coupon-content-placeholder .coupon-placeholder-header,
app-coupon-content-placeholder .coupon-placeholder-row {
  display: grid;
  grid-template-columns: var(--cph-info-w) var(--cph-odds-col);
  align-items: center;
  column-gap: 12px;
  padding: 0 var(--cph-odds-right) 0 12px;
  box-sizing: border-box;
}

app-coupon-content-placeholder .coupon-placeholder-header {
  grid-template-rows: var(--cph-header-h);
}

app-coupon-content-placeholder .ph-title {
  width: 100%;
  max-width: 180px;
  height: 14px;
}

app-coupon-content-placeholder .coupon-placeholder-headings {
  display: flex;
  gap: var(--cph-odd-gap);
}

/* the market headings: a short label centered above each odds column */
app-coupon-content-placeholder .ph-heading,
app-coupon-content-placeholder .ph-heading-extra {
  flex: var(--cph-odd-flex);
  width: var(--cph-odd-w);
  height: 10px;
  border-radius: 0;
  background: linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) center / 20px 10px no-repeat;
  animation: none;
}

app-coupon-content-placeholder .ph-heading-extra {
  display: none;
}

app-coupon-content-placeholder .coupon-placeholder-row {
  grid-template-rows: var(--cph-league-h) var(--cph-row-h);
  border-top: 1px solid var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .ph-league {
  display: var(--cph-league-display, none);
  grid-column: 1 / -1;
  grid-row: 1;
  width: 30%;
  max-width: 260px;
  height: 12px;
}

app-coupon-content-placeholder .coupon-placeholder-match {
  grid-column: 1;
  grid-row: 2;
  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 {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  gap: var(--cph-odd-gap);
}

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,
app-coupon-content-placeholder .ph-odd-extra {
  flex: var(--cph-odd-flex);
  min-width: 0;
  width: var(--cph-odd-w);
  height: var(--cph-odd-h);
}

/* extra market columns: hidden, a coupon shows the first n of them (see below);
   with shared space they can be a bit wider than the first market's columns */
app-coupon-content-placeholder .ph-odd-extra,
app-coupon-content-placeholder .ph-heading-extra {
  flex-grow: var(--cph-extra-grow, 1);
}

app-coupon-content-placeholder .ph-odd-extra {
  display: none;
}

app-coupon-content-placeholder .ph-odd-extra:nth-child(4),
app-coupon-content-placeholder .ph-heading-extra:nth-child(4) {
  margin-left: var(--cph-extra-space);
}

/* ---------- footer ---------- */

app-coupon-content-placeholder .coupon-placeholder-footer {
  display: var(--cph-footer-display, none);
  height: var(--cph-footer-h);
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .ph-footer {
  width: 130px;
  height: 14px;
}

/* ---------- mobile list: sport header with the markets drop down, a league line, then a card:
   time + 2 team lines on top, the market name bar, then the odds on the full width ---------- */

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-header {
  display: flex;
  height: var(--cph-header-h);
  padding: 0 8px;
  gap: 8px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-title {
  width: 120px;
}

/* the markets drop down */
app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-headings {
  margin-left: auto;
  flex: 0 0 140px;
  height: 26px;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-heading,
app-coupon-content-placeholder .coupon-placeholder.mobile .ph-heading-extra {
  display: none;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-filter {
  gap: 14px;
  padding: 0 8px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-pill {
  flex: 0 0 44px;
  height: calc(var(--cph-filter-h) - 16px);
  max-height: 48px;
  border-radius: var(--coupon-placeholder-radius);
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row {
  position: relative;
  display: block;
  height: calc(var(--cph-league-h) + var(--cph-card-h) + var(--cph-card-gap));
  padding: 0;
}

/* market name bar */
app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::after {
  content: var(--cph-market-bar, '');
  position: absolute;
  top: calc(var(--cph-league-h) + var(--cph-card-odds-top) - 41px);
  right: 1px;
  left: 1px;
  height: 32px;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-border);
}

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-league {
  position: absolute;
  top: calc((var(--cph-league-h) - 14px) / 2);
  left: 8px;
  width: 55%;
  height: 14px;
}

app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  position: absolute;
  top: calc(var(--cph-league-h) + 8px);
  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: calc(var(--cph-league-h) + var(--cph-card-odds-top));
  right: 9px;
  left: 9px;
  gap: 4px;
}

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

app-coupon-content-placeholder .coupon-placeholder.mobile .ph-odd-extra {
  display: none;
}

/* =====================================================================
   cybet coupons (block classes)
   ===================================================================== */

/* ---- lists on desktop: the odds start at ~47% and end before the stats icons, sharing the space ---- */
.home-live-block app-coupon-content-placeholder,
.home-highlights-block.coupon-light app-coupon-content-placeholder,
.home-livebooked-block.coupon-light app-coupon-content-placeholder,
.sports-coupon.coupon-light app-coupon-content-placeholder,
.live-calendar.coupon-light app-coupon-content-placeholder {
  --cph-info-w: 47%;
  --cph-odds-col: minmax(0, 1fr);
  --cph-odds-right: 54px;
  --cph-odd-flex: 1 1 0;
  --cph-odd-h: 32px;
  --cph-odd-gap: 4px;
}

/* ---- live: home "Live Events" (sports filter, 1X2 + totals, view all) ---- */
.home-live-block app-coupon-content-placeholder {
  --cph-header-h: 43px;
  --cph-league-display: block;
  --cph-league-h: 29px;
  --cph-row-h: 47px;
  --cph-extra-space: 70px;
  --cph-extra-grow: 1.07;
  --cph-card-h: 135px;
  --cph-card-odds-top: 89px;
}

.live-matches .home-live-block app-coupon-content-placeholder {
  --cph-filter-display: flex;
  --cph-filter-h: 54px;
  --cph-footer-display: flex;
  --cph-footer-h: 40px;
  --cph-card-h: 131px;
  --cph-card-odds-top: 90px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-header-h: 43px;
  --cph-league-h: 33px;
}

.live-matches .home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 70px;
}

/* totals after the 1X2 */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(-n+5) {
  display: block;
}

/* /live: next goal after the totals */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(n+6):nth-child(-n+8) {
  display: block;
}

.home-live-block app-coupon-content-placeholder :is(.ph-odd-extra, .ph-heading-extra):nth-child(6) {
  margin-left: 12px;
}

/* ---- light lists: title, sports filter, sport header (+ date), league line, 1X2 + totals ---- */
.home-highlights-block.coupon-light app-coupon-content-placeholder,
.home-livebooked-block.coupon-light app-coupon-content-placeholder,
.sports-coupon.coupon-light app-coupon-content-placeholder,
.live-calendar.coupon-light app-coupon-content-placeholder {
  --cph-title-display: block;
  --cph-title-h: 56px;
  --cph-filter-display: flex;
  --cph-filter-h: 54px;
  --cph-header-h: 72px;
  --cph-league-display: block;
  --cph-league-h: 38px;
  --cph-row-h: 48px;
  --cph-extra-space: 62px;
  --cph-extra-grow: 1.2;
  --cph-card-h: 133px;
  --cph-card-gap: 3px;
  --cph-card-odds-top: 90px;
}

.home-highlights-block.coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(-n+5),
.home-livebooked-block.coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(-n+5),
.sports-coupon.coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(-n+5) {
  display: block;
}

.home-highlights-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile,
.home-livebooked-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile,
.sports-coupon.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 50px;
  --cph-header-h: 77px;
  --cph-league-h: 36px;
}

/* home "Highlights" and "Upcoming Matches": a "view all" footer */
.top-matches .home-highlights-block.coupon-light app-coupon-content-placeholder,
.upcoming-matches .home-livebooked-block.coupon-light app-coupon-content-placeholder {
  --cph-footer-display: flex;
  --cph-footer-h: 40px;
}

/* "Highlights": on /sports/highlights a second filter bar under the sports filter */
.home-highlights-block.coupon-light app-coupon-content-placeholder {
  --cph-filter-h: 123px;
}

.home-highlights-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 104px;
}

.top-matches .home-highlights-block.coupon-light app-coupon-content-placeholder {
  --cph-filter-h: 54px;
}

.top-matches .home-highlights-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 50px;
  --cph-header-h: 45px;
  --cph-league-h: 33px;
  --cph-card-h: 138px;
  --cph-card-gap: 0px;
}

/* sport header (45px) + date line (29px), league line 33px, cards of 138px */
.upcoming-matches .home-livebooked-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 60px;
  --cph-header-h: 74px;
  --cph-league-h: 33px;
  --cph-card-h: 138px;
  --cph-card-gap: 0px;
}

/* /sports, /sports/today: date and league lines of 28px */
.sports-coupon.coupon-light app-coupon-content-placeholder {
  --cph-header-h: 43px;
  --cph-league-h: 28px;
  --cph-row-h: 47px;
}

/* /live/calendar: no odds, "home vs away" on one line */
.live-calendar.coupon-light app-coupon-content-placeholder {
  --cph-header-h: 43px;
}

.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder-headings,
.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder-odds {
  display: none;
}

.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder-teams {
  flex-direction: row;
  gap: 24px;
}

.live-calendar.coupon-light app-coupon-content-placeholder .ph-team {
  width: 160px;
}

.live-calendar.coupon-light app-coupon-content-placeholder .ph-team-short {
  width: 140px;
}

.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-filter-h: 60px;
  --cph-header-h: 48px;
  --cph-league-h: 36px;
  --cph-card-h: 51px;
  --cph-market-bar: none;
}

.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  flex-direction: column;
  gap: 8px;
}

.live-calendar.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  top: calc(var(--cph-league-h) + 9px);
}

/* ---- /live/match left sidebar (290px wide): the mobile card layout on desktop ---- */
.live-sports-coupon app-coupon-content-placeholder {
  --cph-header-h: 44px;
  --cph-league-display: block;
  --cph-league-h: 42px;
  --cph-card-h: 106px;
  --cph-card-gap: 0px;
  --cph-card-odds-top: 68px;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-header {
  display: flex;
  height: var(--cph-header-h);
  padding: 0 8px;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-headings {
  display: none;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row {
  position: relative;
  display: block;
  height: calc(var(--cph-league-h) + var(--cph-card-h) + var(--cph-card-gap));
  padding: 0;
}

.live-sports-coupon app-coupon-content-placeholder .ph-league {
  position: absolute;
  top: calc((var(--cph-league-h) - 14px) / 2);
  left: 8px;
  width: 60%;
  height: 14px;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-match {
  position: absolute;
  top: calc(var(--cph-league-h) + 8px);
  right: 8px;
  left: 6px;
  align-items: flex-start;
  gap: 10px;
}

.live-sports-coupon app-coupon-content-placeholder .ph-team {
  width: 130px;
}

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

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-odds {
  position: absolute;
  top: calc(var(--cph-league-h) + var(--cph-card-odds-top));
  right: 6px;
  left: 6px;
  gap: 8px;
}

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

/* like the real list: only the first league is expanded (its league line + 2 matches), the other leagues
   are collapsed lines of 42px (the rows are children 3.. of .coupon-placeholder, after the top and the header) */
.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row:nth-child(3) {
  height: calc(var(--cph-league-h) + 109px);
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row:nth-child(4) {
  --cph-league-h: 0px;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row:nth-child(4) .ph-league,
.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row:nth-child(n+5) :is(.coupon-placeholder-match, .coupon-placeholder-odds) {
  display: none;
}

.live-sports-coupon app-coupon-content-placeholder .coupon-placeholder-row:nth-child(n+5) {
  height: var(--cph-league-h);
}

/* ---- livebooked block ("Upcoming Live Events"): the title, then horizontal cards (250x66, mobile 150x66):
   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 {
  --cph-title-display: block;
  --cph-title-h: 40px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder {
  display: grid;
  grid-template-rows: var(--cph-title-h) 66px;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  justify-content: start;
  height: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-top {
  grid-row: 1;
  grid-column: 1 / span 4;
  margin-left: -40px;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .ph-coupon-title {
  width: 150px;
  margin-left: 12px;
}

.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,
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-footer,
.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .ph-league {
  display: none;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder-row {
  grid-row: 2;
  display: flex;
  height: 66px;
  padding: 0;
  border-top: 0;
  align-items: center;
  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;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile {
  grid-auto-columns: 150px;
  padding: 0;
}

.home-livebooked-block:not(.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-top {
  margin-left: 0;
}

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

.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-top,
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-header,
.carousel-content.highlights app-coupon-content-placeholder .coupon-placeholder-footer,
.carousel-content.highlights app-coupon-content-placeholder .ph-league,
.carousel-content.highlights app-coupon-content-placeholder .ph-odd-extra {
  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-row::after {
  content: none;
}

.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;
  top: auto;
  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-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;
}

/* =====================================================================
   mobile cards (home "Live Events" and the light lists): the colors and the parts of the real cards,
   so that nothing changes when the matches replace the placeholder
   ===================================================================== */

/* dark list: #1b1b1b background, #2b2b2b cards, #212121 odds */
.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile {
  --cph-list-bg: #1b1b1b;
  --cph-card-bg: #2b2b2b;
  --cph-odd-bg: #212121;
  --cph-odd-border: rgba(194, 194, 194, 0.24);
  --cph-time-bg: rgba(255, 255, 255, 0.24);
  --cph-card-odds-top: 93px;
}

/* light lists: #ecedf1 background, white sport header and cards */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile {
  --coupon-placeholder-color: rgba(28, 32, 38, 0.08);
  --coupon-placeholder-shine: rgba(255, 255, 255, 0.7);
  --coupon-placeholder-border: rgba(28, 32, 38, 0.08);
  --cph-list-bg: #ecedf1;
  --cph-header-bg: #fff;
  --cph-card-bg: #fff;
  --cph-odd-bg: #f4f4f6;
  --cph-odd-border: rgba(194, 194, 194, 0.24);
  --cph-time-bg: transparent;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile {
  background: var(--cph-list-bg);
}

/* coupon title: round icon + title */
:is(.home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-coupon-title {
  width: 160px;
  height: 30px;
  margin: calc((var(--cph-title-h) - 30px) / 2) 4px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 14.5px, transparent 15px) 0 center / 30px 30px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 40px center / 110px 12px no-repeat;
  animation: none;
}

/* sports filter: the sport icon with its name under it */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-filter {
  align-items: flex-start;
  gap: 4px;
  padding: 5px 0 0 10px;
  box-sizing: border-box;
}

:is(.home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-filter {
  padding: 0 0 0 5px;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-pill {
  flex: 0 0 52px;
  height: 50px;
  max-height: none;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) center 5px / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) center 29px / 32px 9px no-repeat;
  animation: none;
}

/* sport header: sport icon + name, the markets drop down on the right */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-header {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  padding: 0 9px;
}

:is(.home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 5px;
  right: 5px;
  height: 45px;
  border-radius: 8px;
  background: var(--cph-header-bg);
}

/* "Upcoming Matches": the date line under the sport header */
.upcoming-matches .home-livebooked-block.coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-header::after {
  content: '';
  position: absolute;
  top: 55px;
  left: 14px;
  width: 150px;
  height: 12px;
  border-radius: var(--coupon-placeholder-radius);
  background: var(--coupon-placeholder-color);
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-title {
  width: 110px;
  height: 20px;
  margin-top: 12px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) 0 0 / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 28px 4px / 70px 12px no-repeat;
  animation: none;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-headings {
  flex: 0 0 145px;
  height: 28px;
  margin-top: 8px;
  border-radius: 5px;
  background: var(--coupon-placeholder-color);
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row {
  border-top: 0;
}

/* the card */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::before {
  content: '';
  position: absolute;
  top: var(--cph-league-h);
  left: 5px;
  right: 5px;
  height: var(--cph-card-h);
  border-radius: 8px;
  background: var(--cph-card-bg);
}

/* league line: star / flag + league name */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-league {
  left: 14px;
  width: 230px;
  height: 13px;
  top: calc((var(--cph-league-h) - 13px) / 2);
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 0 / 13px 13px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 20px 0 / 19px 13px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 47px 1px / 170px 11px no-repeat;
  animation: none;
}

/* time / live box, teams */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  top: var(--cph-league-h);
  left: 12px;
  right: 0;
  gap: 17px;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  margin-top: 11px;
  gap: 6px;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team {
  width: 140px;
  height: 12px;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-team-short {
  width: 118px;
}

/* live: grey box with the minute, the match code under it */
.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time {
  position: relative;
  width: 36px;
  height: 35px;
  overflow: visible;
  background-color: var(--cph-time-bg);
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time::after {
  content: '';
  position: absolute;
  top: 39px;
  left: 3px;
  width: 30px;
  height: 9px;
  border-radius: 2px;
  background: var(--coupon-placeholder-color);
}

/* light lists: date, time and match code on 3 lines */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match {
  left: 14px;
  gap: 18px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-teams {
  margin-top: 9px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .ph-time {
  width: 31px;
  height: 46px;
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 3px / 31px 10px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 19px / 31px 10px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 4px 35px / 24px 10px no-repeat;
  animation: none;
}

/* right side of the card: live score (2 lines), favorite and statistics icons */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 46px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match::after {
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 10px 10px / 8px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 10px 30px / 8px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 33px 18px / 16px 16px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 53px 18px / 16px 16px no-repeat;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-match::after {
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 44px 7px / 18px 18px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 45px 25px / 16px 16px no-repeat;
}

/* market name line: the market on the left, the "+n" more markets on the right (text, not a bar) */
:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-row::after {
  left: 5px;
  right: 5px;
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 9px center / 72px 10px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) right 9px center / 26px 10px no-repeat;
}

/* odds */
.home-live-block app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-odds {
  left: 14px;
  right: 14px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder.mobile .coupon-placeholder-odds {
  left: 14px;
  right: 18px;
}

:is(.home-live-block, .home-highlights-block.coupon-light, .home-livebooked-block.coupon-light, .sports-coupon.coupon-light) app-coupon-content-placeholder .coupon-placeholder.mobile .ph-odd {
  box-sizing: border-box;
  border: 1px solid var(--cph-odd-border);
  border-radius: 5px;
  background-color: var(--cph-odd-bg);
}

/* =====================================================================
   desktop "Live Events": #1b1b1b list, #2b2b2b league bands, the parts of the real rows
   ===================================================================== */

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) {
  --cph-row-h: 48px;
  --cph-info-w: 48.4%;
  --cph-extra-grow: 1.1;
  position: relative;
  height: 100%;
  background: #1b1b1b;
}

/* next goal: as wide as the 1X2 */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(n+6) {
  flex-grow: 1;
}

/* "view all" at the bottom of the coupon (the placeholder has the height of the coupon, the rows are cut) */
.live-matches .home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: #1b1b1b;
}

/* sports filter: pills of 30px (icon, name, count), the selected one filled */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-filter {
  gap: 10px;
  padding: 0 0 0 31px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-pill {
  flex: 0 0 110px;
  height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) 10px center / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 36px center / 42px 11px no-repeat,
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) right 8px center / 20px 20px no-repeat;
  animation: none;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-pill:first-child {
  flex-basis: 85px;
  background-color: #333;
}

/* sport header: icon + name, the markets drop down, the market group names */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-header {
  position: relative;
  grid-template-rows: 40px;
  margin-bottom: 3px;
  padding-left: 4px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-title {
  width: 85px;
  height: 20px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) 0 0 / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 28px 4px / 53px 12px no-repeat;
  animation: none;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-header::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 175px;
  width: 145px;
  height: 28px;
  border-radius: 5px;
  background: var(--coupon-placeholder-color);
}

/* group names centered over the 1X2, the totals and the next goal */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-heading, .ph-heading-extra) {
  height: 12px;
  background: none;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-heading:nth-child(2), .ph-heading-extra:nth-child(4), .ph-heading-extra:nth-child(7)) {
  overflow: visible;
  background: linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) center / 76px 12px no-repeat;
}

/* rows: league band (flag, name, the outcome labels, the collapse arrow), then the match */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-row {
  position: relative;
  border-top: 0;
  padding-left: 0;
  background: linear-gradient(#2b2b2b, #2b2b2b) 0 0 / 100% var(--cph-league-h) no-repeat;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-league {
  width: 240px;
  max-width: none;
  height: 13px;
  margin-left: 8px;
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 0 / 13px 13px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 21px 0 / 19px 13px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 48px 1px / 190px 11px no-repeat;
  animation: none;
}

/* star + match code, collapse arrow */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-row::before {
  content: '';
  position: absolute;
  top: var(--cph-league-h);
  left: 0;
  width: 45px;
  height: var(--cph-row-h);
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 15px 6px / 14px 14px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 8px 31px / 30px 9px no-repeat;
}

/* live tracker / statistics icons and "+n" on the right */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-row::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: calc(var(--cph-league-h) + var(--cph-row-h));
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 6.5px, transparent 7px) 19px 8px / 14px 14px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 2px calc(var(--cph-league-h) + 3px) / 18px 18px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 24px calc(var(--cph-league-h) + 4px) / 16px 16px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 9px calc(var(--cph-league-h) + 30px) / 26px 10px no-repeat;
}

/* minute box, teams, score */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-match {
  position: relative;
  align-self: stretch;
  align-items: center;
  gap: 21px;
  padding-left: 58px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-time {
  width: 24px;
  height: 19px;
  background-color: rgba(255, 255, 255, 0.24);
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-team {
  width: 190px;
}

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

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-match::after {
  content: '';
  position: absolute;
  top: 0;
  right: 9px;
  width: 9px;
  height: 100%;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 7px / 9px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 27px / 9px 12px no-repeat;
}

/* odds: #212121 boxes with a border, the line selector before the totals */
.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd, .ph-odd-extra) {
  box-sizing: border-box;
  border: 1px solid rgba(194, 194, 194, 0.24);
  border-radius: 5px;
  background-color: #212121;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(4) {
  position: relative;
  overflow: visible;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(4)::before {
  content: '';
  position: absolute;
  top: 1px;
  left: -57px;
  width: 48px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(194, 194, 194, 0.24);
  border-radius: 5px;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-footer {
  border-top: 0;
}

.home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-footer {
  width: 100px;
  height: 12px;
}

/* =====================================================================
   desktop light lists ("Highlights", "Upcoming Matches", /sports): #ecedf1 list, white header and rows,
   3 market groups of 219px on the right (1X2, line + totals, both teams to score)
   ===================================================================== */

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) {
  --coupon-placeholder-color: rgba(28, 32, 38, 0.08);
  --coupon-placeholder-shine: rgba(255, 255, 255, 0.7);
  --coupon-placeholder-border: rgba(28, 32, 38, 0.08);
  --cph-info-w: minmax(0, 1fr);
  --cph-odds-col: auto;
  --cph-odds-right: 53px;
  --cph-odd-flex: 0 0 auto;
  --cph-row-h: 48px;
  position: relative;
  height: 100%;
  background: #ecedf1;
}

/* title: round icon + title */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-coupon-title {
  width: 160px;
  height: 36px;
  margin: calc(var(--cph-title-h) - 42px) 12px 6px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 17.5px, transparent 18px) 0 center / 36px 36px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 44px center / 102px 12px no-repeat;
  animation: none;
}

/* sports filter: pills of 30px (icon, name, count) */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-filter {
  gap: 10px;
  padding: 0 0 0 26px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-pill {
  flex: 0 0 110px;
  height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) 10px center / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 36px center / 42px 11px no-repeat,
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) right 8px center / 20px 20px no-repeat;
  animation: none;
}

/* sport header (white, 40px), then the date line with the outcome labels */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-header {
  position: relative;
  isolation: isolate;
  margin: 0 8px;
  padding: 0 calc(var(--cph-odds-right) - 8px) 0 4px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 40px;
  border-radius: 8px;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 175px 6px / 145px 28px no-repeat,
    #fff;
}

/* sport icon + name (header), date (date line) */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-title {
  align-self: stretch;
  width: 200px;
  max-width: none;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--coupon-placeholder-color) 9.5px, transparent 10px) 4px 10px / 20px 20px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 32px 14px / 53px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 18px calc(100% - 9px) / 150px 11px no-repeat;
  animation: none;
}

/* group names in the header, outcome labels (1 X 2 ...) in the date line */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-headings {
  align-self: stretch;
  align-items: flex-end;
  padding: 0 9px 9px 8px;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 70px 14px / 76px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 305px 14px / 46px 12px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 483px 14px / 130px 12px no-repeat;
}

/* rows: white, 8px from the sides, a line under each match */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-row {
  position: relative;
  margin: 0 8px;
  padding: 0 calc(var(--cph-odds-right) - 8px) 0 0;
  border-top: 0;
  border-bottom: 1px solid #ecedf1;
  background: #fff;
}

/* league line: favorite star, icon, league name */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-league {
  width: 300px;
  max-width: none;
  height: 18px;
  margin-left: 10px;
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 0 / 18px 18px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 26px 3px / 19px 13px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 53px 4px / 245px 11px no-repeat;
  animation: none;
}

/* date / time / code column with its divider, teams, the bet builder icon */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-match {
  position: relative;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  padding-left: 9px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-time {
  align-self: stretch;
  width: 41px;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 0 4px / 31px 10px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 3px 19px / 25px 10px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 5px 35px / 20px 10px no-repeat,
    linear-gradient(#ecedf1, #ecedf1) right 0 top 0 / 1px 100% no-repeat;
  animation: none;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-team {
  width: 190px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-team-short {
  width: 160px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-match::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--coupon-placeholder-color);
}

/* the 3 market groups: dividers on the right of each group */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-odds {
  align-self: stretch;
  align-items: center;
  padding: 0 9px 0 8px;
  background:
    linear-gradient(#ecedf1, #ecedf1) 218px 0 / 1px 100% no-repeat,
    linear-gradient(#ecedf1, #ecedf1) 438px 0 / 1px 100% no-repeat,
    linear-gradient(#ecedf1, #ecedf1) 657px 0 / 1px 100% no-repeat;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd, .ph-odd-extra) {
  flex: 0 0 65px;
  width: 65px;
  box-sizing: border-box;
  border: 1px solid rgba(194, 194, 194, 0.24);
  border-radius: 5px;
  background-color: #ecedf1;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd-extra, .ph-heading-extra):nth-child(-n+7) {
  display: block;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(-n+5) {
  flex-basis: 75px;
  width: 75px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(n+6) {
  flex-basis: 99px;
  width: 99px;
}

/* the line selector before the totals */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(4) {
  position: relative;
  overflow: visible;
  margin-left: 60px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(4)::before {
  content: '';
  position: absolute;
  top: 2px;
  left: -49px;
  width: 48px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(194, 194, 194, 0.24);
  border-radius: 5px;
  background: #fff;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra:nth-child(6) {
  margin-left: 13px;
}

/* outcome labels: one per odd, as wide as the odds */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-heading, .ph-heading-extra) {
  flex: 0 0 65px;
  width: 65px;
  background-size: 14px 10px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-heading-extra:nth-child(-n+5) {
  flex-basis: 75px;
  width: 75px;
  background-size: 30px 10px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-heading-extra:nth-child(n+6) {
  flex-basis: 99px;
  width: 99px;
  background-size: 22px 10px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-heading-extra:nth-child(4) {
  margin-left: 60px;
}

:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-heading-extra:nth-child(6) {
  margin-left: 13px;
}

/* favorite / statistics icons and "+n" on the right */
:is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-row::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45px;
  height: var(--cph-row-h);
  background:
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 2px 5px / 18px 18px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 24px 6px / 16px 16px no-repeat,
    linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) 9px 31px / 28px 10px no-repeat;
}

/* "view all" at the bottom */
:is(.top-matches .home-highlights-block, .upcoming-matches .home-livebooked-block).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 0;
  background: #ecedf1;
}

/* =====================================================================
   placeholder views: the CMS views /progress-spinner-match and /progress-spinner-coupon, which
   app-progress-spinner renders instead of the spinner (match page markets; coupons without the content
   placeholder above). Each CMS block is app-block.<its classes> > app-widget-host > its child blocks;
   the app-widget-host are left out of the layout (display: contents, the theme makes them flex columns),
   so the child blocks are laid out directly by their parent block.
   ===================================================================== */

app-sports-match-markets > app-progress-spinner.loading-spinner {
  display: block;
}

app-progress-spinner :is(.cms-mph, .cms-cph),
app-progress-spinner :where(.cms-mph, .cms-cph) app-block {
  display: block;
  box-sizing: border-box;
}

/* the full width at any size: the app-widget-host around the view is a flex row on mobile, where the view
   shrank to its content */
app-progress-spinner :is(.cms-mph, .cms-cph) {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

app-progress-spinner :is(.cms-mph, .cms-cph) app-widget-host {
  display: contents;
}

app-progress-spinner :is(.cms-mph, .cms-cph) .widget-content-placeholder {
  display: none;
}

/* ---- match page markets (/progress-spinner-match): groups 8px apart, 40px header (name, favorite star,
   collapse arrow), rows of 36px odds 10px apart, a .cms-mph-line before the odds = the line of a totals row.
   Light by default, dark on the live match page ---- */

app-progress-spinner .cms-mph {
  --mph-bg: #ecedf1;
  --mph-group: #fff;
  --mph-odd: #ecedf1;
  --mph-text: rgba(28, 32, 38, 0.08);
  background: var(--mph-bg);
  animation: coupon-placeholder-pulse 1.6s ease-in-out infinite;
}

.live-match-page app-progress-spinner .cms-mph {
  --mph-bg: #212121;
  --mph-group: #2b2b2b;
  --mph-odd: #212121;
  --mph-text: rgba(255, 255, 255, 0.08);
}

/* the placeholder view shows at once (the fade-in below is only for the plain spinner): with the delay it stayed
   at opacity 0 for the whole load */
app-sports-match-markets > app-progress-spinner.loading-spinner:has(.cms-mph) {
  animation: none;
}

app-progress-spinner .cms-mph-group {
  margin-bottom: 8px;
  padding: 0 6px 10px 10px;
  background: var(--mph-group);
}

app-progress-spinner .cms-mph-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 5px;
}

/* the name width comes from the block class (w60 = 60px) */
app-progress-spinner .cms-mph-name {
  width: 90px;
  height: 12px;
  margin-right: auto;
  background: var(--mph-text);
}

app-progress-spinner .cms-mph-name.w40 { width: 40px; }
app-progress-spinner .cms-mph-name.w50 { width: 50px; }
app-progress-spinner .cms-mph-name.w60 { width: 60px; }
app-progress-spinner .cms-mph-name.w70 { width: 70px; }
app-progress-spinner .cms-mph-name.w80 { width: 80px; }
app-progress-spinner .cms-mph-name.w90 { width: 90px; }
app-progress-spinner .cms-mph-name.w100 { width: 100px; }
app-progress-spinner .cms-mph-name.w110 { width: 110px; }
app-progress-spinner .cms-mph-name.w120 { width: 120px; }
app-progress-spinner .cms-mph-name.w130 { width: 130px; }
app-progress-spinner .cms-mph-name.w140 { width: 140px; }
app-progress-spinner .cms-mph-name.w150 { width: 150px; }
app-progress-spinner .cms-mph-name.w160 { width: 160px; }
app-progress-spinner .cms-mph-name.w170 { width: 170px; }
app-progress-spinner .cms-mph-name.w180 { width: 180px; }
app-progress-spinner .cms-mph-name.w190 { width: 190px; }
app-progress-spinner .cms-mph-name.w200 { width: 200px; }
app-progress-spinner .cms-mph-name.w220 { width: 220px; }
app-progress-spinner .cms-mph-name.w250 { width: 250px; }

app-progress-spinner .cms-mph-star {
  flex: 0 0 18px;
  height: 18px;
  background: var(--mph-text);
}

app-progress-spinner .cms-mph-arrow {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mph-text);
}

app-progress-spinner .cms-mph-row {
  display: flex;
  gap: 4px;
  height: 36px;
}

app-progress-spinner .cms-mph-row ~ .cms-mph-row {
  margin-top: 10px;
}

app-progress-spinner .cms-mph-odd {
  flex: 1 1 0;
  min-width: 0;
  background: var(--mph-odd);
}

/* totals: the line (e.g. 2.5) on the left of the under / over odds */
app-progress-spinner .cms-mph-line {
  flex: 0 0 46px;
  background: linear-gradient(var(--mph-text), var(--mph-text)) 5px center / 22px 12px no-repeat;
}

/* ---- coupons (/progress-spinner-coupon): header (title, market headings), rows (time, teams, odds);
   on mobile (.cms-cph.mobile) the markets drop down in the header and cards: time + teams, the odds under them.
   Light (#ecedf1 list, white header and rows) by default, dark on the live pages ---- */

app-progress-spinner .cms-cph {
  --cph-view-color: rgba(28, 32, 38, 0.08);
  --cph-view-shine: rgba(255, 255, 255, 0.7);
  --cph-view-border: #ecedf1;
  --cph-view-bg: #ecedf1;
  --cph-view-head-bg: #fff;
  --cph-view-row-bg: #fff;
  --cph-view-odd: #ecedf1;
  --cph-view-odd-border: rgba(194, 194, 194, 0.24);
  width: 100%;
  overflow: hidden;
  padding: 0 8px;
  background: var(--cph-view-bg);
}

:is(.live-page, .live-match-page) app-progress-spinner .cms-cph {
  --cph-view-color: rgba(255, 255, 255, 0.08);
  --cph-view-shine: rgba(255, 255, 255, 0.08);
  --cph-view-border: #2b2b2b;
  --cph-view-bg: #1b1b1b;
  --cph-view-head-bg: #2b2b2b;
  --cph-view-row-bg: #1b1b1b;
  --cph-view-odd: #212121;
}

app-progress-spinner :is(.cms-cph-title, .cms-cph-time, .cms-cph-team, .cms-cph-odd) {
  border-radius: 4px;
  background: var(--cph-view-color) linear-gradient(
      90deg,
      transparent 0%,
      var(--cph-view-shine) 50%,
      transparent 100%
  ) no-repeat;
  background-size: 200% 100%;
  animation: coupon-placeholder-shimmer 1.4s ease-in-out infinite;
}

app-progress-spinner .cms-cph-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px 8px 0 0;
  background: var(--cph-view-head-bg);
}

app-progress-spinner .cms-cph-title {
  flex: 0 1 180px;
  height: 14px;
}

app-progress-spinner .cms-cph-fill {
  flex: 1 1 auto;
}

app-progress-spinner .cms-cph-heads {
  display: flex;
  gap: 6px;
}

/* a short label centered above each odds column */
app-progress-spinner .cms-cph-heads app-block {
  width: 65px;
  height: 10px;
  background: linear-gradient(var(--cph-view-color), var(--cph-view-color)) center / 20px 10px no-repeat;
}

app-progress-spinner .cms-cph-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 12px;
  border-top: 1px solid var(--cph-view-border);
  background: var(--cph-view-row-bg);
}

app-progress-spinner .cms-cph-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

app-progress-spinner .cms-cph-time {
  flex: 0 0 36px;
  height: 12px;
}

app-progress-spinner .cms-cph-teams {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

app-progress-spinner .cms-cph-team {
  width: 60%;
  max-width: 220px;
  height: 12px;
}

app-progress-spinner .cms-cph-team:last-child {
  width: 45%;
}

app-progress-spinner .cms-cph-odds {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

/* odds: boxes with a border (over the shimmer) */
app-progress-spinner .cms-cph-odd {
  width: 65px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--cph-view-odd-border);
  border-radius: 5px;
  background-color: var(--cph-view-odd);
}

/* mobile: the header and each match are separate cards */
app-progress-spinner .cms-cph.mobile {
  padding: 0 5px 4px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-head {
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-title {
  flex-basis: 120px;
}

/* the markets drop down */
app-progress-spinner .cms-cph.mobile .cms-cph-heads {
  flex: 0 0 140px;
  height: 26px;
  border-radius: 4px;
  background: var(--cph-view-color);
}

app-progress-spinner .cms-cph.mobile .cms-cph-heads app-block {
  display: none;
}

app-progress-spinner .cms-cph.mobile .cms-cph-row {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  height: auto;
  margin-top: 4px;
  padding: 10px 8px;
  border-top: 0;
  border-radius: 8px;
}

/* the time on the left of the 2 team lines */
app-progress-spinner .cms-cph.mobile .cms-cph-info {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-auto-rows: 13px;
  gap: 8px 10px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-time {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 20px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-team {
  grid-column: 2;
  width: 130px;
  height: 13px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-team:last-child {
  width: 110px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-odds {
  gap: 4px;
}

app-progress-spinner .cms-cph.mobile .cms-cph-odd {
  flex: 1 1 0;
  width: auto;
  height: 32px;
}

/* ---- match page on mobile: the bars above the markets ---- */
@media only screen and (max-width: 769px) {
  /* market search (36px) and market group tabs (46px): rendered only with the markets, above the placeholder view,
     which moved everything down by 82px; their space and look are kept while the view is shown */
  :is(.live-match-page, .sports-match-page):has(app-sports-match-markets > app-progress-spinner .cms-mph) :is(app-block.market-search-wrapper, app-block.markets-wrap) {
    --mbar-fill: rgba(28, 32, 38, 0.08);
    --mbar-selected: rgba(28, 32, 38, 0.16);
    --mbar-search-bg: #ecedf1;
    --mbar-tabs-bg: #fff;
  }

  .live-match-page:has(app-sports-match-markets > app-progress-spinner .cms-mph) :is(app-block.market-search-wrapper, app-block.markets-wrap) {
    --mbar-fill: rgba(255, 255, 255, 0.08);
    --mbar-selected: #333;
    --mbar-search-bg: transparent;
    --mbar-tabs-bg: transparent;
  }

  /* the search input */
  :is(.live-match-page, .sports-match-page):has(app-sports-match-markets > app-progress-spinner .cms-mph) app-block.market-search-wrapper {
    display: block;
    min-height: 36px;
    background:
      linear-gradient(var(--mbar-fill), var(--mbar-fill)) 4px 4px / calc(100% - 8px) 28px no-repeat,
      var(--mbar-search-bg);
  }

  /* tabs of 70x27 (the first one selected) with their labels, the expand / collapse all button on the right */
  :is(.live-match-page, .sports-match-page):has(app-sports-match-markets > app-progress-spinner .cms-mph) app-block.markets-wrap {
    display: block;
    min-height: 46px;
    background:
      linear-gradient(var(--mbar-fill), var(--mbar-fill)) 36px 18px / 30px 10px no-repeat,
      linear-gradient(var(--mbar-fill), var(--mbar-fill)) 108px 18px / 30px 10px no-repeat,
      linear-gradient(var(--mbar-fill), var(--mbar-fill)) 180px 18px / 30px 10px no-repeat,
      linear-gradient(var(--mbar-selected), var(--mbar-selected)) 16px 10px / 70px 27px no-repeat,
      linear-gradient(var(--mbar-fill), var(--mbar-fill)) right 8px top 5px / 42px 36px no-repeat,
      var(--mbar-tabs-bg);
  }

  /* the tracker bar ("Match Tracker" live, "Match Info" pre-match, 42px) comes 1-2s after the markets, only for
     the matches with a tracker: its space (icon + title centered) is kept until it comes, at most 5s */
  :is(.live-match-page, .sports-match-page) app-live-match-tracker:not(:has(app-tracker-streamer-toolbar)) {
    --mtrk-fill: rgba(28, 32, 38, 0.08);
    background-image:
      radial-gradient(circle, var(--mtrk-fill) 8.5px, transparent 9px),
      linear-gradient(var(--mtrk-fill), var(--mtrk-fill));
    background-position: calc(50% - 50px) center, calc(50% + 12px) center;
    background-repeat: no-repeat;
    animation: mph-tracker-reserve 5s step-end forwards;
  }

  .live-match-page app-live-match-tracker:not(:has(app-tracker-streamer-toolbar)) {
    --mtrk-fill: rgba(255, 255, 255, 0.08);
  }
}

/* ---- footer: while the page content loads (spinners / placeholder views, content placeholders, coupon lists
   waiting for their content) the footer is kept a screen lower by a 100vh top border in the color of the content,
   so content that is short for a moment doesn't show it (dark flash on the white pages, footer pushed down on the
   match pages); it comes back 0.6s after the load (transitional frames, e.g. an empty coupon for one frame) ---- */
.site app-block.content app-block.footer {
  border-top: 0 solid var(--footer-hold-color, transparent);
  background-clip: padding-box;
  transition: border-top-width 0s 0.6s;
}

.site:has(app-sports-match-markets > app-progress-spinner, :is(app-sports-coupon-default, app-sports-coupon-selection, app-light-coupon-init) app-progress-spinner, app-coupon-content-placeholder, app-events-list.content-pending) app-block.content app-block.footer {
  border-top-width: 100vh;
  transition: none;
}

/* on mobile the blocks are created one by one (WidgetHost yields with setTimeout(0)), so the footer (last block of
   the content) comes before the inner blocks of the page (match markets, coupons) and showed under the header for
   a moment: on the pages with coupons / markets it is also kept lower for its first 1.5s */
.site:is(.home-page, .live-page, .live-match-page, .sports-match-page, .sports-page, .sports-today, .sports-highlights, .antepost, .live-calendar-page, .live-upcoming) app-block.content app-block.footer {
  animation: footer-hold-new 1.5s step-end;
}

@keyframes footer-hold-new {
  from {
    border-top-width: 100vh;
  }
  to {
    border-top-width: 0;
  }
}

/* white content (pre-match markets, white coupons): the space in the color of the white lists */
.site:is(.sports-match-page, :has(app-sports-coupon.coupon-light, app-sports-coupon-selection)) app-block.content app-block.footer {
  --footer-hold-color: #ecedf1;
}

@keyframes mph-tracker-reserve {
  from {
    min-height: 42px;
    background-size: 18px 18px, 90px 12px;
  }
  to {
    min-height: 0;
    background-size: 0 0, 0 0;
  }
}

@keyframes coupon-placeholder-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  app-progress-spinner .cms-mph,
  app-progress-spinner :is(.cms-cph-title, .cms-cph-time, .cms-cph-team, .cms-cph-odd) {
    animation: none;
  }
}

/* the theme (responsive.css) shows only the first market column on desktop up to 1235px */
@media only screen and (max-width: 1235px) {
  .desktop app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-odd-extra,
  .desktop app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .ph-heading-extra {
    display: none !important;
  }

  /* the 1X2 alone shares the space from ~47% of the coupon */
  .home-live-block app-coupon-content-placeholder .coupon-placeholder:not(.mobile) {
    --cph-info-w: 47.3%;
  }

  :is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) {
    --cph-info-w: 45.5%;
    --cph-odds-col: minmax(0, 1fr);
  }

  :is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) :is(.ph-odd, .ph-heading) {
    flex: 1 1 0;
    width: auto;
  }

  :is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-odds {
    background: linear-gradient(#ecedf1, #ecedf1) right 0 top 0 / 1px 100% no-repeat;
  }

  :is(.home-highlights-block, .home-livebooked-block, .sports-coupon).coupon-light app-coupon-content-placeholder .coupon-placeholder:not(.mobile) .coupon-placeholder-headings {
    background: linear-gradient(var(--coupon-placeholder-color), var(--coupon-placeholder-color)) center 14px / 76px 12px no-repeat;
  }
}

@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;
  }
}


/* Match page: no loader flash */

/* the loader (spinner, or the /progress-spinner-match placeholder view) shows only when the markets take more
   than a moment: a fast load flashed it for ~200-300ms; its space is kept meanwhile, so nothing below moves */
app-sports-match-markets > app-progress-spinner.loading-spinner {
  animation: smm-fade-in 0.2s ease-out 0.4s both;
}

/* the markets and the market group tabs show in the frame they are rendered, together with the match header:
   no fade, a fade starts only once the main thread is free, so on a busy load they stayed invisible (opacity 0)
   up to ~2s after the header */

@keyframes smm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  app-sports-match-markets > app-progress-spinner.loading-spinner {
    animation: none;
  }
}