/* FBB-NORMAL-MOBILE-HERO-CTA-FIX-BEGIN */

/*
 * Final mobile correction for:
 * 1. Match header team logos and names.
 * 2. Non-Brazil league CTA cards without a country flag.
 */

@media (max-width:760px){

  /*
   * MATCH HEADER
   */

  html body.normal-fbb-layout
  .premium-score-box{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:14px 10px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html body.normal-fbb-layout
  .premium-score-teams{
    width:100% !important;
    min-width:0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(58px,72px)
      minmax(0,1fr) !important;

    align-items:center !important;
    justify-content:stretch !important;
    gap:7px !important;
  }

  html body.normal-fbb-layout
  .premium-score-teams
  :is(
    .score-team,
    .premium-team
  ){
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;
    padding:0 !important;
    margin:0 !important;

    text-align:center !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeFlag,
    #scoreAwayFlag
  ){
    order:1 !important;

    display:block !important;

    width:62px !important;
    height:62px !important;

    min-width:62px !important;
    min-height:62px !important;

    max-width:62px !important;
    max-height:62px !important;

    margin:0 auto !important;
    padding:5px !important;

    object-fit:contain !important;
    object-position:center !important;

    border:
      1px solid
      rgba(255,255,255,.10) !important;

    border-radius:15px !important;

    background:
      radial-gradient(
        circle at center,
        rgba(255,255,255,.075),
        rgba(255,255,255,.018)
      ) !important;

    box-shadow:
      0 7px 18px rgba(0,0,0,.30) !important;

    box-sizing:border-box !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeName,
    #scoreAwayName
  ){
    order:2 !important;

    display:-webkit-box !important;

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

    min-height:30px !important;

    margin:0 !important;
    padding:0 2px !important;

    overflow:hidden !important;

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

    color:#ffffff !important;

    font-size:12.5px !important;
    font-weight:800 !important;
    line-height:1.18 !important;

    text-align:center !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  html body.normal-fbb-layout
  .premium-score-middle{
    width:100% !important;
    min-width:0 !important;
    max-width:72px !important;

    margin:0 auto !important;
    padding:0 2px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  html body.normal-fbb-layout
  #scoreCenterScore{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    color:#00ff87 !important;

    font-size:clamp(
      30px,
      9vw,
      38px
    ) !important;

    font-weight:900 !important;
    line-height:1 !important;

    text-align:center !important;
    white-space:nowrap !important;

    text-shadow:
      0 0 15px
      rgba(0,255,135,.30) !important;
  }

  html body.normal-fbb-layout
  #scoreCenterStatus{
    width:100% !important;
    min-width:0 !important;

    margin-top:6px !important;

    font-size:9px !important;
    font-weight:800 !important;
    line-height:1.15 !important;

    text-align:center !important;
    overflow-wrap:anywhere !important;
  }


  /*
   * MORE PREDICTIONS CTA ROW
   */

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-cta-row{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin-top:10px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;

    gap:8px !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-related-compact-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:10px 12px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:center !important;
    align-content:center !important;

    gap:4px !important;

    border-radius:13px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /*
   * Default layout for international leagues.
   * There is no empty flag/icon column.
   */
  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-league{
    grid-template-columns:
      minmax(0,1fr) !important;
  }

  /*
   * Brazil and any future league CTA that actually
   * contains a country flag keeps the icon column.
   */
  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-league:has(
    .fbb-country-flag
  ){
    grid-template-columns:
      40px
      minmax(0,1fr) !important;

    column-gap:10px !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-league:has(
    .fbb-country-flag
  )
  .fbb-country-flag{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;

    width:40px !important;
    height:40px !important;

    min-width:40px !important;
    max-width:40px !important;

    margin:0 !important;

    align-self:center !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-related-compact-card
  strong{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    color:#ffffff !important;

    font-size:13px !important;
    font-weight:850 !important;
    line-height:1.22 !important;

    text-align:left !important;
    text-wrap:balance !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-related-compact-card
  small{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    color:#b9c5d1 !important;

    font-size:11px !important;
    font-weight:500 !important;
    line-height:1.28 !important;

    text-align:left !important;
    overflow-wrap:anywhere !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-league:has(
    .fbb-country-flag
  )
  :is(
    strong,
    small
  ){
    grid-column:2 !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-more-all{
    min-height:0 !important;
  }
}


@media (max-width:390px){

  html body.normal-fbb-layout
  .premium-score-box{
    padding:12px 8px !important;
  }

  html body.normal-fbb-layout
  .premium-score-teams{
    grid-template-columns:
      minmax(0,1fr)
      56px
      minmax(0,1fr) !important;

    gap:5px !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeFlag,
    #scoreAwayFlag
  ){
    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    max-width:56px !important;
    max-height:56px !important;

    padding:4px !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeName,
    #scoreAwayName
  ){
    min-height:29px !important;
    font-size:12px !important;
  }

  html body.normal-fbb-layout
  #scoreCenterScore{
    font-size:31px !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-related-compact-card{
    padding:9px 10px !important;
  }

  html body.normal-fbb-layout
  #fbbMorePredictions
  .fbb-related-compact-card
  strong{
    font-size:12.5px !important;
  }
}


@media (max-width:340px){

  html body.normal-fbb-layout
  .premium-score-teams{
    grid-template-columns:
      minmax(0,1fr)
      50px
      minmax(0,1fr) !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeFlag,
    #scoreAwayFlag
  ){
    width:50px !important;
    height:50px !important;

    min-width:50px !important;
    min-height:50px !important;

    max-width:50px !important;
    max-height:50px !important;
  }

  html body.normal-fbb-layout
  :is(
    #scoreHomeName,
    #scoreAwayName
  ){
    font-size:11px !important;
  }

  html body.normal-fbb-layout
  #scoreCenterScore{
    font-size:28px !important;
  }
}

/* FBB-NORMAL-MOBILE-HERO-CTA-FIX-END */

/* FBB-RELATED-LANGUAGE-VISIBILITY-BEGIN */

/*
 * Must remain after the compact-card display rules.
 * Prevent display:block!important from overriding
 * hidden translations.
 */

html body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong,
  small,
  span
)[hidden],

html body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong,
  small,
  span
)[aria-hidden="true"]{
  display:none!important;
}


/*
 * Language-state fallback in case an older inline
 * translation state remains after navigation.
 */

html[lang="en"]
body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.pt,

body[data-lang="en"].fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.pt,

body.lang-en.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.pt{
  display:none!important;
}


html[lang="pt"]
body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.en,

body[data-lang="pt"].fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.en,

body.lang-pt.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
.en{
  display:none!important;
}


/*
 * Only the active translation may use the compact
 * card display declarations.
 */

html[lang="en"]
body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.en,
  small.en
):not([hidden]):not([aria-hidden="true"]),

body[data-lang="en"].fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.en,
  small.en
):not([hidden]):not([aria-hidden="true"]),

body.lang-en.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.en,
  small.en
):not([hidden]):not([aria-hidden="true"]),

html[lang="pt"]
body.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.pt,
  small.pt
):not([hidden]):not([aria-hidden="true"]),

body[data-lang="pt"].fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.pt,
  small.pt
):not([hidden]):not([aria-hidden="true"]),

body.lang-pt.fbb-prediction-detail-page
#fbbMorePredictions
.fbb-more-cta-row
:is(
  strong.pt,
  small.pt
):not([hidden]):not([aria-hidden="true"]){
  display:block!important;
}

/* FBB-RELATED-LANGUAGE-VISIBILITY-END */