/*
 * FindBestBet Football API Match Center header.
 * Text-first rendering with no team-logo dependency.
 */

.premium-score-box.fbb-api-match-header {
  position:relative;

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

  margin:
    18px 0 14px !important;

  padding:
    0 !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(56,189,248,.22) !important;

  border-radius:
    19px !important;

  background:
    linear-gradient(
      145deg,
      rgba(18,24,35,.98),
      rgba(9,18,27,.98)
    ) !important;

  box-shadow:
    0 17px 42px
    rgba(0,0,0,.24),

    inset 0 1px 0
    rgba(255,255,255,.035) !important;
}


.premium-score-box.fbb-api-match-header::before {
  content:"";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      #00b1ff,
      #00ff87,
      #8b5cf6
    );
}


/* Header bar */

.fbb-api-match-topline {
  width:100%;

  min-height:
    45px;

  padding:
    11px 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:
    10px;

  border-bottom:
    1px solid
    rgba(148,163,184,.10);

  background:
    rgba(4,12,20,.42);
}


.fbb-api-match-competition {
  min-width:0;

  color:
    #cbd5e1;

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1.25;

  letter-spacing:
    .035em;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.fbb-api-match-status {
  flex:
    0 0 auto;

  min-height:
    26px;

  padding:
    5px 9px;

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

  border:
    1px solid
    rgba(56,189,248,.27);

  border-radius:
    999px;

  background:
    rgba(56,189,248,.08);

  color:
    #7dd3fc;

  font-size:
    9px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.fbb-api-match-status[data-state="live"] {
  border-color:
    rgba(255,77,90,.45);

  background:
    rgba(255,77,90,.12);

  color:
    #ff7b86;

  animation:
    fbbApiLivePulse
    1.4s
    ease-in-out
    infinite;
}


.fbb-api-match-status[data-state="finished"] {
  border-color:
    rgba(52,211,153,.35);

  background:
    rgba(52,211,153,.09);

  color:
    #34d399;
}


@keyframes fbbApiLivePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0
      rgba(255,77,90,0);
  }

  50% {
    box-shadow:
      0 0 0 5px
      rgba(255,77,90,.09);
  }
}


/* Main matchup */

.fbb-api-match-main {
  width:100%;

  padding:
    19px 15px 17px;

  display:grid;

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

  align-items:center;

  gap:
    14px;
}


.fbb-api-team {
  min-width:0;

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

  gap:
    7px;

  text-align:center;
}


.fbb-api-team-badge {
  width:
    58px;

  height:
    58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(56,189,248,.24);

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(56,189,248,.13),
      rgba(139,92,246,.07)
    );

  color:
    #ffffff;

  font-family:
    "Oswald",
    "Arial Narrow",
    sans-serif;

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .035em;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05);
}


.fbb-api-team.away
.fbb-api-team-badge {
  border-color:
    rgba(0,255,135,.25);

  background:
    linear-gradient(
      145deg,
      rgba(0,255,135,.11),
      rgba(56,189,248,.07)
    );
}


.fbb-api-team-name {
  width:100%;
  min-width:0;

  color:
    #ffffff;

  font-family:
    "Oswald",
    "Arial Narrow",
    sans-serif;

  font-size:
    clamp(18px,2vw,24px);

  font-weight:
    750;

  line-height:
    1.15;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.fbb-api-team-position {
  min-height:
    17px;

  color:
    #8fa0b1;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.25;
}


.fbb-api-team-form {
  min-height:
    20px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:
    4px;
}


.fbb-api-form-result {
  width:
    19px;

  height:
    19px;

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

  border-radius:
    50%;

  color:
    #081017;

  font-size:
    8px;

  font-weight:
    950;

  line-height:
    1;
}


.fbb-api-form-result.w {
  background:
    #34d399;
}


.fbb-api-form-result.d {
  background:
    #fbbf24;
}


.fbb-api-form-result.l {
  background:
    #fb7185;
}


/* Center score */

.fbb-api-match-center {
  min-width:0;

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

  gap:
    8px;

  text-align:center;
}


#scoreCenterScore.fbb-api-score {
  width:100%;

  color:
    #00ff87 !important;

  font-family:
    "Oswald",
    "Arial Narrow",
    sans-serif !important;

  font-size:
    clamp(31px,3.3vw,45px) !important;

  font-weight:
    850 !important;

  line-height:
    1 !important;

  letter-spacing:
    .02em !important;

  white-space:
    nowrap;
}


.fbb-api-kickoff {
  color:
    #cbd5e1;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.35;
}


.fbb-api-kickoff-date,
.fbb-api-kickoff-time {
  white-space:
    nowrap;
}


.fbb-api-kickoff-separator {
  margin:
    0 3px;

  color:
    #475569;
}


/* Match metadata */

.fbb-api-match-meta {
  width:100%;

  padding:
    11px 13px 13px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:
    7px;

  border-top:
    1px solid
    rgba(148,163,184,.09);
}


.fbb-api-meta-chip {
  min-height:
    31px;

  padding:
    6px 10px;

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

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

  border-radius:
    999px;

  background:
    rgba(15,23,34,.68);

  color:
    #aebdca;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.25;

  text-align:center;
}


/* Hide any legacy metadata row left outside the old score box. */

[data-fbb-legacy-score-meta="hidden"] {
  display:none !important;
}


/* Mobile */

@media(max-width:680px) {
  .premium-score-box.fbb-api-match-header {
    margin:
      15px 0 12px !important;

    border-radius:
      16px !important;
  }


  .fbb-api-match-topline {
    min-height:
      42px;

    padding:
      9px 10px;
  }


  .fbb-api-match-competition {
    font-size:
      9px;
  }


  .fbb-api-match-status {
    padding:
      5px 7px;

    font-size:
      8px;
  }


  .fbb-api-match-main {
    padding:
      16px 7px 14px;

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

    gap:
      5px;
  }


  .fbb-api-team {
    gap:
      6px;
  }


  .fbb-api-team-badge {
    width:
      47px;

    height:
      47px;

    border-radius:
      13px;

    font-size:
      15px;
  }


  .fbb-api-team-name {
    font-size:
      15px;
  }


  .fbb-api-team-position {
    font-size:
      8px;
  }


  .fbb-api-team-form {
    gap:
      3px;
  }


  .fbb-api-form-result {
    width:
      16px;

    height:
      16px;

    font-size:
      7px;
  }


  #scoreCenterScore.fbb-api-score {
    font-size:
      27px !important;
  }


  .fbb-api-kickoff {
    font-size:
      8px;
  }


  .fbb-api-match-meta {
    padding:
      10px 8px 11px;

    display:grid;

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

    gap:
      6px;
  }


  .fbb-api-meta-chip {
    width:100%;
    min-width:0;

    padding:
      6px 5px;

    font-size:
      8px;

    white-space:
      normal;
  }


  .fbb-api-meta-chip:last-child:nth-child(odd) {
    grid-column:
      1 / -1;
  }
}


@media(prefers-reduced-motion:reduce) {
  .fbb-api-match-status[data-state="live"] {
    animation:none;
  }
}


/* =========================================================
   API-FOOTBALL LOCAL LOGOS — INSTANT RENDER
   ========================================================= */

.fbb-api-match-header
.fbb-api-team-badge {
  position:
    relative !important;

  padding:
    6px !important;

  overflow:
    hidden !important;
}


.fbb-api-match-header
.fbb-api-team-initials {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  font-family:
    "Oswald",
    "Arial Narrow",
    sans-serif;

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1;

  z-index:
    1;
}


.fbb-api-match-header
.fbb-api-team-logo {
  position:
    relative !important;

  z-index:
    2 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    46px !important;

  max-height:
    46px !important;

  margin:
    auto !important;

  padding:
    0 !important;

  display:
    block !important;

  object-fit:
    contain !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  filter:
    none !important;

  transform:
    none !important;

  background:
    transparent !important;
}


@media(max-width:680px) {
  .fbb-api-match-header
  .fbb-api-team-logo {
    max-width:
      37px !important;

    max-height:
      37px !important;
  }


  .fbb-api-match-header
  .fbb-api-team-initials {
    font-size:
      15px;
  }
}


/* =========================================================
   API-FOOTBALL LOCAL LOGOS — INSTANT RENDER
   ========================================================= */

.fbb-api-match-header
.fbb-api-team-badge {
  position:
    relative !important;

  padding:
    6px !important;

  overflow:
    hidden !important;
}


.fbb-api-match-header
.fbb-api-team-initials {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  font-family:
    "Oswald",
    "Arial Narrow",
    sans-serif;

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1;

  z-index:
    1;
}


.fbb-api-match-header
.fbb-api-team-logo {
  position:
    relative !important;

  z-index:
    2 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    46px !important;

  max-height:
    46px !important;

  margin:
    auto !important;

  padding:
    0 !important;

  display:
    block !important;

  object-fit:
    contain !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  filter:
    none !important;

  transform:
    none !important;

  background:
    transparent !important;
}


@media(max-width:680px) {
  .fbb-api-match-header
  .fbb-api-team-logo {
    max-width:
      37px !important;

    max-height:
      37px !important;
  }


  .fbb-api-match-header
  .fbb-api-team-initials {
    font-size:
      15px;
  }
}