/* =========================================================
   MamaBetPro GLOBAL THEME v3 — landing colors everywhere
   Mama yellow #f5c518 · BetPro green #22c55e · ink #070b09
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ink:#070b09;
  --ink-2:#0b1210;
  --panel:#0e1612;
  --panel-2:#122018;
  --mama:#f5c518;
  --mama-2:#ffe56a;
  --mama-ink:#1a1400;
  --pro:#22c55e;
  --pro-2:#16a34a;
  --pro-3:#4ade80;
  --white:#f7faf8;
  --muted:#9fb2a7;
  --line:rgba(34,197,94,.22);
  --line-mama:rgba(245,197,24,.35);
  --glow-pro:0 0 28px rgba(34,197,94,.35);
  --glow-mama:0 0 28px rgba(245,197,24,.28);
  --glow-mix:0 14px 40px rgba(34,197,94,.22), 0 0 24px rgba(245,197,24,.12);
  --radius:18px;
  --font:"Outfit",system-ui,sans-serif;
  --display:"Space Grotesk",system-ui,sans-serif;

  /* remap old blue/gold vars used by legacy CSS */
  --bg:var(--ink);
  --bg-2:var(--panel);
  --surface:var(--white);
  --green:var(--pro);
  --green-2:var(--pro-2);
  --green-3:var(--pro-3);
  --green-glow:rgba(34,197,94,.45);
  --gold:var(--mama);
  --blue:#22c55e;
  --accent:var(--pro);
  --primary:var(--pro);
  --card:rgba(255,255,255,.04);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-soft:0 10px 30px rgba(0,0,0,.28);
}

html,body{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(245,197,24,.16), transparent 55%),
    radial-gradient(900px 520px at 92% 0%, rgba(34,197,94,.18), transparent 50%),
    linear-gradient(180deg, #070b09 0%, #0b1210 42%, #050805 100%) !important;
  color:var(--white) !important;
  font-family:var(--font) !important;
}

h1,h2,h3,.hero-solid,.display,.brand-text em,.wm-text em{
  font-family:var(--display) !important;
}

a{color:var(--pro-3); transition:color .2s, text-shadow .2s}
a:hover{color:var(--mama-2); text-shadow:0 0 12px rgba(245,197,24,.35)}

/* -------- buttons -------- */
.btn.primary, .btn-ok, button.primary, .cta-tile.primary, .mb-btn.primary,
button[class*="approve"], .shot-btn{
  background: linear-gradient(120deg, var(--mama), var(--mama-2) 38%, var(--pro)) !important;
  color:#07110c !important;
  border:0 !important;
  box-shadow: var(--glow-mix) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.btn.primary:hover, .btn-ok:hover, button.primary:hover, .cta-tile.primary:hover, .mb-btn.primary:hover, .shot-btn:hover{
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
  box-shadow: 0 18px 44px rgba(34,197,94,.35), 0 0 30px rgba(245,197,24,.22) !important;
}
.btn-ghost, .btn-no, .cta-tile.ghost, .mb-btn.ghost, .nav-login{
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--white) !important;
  transition: all .22s ease !important;
}
.btn-ghost:hover, .btn-no:hover, .cta-tile.ghost:hover, .mb-btn.ghost:hover, .nav-login:hover{
  border-color: var(--pro) !important;
  background: rgba(34,197,94,.12) !important;
  box-shadow: var(--glow-pro);
  transform: translateY(-2px);
}
.btn-danger{
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 10px 28px rgba(239,68,68,.35) !important;
}

/* -------- cards / shells -------- */
.form-shell, .auth-premium .form-shell, .card, .panel, .item, .row-card,
.cred-card, .id-card, .mama-card, .wallet-card, .dash-hero, .wallet-hero, .hero-card,
.feature-tile, .stat, .home-card, .notif-item, .chat-bubble.admin{
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 55%, rgba(34,197,94,.04)) !important;
  border: 1px solid rgba(34,197,94,.2) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(14px);
  border-radius: var(--radius) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.item:hover, .row-card:hover, .card:hover, .feature-tile:hover, .stat:hover, .home-card:hover,
.cred-card:hover, .id-card:hover, .mama-card:hover, .notif-item:hover{
  transform: translateY(-4px);
  border-color: rgba(245,197,24,.45) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(34,197,94,.2), var(--glow-mama) !important;
}

/* split brand marks */
.brand-mark, .logo-mark, .wm-mark{
  background: none !important;
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  place-items: stretch !important;
  width: 44px !important; height: 44px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--glow-mix) !important;
  color: transparent !important;
  position: relative;
  font-size: 0 !important;
}
.brand-mark::before, .logo-mark::before, .wm-mark::before{
  content:"M"; display:grid; place-items:center; background:var(--mama); color:var(--mama-ink);
  font:800 14px var(--display); font-size:14px !important;
}
.brand-mark::after, .logo-mark::after, .wm-mark::after{
  content:"B"; display:grid; place-items:center; background:#0b1210; color:var(--pro);
  font:800 14px var(--display); font-size:14px !important;
}

/* inputs */
input, select, textarea, .field input, .input-wrap input{
  background: rgba(0,0,0,.4) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #f8fafc !important;
  border-radius: 12px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus, select:focus, textarea:focus, .field input:focus{
  outline: none !important;
  border-color: var(--mama) !important;
  box-shadow: 0 0 0 3px rgba(245,197,24,.18), 0 0 18px rgba(34,197,94,.15) !important;
}

/* pills / badges */
.pill.ok, .wallet-pill.betpro{ background:rgba(34,197,94,.16)!important; color:#bbf7d0!important; border:1px solid rgba(34,197,94,.35)!important }
.wallet-pill.mama, .pill.mama{ background:rgba(245,197,24,.16)!important; color:#ffe56a!important; border:1px solid rgba(245,197,24,.4)!important }
.pill.wait{ background:rgba(255,255,255,.08)!important; color:#d1d5db!important }

/* nav */
.bottom-nav, .lux-nav, .site-nav, .topbar, .sidebar{
  background: rgba(7,11,9,.88) !important;
  border-color: rgba(34,197,94,.18) !important;
  backdrop-filter: blur(18px);
}
.nav-item.active, .bottom-nav a.active, .lux-nav a.active, [data-go].active{
  color: var(--pro-3) !important;
  text-shadow: 0 0 14px rgba(34,197,94,.55);
}
.nav-item:hover, .bottom-nav a:hover{ color: var(--mama) !important }

/* dashboard accents */
.dash-hero, .wallet-hero, .hero-card{
  background:
    linear-gradient(135deg, rgba(245,197,24,.12), transparent 40%),
    linear-gradient(225deg, rgba(34,197,94,.14), transparent 42%),
    linear-gradient(165deg, rgba(255,255,255,.07), rgba(0,0,0,.25)) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  box-shadow: var(--glow-mix) !important;
}
.cred-card::after, .id-card::after, .mama-card::after{
  background: radial-gradient(circle, rgba(245,197,24,.22), transparent 70%) !important;
}
.stat-chip, .balance-chip{
  background: linear-gradient(120deg, #fff, #e8ffe0) !important;
  color: #07110c !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 16px rgba(34,197,94,.2) !important;
}

/* auth tiles / corners */
.tile-corner{ border-color: rgba(245,197,24,.55) !important; box-shadow: 0 0 10px rgba(34,197,94,.25) }
.google-auth-block .btn-google, .btn-google, .auth-premium .btn-google{
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.06)!important;
  color:#ffffff !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.google-auth-block .btn-google span, .btn-google span, .auth-premium .btn-google span{
  color:#ffffff !important;
}
.btn-google:hover, .auth-premium .btn-google:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.55)!important;
  box-shadow: 0 0 20px rgba(255,255,255,.12);
  color:#ffffff !important;
}
.auth-or, .auth-premium .auth-or{
  color:rgba(255,255,255,.85)!important;
}
.auth-or:before, .auth-or:after, .auth-premium .auth-or:before, .auth-premium .auth-or:after{
  background:rgba(255,255,255,.35)!important;
}
.google-hint{ color:rgba(255,255,255,.75)!important; }

/* deposit / withdrawal */
.method-card, .pay-card, .wallet-tab{
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.method-card:hover, .pay-card:hover, .wallet-tab:hover, .wallet-tab.active{
  transform: translateY(-3px);
  border-color: var(--pro) !important;
  box-shadow: var(--glow-pro);
}
.wallet-tab.mama.active, .wallet-tab[data-wallet="mama"].active{
  border-color: var(--mama) !important;
  box-shadow: var(--glow-mama);
  color: var(--mama-2) !important;
}

/* chat */
.chat-bubble.user{
  background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(34,197,94,.08)) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
}
.chat-bubble.admin{
  border-color: rgba(245,197,24,.3) !important;
}

/* admin extras */
.user-creds-block{
  border-color: rgba(34,197,94,.28)!important;
  background: linear-gradient(135deg, rgba(245,197,24,.06), rgba(34,197,94,.06))!important;
}
.creds-title{ color: var(--mama-2)!important; text-shadow:0 0 12px rgba(245,197,24,.25) }
.plat-id-row{
  background: linear-gradient(90deg, rgba(245,197,24,.08), rgba(34,197,94,.08)) !important;
  border:1px solid rgba(34,197,94,.25)!important;
}
.btn-copy-id{
  background: linear-gradient(135deg, var(--mama), var(--pro)) !important;
  color:#07110c !important;
  box-shadow: var(--glow-mix);
}
.btn-copy-id:hover{ filter:brightness(1.08); transform:translateY(-1px) }

/* glow utility sweep on interactive */
.magnetic:hover, .cta-tile:hover, .feature-tile:hover{
  box-shadow: var(--glow-mix) !important;
}

/* scrollbars soft */
*{scrollbar-width:thin; scrollbar-color: rgba(34,197,94,.4) transparent}


/* force kill leftover blue skins */
html,body,.wallet-shell,.wallet-main,.form-page,.auth-premium{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(245,197,24,.16), transparent 55%),
    radial-gradient(900px 520px at 92% 0%, rgba(34,197,94,.18), transparent 50%),
    linear-gradient(180deg, #070b09 0%, #0b1210 42%, #050805 100%) !important;
}
.money-btn.deposit, .action-tile.deposit, a.deposit{
  background: linear-gradient(145deg, rgba(34,197,94,.22), rgba(34,197,94,.06)) !important;
  border:1px solid rgba(34,197,94,.35)!important;
  box-shadow:0 12px 32px rgba(34,197,94,.18)!important;
}
.money-btn.withdraw, .action-tile.withdraw, a.withdraw{
  background: linear-gradient(145deg, rgba(245,197,24,.22), rgba(245,197,24,.06)) !important;
  border:1px solid rgba(245,197,24,.4)!important;
  box-shadow:0 12px 32px rgba(245,197,24,.16)!important;
}
.money-btn:hover, .action-tile:hover{
  transform:translateY(-4px) scale(1.01);
  filter:brightness(1.06);
}
.mama-action-btn.mama-dep{
  background:linear-gradient(135deg,#f5c518,#ffe56a)!important;color:#1a1400!important;
  box-shadow:0 12px 30px rgba(245,197,24,.28)!important;
}
.mama-action-btn.mama-wdr{
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#041108!important;
  box-shadow:0 12px 30px rgba(34,197,94,.28)!important;
}
.mama-site-btn, .mama-panel{
  border:1px solid rgba(245,197,24,.3)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 24px rgba(245,197,24,.12)!important;
}
.mama-site-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 48px rgba(245,197,24,.22)!important }
.cred-tile, .gloss-tile{
  border:1px solid rgba(34,197,94,.22)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.cred-tile:hover, .gloss-tile:hover{
  border-color:rgba(245,197,24,.4)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 28px rgba(34,197,94,.18)!important;
}
.cred-status-bar, .mama-status-bar{
  background:linear-gradient(90deg, rgba(245,197,24,.15), rgba(34,197,94,.15))!important;
}
.chat-fab{
  background:linear-gradient(135deg,#f5c518,#22c55e)!important;
  color:#07110c!important;
  box-shadow:0 14px 36px rgba(34,197,94,.35),0 0 24px rgba(245,197,24,.25)!important;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.03) }
.pulse-stream.in{ border-color:rgba(34,197,94,.35)!important; box-shadow:inset 0 0 30px rgba(34,197,94,.08)!important }
.pulse-stream.out{ border-color:rgba(245,197,24,.35)!important; box-shadow:inset 0 0 30px rgba(245,197,24,.08)!important }
.tv-bezel, .tv-set{
  border-color:rgba(34,197,94,.28)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(34,197,94,.12)!important;
}
.secure-pill, .live{
  color:#bbf7d0!important;
  text-shadow:0 0 10px rgba(34,197,94,.45);
}
.side-brand b, .mobile-head .side-brand b{
  background:linear-gradient(90deg,#f5c518 50%, #0b1210 50%)!important;
  color:transparent!important;
  -webkit-background-clip:unset!important;
  display:inline-grid!important;
  grid-template-columns:1fr 1fr!important;
  width:40px;height:40px;border-radius:12px;overflow:hidden;font-size:0!important;
  position:relative;
}
.side-brand b::before{content:M;display:grid;place-items:center;background:#f5c518;color:#1a1400;font:800 13px Space Grotesk,sans-serif;font-size:13px!important}
.side-brand b::after{content:B;display:grid;place-items:center;background:#0b1210;color:#22c55e;font:800 13px Space Grotesk,sans-serif;font-size:13px!important}


/* Register country flags / picker — Mama theme (no blue) */
.country-picker, .country-btn, #countryBtn, .phone-wrap .country-picker{
  border:1px solid rgba(34,197,94,.3)!important;
  background:rgba(0,0,0,.35)!important;
  color:#f7faf8!important;
  box-shadow:none!important;
}
.country-picker:hover, #countryBtn:hover{
  border-color:#f5c518!important;
  box-shadow:0 0 16px rgba(245,197,24,.2)!important;
}
.country-dropdown, .country-list, .country-menu{
  background:#0b1210!important;
  border:1px solid rgba(34,197,94,.28)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.45)!important;
  color:#f7faf8!important;
}
.country-item, .country-option{
  color:#f7faf8!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}
.country-item:hover, .country-option:hover, .country-item.active{
  background:rgba(34,197,94,.14)!important;
  color:#fff!important;
}
.country-item .dial, .country-code, .country-dial, .dial-code{
  color:#f5c518!important;
}
.country-search, .country-dropdown input{
  background:rgba(0,0,0,.45)!important;
  border:1px solid rgba(34,197,94,.25)!important;
  color:#fff!important;
}
.country-flag, .flag{ filter:none!important; opacity:1!important; }
.auth-premium .country-item:hover{ background:rgba(34,197,94,.16)!important; }
.auth-premium .form-footer a{ color:#86efac!important; }
.auth-premium .form-footer a:hover{ color:#f5c518!important; }