/* Theme Overwrites */
#block-ke-frontend-content p {
  font-size: 1rem !important;
}

.ke-odds .btn {
  border-radius: 0 !important;
  padding: .75rem 1.5rem !important;
  border-width: .0625rem !important;
  transition: .3s !important;
  font-family: Open Sans, sans-serif !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  margin: .15rem;
}

.ke-odds .btn-primary-solid {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--light) !important;
  box-shadow: none !important;
}

.ke-odds .btn-primary-solid:hover {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
}

.ke-odds .btn-outline-primary {
  background: none;
  color: var(--primary);
  border-color: var(--primary);
}

.ke-odds .btn-primary:hover {
  background: var(--primary-shade-01) !important;
  border-color: var(--primary-shade-01) !important;
  color: var(--light);
}

/*.lead {*/
/*  !*slightly larger text used for intro paragraphs*!*/
/*  font-size: 1.25rem;*/
/*  font-weight: normal;*/
/*}*/


/* ── Selector bar ─────────────────────────────────────────── */
.ke-odds__selector-bar {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  margin-bottom: 6px;
  overflow: hidden;
}

.form-select {

}

#ke-odds-race-select {
  padding: 0;
  font-weight: 700;
  font-size: .85rem;
  background-position: right 0.55rem center !important;
  /*padding-left: 6px !important;*/
  color: #262626 !important;
}

.ke-odds__showing-label {
  font-size: 16px;
  font-weight: bolder;
  opacity: .65;
  text-transform: uppercase;
  color: var(--dark);
  /*font-size: 0.9rem;*/
  /*font-weight: 700;*/
  /*letter-spacing: 0.08em;*/
  /*white-space: nowrap;*/
  /*color: #666666 !important;*/
}

.ke-odds__race-select {
  min-width: 80px;
  border: none !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #262626 !important;
}

.ke-odds__selector-bar small {
  color: var(--bs-gray-600);
}

/* ── List container ───────────────────────────────────────── */
.ke-odds__list {
  overflow: hidden;
}

.ke-odds__list--stale {
  opacity: 0.7;
}

/* ── Horse row ────────────────────────────────────────────── */
/* Now a Bootstrap .row — no custom flex needed for layout.    */
.ke-odds__horse-row {
  border-top: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
  overflow: hidden;
}

/* ── Program number block ─────────────────────────────────── */
.ke-odds__prog-block {
  font-family: Quincy CF, Quincy, serif !important;
  flex: 0 0 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ke-odds__prog-block {
    height: 65px !important;
  }
}

/* ── Horse name ───────────────────────────────────────────── */
.ke-odds__horse-info {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  min-width: 0;
}

.ke-odds__horse-name {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Odds group ───────────────────────────────────────────── */
/* Wraps all odds cells into a single flex child of the row.
   flex: 0 0 auto means it takes exactly as much space as its
   contents need and never shrinks — so when it doesn't fit
   on the same line as the horse name, the whole group wraps
   to the next line together.                                 */
.ke-odds__odds-group {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Odds cells ───────────────────────────────────────────── */
/* On md+ the cells keep a fixed width via flex-basis.
   On mobile, Bootstrap col-12 + flex-fill shares space equally. */
.ke-odds__odds-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f4f1f0;
  padding: 8px 10px;
  text-align: center;
}

.ke-odds__cell-label {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  /*text-transform: uppercase;*/
  letter-spacing: 0.05em;
  color: #777;
}

.ke-odds__cell-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}

.ke-odds__cell-value--empty {
  color: #aaa;
  font-weight: 400;
}

.ke-odds__odds-cell--first .ke-odds__cell-value {
  color: #197d5c !important;
}

@media (min-width: 768px) {
  .ke-odds__odds-cell {
    flex: 1 1 0 !important; /* share the column equally instead of fixed 170px */
  }
}

/* ── Mobile: add a top border on the odds row ─────────────── */
@media (max-width: 767px) {
  .ke-odds__odds-cell {
    padding: 8px 6px;
    border-top: 1px solid #c2c2c2;
  }
}

/* ── Flash animation ──────────────────────────────────────── */
@keyframes ke-odds-flash {
  0% {
    background-color: #f4c542;
    color: #000;
  }
  100% {
    background-color: transparent;
    color: #000;
  }
}

.ke-odds__cell-value--changed {
  animation: ke-odds-flash 1.5s ease-out;
}

/* ── Mobile layout ────────────────────────────────────────── */
/* Force the odds group to 100% width so it always sits on its
   own line below the prog block and horse name. The horse-info
   fills the remaining space on line 1 next to the prog block. */
@media (max-width: 767px) {

  .ke-odds__horse-info {
    flex: 1 1 auto; /* fills line 1 after the 65px prog block */
  }

  /* 100% width forces the group to its own line */
  .ke-odds__odds-group {
    flex: 0 0 100%;
    border-top: 1px solid #c2c2c2;
  }

  /* Each cell shares that full width equally */
  .ke-odds__odds-cell {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 8px 6px;
  }
}

/* ── Empty state ──────────────────────────────────────────── */
.ke-odds__empty {
  color: #888;
  padding: 20px;
}

/* ── Pause button ─────────────────────────────────────────── */
.ke-odds__pause-btn {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #555;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  margin-left: 12px;
  transition: border-color 0.2s, color 0.2s;
}

.ke-odds__pause-btn:hover {
  border-color: #f4c542;
  color: #f4c542;
}

.ke-odds__pause-btn--paused {
  border-color: #e65100;
  color: #e65100;
}

.ke-odds__pause-btn--paused:hover {
  border-color: #ff8a00;
  color: #ff8a00;
}

/* ── Status states ────────────────────────────────────────── */
.ke-odds__status--fresh {
  color: #4caf50;
}

.ke-odds__status--stale {
  color: #f44336;
}

.ke-odds__status--paused {
  color: #e65100;
}


@media (max-width: 767px) {
  .ke-odds__showing-label {
    white-space: normal;
  }
}

/* ── Null States ────────────────────────────────────────── */
.light-grey-text {
  color: var(--bs-gray-600);
}