/* New corners strategy */

.signals-grid .fbb-corners-signal {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  min-height: 92px;
  padding: 16px 18px;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid rgba(0, 255, 135, .46);
  border-radius: 15px;

  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at 92% 10%, rgba(0,255,135,.19), transparent 34%),
    radial-gradient(circle at 4% 100%, rgba(0,177,255,.17), transparent 38%),
    linear-gradient(135deg, #0b1417, #10292a 55%, #123b2f);

  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto;

  box-shadow:
    0 15px 32px rgba(0,0,0,.28),
    0 0 24px rgba(0,177,255,.09),
    0 0 28px rgba(0,255,135,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.signals-grid .fbb-corners-signal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 11px;
  pointer-events: none;
}

.signals-grid .fbb-corners-signal::after {
  content: "";
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #00b1ff,
    #00ff87,
    transparent
  );
  box-shadow: 0 0 15px rgba(0,255,135,.40);
}

.fbb-corners-signal .emoji {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0;
  font-size: 28px;
  border: 1px solid rgba(0,177,255,.35);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.fbb-corners-copy {
  min-width: 0;
}

.fbb-corners-copy strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.fbb-corners-copy small {
  display: block;
  color: #b8cbd1;
  font-size: 12px;
  line-height: 1.45;
}

.fbb-new-signal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;

  color: #04110d !important;
  -webkit-text-fill-color: #04110d !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;

  border-radius: 999px;
  background: linear-gradient(135deg, #00b1ff, #00ff87);
  box-shadow: 0 8px 18px rgba(0,255,135,.15);
}

/* Preserve black percentage text */

.signals-grid .fbb-signal-percent-black {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Supported leagues dropdown */

.fbb-leagues-dropdown {
  margin-top: 18px;
  overflow: hidden;

  border: 1px solid rgba(0,177,255,.30);
  border-radius: 15px;

  background:
    radial-gradient(circle at 100% 0, rgba(0,255,135,.09), transparent 35%),
    linear-gradient(145deg, rgba(15,24,28,.98), rgba(18,34,35,.98));

  box-shadow:
    0 13px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.fbb-leagues-dropdown summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 15px 17px;

  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.fbb-leagues-dropdown summary::-webkit-details-marker {
  display: none;
}

.fbb-leagues-dropdown summary::before {
  content: "▾";
  color: #00ff87;
  font-size: 16px;
  transition: transform .18s ease;
}

.fbb-leagues-dropdown[open] summary::before {
  transform: rotate(180deg);
}

.fbb-leagues-count {
  margin-left: auto;
  padding: 5px 9px;

  color: #04110d;
  font-size: 10px;
  font-weight: 950;

  border-radius: 999px;
  background: linear-gradient(135deg, #00b1ff, #00ff87);
}

.fbb-leagues-content {
  padding: 4px 17px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.fbb-leagues-heading {
  margin: 16px 0 10px;
  color: #00ff87;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.fbb-leagues-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fbb-leagues-list li {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;

  color: #d5e1e6;
  font-size: 12px;
  line-height: 1.35;

  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: rgba(255,255,255,.025);

  transition:
    border-color .15s ease,
    color .15s ease,
    transform .15s ease,
    background .15s ease;
}

.fbb-leagues-list li:hover {
  color: #ffffff;
  transform: translateY(-1px);
  border-color: rgba(0,255,135,.34);
  background: rgba(0,255,135,.055);
}

.fbb-language-en {
  display: none;
}

html[lang="en"] .fbb-language-pt,
html[data-lang="en"] .fbb-language-pt,
body[data-lang="en"] .fbb-language-pt {
  display: none !important;
}

html[lang="en"] .fbb-language-en,
html[data-lang="en"] .fbb-language-en,
body[data-lang="en"] .fbb-language-en {
  display: inline !important;
}

@media (max-width: 900px) {
  .fbb-leagues-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .signals-grid .fbb-corners-signal {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .fbb-corners-signal .emoji {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .fbb-new-signal-pill {
    grid-column: 1 / -1;
    width: 100%;
  }

  .fbb-leagues-list {
    grid-template-columns: 1fr;
  }
}

/* FBB-CORNERS-MOBILE-FIX-BEGIN */

/* Default page language is Portuguese. */
.fbb-corners-signal .fbb-language-en,
.fbb-leagues-dropdown .fbb-language-en {
  display: none !important;
}

.fbb-corners-signal .fbb-language-pt,
.fbb-leagues-dropdown .fbb-language-pt {
  display: inline !important;
}

/* English selected. */
html[lang^="en"] .fbb-language-pt,
html[data-lang^="en"] .fbb-language-pt,
body[data-lang^="en"] .fbb-language-pt {
  display: none !important;
}

html[lang^="en"] .fbb-language-en,
html[data-lang^="en"] .fbb-language-en,
body[data-lang^="en"] .fbb-language-en {
  display: inline !important;
}

/* Portuguese selected. */
html[lang^="pt"] .fbb-language-en,
html[data-lang^="pt"] .fbb-language-en,
body[data-lang^="pt"] .fbb-language-en {
  display: none !important;
}

html[lang^="pt"] .fbb-language-pt,
html[data-lang^="pt"] .fbb-language-pt,
body[data-lang^="pt"] .fbb-language-pt {
  display: inline !important;
}

/* Description remains on its own line. */
.fbb-corners-copy small.fbb-language-pt,
.fbb-corners-copy small.fbb-language-en {
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* Compact NOVO/NEW badge. */
.signals-grid .fbb-corners-signal .fbb-new-signal-pill {
  grid-column: auto !important;
  justify-self: end !important;
  align-self: center !important;

  display: inline-flex !important;
  width: auto !important;
  min-width: 52px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 6px 11px !important;

  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.signals-grid .fbb-corners-signal .fbb-new-signal-pill span {
  width: auto !important;
}

/* Keep three compact columns on mobile. */
@media (max-width: 560px) {
  .signals-grid .fbb-corners-signal {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    min-height: 84px !important;
    padding: 13px !important;
  }

  .fbb-corners-signal .emoji {
    width: 44px !important;
    height: 44px !important;
    font-size: 23px !important;
  }

  .fbb-corners-copy strong {
    font-size: 15px !important;
  }

  .fbb-corners-copy small {
    font-size: 11px !important;
  }
}

/* FBB-CORNERS-MOBILE-FIX-END */

/* FBB-CORNERS-LABEL-FINAL-BEGIN */

/*
 * Hide both original NOVO/NEW spans.
 * The visible label is generated once with ::before.
 */
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill > .fbb-language-pt,

.signals-grid .fbb-corners-signal
.fbb-new-signal-pill > .fbb-language-en {
  display: none !important;
  visibility: hidden !important;
}

/* Portuguese is the default label. */
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill::before {
  content: "NOVO" !important;
}

/* English selected. */
html[lang^="en"]
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill::before,

html[data-lang^="en"]
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill::before,

body[data-lang^="en"]
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill::before {
  content: "NEW" !important;
}

/* Final compact badge style. */
.signals-grid .fbb-corners-signal
.fbb-new-signal-pill {
  grid-column: auto !important;
  grid-row: auto !important;

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

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

  width: auto !important;
  min-width: 58px !important;
  max-width: 74px !important;
  min-height: 31px !important;
  height: 31px !important;

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

  color: #04110d !important;
  -webkit-text-fill-color: #04110d !important;
  text-shadow: none !important;

  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  white-space: nowrap !important;

  border: 1px solid rgba(0, 255, 135, .52) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      135deg,
      #00b1ff,
      #00ff87
    ) !important;

  box-shadow:
    0 7px 16px rgba(0, 177, 255, .18),
    0 0 14px rgba(0, 255, 135, .11) !important;
}

@media (max-width: 560px) {
  .signals-grid .fbb-corners-signal {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      auto !important;

    gap: 11px !important;
  }

  .signals-grid .fbb-corners-signal
  .fbb-new-signal-pill {
    grid-column: 3 !important;
    width: auto !important;
    min-width: 54px !important;
    max-width: 66px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 9px !important;
  }
}

/* FBB-CORNERS-LABEL-FINAL-END */