/*.bm-spinner > div:first-child > div {
    display: inline-block; /* Maintains the spinner's inline display */
    border: 2px solid rgba(255, 255, 255, .3); /* Makes border white with some transparency */
    width: 40px; /* Doubles the spinner's size */
    height: 40px; /* Matches width to maintain circular shape */
    border-radius: 50%; /* Ensures the spinner remains circular */
    border-top-color: #fff; /* Sets the top border to solid white */
    animation: spin 0.5s linear infinite; /* Speeds up the animation */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.match-loading {
  padding: 5px;
}

.match-loading .placeholder {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px; 
  background-color: #1D1D1D; 
}

.match-loading .tabs-container {
  display: flex;
  justify-content: start; 
  gap: 8px; 
}

.match-loading .tab-placeholder {
  width: 80px; 
  height: 35px; 
  background-color: #2D2D2D; 
  animation: shimmer 2s infinite linear;
}

.match-loading .animated-background {
  height: 35px; 
  background-color: #2D2D2D; 
  animation: shimmer 2s infinite linear;
  width: 100%; 
}

@keyframes shimmer {
  0% {
    background: #2D2D2D;
  }
  50% {
    background: linear-gradient(90deg, #2D2D2D 25%, #3D3D3D 50%, #2D2D2D 75%);
  }
  100% {
    background: #2D2D2D;
  }
}

.coupon-loading {
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  /* background-color: #1D1D1D; */
}

.coupon-loading .tabs-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px; 
}

.coupon-loading .left-tabs {
  display: flex;
  gap: 8px; 
}

.coupon-loading .tab-placeholder {
  background-color: #2D2D2D;
  height: 25px;
  animation: loading 1s infinite;
}

.coupon-loading .tab-placeholder.small {
  width: 40px;
}

.coupon-loading .tab-placeholder.extra-small {
  width: 20px;
  height: 25px; 
}

.coupon-loading .right-tabs {
  display: flex;
  gap: 8px;
}

.coupon-loading .main-row + .main-row {
  margin-top: 10px; 
}

.coupon-loading .animated-background {
  background-color: #2D2D2D;
  height: 35px;
  width: 100%;
}

.coupon-loading .animated-background.small {
  height: 25px;
  margin-top: 4px;
}

.coupon-loading .columns-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@keyframes loading {
  0%{
    left: -45%;
  }
  100%{
    left: 100%;
  }
}

.coupon-loading .animated-background {
  animation: loading 1s infinite;
}
.coupon-loading .placeholder-sports-header {
  height:48px;
  margin-bottom:10px;
  align-items:center;
}
.placeholder-icon {
  width:30px;
  height:30px;
  border-radius:50%;
  background-color:var(--c-background-white-10);
  margin-right:8px;
}
.placeholder-sports-header .placeholder-text {
  width:30%;
  margin-right:auto;
}
.placeholder-text {
  background-color:var(--c-background-white-10);
  
  border-radius:var(--r-5);
  width:100%;
}
.animated-gradient {
  background-image:linear-gradient(45deg, transparent 30%, var(--c-background-white-50) 50%, transparent 70%);
  background-size: 300%;
   background-position-x: 100%;
  animation: shimmer 1s infinite linear;
}
@keyframes shimmer {
   to {
      background-position-x: 0%
   }
}
.placeholder-text.large {
  height:23px;
  
}
.placeholder-text.small {
  height:14px;
}
.placeholder-market {
  display:flex;
  justify-content:center;
  height:30px;
  
}
.placeholder-market .dropdown-placeholder {
  height:100%;
   width:calc(100% - var(--c-market-gutter) * 2);
   background-color:var(--c-background-white-10);
  border-radius:var(--r-5)
}
.placeholder-market.opt-3 {
  width: calc((var(--c-odd-width) * 3) + (var(--c-odd-gutter) * 2) + var(--c-market-gutter));
}
.placeholder-coupon-container {
  padding:10px;
  border-radius:var(--r-10);
  background-color:var(--c-background-white-10);
  background-color:var(--c-brand-color)
}
.placeholder-tournament-heading {
  height:31px;
  margin-bottom:2px;
  background-color:var(--c-background-white-10);
  border-radius:var(--r-5)
}
.placeholder-coupon {
  min-height:68px;
 align-items:center;
  background-color:var(--c-background-white-10);
  border-radius:var(--r-5);
  padding: 0px 10px;
  display:flex;
  flex-direction:row;
}
.placeholder-teams {
  flex:1;
  justify-content:center;
}
.placeholder-teams .placeholder-text {
  max-width:30%;
}
.placeholder-teams .placeholder-text:first-child {
  margin-bottom:8px;
  max-width:25%;
}
.placeholder-coupon:not(:last-child) {
   margin-bottom:2px;
}
.placeholder-odd {
  width: var(--c-odd-width);
  min-height:48px;
   background-color:var(--c-background-white-10);
  border-radius:var(--r-10)
}
.placeholder-odd:not(:last-child) {
  margin-right: var(--c-odd-gutter);
}
.placeholder-market-wrapper {
  align-items:center;
}
.placeholder-market-wrapper .placeholder-market {
  height:unset;
  justify-content: flex-end;
}
.placeholder-links {
  width:80px;
  height:36px;
    background-color:var(--c-background-white-10);
  border-radius:var(--r-10);
  margin-right:20px;
}
.medium  .placeholder-market:last-child {
  display:none;
}
.small .placeholder-market:not(:last-child) {
  display:none;
}
.small .placeholder-coupon{
  flex-direction:column;
  padding:10px;
  margin-bottom:6px;
}
.small .placeholder-tournament-heading {
  margin-bottom:6px;
}
.small .placeholder-teams {
  width:100%;
  margin: 10px 0px;
}
.small .placeholder-links {
  width:100%;
  height:20px;
  margin:unset;
  margin-bottom:10px;
}
.small .placeholder-market-wrapper {
  width:100%;
  margin-top:8px;
}
.small .placeholder-market-wrapper .placeholder-market {
  width:100%;
}
.small .placeholder-market-wrapper .placeholder-market .placeholder-odd{
  width:unset;
  flex:1;
  height:36px;
  min-height:unset;
}
.placeholder-match-markets {
  padding: 15px 12px;
    background-color: var(--c-brand-color);
    border-radius: var(--r-10);
}
.placeholder-match-market {
  background-color:var(--c-background-white-10);
  border-radius:var(--r-10);
 
}
.placeholder-match-header {
   display: flex
;
    min-height: 38px;
    padding: 16px 23px;
}
.placeholder-match-market:not(:last-child) {
  margin-bottom:15px;
}
.placeholder-match-markets-wrapper {
      padding: 0px 23px;
    padding-bottom: 16px;
}
.placeholder-match-odd {
  min-width: 52px;
    justify-content: center;
    margin: 4px;
    flex: 1;
    min-height: 36px;
  background-color:var(--c-background-white-10);
  border-radius:var(--r-10);
}
.coupon-carousel .placeholder-sports-header {
  display:none;
}
.coupon-carousel .placeholder-tournament-heading {
  display:none;
}
.coupon-carousel .placeholder-coupon-container {
  flex-direction:row;
  background-color:transparent;
}
.coupon-carousel .placeholder-coupon {
  flex-direction:column;
  align-items:flex-start;
   width: 395px;
    height: 150px;
  padding: 10px;
   margin:0px 7px;
   border-radius: var(--r-10);
   background-image: var(--bg-match-image),var(--c-linear-gradient-2);
}
.coupon-carousel .placeholder-coupon .placeholder-market:not(:last-child) {
  display:none;
}
.coupon-carousel .placeholder-coupon .placeholder-teams {
  flex:unset;
  width:100%;
  margin-top:10px;
}
.coupon-carousel .placeholder-coupon .placeholder-links {
  height:14px;
  margin-bottom:8px;
}
.coupon-carousel .placeholder-coupon .placeholder-market-wrapper {
  width:100%;
  margin-top:auto;
  
}
#root .coupon-carousel .placeholder-coupon .placeholder-market {
  width:100%;
}
#root .coupon-carousel .placeholder-coupon .placeholder-market .placeholder-odd {
  flex:unset;
  width:100%!important;
  max-width:unset;
  height:36px;
  border-radius:0px;
  min-height:36px;
}
#root .coupon-carousel .placeholder-coupon .placeholder-market .placeholder-odd:first-child {
  border-top-left-radius:var(--r-10);
  border-bottom-left-radius:var(--r-10);
}
  #root .coupon-carousel .placeholder-coupon .placeholder-market .placeholder-odd:last-child {
  border-top-right-radius:var(--r-10);
  border-bottom-right-radius:var(--r-10);
}
.bet-suggestions-placeholder {
  gap:10px;
  width:100%;
  justify-content:flex-start
}
.bet-suggestion-placeholder {
  color: var(--c-text-light-e);
    background-color: var(--c-background-white-10);
    border: 1px solid var(--c-background-white-30);
    width: 325px;
    min-width: 325px;
  padding:10px;
  border-radius: var(--r-10);
  min-height:295px;
}
.bet-suggestion-placeholder .bet-suggestion-title {
  margin:20px 0px
}
.bet-suggestion-placeholder.combo .bet-suggestion-title {
  margin:10px 0px;
}
.bet-suggestion-placeholder .bet-suggestion-options {
  gap:5px;
  margin-left:20px
}
.bet-suggestion-placeholder.combo .bet-suggestion-options {
  margin-left:0px;
}
.bet-suggestion-placeholder:not(.multiple) .bet-suggestion-options .placeholder-text {
  width:80%;
}
.bet-suggestion-placeholder .bet-suggestion-button {
  min-height:36px;
  border-radius:var(--r-10);
  background-color: var(--c-background-white-10);
  margin-top:auto
}
.bet-suggestion-placeholder.multiple .bet-suggestion-options {
  margin-left:0;
  gap:15px;
}
.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option {
  gap:5px;
}
.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option .text-group:first-child .placeholder-text {
  width:50%
}
.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option:nth-child(2) .text-group:first-child .placeholder-text {
  width:70%
}
.bet-suggestion-placeholder.combo {
  min-height:148px;
} */




/* =====================================================================
   in2bet - placeholders.css

   Coupon loader : CMS view /progress-spinner-coupon (block .coupon-loading-top)
   Match loader  : CMS view /progress-spinner-match  (block .match-loading)

   The CMS html has 4 match rows (3 market blocks on the match page); the
   other rows are drawn as box-shadow copies of the last one (same shapes,
   same columns), and the container is clipped to the number of rows below.
   The layout follows the width of the coupon (container queries), with the
   same breakpoints as the coupons: <= 650px cards, <= 1000px 2 markets.
   ===================================================================== */

/* ---------- spinner ---------- */

.bm-spinner > div:first-child > div {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, .3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- shared pieces (also used by the bet suggestions placeholder) ---------- */

.placeholder-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--c-background-white-10);
  margin-right: 8px;
}

.placeholder-text {
  background-color: var(--c-background-white-10);
  border-radius: var(--r-5);
  width: 100%;
}

.placeholder-text.large {
  height: 23px;
}

.placeholder-text.small {
  height: 14px;
}

.animated-gradient {
  background-image: linear-gradient(45deg, transparent 30%, var(--c-background-white-50) 50%, transparent 70%);
  background-size: 300%;
  background-position-x: 100%;
  animation: shimmer 1s infinite linear;
}

@keyframes shimmer {
  to {
    background-position-x: 0%;
  }
}

@keyframes ph-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* =====================================================================
   COUPON LOADER
   ===================================================================== */

.coupon-loading-top {
  display: block;
  width: 100%;
  container-type: inline-size;
}

.coupon-loading {
  --ph: var(--c-background-white-10, rgba(255, 255, 255, .1));
  --ph-market: calc((var(--c-odd-width, 76px) * 3) + (var(--c-odd-gutter, 4px) * 2) + var(--c-market-gutter, .5vw));
  --ph-rows: 10;          /* rows drawn: 4 in the html + copies of the last one */
  --ph-step: 70px;        /* row height + gap */
  --ph-dx: 0px;           /* direction of the copies */
  --ph-dy: var(--ph-step);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  animation: ph-pulse 1.6s ease-in-out infinite;
}

.coupon-loading .row,
.coupon-loading .column {
  margin: 0;
}

/* sports filter pills (inline sports filter: 73px + 10px) */
.coupon-loading::before {
  content: '';
  display: block;
  flex: none;
  width: 93px;
  height: 32px;
  margin: 20px 0 31px;
  border-radius: 45px;
  color: var(--ph);
  background-color: currentColor;
  box-shadow:
    97px 0 0 currentColor, 194px 0 0 currentColor, 291px 0 0 currentColor, 388px 0 0 currentColor,
    485px 0 0 currentColor, 582px 0 0 currentColor, 679px 0 0 currentColor, 776px 0 0 currentColor,
    873px 0 0 currentColor, 970px 0 0 currentColor, 1067px 0 0 currentColor, 1164px 0 0 currentColor,
    1261px 0 0 currentColor, 1358px 0 0 currentColor, 1455px 0 0 currentColor, 1552px 0 0 currentColor,
    1649px 0 0 currentColor, 1746px 0 0 currentColor, 1843px 0 0 currentColor, 1940px 0 0 currentColor;
}

/* "Show all" link */
.coupon-loading::after {
  content: '';
  display: block;
  flex: none;
  width: 80px;
  height: 12px;
  margin: 20px auto 18px;
  border-radius: var(--r-5, 5px);
  background-color: var(--ph);
}

/* ---------- header: title + market dropdowns (48px + 10px) ---------- */

.coupon-loading .placeholder-sports-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  height: 48px;
  margin: 0 0 10px;
  padding: 0 61px 0 0;
  box-sizing: border-box;
}

.coupon-loading .placeholder-sports-header .placeholder-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
  background-color: var(--ph);
}

.coupon-loading .placeholder-sports-header .placeholder-text {
  flex: none;
  width: 108px;
  height: 16px;
  margin: 0 auto 0 0;
  background-color: var(--ph);
}

.coupon-loading .placeholder-sports-header .placeholder-market {
  display: block;
  flex: none;
  width: var(--ph-market);
  height: 30px;
}

.coupon-loading .placeholder-sports-header .dropdown-placeholder {
  width: 236px;
  max-width: 100%;
  height: 30px;
  margin: 0 0 0 -4px;
  border-radius: var(--r-5, 5px);
  background-color: var(--ph);
}

/* time range / group by buttons */
.coupon-loading .placeholder-sports-header::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-5, 5px);
  background-color: var(--ph);
  box-shadow: -35px 0 0 var(--ph);
}

/* ---------- rows ---------- */

.coupon-loading .placeholder-coupon-container {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 0 0 calc((var(--ph-rows) - 4) * var(--ph-step));
  border-radius: 0;
  background: none;
  overflow: hidden;
}

.coupon-loading .placeholder-tournament-heading {
  display: none;
}

.coupon-loading .placeholder-coupon {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  height: 68px;
  min-height: 0;
  margin: 0 0 2px;
  padding: 0 61px 0 0;
  box-sizing: border-box;
  border-radius: var(--r-5, 5px);
  color: var(--ph);
  background-color: currentColor;
}

.coupon-loading .placeholder-coupon > *,
.coupon-loading .placeholder-coupon::before,
.coupon-loading .placeholder-coupon::after,
.coupon-loading .placeholder-teams::after,
.coupon-loading .placeholder-market-wrapper::before,
.coupon-loading .placeholder-odd {
  color: var(--ph);
}

.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child {
  --ph-repeat:
    calc(var(--ph-dx) * 1) calc(var(--ph-dy) * 1) 0 currentColor,
    calc(var(--ph-dx) * 2) calc(var(--ph-dy) * 2) 0 currentColor,
    calc(var(--ph-dx) * 3) calc(var(--ph-dy) * 3) 0 currentColor,
    calc(var(--ph-dx) * 4) calc(var(--ph-dy) * 4) 0 currentColor,
    calc(var(--ph-dx) * 5) calc(var(--ph-dy) * 5) 0 currentColor,
    calc(var(--ph-dx) * 6) calc(var(--ph-dy) * 6) 0 currentColor,
    calc(var(--ph-dx) * 7) calc(var(--ph-dy) * 7) 0 currentColor,
    calc(var(--ph-dx) * 8) calc(var(--ph-dy) * 8) 0 currentColor,
    calc(var(--ph-dx) * 9) calc(var(--ph-dy) * 9) 0 currentColor,
    calc(var(--ph-dx) * 10) calc(var(--ph-dy) * 10) 0 currentColor,
    calc(var(--ph-dx) * 11) calc(var(--ph-dy) * 11) 0 currentColor,
    calc(var(--ph-dx) * 12) calc(var(--ph-dy) * 12) 0 currentColor,
    calc(var(--ph-dx) * 13) calc(var(--ph-dy) * 13) 0 currentColor,
    calc(var(--ph-dx) * 14) calc(var(--ph-dy) * 14) 0 currentColor,
    calc(var(--ph-dx) * 15) calc(var(--ph-dy) * 15) 0 currentColor,
    calc(var(--ph-dx) * 16) calc(var(--ph-dy) * 16) 0 currentColor,
    calc(var(--ph-dx) * 17) calc(var(--ph-dy) * 17) 0 currentColor,
    calc(var(--ph-dx) * 18) calc(var(--ph-dy) * 18) 0 currentColor,
    calc(var(--ph-dx) * 19) calc(var(--ph-dy) * 19) 0 currentColor,
    calc(var(--ph-dx) * 20) calc(var(--ph-dy) * 20) 0 currentColor;
}

.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child::before,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child::after,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child .placeholder-links,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child .placeholder-text,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child .placeholder-teams::after,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child .placeholder-market-wrapper::before,
.coupon-loading .placeholder-coupon-container > .placeholder-coupon:last-child .placeholder-odd {
  box-shadow: var(--ph-repeat);
}

/* live minute / start time */
.coupon-loading .placeholder-links {
  flex: none;
  width: 30px;
  height: 12px;
  margin: 0 14px 0 13px;
  border-radius: 3px;
  background-color: currentColor;
}

/* teams + league */
.coupon-loading .placeholder-teams {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 10px 0 0;
}

.coupon-loading .placeholder-teams .placeholder-text,
.coupon-loading .placeholder-teams .placeholder-text:first-child {
  flex: none;
  width: 110px;
  max-width: 100%;
  height: 12px;
  margin: 0 0 8px;
  border-radius: 3px;
  background-color: currentColor;
}

.coupon-loading .placeholder-teams .placeholder-text + .placeholder-text {
  width: 88px;
}

.coupon-loading .placeholder-teams::after {
  content: '';
  flex: none;
  width: 130px;
  max-width: 100%;
  height: 9px;
  border-radius: 3px;
  background-color: currentColor;
}

/* markets */
.coupon-loading .placeholder-market-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  flex: none;
  width: auto;
  margin: 0;
}

.coupon-loading .placeholder-market-wrapper .placeholder-market {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: none;
  width: var(--ph-market);
  height: 39px;
  padding: 0 0 0 calc(var(--c-market-gutter, .5vw) / 2);
  box-sizing: border-box;
}

.coupon-loading .placeholder-odd {
  flex: none;
  width: var(--c-odd-width, 76px);
  height: 39px;
  min-height: 0;
  margin: 0 var(--c-odd-gutter, 4px) 0 0;
  border-radius: var(--r-10, 10px);
  background-color: currentColor;
}

/* score (live coupons) */
.coupon-loading .placeholder-market-wrapper::before {
  content: none;
  position: absolute;
  top: 17px;
  left: -18px;
  width: 8px;
  height: 34px;
  border-radius: 3px;
  background-color: currentColor;
}

.live .coupon-loading .placeholder-market-wrapper::before {
  content: '';
}

/* favourite / statistics icons */
.coupon-loading .placeholder-coupon::before,
.coupon-loading .placeholder-coupon::after {
  content: '';
  position: absolute;
  right: 7px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: currentColor;
}

.coupon-loading .placeholder-coupon::after {
  top: 16px;
}

.coupon-loading .placeholder-coupon::before {
  top: 38px;
}

/* ---------- coupon variants ---------- */

/* /live: tournament headers */
.show-tournament-headers .coupon-loading {
  --ph-rows: 24;
}

.show-tournament-headers .coupon-loading .placeholder-tournament-heading {
  display: block;
  flex: none;
  height: 31px;
  margin: 0 0 2px;
  border-radius: var(--r-5, 5px);
  background:
    radial-gradient(circle, var(--ph) 9.5px, transparent 10px) 10px 50% / 20px 20px no-repeat,
    linear-gradient(var(--ph), var(--ph)) 38px 50% / 150px 12px no-repeat;
}

/* sports pages: markets aligned right, icons before the markets */
.top-match .coupon-loading,
.show-sports-header:not(.has-view-more):not(.outrights-coupon):not(.show-tournament-headers) .coupon-loading {
  --ph-rows: 18;
}

.top-match .coupon-loading .placeholder-coupon {
  padding-right: 7px;
}

.top-match .coupon-loading .placeholder-sports-header .placeholder-icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}

.top-match .coupon-loading .placeholder-coupon::before,
.top-match .coupon-loading .placeholder-coupon::after {
  right: calc(7px + var(--ph-market) * 3);
}

/* ---------- 2 markets (coupon <= 1000px) ---------- */

@container (max-width: 1000px) {
  .coupon-loading .placeholder-sports-header .placeholder-market:last-child,
  .coupon-loading .placeholder-market-wrapper .placeholder-market:last-child {
    display: none;
  }

  .top-match .coupon-loading .placeholder-coupon::before,
  .top-match .coupon-loading .placeholder-coupon::after {
    right: calc(7px + var(--ph-market) * 2);
  }
}

/* ---------- cards (coupon <= 650px: small coupons, mobile) ---------- */

@container (max-width: 650px) {
  .coupon-loading {
    --ph-rows: 11;
    --ph-step: 142px;
  }

  .coupon-loading::before {
    margin: 23px 0 18px;
  }

  /* header: title, then one dropdown over the whole width */
  .coupon-loading .placeholder-sports-header {
    height: 48px;
    margin: 29px 0 0;
    padding: 0 70px 0 0;
  }

  .coupon-loading .placeholder-sports-header::before {
    content: '';
    position: absolute;
    top: -19px;
    left: 0;
    width: 108px;
    height: 16px;
    border-radius: 3px;
    background-color: var(--ph);
  }

  .coupon-loading .placeholder-sports-header .placeholder-icon,
  .coupon-loading .placeholder-sports-header .placeholder-text,
  .coupon-loading .placeholder-sports-header .placeholder-market ~ .placeholder-market {
    display: none;
  }

  .coupon-loading .placeholder-sports-header .placeholder-market {
    flex: 1;
    width: auto;
  }

  .coupon-loading .placeholder-sports-header .dropdown-placeholder {
    width: 100%;
    margin: 0;
  }

  .coupon-loading .placeholder-tournament-heading {
    display: block;
    flex: none;
    height: 31px;
    margin: 8px 0 6px;
    border-radius: var(--r-5, 5px);
    background:
      radial-gradient(circle, var(--ph) 9.5px, transparent 10px) 10px 50% / 20px 20px no-repeat,
      linear-gradient(var(--ph), var(--ph)) 38px 50% / 140px 12px no-repeat,
      radial-gradient(circle, var(--ph) 9.5px, transparent 10px) right 10px top 50% / 20px 20px no-repeat;
  }

  .coupon-loading .placeholder-coupon {
    display: block;
    height: 136px;
    margin: 0 0 6px;
    padding: 0;
    border-radius: var(--r-10, 10px);
  }

  .coupon-loading .placeholder-links {
    position: absolute;
    top: 12px;
    left: 11px;
    width: 40px;
    margin: 0;
  }

  .coupon-loading .placeholder-teams {
    position: absolute;
    top: 37px;
    left: 11px;
    right: 40px;
    padding: 0;
  }

  .coupon-loading .placeholder-teams .placeholder-text,
  .coupon-loading .placeholder-teams .placeholder-text:first-child {
    width: 120px;
  }

  .coupon-loading .placeholder-teams .placeholder-text + .placeholder-text {
    width: 96px;
  }

  .coupon-loading .placeholder-teams::after {
    content: none;
  }

  .coupon-loading .placeholder-market-wrapper {
    position: absolute;
    top: 89px;
    left: 11px;
    right: 11px;
    height: 36px;
  }

  .coupon-loading .placeholder-market-wrapper .placeholder-market {
    display: none;
  }

  .coupon-loading .placeholder-market-wrapper .placeholder-market:first-child {
    display: flex;
    flex: 1;
    width: auto;
    height: 36px;
    padding: 0;
  }

  .coupon-loading .placeholder-odd {
    flex: 1;
    width: auto;
    height: 36px;
  }

  .coupon-loading .placeholder-odd:last-child {
    margin-right: 0;
  }

  .live .coupon-loading .placeholder-market-wrapper::before {
    top: -53px;
    left: auto;
    right: 0;
    width: 9px;
  }

  .coupon-loading .placeholder-coupon::before,
  .coupon-loading .placeholder-coupon::after,
  .top-match .coupon-loading .placeholder-coupon::before,
  .top-match .coupon-loading .placeholder-coupon::after {
    top: 11px;
    right: 11px;
  }

  .coupon-loading .placeholder-coupon::before,
  .top-match .coupon-loading .placeholder-coupon::before {
    right: 30px;
  }
}

/* mobile: title row (39px) + tournament header instead of the dropdown header */
@container (max-width: 650px) {
  .mobile .coupon-loading .placeholder-sports-header {
    height: 39px;
    margin: 0;
    padding: 0;
  }

  .mobile .coupon-loading .placeholder-sports-header .placeholder-text {
    display: block;
    width: 108px;
    height: 16px;
  }

  .mobile .coupon-loading .placeholder-sports-header .placeholder-market {
    display: none;
  }

  .mobile .coupon-loading .placeholder-sports-header::after {
    top: 4px;
  }

  .mobile .coupon-loading .placeholder-sports-header::before {
    content: none;
  }

  .mobile .coupon-loading .placeholder-tournament-heading {
    margin: 0 0 6px;
  }
}

/* ---------- carousel (cards side by side) ---------- */

/* the carousel takes the width of its content: no container query here */
.coupon-carousel .coupon-loading-top {
  container-type: normal;
  width: max-content;
}

.coupon-carousel .coupon-loading {
  --ph-dx: 359px;
  --ph-dy: 0px;
  width: max-content;
  padding: 0;
}

.coupon-carousel .coupon-loading::before,
.coupon-carousel .coupon-loading::after,
.coupon-carousel .coupon-loading .placeholder-sports-header,
.coupon-carousel .coupon-loading .placeholder-tournament-heading {
  display: none;
}

.coupon-carousel .coupon-loading .placeholder-coupon-container {
  flex-direction: row;
  padding: 0 calc(3 * var(--ph-dx)) 0 0;   /* 4 cards in the html + 3 copies */
  background: none;
}

.coupon-carousel .coupon-loading .placeholder-coupon {
  display: block;
  flex: none;
  width: 345px;
  height: 262px;
  margin: 0 14px 0 0;
  padding: 0;
  border-radius: var(--r-10, 10px);
  background-image: none;
}

.coupon-carousel .coupon-loading .placeholder-coupon::before,
.coupon-carousel .coupon-loading .placeholder-coupon::after,
.coupon-carousel .coupon-loading .placeholder-teams::after,
.coupon-carousel .coupon-loading .placeholder-market-wrapper::before {
  content: none;
}

.coupon-carousel .coupon-loading .placeholder-links {
  position: absolute;
  top: 12px;
  left: 11px;
  width: 90px;
  height: 13px;
  margin: 0;
}

.coupon-carousel .coupon-loading .placeholder-teams {
  position: absolute;
  top: 166px;
  left: 11px;
  right: 11px;
  width: auto;
  margin: 0;
  padding: 0;
}

.coupon-carousel .coupon-loading .placeholder-teams .placeholder-text,
.coupon-carousel .coupon-loading .placeholder-teams .placeholder-text:first-child {
  width: 133px;
  height: 13px;
  margin: 0 0 7px;
}

.coupon-carousel .coupon-loading .placeholder-teams .placeholder-text + .placeholder-text {
  width: 90px;
}

.coupon-carousel .coupon-loading .placeholder-market-wrapper {
  position: absolute;
  top: 215px;
  left: 11px;
  right: 11px;
  width: auto;
  height: 36px;
  margin: 0;
}

.coupon-carousel .coupon-loading .placeholder-market-wrapper .placeholder-market {
  display: none;
}

.coupon-carousel .coupon-loading .placeholder-market-wrapper .placeholder-market:first-child {
  display: flex;
  flex: 1;
  width: auto;
  height: 36px;
  padding: 0;
}

.coupon-carousel .coupon-loading .placeholder-odd {
  flex: 1;
  width: auto;
  height: 36px;
  border-radius: 0;
}

.coupon-carousel .coupon-loading .placeholder-odd:first-child {
  border-radius: var(--r-10, 10px) 0 0 var(--r-10, 10px);
}

.coupon-carousel .coupon-loading .placeholder-odd:last-child {
  margin-right: 0;
  border-radius: 0 var(--r-10, 10px) var(--r-10, 10px) 0;
}

/* ---------- outrights ---------- */

.outrights-coupon .coupon-loading {
  --ph-rows: 6;
  --ph-step: 50px;
  padding: 0;
}

.outrights-coupon .coupon-loading::before,
.outrights-coupon .coupon-loading .placeholder-sports-header::after,
.outrights-coupon .coupon-loading .placeholder-sports-header .placeholder-market {
  display: none;
}

.outrights-coupon .coupon-loading .placeholder-sports-header {
  margin: 0 0 10px;
  padding: 0 0 0 10px;
}

.outrights-coupon .coupon-loading .placeholder-sports-header .placeholder-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
}

.outrights-coupon .coupon-loading .placeholder-sports-header .placeholder-text {
  display: block;
  width: 130px;
  height: 16px;
}

.outrights-coupon .coupon-loading .placeholder-tournament-heading {
  display: block;
  flex: none;
  height: 32px;
  margin: 0 0 10px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--ph) 9.5px, transparent 10px) 10px 50% / 20px 20px no-repeat,
    linear-gradient(var(--ph), var(--ph)) 38px 50% / 140px 12px no-repeat;
}

/* first row: the outright (title bar) */
.outrights-coupon .coupon-loading .placeholder-tournament-heading + .placeholder-coupon {
  display: block;
  height: 34px;
  margin: 0 0 10px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--c-background-white-30, rgba(255, 255, 255, .3));
  border-radius: var(--r-5, 5px);
  background:
    linear-gradient(var(--ph), var(--ph)) 11px 50% / 220px 12px no-repeat,
    radial-gradient(circle, var(--ph) 7.5px, transparent 8px) right 11px top 50% / 16px 16px no-repeat,
    var(--ph);
}

.outrights-coupon .coupon-loading .placeholder-tournament-heading + .placeholder-coupon > *,
.outrights-coupon .coupon-loading .placeholder-tournament-heading + .placeholder-coupon::before,
.outrights-coupon .coupon-loading .placeholder-tournament-heading + .placeholder-coupon::after {
  display: none;
}

/* next rows: competitors, 3 per row (name + odd) */
.outrights-coupon .coupon-loading .placeholder-coupon + .placeholder-coupon {
  display: block;
  height: 46px;
  margin: 0 0 4px;
  padding: 0;
  border-radius: 0;
  color: transparent;
  background: none;
}

.outrights-coupon .coupon-loading .placeholder-coupon + .placeholder-coupon::before,
.outrights-coupon .coupon-loading .placeholder-coupon + .placeholder-coupon::after,
.outrights-coupon .coupon-loading .placeholder-coupon + .placeholder-coupon .placeholder-links,
.outrights-coupon .coupon-loading .placeholder-coupon + .placeholder-coupon .placeholder-teams,
.outrights-coupon .coupon-loading .placeholder-market-wrapper::before {
  display: none;
}

.outrights-coupon .coupon-loading .placeholder-market-wrapper {
  position: absolute;
  inset: 0;
  gap: 4px;
  height: 46px;
}

.outrights-coupon .coupon-loading .placeholder-market-wrapper .placeholder-market,
.outrights-coupon .coupon-loading .placeholder-market-wrapper .placeholder-market:last-child {
  position: relative;
  display: block;
  flex: 1;
  width: auto;
  height: 46px;
  padding: 0;
  border-radius: var(--r-10, 10px);
  color: rgba(255, 255, 255, .05);
  background-color: currentColor;
}

.outrights-coupon .coupon-loading .placeholder-coupon:last-child .placeholder-market {
  box-shadow: var(--ph-repeat);
}

.outrights-coupon .coupon-loading .placeholder-odd {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 58px;
  height: 28px;
  margin: 0;
}

.outrights-coupon .coupon-loading .placeholder-odd:first-child {
  top: 17px;
  left: 9px;
  right: auto;
  width: 90px;
  height: 12px;
  border-radius: 3px;
}

.outrights-coupon .coupon-loading .placeholder-odd:nth-child(2) {
  display: none;
}

/* more categories (collapsed) */
.outrights-coupon .coupon-loading::after {
  content: '';
  display: block;
  flex: none;
  width: auto;
  height: 420px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  background:
    radial-gradient(circle at 20px 16px, var(--ph) 9.5px, transparent 10px) 0 0 / 100% 42px repeat-y,
    radial-gradient(circle at calc(100% - 18px) 16px, var(--ph) 7.5px, transparent 8px) 0 0 / 100% 42px repeat-y,
    linear-gradient(to bottom, transparent 10px, var(--ph) 10px 22px, transparent 22px) 38px 0 / 140px 42px repeat-y;
}

/* one competitor per row */
@container (max-width: 650px) {
  .outrights-coupon .coupon-loading {
    --ph-rows: 15;
    --ph-step: 50px;
    padding: 4px 0 0;
  }

  .outrights-coupon .coupon-loading .placeholder-sports-header {
    margin: 0 0 10px;
  }

  .outrights-coupon .coupon-loading .placeholder-market-wrapper {
    left: 2px;
    right: 2px;
  }

  .outrights-coupon .coupon-loading .placeholder-market-wrapper .placeholder-market + .placeholder-market {
    display: none;
  }

  .outrights-coupon .coupon-loading .placeholder-odd {
    right: 9px;
  }

  .outrights-coupon .coupon-loading::after {
    height: 210px;
  }
}

/* ---------- compact coupons (match page sidebar) ---------- */

.compact .coupon-loading {
  --ph-rows: 8;
  padding: 0;
}

.compact .coupon-loading::before,
.compact .coupon-loading::after,
.compact .coupon-loading .placeholder-sports-header .placeholder-market,
.compact .coupon-loading .placeholder-sports-header::after {
  display: none;
}

.compact .coupon-loading .placeholder-sports-header {
  height: 48px;
  margin: 0;
  padding: 0;
}

.compact .coupon-loading .placeholder-sports-header .placeholder-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
}

.compact .coupon-loading .placeholder-sports-header .placeholder-text {
  display: block;
  width: 110px;
  height: 14px;
}

.compact .coupon-loading .placeholder-tournament-heading {
  margin: 10px 0 6px;
}

/* =====================================================================
   MATCH PAGE LOADER (markets)
   ===================================================================== */

.match-loading {
  display: block;
  padding: 0;
}

.match-loading .placeholder-match-markets {
  --ph: var(--c-background-white-10, rgba(255, 255, 255, .1));
  --ph-step: 67px;   /* collapsed market: 52px + 15px */
  display: flex;
  flex-direction: column;
  padding: 0 0 calc(5 * var(--ph-step));
  border-radius: 0;
  background: none;
  overflow: hidden;
  animation: ph-pulse 1.6s ease-in-out infinite;
}

.match-loading .placeholder-match-market {
  display: flex;
  flex-direction: column;
  flex: none;
  margin: 0 0 15px;
  border-radius: var(--r-10, 10px);
  color: var(--ph);
  background-color: currentColor;
}

.match-loading .placeholder-match-market:not(:last-child) {
  margin-bottom: 15px;
}

.match-loading .placeholder-match-market * ,
.match-loading .placeholder-match-header::after {
  color: var(--ph);
}

.match-loading .placeholder-match-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  min-height: 0;
  padding: 0 23px;
  box-sizing: border-box;
}

.match-loading .placeholder-match-header .placeholder-text {
  width: 130px;
  height: 12px;
  border-radius: 3px;
  background-color: currentColor;
}

/* expand / collapse toggle */
.match-loading .placeholder-match-header::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 23px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: currentColor;
}

.match-loading .placeholder-match-markets-wrapper {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0 23px 16px;
}

.match-loading .placeholder-match-odd {
  flex: 1;
  min-width: 0;
  height: 36px;
  min-height: 0;
  margin: 0;
  border-radius: var(--r-10, 10px);
  background-color: currentColor;
}

/* desktop: only the first market is expanded */
.match-loading .placeholder-match-market:not(:first-child) .placeholder-match-markets-wrapper {
  display: none;
}

.match-loading .placeholder-match-market:last-child {
  --ph-repeat:
    0 calc(var(--ph-step) * 1) 0 currentColor, 0 calc(var(--ph-step) * 2) 0 currentColor,
    0 calc(var(--ph-step) * 3) 0 currentColor, 0 calc(var(--ph-step) * 4) 0 currentColor,
    0 calc(var(--ph-step) * 5) 0 currentColor, 0 calc(var(--ph-step) * 6) 0 currentColor,
    0 calc(var(--ph-step) * 7) 0 currentColor, 0 calc(var(--ph-step) * 8) 0 currentColor,
    0 calc(var(--ph-step) * 9) 0 currentColor, 0 calc(var(--ph-step) * 10) 0 currentColor;
}

.match-loading .placeholder-match-market:last-child,
.match-loading .placeholder-match-market:last-child .placeholder-text,
.match-loading .placeholder-match-market:last-child .placeholder-match-header::after,
.match-loading .placeholder-match-market:last-child .placeholder-match-odd {
  box-shadow: var(--ph-repeat);
}

/* mobile: every market is expanded */
.mobile .match-loading .placeholder-match-markets {
  --ph-step: 119px;  /* expanded market: 104px + 15px */
  padding-bottom: calc(8 * var(--ph-step));
}

.mobile .match-loading .placeholder-match-market:not(:first-child) .placeholder-match-markets-wrapper {
  display: flex;
}

/* =====================================================================
   BET SUGGESTIONS PLACEHOLDER (unchanged)
   ===================================================================== */

.bet-suggestions-placeholder {
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
}

.bet-suggestion-placeholder {
  color: var(--c-text-light-e);
  background-color: var(--c-background-white-10);
  border: 1px solid var(--c-background-white-30);
  width: 325px;
  min-width: 325px;
  padding: 10px;
  border-radius: var(--r-10);
  min-height: 295px;
}

.bet-suggestion-placeholder .bet-suggestion-title {
  margin: 20px 0px;
}

.bet-suggestion-placeholder.combo .bet-suggestion-title {
  margin: 10px 0px;
}

.bet-suggestion-placeholder .bet-suggestion-options {
  gap: 5px;
  margin-left: 20px;
}

.bet-suggestion-placeholder.combo .bet-suggestion-options {
  margin-left: 0px;
}

.bet-suggestion-placeholder:not(.multiple) .bet-suggestion-options .placeholder-text {
  width: 80%;
}

.bet-suggestion-placeholder .bet-suggestion-button {
  min-height: 36px;
  border-radius: var(--r-10);
  background-color: var(--c-background-white-10);
  margin-top: auto;
}

.bet-suggestion-placeholder.multiple .bet-suggestion-options {
  margin-left: 0;
  gap: 15px;
}

.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option {
  gap: 5px;
}

.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option .text-group:first-child .placeholder-text {
  width: 50%;
}

.bet-suggestion-placeholder.multiple .bet-suggestion-options .bet-suggestion-option:nth-child(2) .text-group:first-child .placeholder-text {
  width: 70%;
}

.bet-suggestion-placeholder.combo {
  min-height: 148px;
}