/* Bet2 — Advanced Markets UI (Event detail + inline expand) */

/* ---------- Match-row wrapper with inline expand chevron ---------- */
.bs-rowwrap { display: flex; flex-direction: column; }
.bs-rowwrap .row-line { display: flex; align-items: stretch; }
.bs-rowwrap .row-line > .bs-row { flex: 1 1 auto; min-width: 0; }
.bs-rowwrap .row-line > .exp-btn {
  flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  border: none;
  border-left: 1px solid rgba(191,0,255,.15);
  color: #ffd700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bs-rowwrap .row-line > .exp-btn:hover {
  background: rgba(191,0,255,.18);
}
.bs-rowwrap .row-line > .exp-btn .fa-chevron-down { transition: transform .25s; font-size: 11px; }
.bs-rowwrap.expanded .row-line > .exp-btn .fa-chevron-down { transform: rotate(180deg); }
.bs-rowwrap.expanded .row-line > .exp-btn { background: rgba(255,215,0,.15); }
.bs-rowwrap.expanded .row-line > .bs-row { background: rgba(191,0,255,.06); }

@media (max-width: 1023px) {
  .bs-rowwrap .row-line { flex-wrap: wrap; }
  .bs-rowwrap .row-line > .exp-btn {
    flex: 0 0 100%;
    height: 28px;
    border-left: none;
    border-top: 1px solid rgba(191,0,255,.15);
  }
}

/* ---------- Inline expanded panel ---------- */
.bs-expand {
  background: linear-gradient(180deg, rgba(20,8,32,.92), rgba(8,4,16,.92));
  border-top: 1px solid rgba(191,0,255,.25);
  border-bottom: 1px solid rgba(191,0,255,.25);
  padding: 10px 12px;
  animation: bsExpand .22s ease;
}
@keyframes bsExpand {
  from { opacity: 0; max-height: 0; padding-top:0; padding-bottom:0; }
  to   { opacity: 1; max-height: 4000px; }
}

/* ---------- Market navigation tabs ---------- */
.mkt-tabs {
  display: flex; gap: 0;
  overflow-x: auto;
  background: linear-gradient(180deg, rgba(10,14,22,.95), rgba(6,10,18,.95));
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 8px;
  scroll-behavior: smooth;
  position: sticky; top: 0; z-index: 5;
}
.mkt-tabs::-webkit-scrollbar { height: 4px; }
.mkt-tabs::-webkit-scrollbar-thumb { background: #38bdf855; border-radius: 2px; }

.mkt-tab {
  flex: none;
  padding: 10px 18px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #94a3b8;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.mkt-tab:hover { color: #e2e8f0; background: rgba(56,189,248,.06); }
.mkt-tab.active {
  color: #38bdf8;
  background: rgba(56,189,248,.04);
  border-bottom-color: #38bdf8;
}
.mkt-tab .tab-ico { font-size: 11px; opacity: .8; }
.mkt-tab.active .tab-ico { opacity: 1; }

/* ---------- Market block (collapsible, smooth accordion) ---------- */
.mkt-block {
  background: rgba(8,12,20,.65);
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 8px;
  margin-top: 6px;
  overflow: hidden;
}
.mkt-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(15,23,42,.85), rgba(8,12,20,.65));
  border-bottom: 1px solid rgba(56,189,248,.18);
  cursor: pointer;
  user-select: none;
}
.mkt-head:hover { background: linear-gradient(90deg, rgba(15,23,42,1), rgba(8,12,20,.85)); }
.mkt-head .mkt-title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #e2e8f0; }
.mkt-head .mkt-fav {
  background: transparent; border: 0; cursor: pointer;
  color: #475569; font-size: 13px;
  transition: color .15s, transform .15s;
  padding: 2px;
}
.mkt-head .mkt-fav:hover { color: #facc15; transform: scale(1.18); }
.mkt-head .mkt-fav.is-fav { color: #facc15; text-shadow: 0 0 8px #facc1588; }
.mkt-head .mkt-toggle { color: #94a3b8; font-size: 11px; transition: transform .25s; }
.mkt-block.collapsed .mkt-toggle { transform: rotate(-90deg); }
.mkt-body {
  padding: 8px;
  max-height: 4000px;
  transition: max-height .28s ease, padding .25s ease, opacity .2s ease;
  opacity: 1;
  overflow: hidden;
}
.mkt-block.collapsed .mkt-body {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
}

/* Layout 3-way (1-X-2) */
.mkt-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
/* Layout 2-way (Over/Under, GG/NG) */
.mkt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
/* Layout multi (small grid) */
.mkt-grid-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
/* Layout popular (full-width single column) */
.mkt-grid-popular { display: grid; grid-template-columns: 1fr; gap: 4px; }
/* Layout combo (variable column count via --cc) */
.mkt-grid-combo { display: grid; grid-template-columns: repeat(var(--cc, 2), minmax(0,1fr)); gap: 4px; }
@media (max-width: 720px) {
  .mkt-grid-combo { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Outcome button — pro blue/cyan theme matching the screenshots */
.mkt-out {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  background: linear-gradient(180deg, #0d7ea3, #0a6386);
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: background .12s, transform .08s, box-shadow .15s;
  min-height: 40px;
  font-weight: 600;
}
.mkt-out:hover {
  background: linear-gradient(180deg, #1295bd, #0d7ea3);
  box-shadow: 0 0 0 1px #38bdf8 inset, 0 0 12px #38bdf855;
}
.mkt-out:active { transform: scale(.97); }
.mkt-out .out-name { color: #fff; font-weight: 600; opacity: .95; text-align: left; }
.mkt-out .out-val  { color: #fff; font-weight: 800; font-size: 14px; }
.mkt-out.mkt-out-full { padding: 12px 16px; }
.mkt-out.locked {
  background: linear-gradient(180deg, #0d7ea3, #0a6386);
  filter: brightness(.78) saturate(.85);
  pointer-events: none;
}
.mkt-out.locked .locked-ico { font-size: 14px; opacity: .9; }
.mkt-out.odd-active {
  background: linear-gradient(180deg, #facc15, #eab308) !important;
  color: #0a0a0c !important;
  box-shadow: 0 0 0 1px #facc15 inset, 0 0 14px #facc1566;
}
.mkt-out.odd-active .out-name,
.mkt-out.odd-active .out-val { color: #0a0a0c !important; }
.mkt-out.flash-up   { animation: bsFlashUp 1s ease; }
.mkt-out.flash-down { animation: bsFlashDown 1s ease; }
@keyframes bsFlashUp   { 0% { box-shadow: 0 0 0 2px #10b981 inset, 0 0 16px #10b981aa; } 100% {} }
@keyframes bsFlashDown { 0% { box-shadow: 0 0 0 2px #ef4444 inset, 0 0 16px #ef4444aa; } 100% {} }

/* ---------- Total slider ---------- */
.mkt-slider-wrap { padding: 6px 4px 0; }
.mkt-slider-track {
  position: relative; height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  margin: 14px 6px 6px;
}
.mkt-slider-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  border-radius: 999px;
}
.mkt-slider-thumb {
  position: absolute; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.25), 0 0 10px #38bdf8aa;
  transform: translate(-50%, -50%);
  cursor: grab; touch-action: none;
}
.mkt-slider-thumb:active { cursor: grabbing; }
.mkt-slider-label {
  position: absolute; top: -22px;
  transform: translateX(-50%);
  background: rgba(56,189,248,.18);
  border: 1px solid rgba(56,189,248,.5);
  color: #38bdf8;
  font-size: 11px; font-weight: 800;
  padding: 1px 8px; border-radius: 4px;
  pointer-events: none;
}
.mkt-slider-ticks {
  display: flex; justify-content: space-between;
  padding: 4px 0 2px;
  font-size: 10px; color: #6b7280; font-weight: 700;
}
.mkt-slider-ticks span { cursor: pointer; padding: 1px 4px; border-radius: 3px; transition: all .12s; }
.mkt-slider-ticks span:hover { color: #38bdf8; }
.mkt-slider-ticks span.active { color: #38bdf8; background: rgba(56,189,248,.12); }

/* ---------- Teams section header ---------- */
.teams-section + .teams-section { margin-top: 10px; }
.teams-section-head {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(15,23,42,.95), rgba(8,12,20,.7));
  border: 1px solid rgba(56,189,248,.25);
  border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #38bdf8; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.teams-section .mkt-block { margin-top: 4px; }

/* ---------- Correct Score picker ---------- */
.cs-picker { padding: 14px 10px 6px; background: rgba(15,23,42,.4); border-radius: 6px; }
.cs-row {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 22%) 1fr;
  gap: 12px;
  align-items: center;
}
@media (max-width: 720px) {
  .cs-row { grid-template-columns: 1fr; }
  .cs-side { order: 1; }
  .cs-center { order: 0; }
}
.cs-side-name {
  text-align: center;
  font-size: 11px; font-weight: 700; color: #cbd5e1;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.cs-dots {
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
  position: relative;
}
.cs-dots::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 50%;
  height: 2px; background: rgba(148,163,184,.25);
  z-index: 0;
}
.cs-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #1e293b;
  color: #cbd5e1;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.cs-dot:hover { background: #475569; transform: scale(1.1); }
.cs-dot.active {
  background: #38bdf8;
  border-color: #0ea5e9;
  color: #0a0a0c;
  box-shadow: 0 0 0 3px rgba(56,189,248,.25), 0 0 10px #38bdf8aa;
}
.cs-center .mkt-out { width: 100%; }

/* Empty state */
.mkt-empty {
  padding: 30px 16px;
  text-align: center;
  color: #6b7280;
  background: rgba(8,12,20,.5);
  border: 1px dashed rgba(56,189,248,.25);
  border-radius: 8px;
  font-size: 12px;
}
.mkt-empty--soft {
  padding: 8px 12px;
  text-align: left;
  color: #93c5fd;
  background: rgba(56,189,248,.08);
  border-style: solid;
  border-color: rgba(56,189,248,.25);
  font-size: 11px;
  margin-bottom: 6px;
}
.mkt-empty--soft i { margin-right: 6px; color: #38bdf8; }

/* Combo block — header tweak */
.combo-block .mkt-head .mkt-title::after {
  content: 'COMBO';
  font-size: 9px; font-weight: 900; letter-spacing: .12em;
  color: #38bdf8;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.4);
  padding: 2px 6px; border-radius: 3px;
  margin-left: 4px;
}

/* Fast market badge */
.fast-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(239,68,68,.18); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.4);
  margin-left: 6px;
}