/* === 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:.8rem;
flex:1;
min-width:0
}
@media (min-width:500px){
.odds-info-left{
padding-top:.25rem
}
}
.odds-last-updated{
font-size:.9rem;
color:#333;
position:relative;
line-height:1.2
}
.odds-source{
font-size:.9rem;
color:#333;
margin:0;
line-height:1.2
}

/* Right column (desktop) */
.odds-info-right{
display:flex;
flex-direction:column;
gap:.5rem;
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:.9rem;
color:#333;
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;
line-height:1.35
}
.odds-info-pop p:last-child{margin:0}
.odds-info-pop .muted{color:#666}

@media (max-width:500px){
/* Tooltip closer to the info icon */
.odds-info-pop{
margin-top:.22rem;
padding:.55rem .65rem;
border-radius:7px
}
/* Slightly tighter paragraph spacing inside tooltip */
.odds-info-pop p{
margin:0 0 .28rem 0;
font-size:.84rem;
line-height:1.32
}
}

/* === Pills (shared for league + odds format) === */
.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;
letter-spacing:.02em;
color:inherit
}

/* Default colors: league slightly darker, odds format slightly lighter */
.odds-switch-row[aria-label="Switch league"] a.odds-pill,
.odds-switch-row[aria-label="Switch league"] a.odds-pill:visited,
.odds-switch-row[aria-label="Switch league"] button.odds-pill{
color:#222!important
}
.odds-switch-row[aria-label="Odds format"] a.odds-pill,
.odds-switch-row[aria-label="Odds format"] a.odds-pill:visited,
.odds-switch-row[aria-label="Odds format"] button.odds-pill{
color:#555!important
}

/* Hover: subtle blue background only (keep text color as-is) */
a.odds-pill:hover,
button.odds-pill:hover{
background:rgba(107,147,255,.10);
border-color:rgba(107,147,255,.25);
text-decoration:none
}

/* Focus ring stays */
.odds-pill:focus-visible{
outline:0;
box-shadow:0 0 0 3px rgba(107,147,255,.25)
}

/* Active: neutral grey, subtle, not dominant */
.odds-pill.is-active,.odds-pill[aria-current=page]{
color:#2b2b2b!important;
font-weight:400;
background:rgba(0,0,0,.06);
border-color:rgba(0,0,0,.18);
cursor:default
}
/* Keep active consistent on hover (no style flip) */
.odds-pill.is-active:hover,.odds-pill[aria-current=page]:hover{
color:#2b2b2b!important;
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
}

/* Team line: add consistent left inset on tablet/desktop */
.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;
padding-left:.35rem
}
.odds-card-header .divider{color:#666}

/* Match date: align near team line but slightly lower */
.match-date{
font-size:.84rem;
color:#666;
margin-top:.06rem;
padding-left:.35rem;
line-height:1.15
}

/* === 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:baseline;
column-gap:.6rem;
font-size:.9rem;
margin-bottom:.1rem
}
.odds-outcome em{
position:static;
transform:translateY(.35px);
font-style:normal;
font-weight:600;
color:#000;
text-align:right;
font-variant-numeric:tabular-nums;
white-space:nowrap
}
.odds-name{
min-width:0;
overflow-wrap:anywhere
}
.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}


/* ============================================================
   Odds page: keep H2 normal, remove decorative styles only
   Scope: .odds-page only
   Keep: .topsites-title unchanged
   ============================================================ */
.odds-page{margin-top:3rem}
.odds-page h2:not(.topsites-title){
margin:.83em 0;
padding:0;
background:transparent!important;
border:0!important;
box-shadow:none!important;
text-decoration:none!important;
}

/* Optional: if your theme adds an underline via border-bottom */
.odds-page h2:not(.topsites-title){
border-bottom:0!important;
}

/* Optional: if your theme adds extra padding under the title */
.odds-page h2:not(.topsites-title){
padding-bottom:0!important;
}
.odds-page .highlight-3{margin-top:0}
.odds-empty{
margin:1rem 0;
padding:.9rem 1rem;
background:#fff;
border:1px solid #e2e2e2;
border-radius:10px
}
.odds-empty p{
margin:.3rem 0;
line-height:1.45
}

/* === Responsive === */
@media (max-width:900px){
.odds-card-markets{flex-direction:column}
}

/* Mobile tweaks:
   - tighter team line (less line-height)
   - add clearer separation between away team and date
*/
@media (max-width:500px){
.odds-info-row{
flex-direction:column;
align-items:flex-start;
gap:.6rem;
padding:.6rem .7rem
}
.odds-info-left{
width:100%
}
.odds-info-right{
width:100%;
align-items:flex-start;
min-width:0;
margin-top:.05rem;
gap:.4rem
}
.odds-switch-row{
justify-content:flex-start!important
}
.odds-switch-links{
justify-content:flex-start!important
}

/* tighter team stack */
.odds-card-header h3{
flex-direction:column;
align-items:center;
text-align:center;
line-height:0.95;
padding-left:0
}
.odds-card-header .divider{display:none}
.odds-card-header .team{display:block;width:100%;margin:0}

/* date slightly larger + further away from away team */
.match-date{
text-align:center;
width:100%;
padding-left:0;
font-size:.82rem;
margin-top:.55rem;
line-height:1.1
}

.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)}
}

/* ============================================================
   FIX (Valuepunter): keep odds market boxes uniform + stable
   Why: prevents shrink-to-content width differences and uneven boxes
   ============================================================ */

/* Ensure the markets wrapper never sizes children by content */
.odds-card-markets{
display:flex;
flex-direction:column;
align-items:stretch
}

/* Each market box must take full width, regardless of content */
.odds-card-markets > .odds-market{
width:100%;
flex:0 0 auto;
min-width:0;
box-sizing:border-box
}

/* Prevent long outcome names (with points) from expanding the box */
.odds-market .odds-outcome{
min-width:0
}
.odds-market .odds-name{
display:block;
min-width:0;
overflow-wrap:anywhere;
word-break:break-word
}

/* Keep odds values from causing layout overflow */
.odds-market .odds-values{
min-width:0
}

@media (min-width:500px){
.match-date{
padding-left:.4rem;
margin-top:.4rem
}
}

/* Desktop/tablet: three markets equal width */
@media (min-width:768px){
.odds-card-markets{
flex-direction:row;
gap:12px
}
.odds-card-markets > .odds-market{
flex:1 1 0
}
}

/* Tablet/desktop: prevent “too far left” team line by adding a touch more inset */
@media (min-width:768px){
.odds-card-header h3{
padding-left:.35rem
}
.match-date{
padding-left:.4rem
}
}

/* Desktop: slightly more inset, but keep it modest */
@media (min-width:1100px){
.odds-card-header h3{
padding-left:.5rem
}
.match-date{
padding-left:.6rem
}
}