/* ===============================
   PARYAJ SPORT 509 – PRO UI
   Inspired Hard Rock Layout
================================ */

/* ===== ROOT VARIABLES ===== */

:root{
  --ps-bg-main:#0e1220;
  --ps-bg-card:#171c2c;
  --ps-bg-hover:#1f2540;
  --ps-border:#2a3050;
  --ps-text-main:#ffffff;
  --ps-text-soft:#9aa3c2;
  --ps-accent:#f5b90b; /* gold highlight */
  --ps-green:#27c76f;
  --ps-red:#ea5455;
}

/* ===== GLOBAL ===== */

body{
  background:var(--ps-bg-main)!important;
  color:var(--ps-text-main)!important;
  font-family:Inter,system-ui,-apple-system;
}

/* ===== SIDEBAR ===== */

.sidebar{
  background:#111527!important;
  border-right:1px solid var(--ps-border);
}

.sidebar .nav-link{
  color:var(--ps-text-soft)!important;
  border-radius:8px;
  padding:10px 14px;
  transition:all .2s ease;
}

.sidebar .nav-link:hover{
  background:var(--ps-bg-hover)!important;
  color:#fff!important;
}

.sidebar .nav-link.active{
  background:var(--ps-bg-hover)!important;
  color:var(--ps-accent)!important;
  font-weight:600;
}

/* ===== MATCH CARD STRUCTURE ===== */

.single-match,
.match-card,
.event-item{
  background:var(--ps-bg-card)!important;
  border:1px solid var(--ps-border)!important;
  border-radius:14px!important;
  padding:18px!important;
  margin-bottom:14px!important;
  transition:all .2s ease;
}

.single-match:hover{
  border-color:var(--ps-accent)!important;
  box-shadow:0 0 0 1px var(--ps-accent);
}

/* ===== TEAMS TEXT ===== */

.team-name,
.match-teams,
.team{
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
}

/* ===== MATCH TIME ===== */

.match-time,
.event-time{
  font-size:13px;
  color:var(--ps-text-soft)!important;
}

/* ===== ODDS GRID ===== */

.odds,
.market-odds,
.bet-odds{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:8px!important;
  margin-top:10px!important;
}

/* ===== ODDS BUTTON STYLE ===== */

.odds-btn,
.btn-odds,
.bet-btn{
  background:#222842!important;
  border:1px solid var(--ps-border)!important;
  border-radius:10px!important;
  padding:8px 6px!important;
  font-weight:600!important;
  color:#fff!important;
  transition:all .15s ease!important;
}

.odds-btn:hover{
  background:var(--ps-bg-hover)!important;
  border-color:var(--ps-accent)!important;
}

.odds-btn.active,
.odds-btn.selected{
  background:var(--ps-accent)!important;
  color:#000!important;
  border-color:var(--ps-accent)!important;
}

/* ===== LIVE BADGE ===== */

.live,
.badge-live{
  background:var(--ps-red)!important;
  color:#fff!important;
  font-size:11px!important;
  padding:3px 6px!important;
  border-radius:6px!important;
}

/* ===== CATEGORY TABS ===== */

.nav-tabs .nav-link{
  background:none!important;
  color:var(--ps-text-soft)!important;
  border:none!important;
  border-bottom:2px solid transparent!important;
}

.nav-tabs .nav-link.active{
  color:#fff!important;
  border-bottom:2px solid var(--ps-accent)!important;
}

/* ===== BETSLIP ===== */

.betslip,
.bet-slip,
.sidebar-betslip{
  background:#14192a!important;
  border-left:1px solid var(--ps-border)!important;
  padding:16px!important;
}

.betslip-header{
  font-weight:600;
  font-size:16px;
  margin-bottom:10px;
}

.betslip .form-control{
  background:#1f2540!important;
  border:1px solid var(--ps-border)!important;
  color:#fff!important;
  border-radius:8px!important;
}

.betslip .btn-primary{
  background:var(--ps-accent)!important;
  border:none!important;
  color:#000!important;
  font-weight:700!important;
  border-radius:10px!important;
  padding:12px!important;
  text-transform:uppercase;
}

.betslip .btn-primary:hover{
  opacity:.9;
}

/* ===== TABLES CLEAN ===== */

.table{
  background:var(--ps-bg-card)!important;
  color:#fff!important;
}

.table th{
  color:var(--ps-text-soft)!important;
  border-bottom:1px solid var(--ps-border)!important;
}

.table td{
  border-bottom:1px solid var(--ps-border)!important;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar{
  width:6px;
}

::-webkit-scrollbar-thumb{
  background:var(--ps-border);
  border-radius:6px;
}

/* ===== MOBILE OPTIMIZATION ===== */

@media(max-width:768px){

  .sidebar{
    display:none!important;
  }

  .single-match{
    padding:14px!important;
  }

  .odds,
  .market-odds{
    grid-template-columns:repeat(3,1fr);
  }

  .betslip{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    border-radius:14px 14px 0 0;
    z-index:999;
  }

}