/* =========================
   SPORTOTO (INP-FRIENDLY)
========================= */
#sportotoWrapper {min-height: 100vh;min-height: 100dvh;display: block;}
#sportoto-h1 {margin: 20px var(--margin-left-right) 10px;font-size: 20px;}
#sportoto-intro {
    font-size: 12.5px;
    margin: 0px var(--margin-left-right) 15px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 8px;
}
@media only screen and (min-width: 767px) { /** d **/
  .match-item[data-layout="sportoto"] {
    grid-template-areas: "totoSira time home score away select";
    grid-template-columns: 38px 45px 1fr 45px 1fr 58px;
  }
  .match-item[data-layout="sportoto"] .home {text-align: right;}
  .match-item:not([show="1"]) .score:before {content: "-";}
  .home:not([hr="0"]) {position: relative;}
  .match-item[data-layout="sportoto"] .home:not([hr="0"])::after {right: 0;}

}
@media only screen and (max-width: 767px) { /** m **/
  .match-item[data-layout="sportoto"] {
    grid-template-areas: "totoSira select time home away score";
    grid-template-columns: 38px 38px 45px 1fr 1fr 55px;
  }
  .match-item:not([show="1"]) .score:before {content: "❯";font-weight: bold;color: var(--text-muted);font-size: 12px;}
}
.match-item .toto-sira {
background: var(--bg-card2);
    border: solid 1px var(--bg-main);
    border-radius: 8px;color: var(--text-primary);
}
.match-item.totoPre .match-select{ background-image:unset; }
.toto-sira {
  grid-area: totoSira;
}
:root{
  --toto-bg: #0f1624;
  --toto-card: #141d2e;
  --toto-line: rgba(255,255,255,.10);
  --toto-text: #e8edf7;
  --toto-muted: #9aa6c2;
  --toto-accent: #3aa3ff;
  --toto-radius: 14px;
}


.toto-select:focus{
  border-color: var(--accent);
}

/* Header row: "Sıra | Maç" */
.toto-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0px;
  color: var(--toto-muted);
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}
.toto-header > * {
  border-bottom:1px solid var(--toto-line);height: 42px;
}

/* List wrapper */
.toto-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* "Sıra" column */
.toto-sira{
  width:38px;
  flex: 0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-variant-numeric: tabular-nums;
  color: var(--toto-muted);
  font-weight:700;
  font-size:13px;
}

/* Match column container (scores.createMatchRow output sits here) */
.toto-match{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}

/* Empty state */
.toto-empty{
  padding:14px 12px;
  border-radius: var(--toto-radius);
  border:1px solid var(--toto-line);
  background: rgba(255,255,255,.03);
  color: var(--toto-muted);
  font-size:13px;
}

/* Mobile tweaks */
@media (max-width:480px){
  .toto-row,
  .toto-header{
    padding:10px 0px;
    gap:10px;
  }
  .toto-sira{
    width:40px;
    flex-basis:40px;
  }
  .toto-select{
    font-size:13px;
  }
}

/* Optional: if your match rows have buttons/links, avoid tap highlight ugliness */
.toto-row, .toto-select{
  -webkit-tap-highlight-color: transparent;
}



/* =========================
   IKRAMIYE WRAPPER
========================= */

.ikramiye{
  margin-top:16px;margin-bottom: 25px;
  margin-left: var(--margin-left-right);margin-right: var(--margin-left-right);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:var(--bg-card);
  overflow:hidden;
}

/* =========================
   HEADER
========================= */

.ikramiye-header{
  padding:14px 16px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* =========================
   ROW
========================= */

.ikramiye-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .12s ease;
}

.ikramiye-row:last-child{
  border-bottom:none;
}

.ikramiye-row:not(.ikramiye-top-winner):hover{
  background:rgba(255,255,255,.04);
}

/* =========================
   COLUMNS
========================= */

.ikramiye-type{
  font-weight:600;
  flex:1;
}

.ikramiye-winners{
  flex:1;
  text-align:center;
  color:#9aa6c2;
  font-weight:500;
}

.ikramiye-amount{
  flex:1;
  text-align:right;
  font-weight:700;
  font-variant-numeric: tabular-nums;
}

/* =========================
   SPECIAL STATE: DEVİR
========================= */

.ikramiye-row .ikramiye-winners:contains("Devir"){
  color:#ffcc66;
}

/* Better: add class in JS instead of :contains */
.ikramiye-row.devir .ikramiye-winners{
  color:#ffcc66;
  font-weight:600;
}

@media (max-width:480px){
}
.ikramiye-top-winner {background: color-mix(in srgb, var(--accent) 18%, transparent);border-bottom-color: var(--accent-light);}
.ikramiye-top-winner .ikramiye-amount {color: var(--accent-light);}

/* =========================
   SPORTOTO NOTES
========================= */

.sportoto-notes{
  margin: 16px var(--margin-left-right);
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
}

.sportoto-notes h3{
  margin:0 0 10px 0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  color: var(--text-secondary);
}

.sportoto-notes p{
  margin:0;
  padding:10px 0;
  font-size:13px;
  line-height:1.55;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

.sportoto-notes p + p{
  border-top:1px solid rgba(255,255,255,.06);
}

.sportoto-notes b,
.sportoto-notes strong{
  font-weight:700;
  color: var(--toto-text, #e8edf7);
}

/* Optional: small callout for “bilgilendirme amaçlıdır” style */
.sportoto-notes p:last-child{
  color: var(--text-muted);
}

/* Mobile */
@media (max-width:480px){
  .sportoto-notes{
    padding:12px 12px;
    border-radius:14px;
  }
  .sportoto-notes p{
    font-size:12.5px;
  }
}


/* =========================
   FILTER WRAPPER
========================= */

.toto-filter{
  margin-bottom:16px;
  margin-left: var(--margin-left-right);margin-right: var(--margin-left-right);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.toto-filter-label{
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.3px;
}

/* =========================
   SELECT WRAPPER
========================= */

.toto-select-wrapper{
  position:relative;
}

.toto-select{
  width:100%;
  padding:11px 40px 11px 14px;
  border-radius:14px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text-secondary);
  font-size:14px;
  appearance:none;
  outline:none;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.toto-select:hover{
  border-color:rgba(255,255,255,.25);
}

.toto-select:focus{
  border-color:var(--accent);
}

/* Arrow icon */
.toto-select-wrapper::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:#9aa6c2;
  font-size:13px;
}

/* Mobile */
@media (max-width:480px){
  .toto-select{
    font-size:13px;
  }
}
.toto-date{
  text-align: right;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.3px;
}

/* =========================
   SORT WRAPPER
========================= */

.toto-sort{
  margin-left:auto;margin-right: 6px;
  display:inline-flex;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

/* =========================
   BUTTON BASE
========================= */

.toto-sort-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--text-muted);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
  position:relative;
}

/* Divider line */
.toto-sort-btn + .toto-sort-btn{
  border-left:1px solid rgba(255,255,255,.12);
}

/* First child rounded left */
.toto-sort-btn:first-child{
  border-top-left-radius:999px;
  border-bottom-left-radius:999px;
}

/* Last child rounded right */
.toto-sort-btn:last-child{
  border-top-right-radius:999px;
  border-bottom-right-radius:999px;
}

/* Hover */
.toto-sort-btn:hover{
  background:rgba(255,255,255,.06);transform: none;
}

/* Active */
.toto-sort-btn.active{
  background:var(--btn-bg);
  color:var(--btn-text);
}

/* When active, remove divider conflict */
.toto-sort-btn.active + .toto-sort-btn{
  border-left-color:rgba(255,255,255,.12);
}

/* Accessibility */
.toto-sort-btn:focus-visible{
  outline:2px solid #3aa3ff;
  outline-offset:2px;
}

.toto-durum{
  margin:12px var(--margin-left-right);
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column-reverse;
  gap:4px;
}

.toto-durum-status{
  font-weight:600;
  font-size:14px;
}

.toto-durum-status.playable{
  color:#29d17c;
}

.toto-durum-status.closed{
  color:#ff5c5c;
}

.toto-durum-info{
  font-size:12px;
  color:var(--text-primary);
}