/*
 * Logged-in mobile header: level pill (rewards.js #rwd-hvip), X-Coins badge (zcoins.js #zc-hb),
 * balance and account buttons (bundle). Without this the row stretches every item to its full
 * height: the coins badge turns into a big circle and the balance button into a two-line block.
 * Site file: the Growth Pack scripts are overwritten by growth:publish, so their look is adjusted here.
 */
.headerLoggedInButnsMobileContainer{align-items:center;gap:6px;flex-shrink:0}
#mainHeader .headerLogo,#mainHeader .burgerIcon{flex-shrink:0}
.headerLoggedInButnsMobileContainer > *{margin-left:0 !important;margin-right:0 !important}

/* Level: a round badge in the level colour showing only the crown ("👑 Diamond" is one text node,
   so the name is clipped), with the monthly progress bar under it. Tapping it opens the VIP panel,
   and the account menu shows the level by name. A text pill does not fit next to the logo on a phone. */
.headerLoggedInButnsMobileContainer .rwd-hvip{min-width:0;padding:0;gap:3px;align-items:center;flex-shrink:0}
.headerLoggedInButnsMobileContainer .rwd-hvip .rwd-lvl{display:block;width:26px;height:26px;padding:0 0 0 5px;border-radius:50%;
  overflow:hidden;font-size:14px;line-height:26px;text-align:left;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.headerLoggedInButnsMobileContainer .rwd-hvip .rwd-vbar{width:26px;height:2px;margin:0}

/* X-Coins: same height as the balance button */
.headerLoggedInButnsMobileContainer .zc-hb{height:32px;padding:0 10px;gap:5px;font-size:13px;line-height:1}

/* Balance: one line, amount and currency together */
.headerLoggedInButnsMobileContainer .headerBalanceBtnMobile{height:32px;padding:0 10px;white-space:nowrap;font-size:13px;line-height:1}
.headerLoggedInButnsMobileContainer .headerBalanceBtnMobile *{white-space:nowrap}

/* Account: square button matching the others */
.headerLoggedInButnsMobileContainer .headerAccountMobile{height:32px;width:32px;justify-content:center}

/* Very narrow phones: keep the row on one line */
@media (max-width:360px){
  .headerLoggedInButnsMobileContainer{gap:4px}
  .headerLoggedInButnsMobileContainer .zc-hb,
  .headerLoggedInButnsMobileContainer .headerBalanceBtnMobile{padding:0 7px;font-size:12px}
}