/* ============================================
   Odiibet — Bottom Navigation
   Always visible on all pages
   ============================================ */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--dark2);
  border-top: 1px solid var(--border);
  display: flex;
  height: 62px;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone notch support */
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body);
}
.bottom-nav__item:hover   { color: var(--text); }
.bottom-nav__item.active  { color: var(--green); }

.bottom-nav__icon {
  font-size: 1.3rem;
  line-height: 1;
}

/* Centre Betslip button */
.bottom-nav__slip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: none;
  background: none;
  font-family: var(--font-body);
}

.bottom-nav__slip-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-top: -18px;
  box-shadow: 0 -4px 20px rgba(0, 200, 83, 0.45);
  position: relative;
  transition: background 0.2s, transform 0.2s;
}
.bottom-nav__slip:hover .bottom-nav__slip-circle {
  background: var(--green-dark);
  transform: scale(1.05);
}

.bottom-nav__slip-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.bottom-nav__slip-count.hidden { display: none; }

/* Push page content above bottom nav on all pages */
body { padding-bottom: 70px; }
/* ==================================================
   FINAL FIX: centered 4-tab bottom nav + green slip
   Home | Live | Green Betslip | Wallet | Me
   ================================================== */

.bottom-nav{
  position:fixed!important;
  left:50%!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  width:calc(100% - 16px)!important;
  max-width:460px!important;
  height:58px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 76px 1fr 1fr!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  padding:0 8px!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:rgba(5,8,5,.96)!important;
  border:1px solid rgba(0,200,83,.18)!important;
  border-radius:24px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.55)!important;
  z-index:99999!important;
  overflow:visible!important;
}

.bottom-nav__item{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  text-align:center!important;
  text-decoration:none!important;
  color:var(--muted,#7cb87c)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  white-space:nowrap!important;
  border-radius:18px!important;
  transition:all .2s ease!important;
}

.bottom-nav__item.active{
  color:var(--gold,#ffd600)!important;
  background:rgba(255,214,0,.09)!important;
}

.bottom-nav__icon{
  font-size:1.08rem!important;
  line-height:1!important;
}

.bottom-nav__text{
  line-height:1!important;
}

.bottom-nav__slip{
  width:76px!important;
  height:74px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:13px!important;
  transform:none!important;
  margin:0 auto!important;
  padding:0!important;
  border:none!important;
  outline:none!important;
  background:transparent!important;
  color:#000!important;
  font-family:inherit!important;
  cursor:pointer!important;
  z-index:2!important;
  overflow:visible!important;
}

.bottom-nav__slip::after{
  content:""!important;
}

.bottom-nav__slip-circle{
  width:58px!important;
  height:58px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  margin:0 auto!important;
  background:var(--green,#00c853)!important;
  color:#001b08!important;
  font-size:1.35rem!important;
  font-weight:900!important;
  box-shadow:0 8px 24px rgba(0,200,83,.38)!important;
  border:5px solid #050805!important;
}

.bottom-nav__slip-count{
  position:absolute!important;
  top:-4px!important;
  right:-4px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:#ff1744!important;
  color:#fff!important;
  font-size:.62rem!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid #050805!important;
}

@media(max-width:420px){
  .bottom-nav{
    width:calc(100% - 12px)!important;
    height:56px!important;
    grid-template-columns:1fr 1fr 70px 1fr 1fr!important;
    padding:0 5px!important;
    bottom:8px!important;
  }

  .bottom-nav__item{
    font-size:.62rem!important;
    height:42px!important;
  }

  .bottom-nav__icon{
    font-size:1rem!important;
  }

  .bottom-nav__slip{
    width:70px!important;
    height:70px!important;
    bottom:12px!important;
  }

  .bottom-nav__slip-circle{
    width:54px!important;
    height:54px!important;
    font-size:1.25rem!important;
  }
}

body{
  padding-bottom:96px!important;
}