/* ==========================================================
   WINNING LINE AI
   BET SELECTIONS - FINAL MOBILE LAYOUT OVERRIDE

   Applies only at phone/tablet width.
   Desktop >= 761px is untouched.
   ========================================================== */

@media (max-width:760px){

    html,
    body{
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    /* ------------------------------------------------------
       MAIN PAGE CONTAINER
       ------------------------------------------------------ */

    .wla-page{
        display:block !important;
        width:calc(100% - 20px) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
        min-width:0 !important;
    }

    .wla-page > *,
    .wla-meeting-zone,
    .wla-race-nav-zone,
    .wla-race-panel{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    /* ------------------------------------------------------
       PERIOD / DATE CONTROLS
       Existing inline CSS forces these too wide on phones.
       ------------------------------------------------------ */

    .wla-period-control{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto !important;
        gap:6px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .wla-period-control > label,
    .wla-period-control > *{
        grid-column:1 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    #wlaPeriodSelect,
    #wlaPeriodDaySelect{
        grid-column:1 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    /* ------------------------------------------------------
       MEETING SELECTOR
       Use the dedicated mobile selector.
       ------------------------------------------------------ */

    .wla-meeting-zone{
        display:block !important;
        overflow:visible !important;
    }

    .wla-meeting-view-row{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    #meetingTabs,
    .wla-meeting-view-row .wla-meeting-tabs{
        display:none !important;
    }

    #meetingMobile,
    .wla-meeting-mobile{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .wla-meeting-mobile select,
    #meetingMobile select,
    select#meetingMobile{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .wla-meeting-track-info,
    .wla-meeting-view-row .wla-meeting-track-info{
        display:flex !important;
        flex-wrap:wrap !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-top:7px !important;
        gap:6px !important;
    }

    /* ------------------------------------------------------
       RACE NAVIGATION
       ------------------------------------------------------ */

    .wla-race-nav-zone{
        margin-top:12px !important;
        overflow:hidden !important;
    }

    .wla-race-nav-header{
        display:block !important;
        width:100% !important;
        padding:11px 12px !important;
        box-sizing:border-box !important;
    }

    .wla-race-nav-header > div{
        width:100% !important;
        min-width:0 !important;
    }

    .wla-race-tabs{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:0 6px !important;
        white-space:nowrap !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
        box-sizing:border-box !important;
    }

    .wla-race-tabs::-webkit-scrollbar{
        display:none !important;
    }

    .wla-race-tab{
        flex:0 0 auto !important;
        min-width:48px !important;
        max-width:none !important;
    }

    /* ------------------------------------------------------
       RACE HERO / HISTORICAL BIAS
       ------------------------------------------------------ */

    .wla-race-panel{
        margin-top:12px !important;
        overflow:hidden !important;
    }

    .wla-race-hero{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        padding:15px 13px !important;
        box-sizing:border-box !important;
    }

    .wla-race-hero-main{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .wla-race-kicker{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:5px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .wla-race-kicker span{
        max-width:100% !important;
    }

    .wla-race-hero h2{
        width:100% !important;
        max-width:100% !important;
        margin-top:8px !important;
        font-size:25px !important;
        line-height:1.08 !important;
        overflow-wrap:anywhere !important;
    }

    .wla-race-hero-main p{
        width:100% !important;
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.4 !important;
        overflow-wrap:anywhere !important;
    }

    .wla-bias-panel{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-top:13px !important;
        box-sizing:border-box !important;
    }

    /* ------------------------------------------------------
       FIVE RUNNER CARDS
       Keep current design but stop horizontal collisions.
       ------------------------------------------------------ */

    .wla-runner-list{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .wla-runner{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        padding:12px 10px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .wla-runner > *{
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .wla-runner img{
        max-width:100% !important;
    }

    .wla-runner-name,
    .wla-runner-name *,
    .wla-runner-meta,
    .wla-runner-meta *{
        max-width:100% !important;
        overflow-wrap:anywhere !important;
    }

    /* Preserve useful silk size but don't allow it to push card wide */

    .wla-silk-wrap,
    .wla-silk-spacer{
        flex-shrink:0 !important;
        max-width:64px !important;
    }

    /* ------------------------------------------------------
       PRICE / ODDS ELEMENTS
       ------------------------------------------------------ */

    .wla-runner [class*="odds"],
    .wla-runner [class*="price"]{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    /* ------------------------------------------------------
       RACE FOOTER / NEXT-PREVIOUS
       ------------------------------------------------------ */

    .wla-race-footer{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
        width:100% !important;
        gap:7px !important;
        padding:10px !important;
        box-sizing:border-box !important;
        align-items:center !important;
    }

    .wla-race-footer > div{
        min-width:0 !important;
        text-align:center !important;
    }

    .wla-race-footer strong,
    .wla-race-footer span{
        max-width:100% !important;
        overflow-wrap:anywhere !important;
    }

    .wla-race-arrow{
        flex:0 0 auto !important;
    }
}

/* Extra narrow phones */
@media (max-width:430px){

    .wla-page{
        width:calc(100% - 14px) !important;
    }

    .wla-race-hero{
        padding:13px 10px !important;
    }

    .wla-race-hero h2{
        font-size:23px !important;
    }

    .wla-runner{
        padding:10px 8px !important;
    }

    .wla-race-tab{
        min-width:45px !important;
    }
}


/* WLA_RACING_MOBILE_TOPSPACE_START */

@media (max-width:760px){

    /*
       Keep the first Bet Selections controls safely below
       the two-row mobile member header/navigation.
    */
    html body .wla-page{
        margin-top:52px !important;
    }

    html body .wla-meeting-zone{
        position:relative !important;
        z-index:1 !important;
    }

    html body .wla-view-control{
        position:relative !important;
        z-index:1 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-top:0 !important;
    }
}

@media (max-width:430px){

    html body .wla-page{
        margin-top:58px !important;
    }
}

/* WLA_RACING_MOBILE_TOPSPACE_END */


/* WLA_MOBILE_NAME_STANDARD_START */

@media (max-width:760px){

    html body .wla-runner .wla-silk-wrap,
    html body .wla-runner .wla-silk-spacer{
        width:54px !important;
        height:58px !important;
        min-width:54px !important;
        max-width:54px !important;
        flex-basis:54px !important;
        flex-shrink:0 !important;
    }

    html body .wla-runner .wla-silk,
    html body .wla-runner .wla-silk-wrap img{
        width:auto !important;
        height:auto !important;
        max-width:52px !important;
        max-height:54px !important;
        object-fit:contain !important;
    }

    html body .wla-runner img[src*="cdn.prod.pricekinetics.com/silks/"],
    html body .wla-runner img[src*="pricekinetics.com/silks/"],
    html body .wla-runner img[src*="assets/silks/ladbrokes/"],
    html body .wla-runner img[src*="/assets/silks/ladbrokes/"]{
        transform:scale(1.02) !important;
        transform-origin:center center !important;
        max-width:52px !important;
        max-height:54px !important;
    }

    html body .wla-runner .wla-runner-name,
    html body .wla-runner [class*="runner-name"]{
        font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
        font-size:16px !important;
        font-weight:700 !important;
        font-style:normal !important;
        line-height:1.12 !important;
        letter-spacing:-0.15px !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        white-space:normal !important;
        overflow:hidden !important;
        text-overflow:clip !important;
        overflow-wrap:normal !important;
        word-break:normal !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        min-height:18px !important;
        max-height:36px !important;
    }

    html body .wla-runner .wla-runner-name *,
    html body .wla-runner [class*="runner-name"] *{
        font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;
        font-size:16px !important;
        font-weight:700 !important;
        font-style:normal !important;
        line-height:1.12 !important;
        letter-spacing:-0.15px !important;
    }

    html body .wla-runner{
        column-gap:10px !important;
    }

    html body .wla-runner > *{
        min-width:0 !important;
    }
}

@media (max-width:430px){

    html body .wla-runner .wla-silk-wrap,
    html body .wla-runner .wla-silk-spacer{
        width:51px !important;
        height:55px !important;
        min-width:51px !important;
        max-width:51px !important;
        flex-basis:51px !important;
    }

    html body .wla-runner .wla-silk,
    html body .wla-runner .wla-silk-wrap img{
        max-width:49px !important;
        max-height:51px !important;
    }

    html body .wla-runner .wla-runner-name,
    html body .wla-runner [class*="runner-name"],
    html body .wla-runner .wla-runner-name *,
    html body .wla-runner [class*="runner-name"] *{
        font-size:15px !important;
        line-height:1.12 !important;
    }

    html body .wla-runner .wla-runner-name,
    html body .wla-runner [class*="runner-name"]{
        max-height:34px !important;
    }
}

/* WLA_MOBILE_NAME_STANDARD_END */


/* WLA_MOBILE_HIDE_PLACE_START */

@media (max-width:760px){

    /*
       Mobile only:
       show WIN price, hide PLACE price.
    */
    html body .wla-runner .wla-price.place{
        display:none !important;
    }

    /*
       Odds block now contains only one price box.
    */
    html body .wla-runner .wla-runner-odds{
        grid-template-columns:82px !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
    }

    /*
       Remove the previous artificial horse-name width limit.
       Let the existing runner layout decide the available space.
    */
    html body .wla-runner .wla-runner-name,
    html body .wla-runner [class*="runner-name"]{
        width:auto !important;
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        overflow:hidden !important;
    }
}

@media (max-width:430px){

    html body .wla-runner .wla-runner-odds{
        grid-template-columns:76px !important;
    }
}

/* WLA_MOBILE_HIDE_PLACE_END */


/* WLA_MOBILE_WIN_BOX_TIDY_START */

@media (max-width:760px){

    html body .wla-runner .wla-runner-odds{
        grid-template-columns:58px !important;
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
    }

    html body .wla-runner .wla-price.win{
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;

        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;

        padding-left:4px !important;
        padding-right:4px !important;
    }
}

@media (max-width:430px){

    html body .wla-runner .wla-runner-odds{
        grid-template-columns:56px !important;
        width:56px !important;
        min-width:56px !important;
        max-width:56px !important;
    }

    html body .wla-runner .wla-price.win{
        width:56px !important;
        min-width:56px !important;
        max-width:56px !important;
    }
}

/* WLA_MOBILE_WIN_BOX_TIDY_END */


/* WLA_MOBILE_WIN_WHITE_START */

@media (max-width:760px){
    html body .wla-runner .wla-price.win strong{
        color:#ffffff !important;
    }
}

/* WLA_MOBILE_WIN_WHITE_END */