/* ===============================
   🎨 GLOBAL COLOR THEME
================================= */
:root{
  --purple-main:#6a00ff;
  --purple-soft:#9d4edd;
  --purple-dark:#4b0082;
  --gold-main:#f5c542;
  --gold-dark:#c9a227;
  --bg-dark:#0b0d12;
}

/* ===============================
   🎯 BUTTON & ACTION
================================= */
.activation-button,
.play-now,
.claim-item .activation-button {
  background: linear-gradient(135deg, var(--purple-main), var(--purple-soft));
  color:#fff;
  box-shadow:0 0 12px rgba(106,0,255,.4);
}

.activation-button:hover,
.play-now:hover {
  background: linear-gradient(135deg, var(--purple-soft), var(--purple-main));
  box-shadow:0 0 20px rgba(106,0,255,.6);
}

/* ===============================
   💰 BONUS & RANGE
================================= */
.bonus-amount{
  color:var(--gold-main);
}

.bonus-range .bubble{
  border-color:var(--purple-main);
  background:#0e0e0e;
}

.bonus-range .bubble::before{
  border-top-color:var(--purple-main);
}

/* ===============================
   🧾 CLAIM ITEM
================================= */
.claim-item{
  background:var(--bg-dark);
  border:1px solid #1f1f1f;
}

.claim-item .claim-button{
  background: linear-gradient(to bottom,var(--gold-main),var(--gold-dark));
  color:#000;
  font-weight:bold;
}

.claim-item .claim-button:hover{
  background:var(--gold-dark);
}

.claim-item .claim-details strong{
  color:var(--purple-soft);
}

/* ===============================
   🔗 LINK & TEXT
================================= */
a,
.contact-us-list li a{
  color:var(--purple-soft);
}

a:hover{
  color:var(--gold-main);
}

/* ===============================
   🎮 GAME UI
================================= */
.popular-game-title-container a{
  background:var(--purple-main);
  color:#fff;
}

.game-list .provider-name{
  color:var(--gold-main);
}

.play-now{
  border-radius:8px;
}

/* ===============================
   📦 CONTAINER BACKGROUND
================================= */
.bonus-form,
.claim-item,
.promotion-side-menu,
.games-list-container .filter-section{
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(106,0,255,.10), transparent 55%),
    radial-gradient(120% 120% at 90% 40%, rgba(106,0,255,.08), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, rgba(0,0,0,.08) 6px 12px),
    #0b0d12;
  background-blend-mode:overlay;
}

/* ===============================
   📱 NAVIGATION
================================= */
.top-menu>li:hover,
.top-menu>li[data-active="true"]{
  color:var(--gold-main);
}

.standard-nav-bar a[data-active="true"],
.standard-side-menu a[data-active="true"]{
  background: linear-gradient(to right,var(--purple-main),var(--purple-soft));
}

/* ===============================
   📊 FORM & INPUT
================================= */
.standard-form-title{
  color:var(--gold-main);
}

.standard-form-sub-title{
  border-left-color:var(--purple-main);
}

.standard-form-note span,
.standard-form-note strong{
  color:var(--gold-main);
}

/* ===============================
   🧠 MODAL
================================= */
.modal-header{
  background: linear-gradient(to bottom,var(--purple-main),var(--purple-dark));
  color:#fff;
}

.modal-footer .btn-primary{
  background:var(--purple-main);
}

.modal-footer .btn-primary:hover{
  background:#fff;
  color:var(--purple-main);
}

/* ===============================
   👤 PROFILE
================================= */
.standard-profile-bar .username,
.standard-profile-bar .balance{
  color:var(--gold-main);
}

/* ===============================
   💳 DEPOSIT
================================= */
.deposit-container .formatted-balance{
  color:var(--gold-main);
}

.deposit-container .real-deposit-amount{
  color:var(--purple-soft);
}

/* ===============================
   🎯 SOCIAL FLOATING BUTTON (UPGRADE)
================================= */
.hamburg{
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(106,0,255,.15), transparent 55%),
    radial-gradient(120% 120% at 90% 40%, rgba(245,197,66,.15), transparent 60%),
    #08090d;

  box-shadow:
    0 0 0 1px rgba(106,0,255,.3),
    0 0 18px rgba(106,0,255,.3),
    0 0 28px rgba(245,197,66,.2);
}

.bar1,.bar2,.bar3,.bar4{
  background:linear-gradient(90deg,var(--purple-main),var(--gold-main));
}

/* ===============================
   ✨ ATTENTION BUTTON
================================= */
.attention{
  background:linear-gradient(90deg,var(--purple-main),var(--gold-main));
  color:#000;
  box-shadow:0 0 20px rgba(245,197,66,.4);
}

/* ===============================
   🔥 EXTRA PREMIUM EFFECT
================================= */
.btn,
.play-now,
.activation-button{
  transition:all .3s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

/* ===============================
   🌌 BODY
================================= */
body{
  background:#0d0d0d;
  color:#fff;
}