/* Shared Apex member polish. Loaded after page CSS on mobile and desktop. */
:root {
  --apex-divider: color-mix(in srgb, var(--apex-line) 42%, transparent);
  --apex-elevated: color-mix(in srgb, var(--apex-panel) 84%, var(--apex-surface));
  --apex-field-bg: color-mix(in srgb, var(--apex-panel) 76%, var(--apex-bg));
  --apex-on-primary: #fff8ee;
  --apex-soft-shadow: 0 10px 28px color-mix(in srgb, var(--apex-bg) 62%, transparent);
}

body { background: var(--apex-bg); color: var(--apex-text); }

.apex-shell .apex-header,
.apex-shell .apex-bottom-nav,
.apex-shell .apex-drawer,
.apex-shell .apex-game-nav,
.apex-shell .apex-footer,
.apex-desktop .apex-topbar,
.apex-desktop .apex-game-nav,
.apex-desktop .apex-sidebar,
.apex-desktop .apex-sidebar-right,
.apex-desktop .apex-footer {
  background: var(--apex-surface);
  border-color: var(--apex-divider);
  box-shadow: none;
}

.apex-shell :is(.apex-section, .apex-page-card, .apex-deposit-account, .apex-deposit-form, .apex-deposit-panel, .apex-deposit-note, .apex-deposit-alert, .apex-deposit-empty, .apex-history-card, .apex-wallet-panel, .apex-settings-panel, .apex-info-panel, .apex-ref-stat, .apex-ref-share, .apex-cms, .apex-auth-card),
.apex-desktop :is(.apex-panel, .apex-page-card, .apex-page-hero, .apex-balance-hero, .apex-account-hero, .apex-stat, .apex-alert, .apex-auth-card, .apex-side-note, .apex-contact-card, .apex-promo-card) {
  border-color: transparent !important;
  background: var(--apex-surface);
  box-shadow: var(--apex-soft-shadow);
}

.apex-shell .apex-history-summary > * {
  border-color: transparent !important;
  background: var(--apex-surface);
  box-shadow: var(--apex-soft-shadow);
}

.apex-shell :is(.apex-game-nav a, .apex-drawer-games a, .apex-provider-card, .apex-game-card, .apex-deposit-bank),
.apex-desktop :is(.apex-game-nav-chip, .apex-quick-action, .apex-provider-card, .apex-game-card, .apex-history-row, .apex-contact-body) {
  border-color: transparent !important;
  background: var(--apex-panel);
  box-shadow: none;
}

.apex-shell :is(.apex-game-nav a, .apex-drawer-games a, .apex-provider-card, .apex-game-card):is(:hover, :focus-visible, .is-active),
.apex-desktop :is(.apex-game-nav-chip, .apex-quick-action, .apex-provider-card, .apex-game-card):is(:hover, :focus-visible, .is-active) {
  background: color-mix(in srgb, var(--apex-primary) 22%, var(--apex-panel));
}

.apex-shell :is(.apex-page-hero, .apex-section-title, .apex-panel-head, .apex-deposit-form-head),
.apex-desktop :is(.apex-panel-head, .apex-page-hero-text, .apex-page-card-title) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.apex-shell :is(.apex-deposit-tabs, .apex-deposit-method-tabs, .apex-member-tabs),
.apex-desktop :is(.apex-member-tabs, .apex-method-tabs, .apex-filter) {
  border: 0 !important;
  background: color-mix(in srgb, var(--apex-surface) 82%, var(--apex-bg));
  box-shadow: none;
}

.apex-shell :is(.apex-deposit-tabs a, .apex-deposit-method-tabs button, .apex-member-tabs a),
.apex-desktop :is(.apex-member-tabs a, .apex-method-tabs button) {
  border: 0 !important;
}

.apex-shell :is(.apex-deposit-tabs, .apex-deposit-method-tabs, .apex-member-tabs) .is-active,
.apex-desktop :is(.apex-member-tabs, .apex-method-tabs) .is-active {
  background: var(--apex-primary);
  color: var(--apex-on-primary);
}

.apex-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .apex-auth-input),
.apex-desktop :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .apex-field, .apex-auth-input) {
  border: 1px solid var(--apex-divider) !important;
  background: var(--apex-field-bg) !important;
  color: var(--apex-text) !important;
  box-shadow: none !important;
}

.apex-shell :is(input, select, textarea, button, a):focus-visible,
.apex-desktop :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--apex-accent) 72%, transparent);
  outline-offset: 2px;
}

.apex-shell .apex-drawer-menu :is(a, button),
.apex-desktop :is(.apex-sidebar-section, .apex-side-latest-window, .apex-side-service-row) {
  border-color: var(--apex-divider);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Brand motion remains visible while labels stay steady and readable. */
.apex-shell .apex-live-chat {
  animation: apexLiveChatMonochrome .72s steps(2, end) infinite;
}

.apex-shell .apex-live-chat .apex-icon {
  animation: apexLiveChatIconNeon .72s steps(2, end) infinite;
}

.apex-shell .apex-bottom-nav .is-main::before {
  animation: apexMainBreath 1.45s ease-in-out infinite;
}

.apex-shell .apex-bottom-nav .is-main::after {
  animation: apexMainInvite 2.9s ease-out infinite;
}

.apex-shell .apex-bottom-nav .is-main > .apex-icon {
  animation: apexMainIconLift 1.45s ease-in-out infinite;
}

/* Keep the notched navigation shape; the surface belongs to ::before. */
.apex-shell .apex-bottom-nav {
  background: transparent;
  box-shadow: none;
}

.apex-shell .apex-bottom-nav .is-main {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.apex-shell .apex-bottom-nav .is-main > .apex-bottom-label {
  top: calc(50% + 37px);
  line-height: 1;
}

/* Service heading sits in the border gap without covering its content. */
.apex-shell .apex-service {
  margin-top: 26px;
  padding-top: 12px;
}

.apex-shell .apex-service::before {
  display: none;
}

.apex-shell .apex-service h2 {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  display: table;
  margin: 0 auto 8px;
  padding: 0;
  transform: none;
  background: transparent;
  line-height: 1.2;
}

.apex-shell .apex-service article:first-of-type {
  padding-top: 8px;
}