/*
 * H2H / recent-match section optimization.
 */

#fbbRecentFormTarget,
#formTitle,
#recentForm {
  width:100%;
  max-width:100%;
  min-width:0;
}


#formTitle {
  margin:
    0 0 4px !important;
}


#fbbH2hSubtitle {
  margin:
    0 0 14px !important;

  color:
    #8fa1b2;

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.4;
}


/* Team columns */

#recentForm
.fbb-normal-form-grid {
  width:100%;
  max-width:100%;
  min-width:0;

  display:grid !important;

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

  align-items:start;

  gap:
    12px !important;

  margin:0 !important;
}


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

  margin:0 !important;

  padding:
    12px !important;

  border:
    1px solid
    rgba(148,163,184,.14);

  border-radius:
    14px;

  background:
    rgba(28,27,25,.84);

  overflow:hidden;
}


#recentForm
.fbb-form-column > strong {
  display:block;

  margin:
    0 0 11px;

  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1.25;
}


/* Match list */

#recentForm
.fbb-form-list {
  width:100%;
  min-width:0;

  display:grid;

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

  gap:
    8px;
}


#recentForm
.fbb-form-match {
  width:100%;
  min-width:0;
  min-height:48px;

  margin:0 !important;

  padding:
    8px 9px !important;

  display:grid !important;

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

  align-items:center !important;

  gap:
    8px !important;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:
    10px;

  background:
    rgba(13,13,14,.67);

  overflow:visible !important;
}


/* Result badge */

#recentForm
.fbb-form-result {
  width:
    30px !important;

  min-width:
    30px !important;

  height:
    30px !important;

  margin:0 !important;

  padding:0 !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:
    9px !important;

  font-size:
    10px !important;

  font-weight:
    950 !important;

  line-height:
    1 !important;

  flex:
    0 0 30px !important;
}


/*
 * The previous layout used ellipsis here.
 * Allow the complete fixture name to wrap.
 */

#recentForm
.fbb-form-match >
span:last-child {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  display:block !important;

  color:
    #eef4f8 !important;

  font-size:
    10px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;

  white-space:
    normal !important;

  overflow:
    visible !important;

  text-overflow:
    clip !important;

  overflow-wrap:
    anywhere !important;

  word-break:
    normal !important;
}


/* Slightly more room on wide cards. */

@media(min-width:1250px) {
  #recentForm
  .fbb-form-match >
  span:last-child {
    font-size:
      11px !important;
  }
}


/* Mobile and narrow columns */

@media(max-width:760px) {
  #recentForm
  .fbb-normal-form-grid {
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:
      10px !important;
  }


  #recentForm
  .fbb-form-column {
    padding:
      10px !important;
  }


  #recentForm
  .fbb-form-match {
    min-height:
      46px;

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

    padding:
      8px !important;
  }


  #recentForm
  .fbb-form-match >
  span:last-child {
    font-size:
      11px !important;
  }
}