/* === Accessibility === */
.sr-only{
position:absolute!important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}

/* === Info row === */
.odds-info-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:1rem;
margin:.75rem 0 .65rem 0;
padding:.65rem .75rem;
background:#fff;
border:1px solid #e2e2e2;
border-radius:8px
}
.odds-info-left{
display:flex;
flex-direction:column;
gap:.25rem;
flex:1;
min-width:0
}
.odds-last-updated{
font-size:.9rem;
color:#333;
position:relative
}
.odds-source{
font-size:.9rem;
color:#333;
margin:0
}

/* Right column (desktop) */
.odds-info-right{
display:flex;
flex-direction:column;
gap:.35rem;
align-items:flex-end;
flex:0 0 auto;
min-width:240px
}

/* One row: label + pills */
.odds-switch-row{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:.5rem!important;
justify-content:flex-end!important;
width:100%!important
}
.odds-switch-label{
font-size:.85rem;
color:#555;
white-space:nowrap;
flex:0 0 auto
}
.odds-switch-links{
display:flex!important;
gap:.35rem!important;
flex-wrap:nowrap!important;
align-items:center!important;
justify-content:flex-end!important;
white-space:nowrap!important;
min-width:0!important;
overflow-x:auto;
max-width:100%;
-webkit-overflow-scrolling:touch
}
.odds-switch-links::-webkit-scrollbar{height:6px}

/* === Info popover === */
.odds-info-btn{
appearance:none;
border:0;
background:transparent;
padding:0;
margin-left:6px;
color:#555;
cursor:pointer;
line-height:1
}
.odds-info-btn:focus-visible{
outline:0;
box-shadow:0 0 0 3px rgba(107,147,255,.25);
border-radius:6px
}
.odds-info-pop{
position:absolute;
left:0;
top:100%;
margin-top:.5rem;
max-width:360px;
background:#fff;
border:1px solid #e2e2e2;
border-radius:8px;
padding:.6rem .7rem;
box-shadow:0 8px 20px rgba(0,0,0,.12);
z-index:20
}
.odds-info-pop p{
margin:0 0 .35rem 0;
font-size:.85rem;
color:#333
}
.odds-info-pop p:last-child{margin:0}
.odds-info-pop .muted{color:#666}

/* === Pills (shared for league + odds format) === */
/* NOTE: force same color for normal/visited */
.odds-pill{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
max-width:none!important;
padding:.18rem .45rem;
border-radius:999px;
font-size:.85rem;
line-height:1.2;
background:transparent;
border:1px solid transparent;
text-decoration:none;
white-space:nowrap;
flex:0 0 auto;
color:#2f4f7a
}
a.odds-pill:visited{color:#2f4f7a}
a.odds-pill:hover,
button.odds-pill:hover{
color:#244062;
background:rgba(107,147,255,.10);
border-color:rgba(107,147,255,.25);
text-decoration:none
}
.odds-pill:focus-visible{
outline:0;
box-shadow:0 0 0 3px rgba(107,147,255,.25)
}

/* Active */
.odds-pill.is-active,
.odds-pill[aria-current="page"]{
color:#2b2b2b;
font-weight:400;
background:rgba(0,0,0,.06);
border-color:rgba(0,0,0,.18);
cursor:default
}
.odds-pill.is-active:hover,
.odds-pill[aria-current="page"]:hover{
color:#2b2b2b;
background:rgba(0,0,0,.06);
border-color:rgba(0,0,0,.18)
}

/* Buttons look like links */
button.odds-pill{
appearance:none;
background:transparent;
cursor:pointer
}
button.odds-pill.is-active{cursor:default}

/* === Cards === */
.odds-card-container{
display:flex;
flex-direction:column;
gap:1rem
}
.odds-card{
display:flex;
flex-direction:column;
border:1px solid #d0d0d0;
border-radius:10px;
padding:1rem;
background:#f4f2ee;
box-shadow:0 2px 8px rgba(0,0,0,.08)
}
.odds-card-header{
width:100%;
margin-bottom:.06rem;
display:flex;
flex-direction:column
}
.odds-card-header h3{
all:unset;
display:flex;
justify-content:flex-start;
align-items:center;
gap:.5rem;
font-size:1.05rem;
font-weight:600;
color:#222;
flex-wrap:wrap
}
.odds-card-header .divider{color:#666}
.match-date{
font-size:.82rem;
color:#666;
margin-top:.02rem;
padding-left:.45rem
}

/* === Markets === */
.odds-card-markets{
display:flex;
flex-wrap:wrap;
gap:.65rem;
width:100%;
box-sizing:border-box
}
.odds-market{
flex:1 1 calc(25% - .65rem);
min-width:150px;
padding:.5rem;
box-sizing:border-box;
background:#fff;
border-radius:6px;
border:1px solid #ccc
}
.odds-market strong{
display:block;
margin-bottom:.28rem;
font-size:.95rem
}

/* === Outcomes === */
.odds-outcome{
display:grid;
grid-template-columns:1fr auto;
align-items:start;
column-gap:.6rem;
font-size:.9rem;
margin-bottom:.14rem
}
.odds-name{
min-width:0;
overflow-wrap:anywhere
}
.odds-outcome em{
font-style:normal;
font-weight:600;
color:#000;
text-align:right;
font-variant-numeric:tabular-nums;
white-space:nowrap
}
.odds-values{
display:inline-flex;
gap:.35rem;
align-items:baseline;
justify-content:flex-end;
white-space:nowrap
}
.odds-from{font-weight:400;color:#555}
.odds-to{font-weight:600;color:#000}
.odds-arrow{font-weight:700}

.odds-moneyline{background:#d4f5d4;border:1px solid #b2e0b2}
.odds-spread{background:#d4e4f5;border:1px solid #b2cce0}
.odds-totals{background:#f5ecd4;border:1px solid #e0d6b2}

.odds-up{color:#0a8a0a}
.odds-down{color:#c20000}

/* === SEO text === */
.odds-seo{
margin-top:1.25rem
}
.odds-seo p{
margin:1em 0;
line-height:1.6
}

/* === Responsive === */
@media (max-width:900px){
.odds-card-markets{flex-direction:column}
}
@media (max-width:500px){
.odds-info-row{
flex-direction:column;
align-items:flex-start
}
.odds-info-left{
width:100%
}
.odds-info-right{
width:100%;
align-items:flex-start;
min-width:0;
margin-top:.15rem
}
.odds-switch-row{
justify-content:flex-start!important
}
.odds-switch-links{
justify-content:flex-start!important
}
.odds-card-header h3{
flex-direction:column;
align-items:center;
text-align:center;
line-height:1.1
}
.odds-card-header .divider{display:none}
.odds-card-header .team{display:block;width:100%;margin:0}
.match-date{text-align:center;width:100%;padding-left:0}
.odds-card-markets{
flex-direction:column;
align-items:center;
gap:.7rem
}
.odds-market{
flex:1 1 95%;
min-width:95%;
padding:.6rem
}
.odds-info-pop{max-width:calc(100vw - 24px)}
}