/* SCOUT90 - Today's Matches fixture strip (v2.1) */

/* ---- Wrapper: use the full Elementor column, no redundant cap, never clip ---- */
.s90tm-wrap{ width:100%; max-width:100%; margin:0 auto; padding:0; box-sizing:border-box; }

/* Root-cause fix: Elementor containers/widgets wrapping this module default to
   overflow:hidden, which clips the horizontal scroller + arrows. Scope an
   overflow:visible ONLY to the ancestors that actually contain our widget. */
.elementor-shortcode:has(.s90tm-wrap),
.elementor-widget-shortcode:has(.s90tm-wrap),
.elementor-widget-shortcode:has(.s90tm-wrap) .elementor-widget-container,
.e-con:has(.s90tm-wrap),
.e-con-inner:has(.s90tm-wrap){ overflow:visible !important; }

#todays-matches-section.s90tm{ display:block; width:100%; background:transparent; color:#fff; font-family:"Inter", system-ui, -apple-system, sans-serif; box-sizing:border-box; padding:6px 0 2px; }
#todays-matches-section.s90tm *, #todays-matches-section.s90tm *::before, #todays-matches-section.s90tm *::after{ box-sizing:border-box; }

.s90tm__head{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.s90tm__heading{ display:flex; align-items:center; gap:10px; }
.s90tm__icon{ color:#D72638; display:inline-flex; }
.s90tm__title{ margin:0; font-family:"Barlow Condensed","Inter",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; font-size:clamp(1.15rem,3.4vw,1.5rem); line-height:1; color:#fff; }
.s90tm__rule{ display:block; width:54px; height:3px; border-radius:2px; background:#D72638; }

.s90tm__viewport{ position:relative; }

/* ---- Scroll container: horizontal overflow, generous height for hover lift ---- */
.s90tm__strip{
  display:flex; flex-wrap:nowrap; align-items:stretch; gap:20px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:20px 4px 24px; margin:0;
  scroll-padding-left:4px;
}
.s90tm__strip::-webkit-scrollbar{ display:none; width:0; height:0; }
/* trailing spacer so the LAST card is always fully reachable / not clipped */
.s90tm__strip::after{ content:""; flex:0 0 8px; }

/* ---- Cards: consistent fixed width, no inner overflow ---- */
.s90tm__card{
  flex:0 0 320px; width:320px; min-width:320px; max-width:320px;
  scroll-snap-align:start;
  background:#1a1d26; border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  padding:14px 14px 12px; min-height:152px;
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  outline:none;
}
.s90tm__card:focus-visible{ border-color:#D72638; box-shadow:0 0 0 2px rgba(215,38,56,0.5); }

.s90tm__group{ align-self:flex-start; max-width:100%; font-size:0.7rem; font-weight:600; letter-spacing:0.03em; color:#cdd3dc; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); padding:3px 9px; border-radius:999px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.s90tm__teams{ display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
.s90tm__team{ display:flex; align-items:center; gap:9px; min-width:0; }
.s90tm__flag{ font-size:1.25rem; line-height:1; width:24px; text-align:center; flex:0 0 auto; }
.s90tm__crest{ width:24px; height:24px; flex:0 0 auto; object-fit:contain; border-radius:3px; background:rgba(255,255,255,0.04); }
.s90tm__tla{ width:24px; flex:0 0 auto; text-align:center; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:0.8rem; color:#cdd3dc; line-height:24px; }
.s90tm__name{ font-size:0.98rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.s90tm__vs{ font-family:"Barlow Condensed",sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; color:#7c8597; padding-left:33px; }
.s90tm__score{ font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:0.06em; color:#fff; padding-left:33px; line-height:1; }

.s90tm__foot{ display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.07); }
.s90tm__day{ font-size:0.72rem; color:#9aa3b2; white-space:nowrap; }
.s90tm__time{ font-size:0.82rem; font-weight:700; color:#fff; margin-right:auto; white-space:nowrap; }
.s90tm__status{ font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:4px 8px; border-radius:6px; white-space:nowrap; flex:0 0 auto; }
.s90tm__status.is-upcoming{ color:#cdd3dc; background:rgba(255,255,255,0.08); }
.s90tm__status.is-finished{ color:#9aa3b2; background:rgba(255,255,255,0.05); }
.s90tm__status.is-live{ color:#fff; background:#D72638; display:inline-flex; align-items:center; gap:5px; animation:s90tm-pulse 1.6s infinite; }
.s90tm__dot{ width:6px; height:6px; border-radius:50%; background:#fff; }
@keyframes s90tm-pulse{ 0%{ box-shadow:0 0 0 0 rgba(215,38,56,0.55); } 70%{ box-shadow:0 0 0 8px rgba(215,38,56,0); } 100%{ box-shadow:0 0 0 0 rgba(215,38,56,0); } }

@media (hover:hover) and (min-width:992px){
  .s90tm__card:hover{ transform:translateY(-3px); border-color:rgba(215,38,56,0.55); box-shadow:0 8px 20px rgba(0,0,0,0.45); }
}

.s90tm__arrow{ position:absolute; top:calc(50% + 8px); transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.14); background:rgba(12,12,12,0.9); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.s90tm__arrow:hover{ background:#D72638; border-color:#D72638; }
.s90tm__arrow--left{ left:0; }
.s90tm__arrow--right{ right:0; }
@media (min-width:992px){ .s90tm__arrow{ display:inline-flex; } }

.s90tm__card--skeleton{ justify-content:space-between; }
.s90tm__sk{ position:relative; overflow:hidden; background:rgba(255,255,255,0.06); border-radius:6px; }
.s90tm__sk--pill{ width:70px; height:18px; border-radius:999px; }
.s90tm__sk--row{ width:100%; height:20px; }
.s90tm__sk--foot{ width:60%; height:16px; }
.s90tm__sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); animation:s90tm-shimmer 1.3s infinite; }
@keyframes s90tm-shimmer{ 100%{ transform:translateX(100%); } }

.s90tm__empty{ text-align:center; color:#9aa3b2; font-size:0.95rem; padding:26px 10px; border:1px dashed rgba(255,255,255,0.12); border-radius:12px; background:#1a1d26; }

/* ---- Responsive ---- */
@media (max-width:991px){
  .s90tm__card{ flex-basis:310px; width:310px; min-width:310px; max-width:310px; }
}
@media (max-width:560px){
  .s90tm__card{ flex-basis:300px; width:300px; min-width:300px; max-width:300px; }
  .s90tm__strip{ gap:16px; padding:16px 2px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .s90tm__status.is-live, .s90tm__sk::after{ animation:none; }
  .s90tm__card{ transition:none; }
  .s90tm__strip{ scroll-behavior:auto; }
}