/* ============================= */
/* BETSEARCH THEME VARIABLES */
/* ============================= */

:root{

--bs-bg:#07111f;
--bs-card:#0c1830;
--bs-border:rgba(255,255,255,0.06);

--bs-primary:#47d7ff;
--bs-secondary:#8a5cff;

--bs-value:#00ffbf;
--bs-warning:#ffc857;

--bs-text:#e9f1ff;
--bs-text-soft:#8aa2c8;

}

/* ============================= */
/* LAYOUT */
/* ============================= */

.bs-layout{

display:grid;
grid-template-columns: 855px 1fr;
gap:12px;
align-items:start;

}

@media(max-width:900px){

.bs-layout{
grid-template-columns:1fr;
}

.bs-match-details{
margin-top:20px;
}

}

/* ============================= */
/* ANALYSES COUNT */
/* ============================= */

.bs-analyses-count{

margin-bottom:14px;
font-size:13px;
color:#8fa7bf;

}

/* ============================= */
/* MATCH SCANNER LIST */
/* ============================= */

.bs-match-list{

background:var(--bs-card);
border-radius:16px;
overflow:hidden;

}

/* HEADER */

/* HEADER */

.bs-match-header{
background:linear-gradient(
180deg,
#061424 0%,
#051221 100%);
display:grid;

grid-template-columns:
40px
70px
2fr
190px
110px
110px
140px
120px;

align-items:center;

padding:12px 14px;

font-size:10px;
font-weight:600;

letter-spacing:.12em;
text-transform:uppercase;

color:#8fb4da;
border-bottom:1px solid #1f3a5c;

}

/* ROW */

.bs-match-row{

display:grid;

grid-template-columns:
40px
70px
2fr
190px
110px
110px
140px
120px;
align-items:center;
padding:10px 14px;
border-bottom:1px solid #1b3555;
cursor:pointer;
font-size:13px;
color:#9fb4c9;
transition:background .15s ease;

}

.bs-match-row:hover .bs-match{
color:#4dd0e1;
}

/* desktop align */

.bs-match-header span:nth-child(2),
.bs-match-header span:nth-child(3),
.bs-match-header span:nth-child(4),
.bs-match-header span:nth-child(5),
.bs-match-header span:nth-child(6),
.bs-match-header span:nth-child(7),
.bs-match-header span:nth-child(8){
text-align:center;
}

.bs-match-row span:nth-child(2),
.bs-match-row span:nth-child(3),
.bs-match-row span:nth-child(4),
.bs-match-row span:nth-child(5),
.bs-match-row span:nth-child(6),
.bs-match-row span:nth-child(7),
.bs-match-row span:nth-child(8){
text-align:center;
}


.bs-match-row:hover{
background:#0c2744;
}

.bs-match-row.active{
background:#0f2a47;
}

/* MATCH */

.bs-match{

font-weight:600;
color:#dce9ff;

}

/* PICK */

.bs-pick{

font-size:13px;
font-weight:700;
color:#6ea8ff;
letter-spacing:.2px;
background: linear-gradient(90deg,#6ea8ff,#8a5cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



/* ODDS */

.bs-odds{
text-align:center;
}


/* VALUE */

.bs-value{
color:var(--bs-value);
font-weight:600;
text-align:center;
}

/* STAKE */

.bs-stake{
color:#ffc857;
text-align:center;
}

/* SIGNALS */

.bs-signals{
display:flex;
gap:6px;
justify-content:center;
font-size:14px;
}

/* FLAG */

.bs-flag{
width:16px;
height:16px;
}

/* ALIGN */

.bs-country,
.bs-time{
text-align:center;
}

/* ============================= */
/* MATCH DETAILS */
/* ============================= */

.bs-match-details{
padding:0px;
}

.bs-match-details .bs-card{
margin-top:0;
}

/* ============================= */
/* CARD */
/* ============================= */

.bs-card{

background:var(--bs-card);
border-radius:16px;
padding:16px;
border:1px solid var(--bs-border);
display:flex;
flex-direction:column;
gap:12px;
position:relative;
transition:all .25s ease;

}

.bs-card:hover{

border-color:rgba(71,215,255,0.35);
transform:translateY(-3px);

}

.bs-pick-badge{

font-size:10px;
padding:4px 8px;

border-radius:6px;

font-weight:600;
letter-spacing:.08em;

}

.bs-pick-smart{

background:#2b2148;
color:#a78bfa;

}

.bs-pick-safe{

background:#1e2a3f;
color:#8fa7bf;

}

.bs-pick-value{

background:#0e3a2e;
color:#00ffa6;

}

.bs-insights-ai{
padding:8px 8px;
border-radius:6px;
font-size:13px;
color:#9fb4c9;
margin-bottom:14px;
    display:flex;
    flex-direction:column;
    gap:4px;
    background:rgba(76,201,240,0.05);
border-left:3px solid #4cc9f0;
}

/* CARD */
.bs-ai-card{

font-size:13px;
color:#9fb4c9;
margin-bottom:4px;

   
}

/* hover = premium feel */
.bs-ai-card:hover{
    border-color:#00ffbf;
    box-shadow:0 0 10px rgba(0,255,191,0.15);
}

/* liczby */
.bs-num{
    color:#00ffbf;
    font-weight:500;
}
/* ============================= */
/* CARD HEADER */
/* ============================= */

.bs-match-row-full{

align-items:center;
font-weight:700;
font-size:16px;
color:#dce9ff;
}

.bs-card-head{

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

font-size:12px;

color:var(--bs-text-soft);

}

.bs-league{

text-transform:uppercase;
letter-spacing:.08em;

}

/* ============================= */
/* PICK */
/* ============================= */

.bs-pick-row{
display:flex;
justify-content:space-between;
align-items:center;
margin:6px 0;
}

.bs-pick-market{
font-size:20px;
font-weight:700;
color:#18f2b2;
letter-spacing:1px;
}

.bs-pick-stars{
color:#ffc857;
font-size:16px;
}

/* ============================= */
/* STATS */
/* ============================= */

.bs-stats-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;

}

.bs-stat-box{

background:#132a46;
border-radius:10px;
padding:10px;
text-align:center;
color:#fff;

}

.bs-stat-k{
display:block;
font-size:11px;
color:#8fa7bf;
margin-bottom:3px;
}

.bs-stat-v{
font-size:18px;
font-weight:700;
color:#fff;
}

.bs-positive{
color:#00ffa6;
}

/* ============================= */
/* AI INSIGHT */
/* ============================= */

.bs-ai-insight{

background:rgba(76,201,240,0.05);

border-left:3px solid #4cc9f0;

padding:8px 10px;

border-radius:6px;

font-size:13px;

color:#9fb4c9;

margin-bottom:14px;

}


/* ============================= */
/* METRICS */
/* ============================= */

.bs-team-metric-title{

margin-top:3px;
margin-bottom:8px;
font-weight:600;
color:#8ddfff;
font-size:13px;

text-transform:uppercase;
letter-spacing:0.5px;

}

.bs-global-metric{

display:grid;
grid-template-columns:70px 1fr 35px;

align-items:center;
gap:8px;

font-size:12px;

margin-bottom:2px;

color:#9bb7d4;

}

.bs-bar{

flex:1;
height:8px;

background:#142642;

border-radius:20px;
overflow:hidden;

}

.bs-bar-fill{

height:100%;

background:linear-gradient(90deg,#4dd0e1,#7a5cff);

border-radius:20px;

}

.bs-global-value{

text-align:right;
font-weight:600;
color:#4dd0e1;

}

/* ============================= */
/* TEAM METRIC */
/* ============================= */

.bs-team-metric{

display:grid;
grid-template-columns:70px 1fr 35px;
align-items:center;
gap:8px;
font-size:12px;
margin-bottom:2px;
color:#9bb7d4;

}

/* ============================= */
/* MATCH CONTROL (SPLIT BAR) */
/* ============================= */

.bs-match-control{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
}

/* TEAM */
.bs-team-badge{
    font-size:11px;
    padding:4px 6px;
    border-radius:6px;
    background:#0c1830;
    color:#8aa2c8;
    white-space:nowrap;
}

/* BAR */
.bs-mci-bar{
    position:relative;
    flex:1;
    height:8px;
    border-radius:6px;
    overflow:hidden;
    display:flex;
    background:#13263f;
}



/* ŚRODEK (50) */
.bs-mci-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:2px;
    height:12px;
    background:#ffffff;
    opacity:0.3;
}

.bs-mci-home{
    background:linear-gradient(90deg,#ffb347,#ff7a18);
}

.bs-mci-away{
background:linear-gradient(90deg,#00ffbf,#00bfff);
}


/* HOME */
.bs-team-badge.home{
    background:linear-gradient(90deg,#ffb347,#ff7a18);
    color:#001;
   
}

/* AWAY */
.bs-team-badge.away{
    background:linear-gradient(90deg,#00ffbf,#00bfff);
    color:#001;
}

/* HOME */
.bs-team-badge.home.active{
    box-shadow:
        0 0 8px rgba(255,179,71,0.8),
        0 0 8px rgba(255,122,24,0.6);
}

/* AWAY */
.bs-team-badge.away.active{
    box-shadow:
        0 0 8px rgba(0,255,191,0.8),
        0 0 8px rgba(0,255,191,0.5);
}

.mobile { display:none; }

@media (max-width:768px){
    .desktop { display:none; }
    .mobile { display:inline; font-weight:600; }
}

/* ============================= */
/* PROJECTIONS */
/* ============================= */

.bs-projections{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-top:6px;

}

.bs-projection-box{

background:#132a46;

border-radius:10px;

padding:10px;

text-align:center;

}

.bs-projection-label{

display:block;
font-size:11px;
color:#8fa7bf;
margin-bottom:3px;

}

.bs-projection-box strong{
font-size:18px;
color:#fff;
}

/* ============================= */
/* ARCHETYPES */
/* ============================= */

.bs-archetypes{

display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;

}

.bs-archetype{

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

font-size:11px;
font-weight:600;

padding:4px 8px;

border-radius:6px;

}

.bs-arch-tempo{
background:#0f2f44;
color:#4cc9f0;
}

.bs-arch-chaos{
background:#2a1844;
color:#a78bfa;
}

.bs-arch-home{
background:linear-gradient(90deg,#ffb347,#ff7a18);
color:#ffff;
}

.bs-arch-away{
background:linear-gradient(90deg,#00ffbf,#00bfff);
color:#ffff;
}

.bs-arch-corners{
background:#3a2b0f;
color:#fbbf24;
}

.bs-arch-defense{
background:#2c2c2c;
color:#cbd5e1;
}


/* ============================= */
/* EXPAND MATCH */
/* ============================= */

.bs-match-expand{
display:none;
padding:16px;
background:#07111f;
border-bottom:1px solid #1b3555;
}

.bs-match-expand.open{
display:block;
}

.bs-hidden{
display:none;
}


.bs-load-more{
  background-image: linear-gradient(to right, #000000 0%, #6ea8ff 51%, #000000 100%);

}
.bs-load-more {
  margin: 10px;
  padding: 15px 25px;
  text-align: center;
font-size:13px;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 10px #eee;
  border-radius: 12px;
  display: block;
  outline: none;
  border: none;
}

.bs-load-more:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
/* ================= MOBILE 3-LINE LAYOUT ================= */

@media (max-width:700px){

.bs-match-header{
display:none;
}

.bs-match-row{
display:grid;

grid-template-columns:
20px
50px
auto   /* 🔥 pick dopasowany do treści */
1fr    /* 🔥 odds zajmuje resztę */
auto;  /* stake */

grid-template-areas:
"flag time match match match"
"pick pick odds odds stake";

gap:6px 6px;
padding:14px 16px;
align-items:center;
}

/* hover */

.bs-match-row:hover{
background:linear-gradient(
90deg,
rgba(40,90,160,0.12),
rgba(40,90,160,0)
);
}

/* ELEMENTY */

.bs-league-flag{
grid-area:flag;
width:20px;
height:16px;
}

.bs-time{
grid-area:time;
font-size:12px;
opacity:.7;
}

.bs-match{
grid-area:match;
font-size:13px;
font-weight:600;
line-height:1.2;
text-align:left;
display:flex;
align-items:center;
justify-content:flex-start;

}

/* sygnały */

.bs-signals{
grid-area:signals;
display:flex;
gap:6px;
justify-self:end;
font-size:13px;
opacity:.9;
}

/* ================= LINIA 2 ================= */

.bs-pick{
grid-area:pick;
white-space:nowrap:
font-size:12px;
font-weight:700;
color:#6ea8ff;
letter-spacing:.2px;
background: linear-gradient(90deg,#6ea8ff,#8a5cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.bs-odds{
grid-area:odds;

justify-self:start;   /* 🔥 przykleja do lewej */
margin-left:6px;
font-size:12px;
opacity:.75;
color:#fff;
}

/* stake = gwiazdki */

.bs-stake{
grid-area:stake;
justify-self:end;
font-size:12px;
color:#f6c343;
}


/* ukrywamy stare gwiazdki */

.bs-stars{
display:none;
}


.bs-value
{
display:none;
}

.bs-signals
{
display:none;
}
}