.allstars-livesports-page{
    --alsp-bg:#000;
    --alsp-card-bg:#000000; /* match the filter row's transparent-on-black so cards read as a consistent vertical strip */
    --alsp-border:#4D5358;
    --alsp-red:#C53322;
    --alsp-text:#FFFFFF;
    --alsp-muted:#9aa0a6;
    --alsp-radius:15px;
    --alsp-radius-chip:999px;

    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0;
    color:var(--alsp-text);
    font-family:'Montserrat',"Montserrat Fallback",'Helvetica Neue',Arial,sans-serif;
    box-sizing:border-box;
}
.allstars-livesports-page *,
.allstars-livesports-page *::before,
.allstars-livesports-page *::after{box-sizing:border-box;}

/* ===== Force the wrapping post-content widget to fill the column =====
   The Elementor widget that outputs this shortcode carries the
   `elementor-widget__width-initial` class. Inside the atomic flexbox page
   template (which centres its children) that lets the widget shrink to its
   content's width — collapsing the whole page into a narrow centre strip,
   worst on mobile (~the widest chip). Force the widget + its inner container
   to stretch to the full column width. */
.elementor-widget-theme-post-content:has(.allstars-livesports-page){
    width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
}
.elementor-widget-theme-post-content:has(.allstars-livesports-page) > .elementor-widget-container{
    width:100% !important;
    max-width:100% !important;
}

/* ===== Reclaim the column width on small screens =====
   The atomic page-template container (.extra-pages-template / e-0755d91) is
   generated with a flat `padding-inline:80px`. On a phone that's 160px of side
   padding — it crushes the cards / title / paragraph into a thin centre strip.
   Pull the side padding right in on phones + tablets so the content uses the
   available width; restore the roomy 80px gutter only on real desktops. Scoped
   with :has() so only the Live Sports page is affected. */
.extra-pages-template:has(.allstars-livesports-page){
    /* Force the atomic flexbox to fill its column AND stretch its children, and
       neutralise Elementor's boxed "content width" caps (these vars otherwise
       constrain the inner content to roughly half the column on tablet). */
    width:100% !important;
    max-width:100% !important;
    align-items:stretch !important;
    --width:100% !important;
    --content-width:100% !important;
    --container-max-width:100% !important;
    padding-inline:16px !important;
    /* The template puts a 60px flex gap between the page title and the content,
       which reads as a huge void under the title on every breakpoint. Tighten it. */
    gap:24px !important;
}

/* Page title (.H1-heading-style) is a fixed 5–6em — way bigger than the other
   extra-pages' titles and far too large on mobile. Make it fluid so it matches
   (and kill its own vertical margins so the title→subheading gap stays tight). */
.extra-pages-template:has(.allstars-livesports-page) .H1-heading-style{
    font-size:clamp(40px, 7.5vw, 70px) !important;
    line-height:0.95 !important;
    margin-block:0 !important;
}
@media (min-width:768px){
    .extra-pages-template:has(.allstars-livesports-page){padding-inline:32px !important;}
}
@media (min-width:1100px){
    .extra-pages-template:has(.allstars-livesports-page){padding-inline:48px !important;}
}
/* Belt-and-braces: make sure the wrapper itself stretches to the column. */
.allstars-livesports-page{align-self:stretch;}

/* ===== Theme override layer =====
   The page template (.extra-pages-template .elementor-widget-theme-post-content)
   applies high-specificity rules to ul/ol/li/h2/h3/p that beat our plain class
   selectors. Most importantly it adds `padding-left:1.5em` to <ul> and
   `list-style:disc` to <li>, which shifts the entire card column right and
   shows a bullet — that's why the filter row appeared "longer and to the
   left" compared to the cards below. We re-apply our intended styles with
   element+class selectors (specificity 0,2,1) and rely on cascade order (our
   inline CSS loads after the template's) to win against the theme. */
.allstars-livesports-page ul.alsp-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
}
.allstars-livesports-page li.alsp-card{
    list-style:none;
    margin:0;
}
.allstars-livesports-page h2.alsp-hero__sub{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:clamp(26px, 5.5vw, 42px);
    line-height:0.95;
    color:var(--alsp-text);
    text-transform:uppercase;
    text-align:center;
    margin:0;
}
.allstars-livesports-page h3.alsp-day__heading{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:clamp(22px, 4.5vw, 36px);
    line-height:1;
    text-transform:uppercase;
    color:var(--alsp-text);
    letter-spacing:1px;
    text-align:center;
    margin:0 0 18px;
}
.allstars-livesports-page .alsp-hero__desc{
    max-width:760px;
    margin:0 auto;
    color:var(--alsp-text);
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
}
.allstars-livesports-page .alsp-hero__desc p{
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
    font-weight:400;
    font-size:clamp(15px, 2vw, 18px);
    line-height:1.5;
    color:var(--alsp-text);
    margin:0 0 0.9em;
}
.allstars-livesports-page .alsp-hero__desc p:last-child{margin-bottom:0;}
.allstars-livesports-page p.alsp-card__title{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:clamp(20px, 4.5vw, 32px);
    line-height:1.15;
    text-transform:uppercase;
    color:var(--alsp-text);
    margin:0;
    text-align:center;
}
.allstars-livesports-page .alsp-empty p{
    margin:0;
    color:var(--alsp-muted);
    font-size:inherit;
}

/* ===== Hero (subtitle + description; H1 comes from page template) ===== */
.alsp-hero{
    text-align:center;
    margin:0 0 48px;
    display:flex;
    flex-direction:column;
    gap:24px;
    align-items:center;
}
.alsp-hero__sub{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color:var(--alsp-text);
    text-transform:uppercase;
    margin:0;
}
.alsp-hero__desc{
    max-width:760px;
    margin:0 auto;
    color:var(--alsp-text);
}
.alsp-hero__desc p{
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.5;
    color:var(--alsp-text);
    margin:0 0 0.9em;
}
.alsp-hero__desc p:last-child{margin-bottom:0;}

/* ===== Category filter chips - flex-wrap, sized to content ===== */
.alsp-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin:0 0 40px;
    padding:14px;
    background:rgba(0,0,0,0.6);
    border:1px solid var(--alsp-border);
    border-radius:var(--alsp-radius);
}
.alsp-chip{
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    border:2px solid var(--alsp-border);
    color:var(--alsp-text);
    border-radius:var(--alsp-radius-chip);
    padding:8px 14px;
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:0.4px;
    text-transform:uppercase;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.alsp-chip:hover,
.alsp-chip:focus-visible{
    background:var(--alsp-red);
    border-color:var(--alsp-red);
    color:#FFFFFF;
    transform:translateY(-1px);
    outline:none;
}
.alsp-chip.is-active{
    background:var(--alsp-red);
    border-color:var(--alsp-red);
    color:#FFFFFF;
}
.alsp-chip__count{
    background:rgba(255,255,255,0.12);
    border-radius:999px;
    padding:2px 8px;
    font-size:11px;
    font-weight:600;
    min-width:24px;
    text-align:center;
}
.alsp-chip.is-active .alsp-chip__count,
.alsp-chip:hover .alsp-chip__count{
    background:rgba(255,255,255,0.22);
}

/* ===== Day groups + fixture list ===== */
.alsp-results{display:flex;flex-direction:column;gap:32px;}
.alsp-day__heading{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:36px;
    line-height:1;
    text-transform:uppercase;
    color:var(--alsp-text);
    letter-spacing:1px;
    text-align:center;
    margin:0 0 18px;
}
.alsp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}

/* ===== Fixture card =====
   Symmetric 24px padding so content sits in the card's true centre. The channel
   logo is absolutely positioned in the top-right corner — it overlays the card
   when present but never reserves layout space, so cards without a channel logo
   look identical and balanced cards (same-sized team badges) don't drift left. */
.alsp-card{
    position:relative;
    background:var(--alsp-card-bg);
    border:2px solid var(--alsp-border);
    border-radius:var(--alsp-radius);
    padding:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.alsp-card:hover{
    border-color:var(--alsp-red);
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(197,51,34,0.18);
}
.alsp-card.is-live{
    border-color:var(--alsp-red);
    box-shadow:0 0 0 2px rgba(197,51,34,0.18) inset;
}
.alsp-card.is-hidden{
    display:none !important;
}
.alsp-card__meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
    font-size:clamp(12px, 2.6vw, 16px);
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#FFFFFF;
    width:100%;
}
.alsp-card__sport{
    color:#FFFFFF;
    font-weight:700;
}
.alsp-card__competition{
    color:#FFFFFF;
    font-weight:700;
}
.alsp-card__sep{
    color:var(--alsp-red);
    font-weight:700;
    letter-spacing:0;
}
.alsp-card__live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--alsp-red);
    color:#FFFFFF;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:1px;
    font-weight:700;
}
.alsp-card__live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FFFFFF;
    animation:alsp-pulse 1.6s ease-in-out infinite;
}
@keyframes alsp-pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.5;transform:scale(0.85);}
}
.alsp-card__time{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--alsp-red);
    color:#FFFFFF;
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:clamp(14px, 2.4vw, 18px);
    line-height:1;
    letter-spacing:1.5px;
    padding:7px 18px;
    border-radius:999px;
    margin:0 0 4px;
    text-transform:uppercase;
    box-shadow:0 2px 8px rgba(197,51,34,0.3);
}
.alsp-card__event{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.alsp-card__title{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:32px;
    line-height:1.15;
    text-transform:uppercase;
    color:var(--alsp-text);
    margin:0;
    text-align:center;
}
.alsp-card__teams{
    display:inline-flex;
    align-items:center;
    gap:18px;
    flex-wrap:nowrap;
    justify-content:center;
}
.alsp-card__logo{
    width:clamp(44px, 9vw, 68px);
    height:clamp(44px, 9vw, 68px);
    object-fit:contain;
    flex-shrink:0;
    background:transparent;
    display:block;
}
.alsp-card__team{
    font-family:'Rajdhani',sans-serif;
    font-weight:700;
    font-size:clamp(16px, 4.5vw, 26px);
    line-height:1.1;
    text-transform:uppercase;
    color:var(--alsp-text);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.alsp-card__vs{
    font-family:'Montserrat',"Montserrat Fallback",sans-serif;
    font-weight:500;
    font-size:13px;
    text-transform:uppercase;
    color:var(--alsp-muted);
    letter-spacing:1.5px;
    flex-shrink:0;
}
.alsp-card__channel{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border:1px solid var(--alsp-border);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px;
    background:#FFFFFF;
}
.alsp-card__channel-logo{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}

/* ===== Empty / filter no-result states ===== */
.alsp-empty{
    text-align:center;
    padding:40px 20px;
    color:var(--alsp-muted);
    border:1px dashed var(--alsp-border);
    border-radius:var(--alsp-radius);
    margin:32px 0;
}
.alsp-empty p{margin:0;}
.alsp-empty--filter{margin-top:16px;}

/* ===== Mobile layout =====
   All font-sizes are now handled by the clamp() rules above (they scale
   smoothly from desktop down to a sensible mobile floor and keep the high
   specificity that beats the theme), so this block is layout-only: tighter
   chrome, symmetric card padding, the channel logo drops in-flow, and the
   team row is allowed to wrap so long names never overflow. */
@media (max-width:767px){
    .alsp-hero{margin-bottom:32px;}
    .alsp-filters{
        padding:10px;
        gap:8px;
        margin-bottom:24px;
    }
    .alsp-chip{padding:6px 10px;letter-spacing:0.3px;}
    .allstars-livesports-page li.alsp-card{padding:18px;gap:10px;}
    .alsp-card__channel{
        position:static;
        margin-top:6px;
    }
    .alsp-card__time{padding:6px 14px;}
    .alsp-card__teams{
        flex-wrap:wrap;
        gap:10px 14px;
    }
    .alsp-card__meta{letter-spacing:1px;}
}
/*# sourceURL=allstars-live-sports-page-inline-css */