/* ═══════════════════════════════════════════════════════════════════════════
   E-GIRLZ Account & Wallet — eg-wallet.css
   Loaded on all account pages via is_account_page()
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root tokens ─────────────────────────────────────────────────────────── */
.my-account-wrapper {
  --ew-bg:          rgba(7,6,17,.92);
  --ew-surface:     rgba(20,16,40,.86);
  --ew-surface-2:   rgba(28,22,58,.88);
  --ew-border:      rgba(184,168,255,.14);
  --ew-border-act:  rgba(124,92,255,.45);
  --ew-violet:      #7c5cff;
  --ew-lavender:    #b17eff;
  --ew-lav-dim:     rgba(184,168,255,.60);
  --ew-gold:        #ffd76a;
  --ew-muted:       rgba(184,168,255,.52);
  --ew-text:        rgba(235,228,255,.92);
  font-family: "Muller", sans-serif;
  color: #fff;
}

/* ── Header wallet control ───────────────────────────────────────────────── */
.eg-header-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(184,168,255,.14);
  background: rgba(13,11,24,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  text-decoration: none;
  color: #fff;
  transition: border-color .2s, background .2s;
}

.eg-header-wallet:hover {
  border-color: rgba(184,168,255,.26);
  background: rgba(18,14,34,.78);
  color: #fff;
}

.eg-header-wallet__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(196,181,253,.55);
  white-space: nowrap;
}

.eg-header-wallet__amount {
  font-weight: 750;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.eg-header-wallet__plus {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(184,168,255,.10);
  border: 1px solid rgba(184,168,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.62);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.eg-header-wallet__plus:hover {
  background: rgba(184,168,255,.18);
  color: rgba(255,255,255,.88);
}

.eg-header-wallet--mobile {
  min-height: 38px;
  font-size: 13px;
}

/* ── Account panels + animation ──────────────────────────────────────────── */
.eg-account-panel {
  animation: egAccountPanelIn .22s ease both;
}

@keyframes egAccountPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eg-account-panel { animation: none; }
}

.eg-account-notices { margin-bottom: 16px; }
.eg-account-notices:empty { display: none; }


/* ── Account nav row (nav + logout separated) ────────────────────────────── */
.eg-account-nav-row {
  width: min(100%, 980px);
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eg-account-nav-row .eg-account-nav {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  min-width: 0;
}

.eg-account-logout {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 15px;
  border: 1px solid rgba(255,155,155,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(16,11,20,.58);
  color: rgba(255,230,230,.76);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: "Muller", sans-serif;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.eg-account-logout:hover {
  color: #fff;
  border-color: rgba(255,155,155,.22);
  background: rgba(34,16,24,.62);
}

/* ── Account nav ─────────────────────────────────────────────────────────── */
.eg-account-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 8px;
  border-radius: 24px;
  border: 1px solid rgba(184,168,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(8,6,16,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 20px 60px rgba(0,0,0,.24);
}

.eg-account-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(184,168,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.01)),
    rgba(13,10,24,.66);
  color: rgba(226,218,255,.70);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: "Muller", sans-serif;
  /* Same shadow-layer count as the :hover state (a 0-alpha placeholder for
     the glow layer) so box-shadow can interpolate smoothly instead of the
     glow popping in instantly — mismatched layer counts aren't animatable. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 22px rgba(124,92,255,0);
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.eg-account-nav__link:hover {
  color: rgba(255,255,255,.94);
  transform: none;
  border-color: rgba(184,168,255,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.12), transparent 70%),
    rgba(17,13,31,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 22px rgba(124,92,255,.08);
}

.eg-account-nav__link.is-active {
  color: #fff;
  border-color: rgba(184,168,255,.30);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.22), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.014)),
    rgba(28,20,56,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 28px rgba(124,92,255,.12);
}

.eg-account-nav__link--logout {
  margin-left: auto;
  min-height: 42px;
  border-radius: 15px;
  border: 1px solid rgba(255,155,155,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(16,11,20,.58);
  color: rgba(255,230,230,.76);
  font-weight: 900;
  box-shadow: none;
}

.eg-account-nav__link--logout:hover {
  color: #fff;
  border-color: rgba(255,155,155,.20);
  background: rgba(34,16,24,.62);
  transform: none;
  box-shadow: none;
}

/* ── Account shell ───────────────────────────────────────────────────────── */
.eg-account-shell--dashboard {
  width: min(calc(100% - 32px), 1120px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 34px;
  border: 1px solid rgba(184,168,255,.10);
  background: rgba(8,6,18,.88);
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 44px);
  box-shadow: 0 28px 72px rgba(0,0,0,.26);
}

/* ── Wallet outer container ──────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 60px;
}

/* ── Balance panel ────────────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-balance-panel {
  padding: clamp(24px, 3.5vw, 36px);
  margin-bottom: 22px;
  border-radius: 26px;
  border: 1px solid var(--ew-border);
  background:
    radial-gradient(circle at 12% 0%, rgba(124,92,255,.13), transparent 44%),
    radial-gradient(circle at 88% 100%, rgba(184,168,255,.05), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.010)),
    rgba(10,8,20,.82);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 36px;
  align-items: center;
}

.my-account-wrapper .eg-wallet .eg-balance-panel__eyebrow {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--ew-lavender);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__amount {
  font-size: clamp(40px, 5.5vw, 62px);
  font-weight: 950;
  letter-spacing: -0.06em;
  color: #fff;
  line-height: .9;
  margin: 0 0 9px;
  text-shadow: 0 0 32px rgba(184,168,255,.12);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__currency {
  font-size: .52em;
  font-weight: 750;
  letter-spacing: 0;
  color: rgba(255,255,255,.52);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__sub {
  margin: 0;
  font-size: 13px; color: var(--ew-muted); font-weight: 500;
}

.my-account-wrapper .eg-wallet .eg-balance-panel__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

.my-account-wrapper .eg-wallet .eg-balance-panel__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 15px; border: 1px solid transparent;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: all .2s; white-space: nowrap;
  font-family: "Muller", sans-serif;
}

.my-account-wrapper .eg-wallet .eg-balance-panel__btn--primary {
  background: linear-gradient(135deg, #7c5cff 0%, #5840ba 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124,92,255,.26);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__btn--primary:hover {
  transform: none;
  box-shadow: 0 12px 32px rgba(124,92,255,.38);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__btn--secondary {
  border-color: var(--ew-border);
  background: rgba(255,255,255,.04);
  color: var(--ew-text);
}

.my-account-wrapper .eg-wallet .eg-balance-panel__btn--secondary:hover {
  border-color: rgba(124,92,255,.28);
  background: rgba(124,92,255,.08);
  color: #fff;
}

/* ── Segmented tabs ──────────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-balance-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.my-account-wrapper .eg-wallet .eg-balance-tabs {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(184,168,255,.14);
  background: rgba(9,7,18,.56);
}

.my-account-wrapper .eg-wallet .eg-balance-tab {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(226,218,255,.65);
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}

.my-account-wrapper .eg-wallet .eg-balance-tab:hover {
  color: rgba(226,218,255,.9);
  background: rgba(124,92,255,.08);
}

.my-account-wrapper .eg-wallet .eg-balance-tab.is-active {
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.25), transparent 70%),
    rgba(75,50,160,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  border-color: rgba(124,92,255,.22);
}

/* ── Panel (content card) ────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-wallet-panel {
  border: 1px solid var(--ew-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.09), transparent 34%),
    var(--ew-surface);
  box-shadow: 0 18px 56px rgba(0,0,0,.18);
  overflow: hidden;
}

/* ── Section head ────────────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-wallet-section-head {
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(184,168,255,.10);
}

.my-account-wrapper .eg-wallet .eg-wallet-section-head h3 {
  margin: 0 0 5px; font-size: 18px; font-weight: 700; color: #fff;
}

.my-account-wrapper .eg-wallet .eg-wallet-section-head p {
  margin: 0; font-size: 13px; color: var(--ew-muted); line-height: 1.5;
}

/* ── Topup panel ─────────────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-topup-panel {
  border-radius: 34px;
  border: 1px solid rgba(184,168,255,.18);
  background:
    radial-gradient(circle at 88% 0%, rgba(124,92,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(11,9,21,.72);
  padding: clamp(26px, 4vw, 42px);
  /* The whole card must never move/scale on hover — only its own inner
     buttons/inputs get hover feedback. */
  transform: none;
}

.my-account-wrapper .eg-wallet .eg-topup-panel:hover {
  transform: none;
}

.my-account-wrapper .eg-wallet .eg-topup-panel__head {
  margin-bottom: 4px;
}

.my-account-wrapper .eg-wallet .eg-topup-panel__title {
  margin: 0 0 8px;
  font-size: clamp(22px,3vw,28px); font-weight: 800; color: #fff; line-height: 1.1;
}

.my-account-wrapper .eg-wallet .eg-topup-panel__desc {
  margin: 0;
  font-size: 14px; color: var(--ew-muted); line-height: 1.5;
}

.my-account-wrapper .eg-wallet .eg-topup-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 22px;
}

.my-account-wrapper .eg-wallet .eg-topup-preset {
  display: flex; align-items: center; justify-content: center;
  min-height: 76px;
  border-radius: 22px;
  border: 1px solid rgba(184,168,255,.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(13,10,24,.72);
  color: rgba(255,255,255,.90);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.03em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.18);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
  font-family: "Muller", sans-serif;
}

.my-account-wrapper .eg-wallet .eg-topup-preset:hover {
  transform: none;
  color: #fff;
  border-color: rgba(184,168,255,.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.20), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    rgba(22,16,43,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 28px rgba(124,92,255,.12);
}

.my-account-wrapper .eg-wallet .eg-topup-preset.is-selected {
  color: #fff;
  border-color: rgba(184,168,255,.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.26), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.014)),
    rgba(30,22,58,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 34px rgba(124,92,255,.16);
}

.my-account-wrapper .eg-wallet .eg-topup-label {
  display: block; margin-bottom: 10px;
  font-size: 12px; font-weight: 650; letter-spacing: .05em;
  color: var(--ew-lav-dim); text-transform: uppercase;
}

.my-account-wrapper .eg-wallet .eg-topup-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px; align-items: stretch;
}

.my-account-wrapper .eg-wallet .eg-topup-input-wrap {
  position: relative; display: flex; align-items: center;
}

.my-account-wrapper .eg-wallet .eg-topup-input-suffix {
  position: absolute; right: 16px;
  color: rgba(184,168,255,.45); font-size: 16px; font-weight: 600;
  pointer-events: none; user-select: none;
}

.my-account-wrapper .eg-wallet input.woo-wallet-balance-to-add {
  width: 100%; height: 58px; min-height: 58px;
  margin: 0; padding: 0 40px 0 18px;
  border: 1px solid var(--ew-border);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  color: #fff; font-size: 18px; font-weight: 600;
  outline: none; font-family: "Muller", sans-serif;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.my-account-wrapper .eg-wallet input.woo-wallet-balance-to-add:focus {
  border-color: rgba(124,92,255,.5);
  box-shadow: 0 0 0 4px rgba(124,92,255,.1);
}

.my-account-wrapper .eg-wallet input.woo-wallet-balance-to-add::placeholder {
  color: rgba(184,168,255,.3);
}

/* Quiet custom validation state (replaces the native browser popup — the
   submit button is a plain type="button" fully driven by JS in
   woo-wallet/topup.php, so this is the only invalid-amount feedback there
   is). Amber, not red, per design. */
.my-account-wrapper .eg-wallet .eg-topup-input-wrap.is-invalid,
.my-account-wrapper .eg-wallet input.woo-wallet-balance-to-add.is-invalid {
  border-color: rgba(255, 202, 130, .42);
  box-shadow:
    0 0 0 1px rgba(255, 202, 130, .12),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.my-account-wrapper .eg-wallet .eg-topup-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 202, 130, .86);
}

.my-account-wrapper .eg-wallet .eg-topup-error[hidden] {
  display: none;
}

.my-account-wrapper .eg-wallet .eg-topup-submit {
  box-sizing: border-box;
  height: 58px; min-height: 58px;
  margin: 0; padding: 0 28px;
  border: 1px solid rgba(184,168,255,.28);
  border-radius: 20px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(108,92,255,.88), rgba(142,92,255,.76));
  color: #fff; font-size: 15px; font-weight: 950;
  cursor: pointer;
  /* Native focus outline is fully replaced below by a box-shadow ring on
     :focus-visible only — this prevents the browser's default outline from
     suddenly popping in on a plain mouse-triggered :focus (some browsers,
     notably Safari, focus a button on click even though :focus-visible
     won't match) and reading as a "jump". */
  outline: none;
  /* Same 2-layer shape as :hover/:active, just with the glow layer at 0
     alpha — so the transition interpolates a fade-in instead of the shadow
     popping into existence with a mismatched layer count. */
  box-shadow: 0 10px 24px rgba(124,92,255,0), inset 0 1px 0 rgba(255,255,255,.10);
  transform: none;
  transform-origin: center center;
  will-change: transform, filter;
  transition:
    transform .32s cubic-bezier(.22,.61,.36,1),
    filter .32s cubic-bezier(.22,.61,.36,1),
    background .32s cubic-bezier(.22,.61,.36,1),
    border-color .32s cubic-bezier(.22,.61,.36,1),
    box-shadow .32s cubic-bezier(.22,.61,.36,1);
  font-family: "Muller", sans-serif; white-space: nowrap;
}

/* Round 8 (2026-07-04): hover/active used to jump straight to a fixed
   brightness/box-shadow with only a .22s ease transition, which read as a
   sudden "flash" rather than a smooth reaction — especially since the
   previous scale lock forced transform:none even here. Now: a very small
   scale (contained entirely within the button's own box, .eg-topup-panel is
   never touched), a near-imperceptible brightness bump, and a slow
   cubic-bezier ease-out so nothing pops. */
.my-account-wrapper .eg-wallet .eg-topup-submit:hover {
  height: 58px; min-height: 58px;
  padding: 0 28px;
  border-width: 1px;
  line-height: 1;
  transform: scale(1.012);
  filter: brightness(1.015) saturate(1.03);
  border-color: rgba(205,185,255,.38);
  box-shadow:
    0 10px 24px rgba(124,92,255,.16),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.my-account-wrapper .eg-wallet .eg-topup-submit:active {
  height: 58px; min-height: 58px;
  padding: 0 28px;
  border-width: 1px;
  line-height: 1;
  transform: scale(.995);
  filter: brightness(.99);
  box-shadow:
    0 6px 16px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.my-account-wrapper .eg-wallet .eg-topup-submit:focus-visible {
  transform: none;
  height: 58px; min-height: 58px;
  padding: 0 28px;
  border-width: 1px;
  line-height: 1;
  outline: none;
  box-shadow:
    0 0 0 2px rgba(11,9,21,1),
    0 0 0 4px rgba(124,92,255,.55),
    0 10px 24px rgba(124,92,255,.16);
}

.my-account-wrapper .eg-wallet .eg-topup-submit.is-ready {
  box-shadow: 0 18px 44px rgba(124,92,255,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.my-account-wrapper .eg-wallet .eg-topup-note {
  margin: 16px 0 0;
  font-size: 12px; color: rgba(184,168,255,.28); line-height: 1.5;
}

/* ── Recent operations (PHP-rendered cards) ──────────────────────────────── */
.my-account-wrapper .eg-operations-section {
  margin-top: 22px;
}

.my-account-wrapper .eg-operations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.my-account-wrapper .eg-operations-title {
  margin: 0;
  font-size: 16px; font-weight: 700; color: #fff;
}

.my-account-wrapper .eg-operation-list {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--ew-border);
  background: rgba(10,8,20,.60);
  overflow: hidden;
}

.my-account-wrapper .eg-operation-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(184,168,255,.06);
  transition: background .15s;
}

.my-account-wrapper .eg-operation-item:last-child {
  border-bottom: none;
}

.my-account-wrapper .eg-operation-item:hover {
  background: rgba(124,92,255,.04);
}

.my-account-wrapper .eg-operation-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

.my-account-wrapper .eg-operation-icon.is-credit {
  background: rgba(109,255,178,.08);
  color: rgba(109,255,178,.82);
  border: 1px solid rgba(109,255,178,.14);
}

.my-account-wrapper .eg-operation-icon.is-debit {
  background: rgba(184,168,255,.08);
  color: rgba(196,181,253,.72);
  border: 1px solid rgba(184,168,255,.14);
}

.my-account-wrapper .eg-operation-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}

.my-account-wrapper .eg-operation-desc {
  font-size: 14px; font-weight: 600;
  color: rgba(235,228,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.my-account-wrapper .eg-operation-date {
  font-size: 12px; color: var(--ew-muted); font-weight: 500;
}

.my-account-wrapper .eg-operation-amount {
  flex-shrink: 0;
  font-size: 15px; font-weight: 750; letter-spacing: -0.02em;
}

.my-account-wrapper .eg-operation-amount.is-plus  { color: rgba(109,255,178,.82); }
.my-account-wrapper .eg-operation-amount.is-minus { color: rgba(196,181,253,.88); }

.my-account-wrapper .eg-operations-footer {
  text-align: right; margin-top: 12px;
}

.my-account-wrapper .eg-operations-all-link {
  font-size: 13px; color: #b17eff; text-decoration: none; font-weight: 600;
}

.my-account-wrapper .eg-operations-all-link:hover { color: #d0b4ff; }

.my-account-wrapper .eg-operations-empty {
  padding: 28px; text-align: center;
  color: var(--ew-muted); font-size: 14px;
}

/* ── Transactions section ────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .eg-transactions-wrap { padding: 0; }
.my-account-wrapper .eg-wallet .eg-transactions-table-wrap { padding: 0; }

/* Silence old classes */
.my-account-wrapper .eg-wallet .woo-wallet-form-wrapper,
.my-account-wrapper .eg-wallet .woo-wallet-transactions-list {
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}

/* ── Tabulator overrides ─────────────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .tabulator,
.my-account-wrapper .eg-wallet #wc-wallet-transaction-details,
.my-account-wrapper .eg-wallet .eg-wallet-transactions-table {
  border: 0; border-radius: 0; background: transparent;
  color: #fff; box-shadow: none;
}

.my-account-wrapper .eg-wallet .tabulator,
.my-account-wrapper .eg-wallet .tabulator .tabulator-tableholder,
.my-account-wrapper .eg-wallet .tabulator .tabulator-table,
.my-account-wrapper .eg-wallet .tabulator .tabulator-placeholder {
  background: transparent !important;
}

/* Header row */
.my-account-wrapper .eg-wallet .tabulator .tabulator-header {
  background: rgba(255,255,255,.025) !important;
  border-bottom: 1px solid rgba(184,168,255,.10) !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-headers,
.my-account-wrapper .eg-wallet .tabulator .tabulator-header-contents,
.my-account-wrapper .eg-wallet .tabulator .tabulator-col-group-cols,
.my-account-wrapper .eg-wallet .tabulator .tabulator-col-content,
.my-account-wrapper .eg-wallet .tabulator .tabulator-col-title-holder,
.my-account-wrapper .eg-wallet .tabulator .tabulator-col-title {
  background: transparent !important;
  color: rgba(184,168,255,.5) !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-header .tabulator-col {
  background: transparent !important;
  color: rgba(184,168,255,.5) !important;
  font-size: 10px; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .08em;
  border-color: rgba(184,168,255,.06) !important;
}

/* Data rows — styled as cards */
.my-account-wrapper .eg-wallet .tabulator-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(184,168,255,.07) !important;
  transition: background .15s;
}

.my-account-wrapper .eg-wallet .tabulator-row:hover {
  background: rgba(124,92,255,.04) !important;
}

.my-account-wrapper .eg-wallet .tabulator-row .tabulator-cell {
  background: transparent !important;
  color: rgba(235,228,255,.88) !important;
  border-color: rgba(184,168,255,.05) !important;
  font-size: 13px; font-weight: 500;
  padding: 14px 16px !important;
  vertical-align: middle;
}

/* Date column — muted */
.my-account-wrapper .eg-wallet .tabulator-row .tabulator-cell:first-child {
  color: rgba(184,168,255,.55) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Description column */
.my-account-wrapper .eg-wallet .tabulator-row .tabulator-cell:nth-child(2) {
  color: rgba(235,228,255,.92) !important;
  font-weight: 600 !important;
}

/* Amount column */
.my-account-wrapper .eg-wallet .tabulator-row .tabulator-cell:last-child {
  font-size: 14px !important; font-weight: 700 !important;
  text-align: right;
}

/* Placeholder */
.my-account-wrapper .eg-wallet .tabulator .tabulator-tableholder .tabulator-placeholder {
  min-height: 120px; background: transparent !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; background: transparent !important;
  color: var(--ew-muted) !important; font-size: 14px; font-weight: 500;
}

/* Footer / pagination */
.my-account-wrapper .eg-wallet .tabulator .tabulator-footer {
  border-top: 1px solid rgba(184,168,255,.10) !important;
  background: rgba(255,255,255,.02) !important;
  color: var(--ew-muted) !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-footer-contents,
.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-paginator {
  gap: 8px; background: transparent !important; color: var(--ew-muted) !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-footer :is(label, span, button) {
  background: transparent !important; color: var(--ew-muted) !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-page,
.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-page-size {
  min-height: 32px;
  border: 1px solid var(--ew-border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(235,228,255,.75) !important;
  padding: 4px 12px !important;
  font-size: 12px;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-page.active {
  border-color: var(--ew-border-act) !important;
  background: rgba(124,92,255,.42) !important;
  color: #fff !important; font-weight: 700 !important;
}

.my-account-wrapper .eg-wallet .tabulator .tabulator-footer .tabulator-page:disabled {
  color: rgba(184,168,255,.22) !important; opacity: 1;
}

/* Nuclear reset for all tabulator background/shadow chrome */
.my-account-wrapper .eg-wallet .tabulator :is(
  .tabulator-header, .tabulator-header-contents, .tabulator-headers,
  .tabulator-col, .tabulator-col-content, .tabulator-col-title,
  .tabulator-footer, .tabulator-footer-contents, .tabulator-paginator
) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.my-account-wrapper .eg-wallet .tabulator :is(.tabulator-header, .tabulator-footer) {
  background-color: rgba(255,255,255,.025) !important;
}

.my-account-wrapper .eg-wallet .tabulator :is(.tabulator-page, .tabulator-page-size, button, select) {
  background-color: rgba(255,255,255,.04) !important;
  background-image: none !important;
  color: rgba(235,228,255,.75) !important;
}

.my-account-wrapper .eg-wallet .tabulator :is(.tabulator-page:disabled, button:disabled) {
  background-color: rgba(255,255,255,.02) !important;
  color: rgba(184,168,255,.22) !important;
}

/* ── Table date filter controls ──────────────────────────────────────────── */
.my-account-wrapper .eg-wallet .woo-wallet-table-controls {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(184,168,255,.08);
  background: rgba(255,255,255,.02) !important;
}

.my-account-wrapper .eg-wallet .woo-wallet-table-controls input[type="date"] {
  min-height: 36px !important; margin: 0 !important;
  border: 1px solid var(--ew-border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(235,228,255,.8) !important;
  padding: 0 12px !important; font-size: 12px !important;
}

.my-account-wrapper .eg-wallet .woo-wallet-table-controls input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45;
}

.my-account-wrapper .eg-wallet .woo-wallet-table-controls .woo-wallet-filter-sep {
  color: var(--ew-muted);
}

.my-account-wrapper .eg-wallet .woo-wallet-table-controls .wc-wallet-filter-clear {
  width: 36px !important; height: 36px !important; min-height: 36px !important;
  margin: 0 !important;
  border: 1px solid var(--ew-border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(235,228,255,.8) !important;
  box-shadow: none !important;
}

/* ── Orders page extras ──────────────────────────────────────────────────── */
.eg-orders-eyebrow {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: #b17eff;
}

.eg-orders-header {
  border-bottom: 1px solid rgba(184,168,255,.1) !important;
  margin-bottom: 24px; padding-bottom: 18px;
}

.eg-orders-empty-icon { color: rgba(124,92,255,.4); margin-bottom: 16px; }
.eg-orders-empty-icon svg { width: 52px; height: 52px; }

/* ── Profile form ────────────────────────────────────────────────────────── */
.eg-profile-wrap {
  max-width: 760px; margin: 0 auto; padding-bottom: 60px;
  font-family: "Muller", sans-serif;
}

.eg-profile-header { margin-bottom: 32px; }

.eg-profile-eyebrow {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #b17eff;
}

.eg-profile-title {
  margin: 0 0 6px;
  font-size: clamp(24px,3vw,32px); font-weight: 800; color: #fff; line-height: 1.1;
}

.eg-profile-desc { margin: 0; font-size: 14px; color: rgba(184,168,255,.55); }

.eg-profile-section {
  margin-bottom: 20px; padding: 24px 26px 26px;
  border-radius: 22px;
  border: 1px solid var(--ew-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(12,10,22,.7);
}

.eg-profile-section__title {
  margin: 0 0 18px; font-size: 14px; font-weight: 700; color: #fff;
  padding-bottom: 12px; border-bottom: 1px solid rgba(184,168,255,.1);
  text-transform: uppercase; letter-spacing: .05em;
}

.eg-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eg-profile-field { display: flex; flex-direction: column; gap: 7px; }
.eg-profile-field--full { grid-column: 1 / -1; }

.eg-profile-field label {
  font-size: 12px; font-weight: 650; letter-spacing: .04em;
  color: var(--ew-lav-dim); text-transform: uppercase;
}

.eg-profile-field input {
  width: 100%; height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ew-border); border-radius: 14px;
  background: rgba(255,255,255,.05); color: #fff;
  font-size: 14px; font-weight: 500; outline: none;
  font-family: "Muller", sans-serif;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}

.eg-profile-field input:focus {
  border-color: rgba(124,92,255,.5);
  box-shadow: 0 0 0 4px rgba(124,92,255,.1);
}

.eg-profile-field input::placeholder { color: rgba(184,168,255,.25); }

.eg-profile-note {
  font-size: 12px; color: rgba(184,168,255,.32); line-height: 1.5; margin: 0;
}

.eg-profile-submit { padding: 6px 0; }

.eg-profile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 34px;
  border: 0; border-radius: 16px;
  background: linear-gradient(135deg, #7c5cff 0%, #5840ba 100%);
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(124,92,255,.26);
  transition: transform .15s, box-shadow .2s;
  font-family: "Muller", sans-serif;
}

.eg-profile-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(124,92,255,.36);
}

.egirlz-edit-account.eg-profile-form { all: unset; display: block; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .my-account-wrapper .eg-wallet .eg-balance-panel__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .my-account-wrapper .eg-wallet .eg-balance-panel__ctas {
    flex-direction: row;
    min-width: 0;
  }

  .my-account-wrapper .eg-wallet .eg-balance-panel__btn {
    flex: 1;
    min-height: 44px;
  }

  .my-account-wrapper .eg-wallet .eg-topup-presets {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .my-account-wrapper .eg-wallet .eg-topup-preset { min-height: 64px; font-size: 19px; }

  .my-account-wrapper .eg-wallet .eg-topup-input-row {
    grid-template-columns: 1fr;
  }

  .my-account-wrapper .eg-wallet .eg-topup-submit { width: 100%; height: 54px; }

  .eg-account-nav-row {
    gap: 8px;
    margin-bottom: 20px;
  }

  .eg-account-logout {
    min-height: 40px;
    padding: 0 13px;
    font-size: 12px;
  }

  .eg-account-nav {
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .eg-account-nav::-webkit-scrollbar { display: none; }
  .eg-account-nav__link { font-size: 13px; padding: 0 13px; min-height: 40px; flex-shrink: 0; }
  .eg-account-nav__link--logout { margin-left: 0; }

  .eg-account-shell--dashboard {
    border-radius: 22px;
    padding: 18px 16px;
  }

  .eg-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .my-account-wrapper .eg-wallet .eg-balance-tabs { width: 100%; }

  .my-account-wrapper .eg-wallet .eg-balance-panel__amount {
    font-size: 40px;
  }

  .eg-account-nav__link { font-size: 12px; padding: 0 11px; min-height: 38px; }
}

/* ── Hard stability lock: nothing on the topup tab may move on hover ────────
   Added after users still perceived jank from the small translateY(-1px)
   lifts on the nav/preset/submit buttons — those are removed above, and this
   block is the final guarantee (highest specificity + !important in this
   file) that no container or button on this tab can pick up a transform,
   translate, or scale from any other stylesheet, now or in the future. ── */
.my-account-wrapper .eg-wallet,
.my-account-wrapper .eg-wallet *,
.my-account-wrapper .eg-wallet *::before,
.my-account-wrapper .eg-wallet *::after {
  box-sizing: border-box;
}

.my-account-wrapper .eg-wallet .eg-topup-panel,
.my-account-wrapper .eg-wallet .eg-topup-panel:hover,
.my-account-wrapper .eg-wallet .eg-topup-form,
.my-account-wrapper .eg-wallet .eg-topup-form:hover,
.my-account-wrapper .eg-wallet .eg-topup-presets,
.my-account-wrapper .eg-wallet .eg-topup-presets:hover,
.my-account-wrapper .eg-wallet .eg-topup-input-row,
.my-account-wrapper .eg-wallet .eg-topup-input-row:hover,
.my-account-wrapper .eg-wallet .eg-topup-input-wrap,
.my-account-wrapper .eg-wallet .eg-topup-input-wrap:hover,
.eg-account-nav-row,
.eg-account-nav-row:hover,
.eg-account-nav,
.eg-account-nav:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  top: auto;
  left: auto;
}

.my-account-wrapper .eg-wallet .eg-topup-preset,
.my-account-wrapper .eg-wallet .eg-topup-preset:hover,
.my-account-wrapper .eg-wallet .eg-topup-preset:focus,
.my-account-wrapper .eg-wallet .eg-topup-preset:focus-visible,
.my-account-wrapper .eg-wallet .eg-topup-preset:active,
.my-account-wrapper .eg-wallet .eg-topup-submit,
.my-account-wrapper .eg-wallet .eg-topup-submit:focus,
.my-account-wrapper .eg-wallet .eg-topup-submit:focus-visible,
.eg-account-nav__link,
.eg-account-nav__link:hover,
.eg-account-nav__link:focus,
.eg-account-nav__link:focus-visible,
.eg-account-nav__link:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  outline-offset: 0;
}

.my-account-wrapper .eg-wallet .eg-topup-preset:focus-visible,
.eg-account-nav__link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(11, 9, 21, 1),
    0 0 0 4px rgba(124, 92, 255, 0.55);
}

/* .eg-topup-submit:focus-visible has its own complete rule (geometry +
   outline + ring) right after its base rule above — not duplicated here. */

/* ── Secondary safety net (2026-07-04) ───────────────────────────────────────
   The actual fix is architectural: .eg-topup-submit is now a plain
   type="button" (see woo-wallet/topup.php) driven entirely by its own click
   handler — it is no longer a native form submit button, so it can no
   longer trigger browser focus/validation/active/submit side effects at
   all. This block is just a belt-and-braces guarantee that no transform/
   outline can ever reappear here from some other stylesheet. :hover/:active
   are deliberately excluded (2026-07-04, round 8) since they now carry an
   intentional soft scale(1.012)/scale(.995) feedback defined further down —
   locking them to transform:none here would silently cancel that. ── */
.my-account-wrapper .eg-wallet .eg-topup-submit,
.my-account-wrapper .eg-wallet .eg-topup-submit:focus,
.my-account-wrapper .eg-wallet .eg-topup-submit:focus-visible {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  outline: none !important;
}

.my-account-wrapper .eg-wallet .eg-topup-panel,
.my-account-wrapper .eg-wallet .eg-topup-panel:hover,
.my-account-wrapper .eg-wallet .eg-topup-form,
.my-account-wrapper .eg-wallet .eg-topup-form:hover,
.my-account-wrapper .eg-wallet .eg-topup-input-row,
.my-account-wrapper .eg-wallet .eg-topup-input-row:hover,
.my-account-wrapper .eg-wallet .eg-topup-input-wrap,
.my-account-wrapper .eg-wallet .eg-topup-input-wrap:hover,
.my-account-wrapper .eg-wallet .eg-topup-presets,
.my-account-wrapper .eg-wallet .eg-topup-presets:hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  animation: none !important;
}

/* Explicit :focus-within / :has() guards on every ancestor up to .eg-wallet
   itself. None of these matched any existing rule when audited (no :has()
   or :focus-within touching wallet/topup anywhere in the CSS, confirmed by
   grepping the whole assets/css tree), so this is pure insurance against a
   future stylesheet accidentally adding one — not a rule that was firing. */
.my-account-wrapper .eg-wallet,
.my-account-wrapper .eg-wallet:hover,
.my-account-wrapper .eg-wallet:focus-within,
.my-account-wrapper .eg-wallet:has(.eg-topup-submit:hover),
.my-account-wrapper .eg-wallet:has(.eg-topup-submit:focus),
.my-account-wrapper .eg-wallet:has(.eg-topup-submit:active),
.my-account-wrapper .eg-wallet .eg-topup-panel:focus-within,
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:hover),
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:focus),
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:active),
.my-account-wrapper .eg-wallet .eg-topup-form:focus-within,
.my-account-wrapper .eg-wallet .eg-topup-form:has(.eg-topup-submit:hover),
.my-account-wrapper .eg-wallet .eg-topup-form:has(.eg-topup-submit:focus),
.my-account-wrapper .eg-wallet .eg-topup-form:has(.eg-topup-submit:active) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
}

/* .eg-topup-panel's own transition list, pinned explicitly so it can never
   pick up transform/filter/backdrop-filter from a future edit — background/
   border-color/box-shadow only, never "all". */
.my-account-wrapper .eg-wallet .eg-topup-panel {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

/* ── Round 7 (2026-07-04): hard-freeze .eg-topup-panel's paint properties
   themselves, not just transform/geometry. The panel's real base state has
   NO box-shadow at all (never did — grepped the whole file, confirmed) and a
   static border-color/background, so the values below are copied verbatim
   from the panel's own base rule above (~line 429), not invented. If the
   browser is still showing a hover reaction after this, the source CSS is
   not the cause — see LiteSpeed Cache note in the accompanying report. */
.my-account-wrapper .eg-wallet .eg-topup-panel,
.my-account-wrapper .eg-wallet .eg-topup-panel:hover,
.my-account-wrapper .eg-wallet .eg-topup-panel:focus,
.my-account-wrapper .eg-wallet .eg-topup-panel:focus-within,
.my-account-wrapper .eg-wallet .eg-topup-panel:active,
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:hover),
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:focus),
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:active),
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:focus-visible) {
  border-color: rgba(184,168,255,.18) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(124,92,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(11,9,21,.72) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
}

/* Neutralize any ::before/::after the panel might ever pick up (it has none
   today — confirmed via grep — this is pure insurance against a future
   decorative-glow addition). */
.my-account-wrapper .eg-wallet .eg-topup-panel::before,
.my-account-wrapper .eg-wallet .eg-topup-panel::after,
.my-account-wrapper .eg-wallet .eg-topup-panel:hover::before,
.my-account-wrapper .eg-wallet .eg-topup-panel:hover::after,
.my-account-wrapper .eg-wallet .eg-topup-panel:focus-within::before,
.my-account-wrapper .eg-wallet .eg-topup-panel:focus-within::after,
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:hover)::before,
.my-account-wrapper .eg-wallet .eg-topup-panel:has(.eg-topup-submit:hover)::after {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  opacity: inherit !important;
}

/* Keep the submit button's own hover glow fully contained inside its own
   box so it can never visually bleed onto the panel's border, regardless of
   what overflow the panel ends up with. */
.my-account-wrapper .eg-wallet .eg-topup-submit {
  position: relative;
  isolation: isolate;
}