/* ==========================================================================
   simple-match-card-value.css — karta Value Bet
   Wymaga: simple-match-card.css, match-pick-a3.css, match-form-strip.css
   ========================================================================== */

.simple-match-card--value {
  gap: var(--space-12);
  padding: var(--space-14) var(--space-14) var(--space-12);
}

/* --- Nagłówek: liga + data/godzina --- */
.simple-match-card-value__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .simple-match-card-value__top {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.simple-match-card-value__league {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  flex: 1 1 auto;
}

.simple-match-card-value__league-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.simple-match-card-value__league-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

html[data-theme="light"] .simple-match-card-value__league-img--dark {
  display: none;
}

html[data-theme="dark"] .simple-match-card-value__league-img--light {
  display: none;
}

.simple-match-card-value__league-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.simple-match-card-value__league-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  line-height: 1.2;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-match-card-value__country-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.simple-match-card-value__flag {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  object-fit: cover;
}

.simple-match-card-value__country {
  font-size: var(--fs-12);
  font-weight: var(--fw-400);
  line-height: 1.2;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-match-card-value__schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
}

.simple-match-card-value__date {
  font-size: var(--fs-13);
  font-weight: var(--fw-400);
  color: var(--fg);
}

.simple-match-card-value__time {
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  color: var(--fg);
}

/* --- Siatka drużyn jak simple-match-card --- */
.simple-match-card--value .simple-match-card__form-row {
  justify-content: stretch;
  width: 100%;
  min-width: 6.75rem;
}

.simple-match-card--value .simple-match-card__avg-goals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  font-size: var(--fs-14);
  line-height: 1.2;
  white-space: nowrap;
}

.simple-match-card--value .simple-match-card__avg-label {
  flex: 0 1 auto;
  font-weight: var(--fw-500);
  color: var(--muted-2);
  text-align: left;
}

.simple-match-card--value .simple-match-card__avg-value {
  flex: 0 0 auto;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-600);
  color: var(--fg);
  text-align: right;
}

/* --- Pick: koło · typ · kurs --- */
.simple-match-card-value__pick-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  padding-top: var(--space-8);
}

.simple-match-card-value__pick-row .match-pick-prob {
  flex: 0 0 auto;
}

.simple-match-card-value__pick-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  line-height: 1.25;
  color: var(--fg);
  text-align: center;
}

.simple-match-card-value__pick-title--hit {
  color: #6cd896;
}

.simple-match-card-value__odd-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Value Bet — wynik w score stack (tylko trafienie) */
.simple-match-card--value .simple-match-card__score .match-score-stack__row--hit {
  color: #6cd896;
  font-weight: var(--fw-600);
}

/* --- Stopka: Value · powered by --- */
.simple-match-card-value__footer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  margin-top: auto;
  padding-top: var(--space-4);
}

.simple-match-card-value__edge {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 0 0 auto;
}

.simple-match-card-value__edge-bar {
  --value-edge-bar-width: 11rem;

  flex: 0 0 var(--value-edge-bar-width);
  width: var(--value-edge-bar-width);
}

.simple-match-card-value__edge-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  isolation: isolate;
}

.simple-match-card-value__edge-seg {
  height: 100%;
}

.simple-match-card-value__edge-seg--implied {
  flex: 0 0 auto;
  background: #0000001c;
}

html[data-theme="dark"] .simple-match-card-value__edge-seg--implied {
  background: #ffffff;
}

.simple-match-card-value__edge-seg--gap {
  flex: 1 1 auto;
  min-width: 0;
  background: #ff6b6b;
}

html[data-theme="dark"] .simple-match-card-value__edge-seg--gap {
  background: #ff7b7b;
}

.simple-match-card-value__edge-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  line-height: 1.2;
  color: #ff6b6b;
  white-space: nowrap;
}

html[data-theme="dark"] .simple-match-card-value__edge-label {
  color: #ff7b7b;
}

.simple-match-card-value__edge-icon {
  font-size: 0.9em;
  color: inherit;
}

.simple-match-card-value__footer .simple-match-card__brand {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Value Bet — stopka ukryta przy ścisłych szerokościach kolumn (nie na telefonie) */
@media (min-width: 950px) and (max-width: 1199px) {
  html:not([data-device="phone"]) .simple-match-card-value__footer {
    display: none;
  }
}

@media (min-width: 610px) and (max-width: 814px) {
  html:not([data-device="phone"]) .simple-match-card-value__footer {
    display: none;
  }
}

@media (max-width: 435px) {
  html:not([data-device="phone"]) .simple-match-card-value__footer {
    display: none;
  }
}