/* FBB_NORMAL_RELATED_CARDS_GLOBAL_V1 */

/*
 * Generic layout only.
 * Never changes league names, URLs, countries, or translations.
 */

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-cta-row[data-fbb-related-links="true"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-cta-row
> a.fbb-more-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 13px !important;

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

  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 84px !important;

  margin: 0 !important;
  padding: 14px 16px !important;

  text-align: left !important;
  text-decoration: none !important;
  flex-direction: unset !important;
}

/*
 * Remove old card-generated icons and duplicated labels.
 * The real flag and the dedicated book element remain.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card::before,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card::after,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card strong::before,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card strong::after {
  content: none !important;
  display: none !important;
}

/*
 * Country flag column.
 * Works for Brazil, Portugal, Spain, France, England,
 * international competitions, and every other generated flag.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> .fbb-country-flag,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> .fbb-related-flag-icon,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> .fbb-related-css-flag,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> .fbb-related-fallback-flag,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> span[role="img"] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;

  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  align-self: center !important;
  justify-self: start !important;
  place-items: center !important;

  box-sizing: border-box !important;

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

  height: 29px !important;
  min-height: 29px !important;

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

  overflow: hidden !important;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 5px !important;

  transform: none !important;
  line-height: 0 !important;
}

/*
 * Preserve each page's original SVG flag.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
.fbb-country-flag svg,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
.fbb-related-flag-icon svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;

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

  transform: none !important;
}

/*
 * Generic fallback only when a page genuinely has no flag.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-related-fallback-flag:not(.fbb-related-image-flag) {
  height: 42px !important;
  min-height: 42px !important;

  border-radius: 10px !important;
  background: rgba(0, 177, 255, 0.11) !important;

  font-size: 20px !important;
  line-height: 1 !important;
}

/*
 * Dedicated all-predictions icon.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-all
> .fbb-related-book-icon {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;

  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  align-self: center !important;
  justify-self: start !important;
  place-items: center !important;

  box-sizing: border-box !important;

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

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

  border: 1px solid rgba(0, 177, 255, 0.34) !important;
  border-radius: 10px !important;
  background: rgba(0, 177, 255, 0.12) !important;

  font-size: 19px !important;
  line-height: 1 !important;
}

/*
 * Wrapped text used by current pages.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card
> .fbb-related-card-copy,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card
> .fbb-more-league-copy {
  display: flex !important;

  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  min-width: 0 !important;

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

  gap: 4px !important;

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

  text-align: left !important;
}

/*
 * Older pages may contain direct strong/small children.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card
> strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card
> small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
}

/*
 * Text formatting.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card strong,

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card small {
  display: block;

  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;

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

  text-align: left !important;
  text-indent: 0 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-card small {
  margin-top: 4px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  opacity: 0.80 !important;
}

/*
 * Hide only inactive language nodes.
 * Decorative aria-hidden icons remain visible.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-cta-row [hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-cta-row[data-fbb-related-links="true"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-cta-row
  > a.fbb-more-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 11px !important;

    min-height: 78px !important;
    padding: 12px 13px !important;

    border-radius: 12px !important;
  }

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > .fbb-country-flag,

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > .fbb-related-flag-icon,

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > .fbb-related-css-flag,

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > span[role="img"] {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 28px !important;
    min-height: 28px !important;
  }

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-all
  > .fbb-related-book-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 390px) {
  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-cta-row
  > a.fbb-more-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 11px 12px !important;
  }

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-card strong {
    font-size: 13px !important;
  }

  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-card small {
    font-size: 10.8px !important;
  }
}

/* FBB_REAL_COUNTRY_FLAGS_V5_BEGIN */

/*
 * A previous `background: ... !important` shorthand reset
 * the JavaScript background-image to none. Real flags now
 * use a dedicated CSS variable with important priority.
 */
html body.normal-fbb-layout
section#fbbMorePredictions
.fbb-more-league
> .fbb-related-fallback-flag.fbb-related-image-flag {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  align-self: center !important;
  justify-self: start !important;

  box-sizing: border-box !important;

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

  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;

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

  overflow: hidden !important;

  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 5px !important;

  background-color: transparent !important;
  background-image: var(--fbb-related-flag-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.28) !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  transform: none !important;
}

@media (max-width: 700px) {
  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > .fbb-related-fallback-flag.fbb-related-image-flag {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
}

@media (max-width: 390px) {
  html body.normal-fbb-layout
  section#fbbMorePredictions
  .fbb-more-league
  > .fbb-related-fallback-flag.fbb-related-image-flag {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
  }
}

/* FBB_REAL_COUNTRY_FLAGS_V5_END */