/*
 * arena216.net site overrides, loaded after the bundle's stylesheets from
 * resources/views/welcome.blade.php (cache-busted with nextjs.asset_version).
 *
 * The bundle is mbet24's, recoloured with arena216's palette. arena216's
 * primary buttons are dark text on green, but the mbet24 skin repaints a few
 * "primaryBtn" elements with a dark grey background (header balance on
 * phones, filter dropdowns). With the dark text inherited from primaryBtn the
 * balance became unreadable; give those elements white text.
 */
.headerBalanceBtnMobile,
.headerBalanceBtnMobile *,
button.headerBalanceBtn,
button.headerBalanceBtn *,
.headerDropdownBtn,
.headerDropdownBtn *,
.providerFilter button,
.sortFilter button {
    color: #fff !important;
}

/* Header logo: the skin sets 36px desktop / 30px mobile; a little bigger. */
/* The skin defines these on body{}, so match that and win with !important. */
body {
    --header-logo-height: 44px !important;
    --header-logo-mobile-height: 36px !important;
}

/*
 * Phone header, logged in: the bundle renders a Deposit link right after the
 * balance button but ships it with Tailwind's "hidden" class (desktop shows
 * its own Deposit button next to the balance). Show it, sized like the
 * balance button beside it.
 */
.headerLoggedInButnsMobileContainer .headerDepositBtnMobile {
    display: flex !important;
    font-size: var(--btn-mob-font-size);
    padding: var(--btn-mob-padding-y) var(--btn-mob-padding-x);
    line-height: var(--btn-mob-line-height);
    white-space: nowrap;
}

/*
 * Growth Pack, 2026-11-07 (owner's request): the phone header and the rewards center in arena216's colours.
 *
 * Phone header: js/rewards-cards.js (copied from promotunis.com) shows the VIP level and the A-Coins balance as two
 * cards under the header and hides the pack's two small header badges below 768 px; the balance stays on one line.
 */
.headerLoggedInButnsMobileContainer .headerBalanceBtnMobile,
.headerLoggedInButnsMobileContainer .headerBalanceBtnMobile * { white-space: nowrap; }

/*
 * Rewards center (Growth Pack rewards.js: the gift sheet / "My bonuses"). The pack's "premium" rules are hard-coded
 * gold (#f2c41a) and ignore the --gp-* theme, so they are restated here in arena216 green (#6ce69e, hover #52b27a,
 * dark #387a54, light #94f7bd) on its slate surfaces (#1d2932 / #374b58 / #171f25). "html body" outranks the pack's
 * selectors, whose <style> is added after this file. Grey "bx" buttons and the VIP level colour (--vc) are left alone.
 */
html body .rwd-sheet { background: #151f26; border-color: rgba(108,230,158,.35); }
html body .rwd-shd { background: linear-gradient(180deg,#1d2932,#151f26); border-image: linear-gradient(90deg,rgba(108,230,158,0),rgba(108,230,158,.55) 50%,rgba(108,230,158,0)) 1; }
html body .rwd-shd .gi { background: linear-gradient(180deg,#22313b,#18242c) padding-box, linear-gradient(160deg,#94f7bd,#387a54 50%,#6ce69e) border-box; }
html body .rwd-shd .ey { color: #6ce69e; }
html body .rwd-shd button { background: #22313b; border-color: #374b58; }

html body .rwd-prem .rwd-row { background: linear-gradient(180deg,#22313b,#1a262e); border-color: rgba(108,230,158,.14); }
html body .rwd-prem .rwd-row.hot { border-color: rgba(108,230,158,.7); background: linear-gradient(180deg,#183026,#111d18); box-shadow: 0 0 0 1px rgba(108,230,158,.18), 0 0 24px rgba(108,230,158,.14); }
html body .rwd-prem .rwd-row.hot:before { background: linear-gradient(180deg,#94f7bd,#6ce69e); }
html body .rwd-prem .rwd-pg, html body .rwd-prem .rwd-dots span { background: #374b58; }
html body .rwd-prem .rwd-pg span, html body .rwd-prem .rwd-dots span.on { background: linear-gradient(90deg,#387a54,#6ce69e 60%,#94f7bd); box-shadow: 0 0 8px rgba(108,230,158,.5); }
html body .rwd-prem .rwd-b { color: #16171f; background: linear-gradient(180deg,#94f7bd 0%,#6ce69e 52%,#52b27a 100%); box-shadow: 0 4px 14px rgba(108,230,158,.22), inset 0 1px 0 rgba(255,255,255,.35); }
html body .rwd-prem input { border-color: rgba(108,230,158,.35) !important; background: #111a20 !important; color: #6ce69e !important; }

html body .rwd-eb { color: #6ce69e; }
html body .rwd-eb:after { background: linear-gradient(90deg,rgba(108,230,158,.4),rgba(108,230,158,0)); }
html body [dir=rtl] .rwd-eb:after { background: linear-gradient(270deg,rgba(108,230,158,.4),rgba(108,230,158,0)); }

html body .rwd-hero {
  background: radial-gradient(120% 90% at 50% 0%,rgba(108,230,158,.18),rgba(108,230,158,0) 60%) padding-box,
              linear-gradient(180deg,#17271f,#151f26) padding-box,
              linear-gradient(160deg,rgba(148,247,189,.9),rgba(56,122,84,.5) 45%,rgba(23,31,37,.6) 70%,rgba(108,230,158,.85)) border-box;
}
html body .rwd-hero .lb { color: #b9c7cf; }
html body .rwd-hero .amt { background: linear-gradient(180deg,#e3fff0,#6ce69e 55%,#387a54); -webkit-background-clip: text; background-clip: text; color: transparent; }
html body .rwd-ws .r { color: #6ce69e; }

html body .rwd-vtop { background: linear-gradient(180deg,#22313b,#1a262e); border-color: rgba(108,230,158,.2); }
html body .rwd-vtop .cr { background: #151f26; box-shadow: 0 0 0 2px var(--vc), 0 0 16px rgba(108,230,158,.22); }
html body .rwd-vtop .cl { color: #6ce69e; border-color: rgba(108,230,158,.4); }
html body .rwd-vtop .bar { background: #374b58; }
html body .rwd-vtop .bar i { background: linear-gradient(90deg,#387a54,#6ce69e 60%,#94f7bd); box-shadow: 0 0 10px rgba(108,230,158,.55); }
html body .rwd-vtop .nb span:first-child { color: #6ce69e; }
html body .rwd-sm[style*="#f2c41a"] { color: #6ce69e !important; }