/*
 * FindBestBet prediction and correction row.
 */


/* =========================================================
   TWO-COLUMN PICK RESULT ROW
   ========================================================= */

.fbb-pick-result-row {
  width:100%;
  max-width:100%;
  min-width:0;

  margin:
    16px 0 18px;

  display:grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(220px,.7fr);

  align-items:stretch;

  gap:
    12px;
}


.fbb-pick-result-row >
* {
  width:100%;
  min-width:0;
  max-width:100%;

  margin:0 !important;

  box-sizing:border-box;
}


/* =========================================================
   PREDICTION BOX
   ========================================================= */

.prediction-angle-box.fbb-prediction-highlight {
  position:relative;

  min-height:
    126px;

  padding:
    17px 18px !important;

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

  overflow:hidden;

  border:
    1px solid transparent !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      #121823,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #00b1ff 0%,
      #38bdf8 32%,
      #00ff87 68%,
      #8b5cf6 100%
    )
    border-box !important;

  box-shadow:
    0 13px 30px
    rgba(0,0,0,.18),

    0 0 25px
    rgba(0,177,255,.055),

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


.prediction-angle-box.fbb-prediction-highlight::before {
  content:"";

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

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #00b1ff,
      #00ff87,
      transparent
    );

  opacity:.9;
}


.prediction-angle-box.fbb-prediction-highlight
.label {
  margin:
    0 0 9px !important;

  color:
    #9eacb9 !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .075em !important;

  text-transform:
    uppercase;
}


.prediction-angle-box.fbb-prediction-highlight
.angle-value,

.prediction-angle-box.fbb-prediction-highlight
#mainPick {
  margin:0 !important;

  color:
    #38bdf8 !important;

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

  font-size:
    clamp(
      25px,
      2.6vw,
      35px
    ) !important;

  font-weight:
    750 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -.015em !important;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   CORRECTION BOX
   ========================================================= */

#fbbPredictionCorrectionBox {
  position:relative;

  min-height:
    126px;

  padding:
    17px 16px;

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

  overflow:hidden;

  border:
    1px solid transparent;

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      #121823,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #8b5cf6,
      #38bdf8
    )
    border-box;

  box-shadow:
    0 13px 30px
    rgba(0,0,0,.18),

    inset 0 1px 0
    rgba(255,255,255,.04);
}


#fbbPredictionCorrectionBox::before {
  content:"";

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

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #8b5cf6,
      #38bdf8,
      transparent
    );
}


#fbbPredictionCorrectionBox
.fbb-correction-label {
  margin:
    0 0 9px;

  color:
    #9eacb9;

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    .075em;

  text-transform:
    uppercase;
}


#fbbPredictionCorrectionBox
.fbb-correction-value {
  color:
    #c4b5fd;

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

  font-size:
    clamp(
      22px,
      2.1vw,
      29px
    );

  font-weight:
    750;

  line-height:
    1.1;
}


#fbbPredictionCorrectionBox
.fbb-correction-score {
  margin-top:
    6px;

  color:
    #f8fafc;

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1.3;
}


#fbbPredictionCorrectionBox
.fbb-correction-meta {
  margin-top:
    8px;

  color:
    #8495a5;

  font-size:
    10px;

  line-height:
    1.4;
}


/* Pending */

#fbbPredictionCorrectionBox[
  data-result-state="pending"
] {
  background:
    linear-gradient(
      145deg,
      #121823,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #8b5cf6,
      #38bdf8
    )
    border-box;
}


/* Correct prediction */

#fbbPredictionCorrectionBox[
  data-result-state="won"
] {
  background:
    linear-gradient(
      145deg,
      #101c1a,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #00ff87,
      #34d399
    )
    border-box;

  box-shadow:
    0 13px 30px
    rgba(0,0,0,.18),

    0 0 26px
    rgba(0,255,135,.075);
}


#fbbPredictionCorrectionBox[
  data-result-state="won"
]
.fbb-correction-value {
  color:
    #34d399;
}


/* Incorrect prediction */

#fbbPredictionCorrectionBox[
  data-result-state="lost"
] {
  background:
    linear-gradient(
      145deg,
      #201419,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #fb7185,
      #ff4d5a
    )
    border-box;
}


#fbbPredictionCorrectionBox[
  data-result-state="lost"
]
.fbb-correction-value {
  color:
    #fb7185;
}


/* Void/refunded */

#fbbPredictionCorrectionBox[
  data-result-state="void"
] {
  background:
    linear-gradient(
      145deg,
      #211c11,
      #101722
    )
    padding-box,

    linear-gradient(
      125deg,
      #fbbf24,
      #f59e0b
    )
    border-box;
}


#fbbPredictionCorrectionBox[
  data-result-state="void"
]
.fbb-correction-value {
  color:
    #fbbf24;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:760px) {
  .fbb-pick-result-row {
    grid-template-columns:
      minmax(0,1fr);

    gap:
      10px;

    margin:
      14px 0 16px;
  }


  .prediction-angle-box.fbb-prediction-highlight,
  #fbbPredictionCorrectionBox {
    min-height:
      108px;

    padding:
      15px 13px !important;

    border-radius:
      14px !important;
  }


  .prediction-angle-box.fbb-prediction-highlight
  .angle-value,

  .prediction-angle-box.fbb-prediction-highlight
  #mainPick {
    font-size:
      25px !important;
  }


  #fbbPredictionCorrectionBox
  .fbb-correction-value {
    font-size:
      23px;
  }
}