/* MOBILE HEADER */
.mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1002; flex-wrap: nowrap; width: 100%; max-width: 100%; align-items: center; justify-content: space-between; gap: 4px; min-height: 48px; padding: 10px 8px; padding-left: max(4px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); box-sizing: border-box; }
.mobile-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 100%); pointer-events: none; z-index: 1003; }
.mobile-header__logo-link { display: flex; align-items: center; flex-shrink: 1; min-width: 0; align-self: center; height: 44px; margin-right: auto; }
.mobile-header__logo { width: auto; max-width: min(45vw, 100%); height: 44px; /* Solz script logo (2026-10-10) */ object-fit: contain; object-position: left center; display: block; margin-top: 0; margin-left: 12px; }

/* Logged in (or the session is known and the profile is on its way): the logo keeps its
   size and the row on the right takes ALL the rest of the bar, so the balance pill can
   grow into it. The pill hugs its amount and sits right next to the deposit button. */
.mobile-header--member .mobile-header__logo-link { flex: 0 0 auto; margin-right: 0; }
.mobile-header--member .mobile-header__logo { max-width: none; }
.mobile-header__balance-badge-row { display: flex; align-items: center; justify-content: flex-end; gap: 0; flex: 1 1 0; min-width: 0; margin-left: 4px; }

/* Balance pill = a button: one tap opens the Cash / Bonus breakdown (#mobile-balance-panel). */
.mobile-header__balance-wrap { position: relative; flex: 0 1 auto; min-width: 0; height: 32px; box-sizing: border-box; margin: 0; padding: 0 8px; overflow: hidden; background-color: var(--bg-input); border: none; border-radius: var(--radius-md) 0 0 var(--radius-md); color: #fff; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
/* The pill is 32px tall like the design; its tap area reaches the full 40px of the bar row. */
.mobile-header__balance-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.mobile-header__balance-wrap:active, .mobile-header__balance-wrap.open { background-color: var(--bg-card); }
.mobile-header__balance-wrap.open .mobile-header__balance-chevron { transform: rotate(180deg); }
.mobile-header__balance-row { display: flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; width: auto; min-height: 32px; max-height: 32px; }
.mobile-header__balance-cur-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; display: block; }
/* Never an ellipsis: the fit ladder below always finds a size / form that shows the whole amount. */
.mobile-header__balance-text { font-family: "RM Neue-Bold", Helvetica, sans-serif; font-weight: 700; color: #fff; font-size: var(--fs-md); letter-spacing: 0; line-height: 18px; white-space: nowrap; overflow: hidden; flex: 0 1 auto; min-width: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mobile-header__balance-chevron { flex-shrink: 0; font-size: 9px; color: var(--text-dim); margin-left: 1px; transition: transform .24s var(--ease-premium); }

/* Fit ladder (MobileHeader.tsx sets data-balance-fit after measuring the real layout) */
.mobile-header[data-balance-fit="2"] .mobile-header__balance-text,
.mobile-header[data-balance-fit="3"] .mobile-header__balance-text,
.mobile-header[data-balance-fit="6"] .mobile-header__balance-text { font-size: var(--fs-sm); }
.mobile-header[data-balance-fit="4"] .mobile-header__balance-text { font-size: 13px; }
.mobile-header[data-balance-fit="5"] .mobile-header__balance-text,
.mobile-header[data-balance-fit="7"] .mobile-header__balance-text { font-size: var(--fs-xs); }
.mobile-header:is([data-balance-fit="3"], [data-balance-fit="4"], [data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__logo { height: 24px; }
.mobile-header:is([data-balance-fit="4"], [data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-wrap { padding: 0 6px; }
.mobile-header:is([data-balance-fit="4"], [data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-row { gap: 4px; }
/* With the Account button (owner 2026-10-23, the phone list: "Move Account to the top-right of the header") the row has
   one more block, so the ladder makes room the same way it shrinks the logo: from step 2 the header's blocks are 36 px
   and 4 px apart (40 / 6 at steps 0–1: big phones, short balances), and from step 4 the bar's right gutter, its gaps and
   the pill's padding are a little tighter — so a 320 px phone still shows $9,999.99 whole (the Meme rewards button that
   also stood in this row was removed on 2026-10-23). Undo
   ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 5) */
.mobile-header:is([data-balance-fit="3"], [data-balance-fit="4"], [data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) :is(.mobile-header__badge, .mobile-header__rewards-btn, .mobile-header__account-btn) { width: 36px; height: 36px; }
.mobile-header:is([data-balance-fit="3"], [data-balance-fit="4"], [data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) :is(.mobile-header__rewards-wrap, .mobile-header__account-wrap) { margin-left: 4px; }
.mobile-header:is([data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) { gap: 2px; padding-right: max(12px, env(safe-area-inset-right)); }
.mobile-header:is([data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-badge-row { margin-left: 2px; }
.mobile-header:is([data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-wrap { padding: 0 4px; }
.mobile-header:is([data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-row { gap: 3px; }
.mobile-header:is([data-balance-fit="5"], [data-balance-fit="6"], [data-balance-fit="7"]) .mobile-header__balance-cur-icon { width: 16px; height: 16px; }

/* Session known, profile still loading: grey placeholders in the same places */
.mobile-header__balance-skeleton { flex: 0 1 96px; min-width: 0; height: 32px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--bg-input); }
.mobile-header__badge--skeleton { background: var(--bg-input); cursor: default; }
.mobile-header__rewards-btn--skeleton { background: var(--bg-chip); cursor: default; }
@media (prefers-reduced-motion: no-preference) {
    .mobile-header__balance-badge-row--pending > * { animation: mhSkeletonPulse 1.2s ease-in-out infinite; }
}
@keyframes mhSkeletonPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.mobile-header__badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--cashier); border-radius: var(--radius-md); cursor: pointer; margin: 0; padding: 0; border: none; position: relative; z-index: 2; -webkit-tap-highlight-color: transparent; }
.mobile-header__badge .header-btn-icon, .mobile-header__rewards-btn .header-btn-icon { width: 22px; height: 22px; }
.mobile-header__badge.deposit-trigger--clicked { transform: scale(0.94); transition: transform var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); }
.mobile-header__rewards-wrap { position: relative; flex-shrink: 0; margin-left: 6px; }
.mobile-header__rewards-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-chip); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); border: none; padding: 0; }
@media (hover: hover) { .mobile-header__rewards-btn:hover { background: var(--bg-chip-hover); } }
.mobile-header__rewards-btn:active { background: var(--bg-elevated); }
/* Account, top right (owner 2026-10-23: "Move Account to the top-right of the header"; MobileHeader.tsx): the present's
   block, with the unread-notifications dot the bottom bar's Account item had (coral, a dark ring) at its corner. Undo
   ../removed-features-backup/mobile-list-2026-10-23/README.txt (item 5) */
.mobile-header__account-wrap { position: relative; flex-shrink: 0; margin-left: 6px; }
.mobile-header__account-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-chip); border-radius: var(--radius-md); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast, .16s) var(--ease-out, cubic-bezier(.33,1,.68,1)); border: none; padding: 0; color: var(--text-primary); }
.mobile-header__account-btn .header-btn-icon { width: 22px; height: 22px; }
@media (hover: hover) { .mobile-header__account-btn:hover { background: var(--bg-chip-hover); } }
.mobile-header__account-btn:active { background: var(--bg-elevated); }
.mobile-header__account-btn--skeleton { background: var(--bg-chip); cursor: default; }
.mobile-header__account-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-primary); pointer-events: none; }

/* Balance panel: Cash and Bonus in full + the display currency (rows: header.css .bal-dropdown__*).
   One fixed layer on <body> under the bar (MobileHeader.tsx portal): a dimmed backdrop that only
   closes the panel, and the panel hanging right-aligned under the pill, never wider than the screen. */
.mobile-bal-layer { position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 1004; }
/* (no pointer-events: none while it fades: the tap that closed it must not fall through to a link) */
.mobile-bal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); -webkit-tap-highlight-color: transparent; }
.mobile-bal-panel { position: absolute; top: 6px; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); margin-left: auto; max-width: 400px; max-height: calc(100% - 12px - 70px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); transform-origin: top right; }
/* A very long amount (RSD in the billions on a 320px phone) wraps under its label instead of being cut. */
.mobile-bal-panel .bal-dropdown__item { flex-wrap: wrap; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.mobile-bal-panel .bal-dropdown__value { margin-left: auto; font-size: var(--fs-md); }
.mobile-bal-panel .bal-dropdown__cur-item { min-height: 44px; }
.mobile-bal-panel .bal-dropdown__currencies { max-height: none; }
@keyframes mobBalIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mobBalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes mobBalFade { from { opacity: 0; } }
@keyframes mobBalFadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .mobile-bal-panel { animation: mobBalIn var(--dur-base, .22s) var(--ease-premium); }
    .mobile-bal-backdrop { animation: mobBalFade var(--dur-base, .22s) var(--ease-premium); }
    .mobile-bal-layer.is-closing .mobile-bal-panel { animation: mobBalOut .14s var(--ease-in, cubic-bezier(.4,0,1,1)) forwards; }
    .mobile-bal-layer.is-closing .mobile-bal-backdrop { animation: mobBalFadeOut .14s var(--ease-in, cubic-bezier(.4,0,1,1)) forwards; }
}
@media (min-width: 769px) { .mobile-bal-layer { display: none; } }

/* Logged out: Sign In (grey) + Register (blue) on the right; the logo stays on the left */
.mobile-header__auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 12px; }
.mobile-header__auth-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: none; border-radius: var(--radius-md); font-family: "RM Neue", Helvetica, sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.2px; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, filter 0.12s ease, background 0.16s ease; }
.mobile-header__auth-btn:active { transform: scale(0.95); filter: brightness(0.9); }
.mobile-header--logged-out .mobile-header__logo { height: 32px; }

@media (max-width: 768px) {
    .mobile-header { display: flex !important; min-height: 62px; height: 62px; }
    .mobile-header { z-index: 1003; }
}
@media (max-width: 360px) {
    .mobile-header__auth { gap: 6px; margin-left: 8px; }
    .mobile-header__auth-btn { padding: 0 12px; }
}
@media (max-width: 340px) {
    .mobile-header--logged-out .mobile-header__logo { height: 26px; }
}
@media (min-width: 769px) { .mobile-header { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .mobile-header__balance-wrap, .mobile-header__balance-chevron, .mobile-header__badge.deposit-trigger--clicked, .mobile-header__rewards-btn, .mobile-header__auth-btn { transition: none; }
}

/* Every tap target of the phone header answers a tap at once: no double-tap-to-zoom wait (pinch-zoom is allowed on the
   site, so iPhone Safari otherwise holds a tap to see if a second follows — quick taps on the rewards present could
   arrive late or twice and close the menu it had just opened; owner 2026-10-16: "sometimes when i click the rewards
   present … it automatically closes"). The balance pill already had it. Undo
   ../removed-features-backup/rewards-present-taps-2026-10-16/README.txt */
.mobile-header__rewards-btn, .mobile-header__account-btn, .mobile-header__badge, .mobile-header__auth-btn, .mobile-header a, .mobile-header button { touch-action: manipulation; }