/*
 * FindBestBet prediction mobile final.
 * Canary-only mobile correction.
 */

@media(max-width:760px) {

  html,
  body {
    width:100%;
    max-width:100%;

    overflow-x:hidden !important;
  }


  body {
    background:
      #071a20 !important;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  .fbb-standard-topbar {
    min-height:
      64px !important;
  }


  .fbb-standard-topbar-inner {
    min-height:
      64px !important;

    padding:
      0 10px !important;

    gap:
      8px !important;
  }


  .fbb-standard-topbar
  .logo {
    min-width:0 !important;

    flex:
      0 1 auto !important;
  }


  .fbb-standard-topbar
  .logo img {
    width:
      150px !important;

    height:
      34px !important;

    max-width:
      42vw !important;

    object-fit:
      contain !important;
  }


  .fbb-top-actions {
    gap:
      6px !important;
  }


  .fbb-lang-switch {
    padding:
      2px !important;

    gap:
      2px !important;
  }


  .fbb-lang-switch button {
    min-width:
      36px !important;

    width:
      36px !important;

    height:
      38px !important;

    padding:
      0 !important;

    font-size:
      12px !important;
  }


  .fbb-menu-toggle {
    width:
      38px !important;

    height:
      38px !important;
  }


  /* =======================================================
     PAGE WIDTH
     ======================================================= */

  main,
  #main-content {
    width:100% !important;
    max-width:100% !important;

    margin:
      0 auto !important;

    padding:
      14px 9px
      calc(
        94px +
        env(safe-area-inset-bottom)
      ) !important;

    overflow:
      visible !important;
  }


  main > *,
  #main-content > * {
    width:100%;
    max-width:100%;
    min-width:0;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero {
    width:100% !important;
    max-width:100% !important;

    margin:
      0 0 14px !important;

    padding:
      13px !important;

    overflow:hidden !important;

    border-radius:
      19px !important;
  }


  .hero .badge {
    max-width:100%;

    padding:
      6px 10px !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;

    white-space:
      normal !important;
  }


  .hero h1 {
    margin:
      10px 0 10px !important;

    font-size:
      clamp(
        25px,
        7.4vw,
        34px
      ) !important;

    line-height:
      1.08 !important;

    letter-spacing:
      0 !important;

    overflow-wrap:
      normal !important;

    word-break:
      normal !important;
  }


  .hero h1
  #heroTitle,

  .hero h1
  .accent {
    display:inline;

    white-space:
      normal !important;
  }


  .hero > p {
    margin:
      0 0 15px !important;

    font-size:
      14px !important;

    line-height:
      1.5 !important;
  }


  /* =======================================================
     MATCH SCORE CARD
     ======================================================= */

  .premium-score-box {
    width:100% !important;
    max-width:100% !important;

    margin:
      18px 0 14px !important;

    padding:
      17px 9px !important;

    overflow:hidden !important;

    border-radius:
      20px !important;
  }


  .premium-score-teams {
    width:100% !important;
    max-width:100% !important;

    display:grid !important;

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

    align-items:center !important;

    gap:
      7px !important;
  }


  .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:
      8px !important;

    padding:
      0 2px !important;

    text-align:
      center !important;
  }


  /*
   * Always show the badge first and the team name below it,
   * including the away-team column.
   */
  .premium-team
  .premium-score-flag {
    order:
      1 !important;

    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;

    height:
      58px !important;

    min-height:
      58px !important;

    max-height:
      58px !important;

    margin:
      0 !important;

    object-fit:
      contain !important;
  }


  .premium-team
  span,

  .premium-team
  b,

  .premium-team-name,

  #scoreHomeName,
  #scoreAwayName {
    order:
      2 !important;

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

    display:block !important;

    margin:
      0 !important;

    color:
      #ffffff !important;

    font-size:
      16px !important;

    font-weight:
      850 !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

    overflow-wrap:
      normal !important;

    word-break:
      keep-all !important;
  }


  .premium-score-middle {
    width:
      78px !important;

    min-width:
      78px !important;

    max-width:
      78px !important;

    padding:
      0 2px !important;

    display:flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      7px !important;

    text-align:
      center !important;
  }


  .premium-score-value {
    width:100%;

    color:
      #00ff87 !important;

    font-size:
      29px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;
  }


  .premium-score-status {
    width:100%;

    font-size:
      9px !important;

    line-height:
      1.25 !important;

    text-align:
      center !important;

    white-space:
      normal !important;

    overflow-wrap:
      normal !important;

    word-break:
      normal !important;
  }


  /* =======================================================
     MATCH META CHIPS
     ======================================================= */

  .meta-row {
    width:100% !important;

    margin:
      0 !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      8px !important;
  }


  .meta-row
  .chip {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    min-height:
      38px !important;

    margin:
      0 !important;

    padding:
      8px 6px !important;

    display:flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border-radius:
      999px !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      1.2 !important;

    text-align:
      center !important;

    white-space:
      normal !important;
  }


  #matchReferee {
    grid-column:
      1 / -1;
  }


  /* =======================================================
     HUB NAVIGATION
     ======================================================= */

  .wc-hub-nav {
    width:100% !important;
    max-width:100% !important;

    margin:
      12px 0 16px !important;

    padding:
      0 0 5px !important;

    display:flex !important;

    align-items:center !important;

    flex-wrap:
      nowrap !important;

    gap:
      8px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x proximity;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }


  .wc-hub-nav::-webkit-scrollbar {
    display:none;
  }


  .wc-hub-nav
  a {
    flex:
      0 0 auto !important;

    min-width:
      max-content !important;

    min-height:
      42px !important;

    margin:
      0 !important;

    padding:
      9px 14px !important;

    display:inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border-radius:
      999px !important;

    font-size:
      11px !important;

    font-weight:
      800 !important;

    line-height:
      1.1 !important;

    white-space:
      nowrap !important;

    scroll-snap-align:
      start;
  }


  /* =======================================================
     PREDICTION AND CLASSIFICATION
     ======================================================= */

  #fbbPredictionLeagueGrid {
    width:100% !important;
    max-width:100% !important;

    margin:
      12px 0 !important;

    display:grid !important;

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

    gap:
      12px !important;
  }


  #fbbPredictionLeagueGrid >
  * {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:
      0 !important;
  }


  #fbbPredictionLeagueGrid
  .fbb-prediction-primary-card,

  #fbbPredictionLeagueGrid
  #fbbLeagueIntelligence {
    padding:
      14px 10px !important;

    border-radius:
      16px !important;
  }


  #predictionCardTitle {
    margin:
      0 0 13px !important;

    font-size:
      25px !important;

    line-height:
      1.15 !important;
  }


  #predictionText {
    font-size:
      14px !important;

    line-height:
      1.65 !important;

    text-align:
      left !important;
  }


  /* =======================================================
     LAST-FIVE COMPARISON
     ======================================================= */

  #fbbLast5Averages {
    width:100% !important;
    max-width:100% !important;

    padding:
      14px 7px !important;
  }


  .fbb-last5-team-head,
  .fbb-last5-row {
    grid-template-columns:
      minmax(102px,1.18fr)
      minmax(61px,.82fr)
      minmax(61px,.82fr) !important;
  }


  .fbb-last5-team-head >
  div,

  .fbb-last5-row >
  div {
    min-width:0;

    padding:
      8px 4px !important;
  }


  .fbb-last5-team {
    gap:
      4px !important;

    font-size:
      10px !important;
  }


  .fbb-last5-team
  img {
    width:
      20px !important;

    min-width:
      20px !important;

    height:
      20px !important;
  }


  .fbb-last5-metric {
    gap:
      4px !important;

    font-size:
      9px !important;

    line-height:
      1.2 !important;
  }


  .fbb-last5-value {
    font-size:
      13px !important;
  }


  /* =======================================================
     RECENT FORM
     ======================================================= */

  #fbbLeagueIntelligence
  .fbb-normal-form-grid {
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:
      10px !important;
  }


  .fbb-form-column {
    width:100%;
    min-width:0;

    padding:
      11px !important;
  }


  /* =======================================================
     GENERAL MOBILE CARDS
     ======================================================= */

  main .card,
  main .section {
    width:100%;
    max-width:100%;
    min-width:0;

    overflow:hidden;

    border-radius:
      16px !important;
  }


  .fbb-normal-player-grid,
  #relatedMatches {
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:
      10px !important;
  }


  table {
    max-width:100%;
  }


  .fbb-standings-table-wrap,
  .fbb-ranking-table-wrap {
    width:100%;
    max-width:100%;

    overflow-x:auto !important;

    -webkit-overflow-scrolling:
      touch;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:390px) {

  main,
  #main-content {
    padding-inline:
      7px !important;
  }


  .hero {
    padding:
      11px !important;
  }


  .hero h1 {
    font-size:
      25px !important;
  }


  .premium-score-box {
    padding:
      15px 6px !important;
  }


  .premium-score-teams {
    grid-template-columns:
      minmax(0,1fr)
      66px
      minmax(0,1fr) !important;

    gap:
      4px !important;
  }


  .premium-score-middle {
    width:
      66px !important;

    min-width:
      66px !important;

    max-width:
      66px !important;
  }


  .premium-team
  .premium-score-flag {
    width:
      50px !important;

    min-width:
      50px !important;

    max-width:
      50px !important;

    height:
      50px !important;

    min-height:
      50px !important;

    max-height:
      50px !important;
  }


  .premium-team
  span,

  #scoreHomeName,
  #scoreAwayName {
    font-size:
      14px !important;
  }


  .premium-score-value {
    font-size:
      25px !important;
  }


  .premium-score-status {
    font-size:
      8px !important;
  }


  .meta-row
  .chip {
    padding:
      7px 4px !important;

    font-size:
      9px !important;
  }


  .wc-hub-nav
  a {
    padding:
      9px 12px !important;

    font-size:
      10px !important;
  }


  .fbb-last5-team-head,
  .fbb-last5-row {
    grid-template-columns:
      minmax(93px,1.16fr)
      minmax(55px,.84fr)
      minmax(55px,.84fr) !important;
  }


  .fbb-last5-metric {
    font-size:
      8px !important;
  }


  .fbb-last5-value {
    font-size:
      12px !important;
  }
}