/* ============================================================================
   HIGHLAND VAULT — MY ACCOUNT DASHBOARD
   ----------------------------------------------------------------------------
   Premium customer dashboard. Loaded only on account pages (see functions.php).
   Reuses the theme system throughout: tokens.css variables, .hv-card, .hv-btn,
   .hv-badge. WooCommerce's own templates (orders, forms) are NOT overridden —
   they are styled here via their stable class hooks. !important appears only
   where the Elementor kit's global element styles would otherwise win.
   ========================================================================== */

/* No page title above the account area (fallback for the PHP filter in
   functions.php — covers builder-rendered titles too) */
body.hv-theme.woocommerce-account .page-header,
body.hv-theme.woocommerce-account h1.entry-title { display: none; }

/* The account area is a LIGHT (white) surface — re-assert the on-white token
   set + light tints/shadows so every card, table and form reads dark-on-white
   (the base.css dark-surface scope no longer lists the account). */
body.hv-theme.woocommerce-account {
  --hv-surface:   #fff;
  --hv-surface-2: #F4F7FC;
  --hv-track:     #E7EAF0;
  --hv-blue-050:  rgba(var(--hv-primary-rgb), .08);
  --hv-blue-100:  rgba(var(--hv-primary-rgb), .14);
  --hv-orange-050:#FFF4E8;
  --hv-green-100: #E7F6EC;
  --hv-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --hv-shadow:    0 12px 30px rgba(16, 24, 40, .10);
  --hv-shadow-lg: 0 20px 44px rgba(16, 24, 40, .14);
  background: #F6F8FC;
}
/* Readable status badges on the light surface (the dark-theme values used a
   pale #6CA8FF that under-contrasts on white). */
body.hv-theme.woocommerce-account .hv-status { background: var(--hv-blue-050); color: var(--hv-primary); }
body.hv-theme.woocommerce-account .hv-status--completed { background: var(--hv-green-100); color: #15803D; }
body.hv-theme.woocommerce-account .hv-status--processing { background: var(--hv-blue-050); color: var(--hv-primary); }
body.hv-theme.woocommerce-account .hv-status--on-hold,
body.hv-theme.woocommerce-account .hv-status--pending { background: var(--hv-orange-050); color: #B45309; }
body.hv-theme.woocommerce-account .hv-status--cancelled,
body.hv-theme.woocommerce-account .hv-status--refunded { background: var(--hv-surface-2); color: var(--hv-muted); }
body.hv-theme.woocommerce-account .hv-status--draft { background: var(--hv-blue-050); color: var(--hv-primary); }

/* ---- Layout: 260px sidebar left + content right (~80%) --------------------
   The account page is rendered by the Elementor Pro "My Account" widget
   (vertical tabs): its stylesheet floats the nav at 25% and the content at 75%
   (nav selector specificity 0,4,0). The widget-scoped rules below reach
   (0,5,0), so they win everywhere including its ≤1024px media overrides; the
   generic rules cover a plain [woocommerce_my_account] shortcode page too. */
/* NOTE: the :has() variant is a SEPARATE rule — grouping it with the widget
   selector would invalidate both in browsers without :has() support. */
.elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab > .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hv-space-5) var(--hv-space-6);
  padding-block: var(--hv-space-4) var(--hv-space-6);
}
.hv-theme.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hv-space-5) var(--hv-space-6);
  padding-block: var(--hv-space-4) var(--hv-space-6);
}
.hv-theme.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 1 100%; }
.hv-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
  float: none;
  width: 260px;
  flex: 0 0 260px;
}
.hv-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-content,
.elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--hv-space-6); /* replaces the widget's padding-left: 6% gap */
}

/* ---- Sidebar -------------------------------------------------------------- */
.hv-account-nav { position: sticky; top: var(--hv-space-6); }
.hv-account-nav ul {
  background: var(--hv-surface);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm);
  list-style: none;
  margin: 0;
  padding: var(--hv-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hv-account-nav li { margin: 0; }
.hv-account-nav li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hv-space-3);
  padding: 0.7em 0.85em;
  border-radius: var(--hv-radius-sm);
  color: var(--hv-body) !important;         /* kit paints link colours */
  font-weight: var(--hv-fw-medium);
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.hv-account-nav__icon { display: inline-flex; flex: 0 0 auto; color: var(--hv-muted); transition: color .15s ease; }
.hv-account-nav li a:hover { background: var(--hv-blue-050); color: var(--hv-primary) !important; transform: translateX(2px); }
.hv-account-nav li a:hover .hv-account-nav__icon { color: var(--hv-primary); }
.hv-account-nav li a:focus-visible { outline: none; box-shadow: var(--hv-ring); }

/* Active item: soft blue pill, blue text + left indicator bar (design) */
.hv-account-nav li.is-active a {
  background: var(--hv-blue-050);
  color: var(--hv-primary) !important;
  font-weight: var(--hv-fw-bold);
}
.hv-account-nav li.is-active a:hover { transform: none; }
.hv-account-nav li.is-active a::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-primary);
}
.hv-account-nav li.is-active .hv-account-nav__icon { color: var(--hv-primary); }

/* Logout — quietly destructive */
.hv-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--hv-red-500) !important; }
.hv-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a .hv-account-nav__icon { color: var(--hv-red-500); }
.hv-account-nav .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(239,68,68,.14); color: var(--hv-red-500) !important; transform: none; }

/* Mobile disclosure toggle (hidden on desktop) */
.hv-account-nav__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: var(--hv-space-2);
  padding: 0.8em 1em;
  background: var(--hv-surface) !important;
  border: 1px solid var(--hv-line) !important;
  border-radius: var(--hv-radius);
  color: var(--hv-ink) !important;
  font-family: var(--hv-font);
  font-weight: var(--hv-fw-bold);
  cursor: pointer;
}
.hv-account-nav__toggle:focus-visible { outline: none; box-shadow: var(--hv-ring); }

/* ---- Content area ---------------------------------------------------------
   Endpoint pages (orders, forms, plugin screens) live in one content card.
   The dashboard endpoint lays out its OWN cards → card chrome removed there. */
.hv-theme .woocommerce-MyAccount-content {
  background: var(--hv-surface);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm);
  padding: var(--hv-space-6);
  min-width: 0;
}
body.hv-account-dashboard .woocommerce-MyAccount-content,
body.hv-account-dashboard .elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content { background: none; border: 0; box-shadow: none; padding: 0; }
.hv-theme .woocommerce-MyAccount-content > h2,
.hv-theme .woocommerce-MyAccount-content > h3 { margin-top: 0; font-size: var(--hv-fs-h3); color: var(--hv-ink); }
.hv-theme .woocommerce-MyAccount-content p { max-width: none; }
/* Brand-colour links inside the account content.
   The :not() list is long on purpose. This selector scores (0,5,1) and every
   exclusion adds another class, so it out-specifies practically everything it
   touches — including elements that are NOT links in any meaningful sense:
     .hv-dash-hero__btn / __live  live ON the brand-gradient hero and set their
       own white label at (0,1,0). Repainted brand-on-brand they vanish
       completely (this is what made My Entries / Wallet / Referral / Share
       invisible on the dashboard).
     .rrs-btn / .usl-btn / .wps-btn  are plugin buttons shipping their own
       skins; recolouring only their label leaves brand-on-brand too.
   Excluding them here is deliberately preferred over adding !important to each
   victim — that would start an arms race the next component also has to win. */
.hv-theme .woocommerce-MyAccount-content a:not(.button):not(.hv-btn):not(.woocommerce-button):not(.rrs-btn):not(.usl-btn):not(.wps-btn):not(.hv-dash-hero__btn):not(.hv-dash-hero__live) { color: var(--hv-primary); }

/* ---- Dashboard (redesign) ------------------------------------------------- */
/* .hv-card is in base.css's dark-surface scope; re-assert on-white tokens for it
   inside the (now light) account area so panels read dark-on-white. */
body.hv-theme.woocommerce-account .hv-card {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  background: #fff; box-shadow: var(--hv-shadow-sm);
}
.hv-dash { display: flex; flex-direction: column; gap: var(--hv-space-5); }
.hv-dash > * { animation: hv-fade-up .35s ease both; }
.hv-dash > *:nth-child(2) { animation-delay: .06s; }
.hv-dash > *:nth-child(3) { animation-delay: .12s; }
@keyframes hv-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hv-dash > * { animation: none; } }

/* ---- Hero ---- */
.hv-dash-hero {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hv-space-5);
  padding: var(--hv-space-6);
  border-radius: var(--hv-radius-lg);
  background: linear-gradient(120deg, var(--hv-primary) 0%, var(--hv-primary-strong) 55%, var(--hv-primary-deep) 100%);
  color: var(--hv-primary-ink, #fff);
}
.hv-dash-hero__main { flex: 1 1 340px; position: relative; z-index: 2; }
.hv-dash-hero__title { margin: 0; font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: #fff !important; }
.hv-dash-hero__sub { margin: var(--hv-space-2) 0 0; color: rgba(255,255,255,.9); }
.hv-dash-hero__stats { margin: 2px 0 var(--hv-space-4); color: rgba(255,255,255,.92); }
.hv-dash-hero__stats strong { color: #fff; font-weight: var(--hv-fw-black); }
.hv-dash-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hv-space-3); }
.hv-dash-hero__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0.7em 1.05em;
  border-radius: var(--hv-radius); border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.12);
  color: var(--hv-primary-ink, #fff); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.hv-dash-hero__btn:hover { background: rgba(255,255,255,.22); color: var(--hv-primary-ink, #fff); }
.hv-dash-hero__btn.is-primary { background: #fff; color: var(--hv-primary); border-color: #fff; }
.hv-dash-hero__btn.is-primary:hover { background: rgba(255,255,255,.9); color: var(--hv-primary); }
.hv-dash-hero__btn svg { flex: 0 0 auto; }

.hv-dash-hero__aside { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--hv-space-3); }
.hv-dash-hero__countdown { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--hv-radius); padding: var(--hv-space-4); text-align: center; }
.hv-dash-hero__cd-label { display: block; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: var(--hv-ls-wide); text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: var(--hv-space-3); }
.hv-dash-hero__cd { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hv-cd-box { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 8px 6px; border-radius: var(--hv-radius-sm); background: rgba(0,0,0,.2); }
.hv-cd-box b { font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); line-height: 1; }
.hv-cd-box small { font-size: 9px; letter-spacing: .08em; color: rgba(255,255,255,.75); margin-top: 3px; }
.hv-cd-sep { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); opacity: .5; }
.hv-dash-hero__live { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.7em 1.1em; border-radius: var(--hv-radius); border: 1px solid rgba(255,255,255,.32); color: #fff; font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none; }
.hv-dash-hero__live:hover { background: rgba(255,255,255,.14); color: var(--hv-primary-ink, #fff); }
.hv-dash-hero__livedot { display: inline-flex; align-items: center; gap: 5px; }
.hv-dash-hero__livedot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 0 3px rgba(255,82,82,.3); }
.hv-dash-hero__img { position: absolute; right: 0; bottom: 0; height: 116%; width: auto; max-width: 300px; object-fit: contain; object-position: bottom right; z-index: 1; opacity: .96; pointer-events: none; }
@media (max-width: 1100px) { .hv-dash-hero__img { display: none; } }

/* ---- Stat cards ---- */
/* auto-fit, not a fixed 4: the Instant Wins card made it five, and a hard
   column count would strand the last one alone on its own row. */
.hv-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--hv-space-4); }
.hv-stat-card {
  display: flex; align-items: flex-start; gap: var(--hv-space-4);
  padding: var(--hv-space-5); background: #fff; border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-stat-card:hover { transform: translateY(-3px); box-shadow: var(--hv-shadow-lg); border-color: var(--hv-blue-100); }
.hv-stat-card:focus-visible { outline: none; box-shadow: var(--hv-ring); }
.hv-stat-card__icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--hv-radius); background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-stat-card__icon.is-amber { background: #FEF3E2; color: #D97706; }
.hv-stat-card__icon.is-purple { background: #EFE9FE; color: #7C3AED; }
.hv-stat-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hv-stat-card__label { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium); color: var(--hv-muted); }
.hv-stat-card b { font-size: var(--hv-fs-h2); font-weight: var(--hv-fw-black); color: var(--hv-ink) !important; line-height: 1.1; }
.hv-stat-card b .amount { color: inherit; }
.hv-stat-card__hint { font-size: var(--hv-fs-xs); color: var(--hv-muted); font-weight: var(--hv-fw-medium); }
.hv-stat-card__hint.is-pos { color: #15803D; }
.hv-stat-card__hint.is-live { color: var(--hv-primary); }
.hv-stat-card__bar { display: block; height: 5px; border-radius: 3px; background: var(--hv-track); overflow: hidden; margin-top: 5px; }
.hv-stat-card__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7C3AED, #a855f7); }

/* ---- Two-column grid (currently unused) ----
   The dashboard stacks every panel full width now, so nothing renders these.
   Kept because putting two panels side by side again is then a markup-only
   change: wrap them in .hv-dash__grid > .hv-dash__col and they lay out. */
.hv-dash__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--hv-space-5); align-items: start; }
.hv-dash__col { display: flex; flex-direction: column; gap: var(--hv-space-5); min-width: 0; }


/* Active Competitions spans the full row. .hv-actcomp is already a
   64px / 1fr / auto / auto grid, so the extra width lands on the title —
   exactly where it was needed: long draw names were wrapping to six lines
   inside the old narrow column.

   No margin here: .hv-dash is a column flex with its own gap, so one would
   double the space. With the room to breathe the title no longer needs the
   mid-word breaking that stopped it overflowing the narrow column — but it
   still breaks a single unbroken monster word rather than overflow. */
.hv-dash__panel--wide .hv-actcomp__name { overflow-wrap: break-word; }
.hv-dash__panel { padding: var(--hv-space-5); }
.hv-dash__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-3); margin-bottom: var(--hv-space-4); }
.hv-dash__panel-head h3 { margin: 0; font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-dash__panel-head a { display: inline-flex; align-items: center; gap: 4px; color: var(--hv-primary); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none; }
.hv-dash__panel-head a:hover { color: var(--hv-primary-strong); }

/* ---- Active competitions ---- */
.hv-actcomp-list { display: flex; flex-direction: column; gap: var(--hv-space-3); }
.hv-actcomp {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: var(--hv-space-4);
  padding: var(--hv-space-3); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-actcomp:hover { border-color: var(--hv-blue-100); box-shadow: var(--hv-shadow-sm); }
.hv-actcomp__media { width: 64px; }
.hv-actcomp__media img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--hv-radius-sm); display: block; }
.hv-actcomp__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-actcomp__cat { font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: var(--hv-ls-wide); text-transform: uppercase; color: var(--hv-primary); }
.hv-actcomp__name { font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); color: var(--hv-ink); line-height: var(--hv-lh-snug); overflow-wrap: anywhere; }
.hv-actcomp__meta { font-size: var(--hv-fs-sm); color: var(--hv-muted); }
.hv-actcomp__meta .amount { color: var(--hv-ink); font-weight: var(--hv-fw-bold); }
.hv-actcomp__ring {
  position: relative; width: 58px; height: 58px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%; background: conic-gradient(var(--hv-primary) calc(var(--pct, 0) * 1%), var(--hv-track) 0);
}
.hv-actcomp__ring::before { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.hv-actcomp__ring b, .hv-actcomp__ring span { position: relative; z-index: 1; line-height: 1; }
.hv-actcomp__ring b { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-actcomp__ring span { font-size: 8px; color: var(--hv-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.hv-actcomp__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hv-actcomp__end time { font-size: var(--hv-fs-xs); color: var(--hv-muted); line-height: 1.35; }
.hv-actcomp__live { display: inline-flex; align-items: center; gap: 4px; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: #16A34A; }
.hv-actcomp__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }

/* ---- Referral card ---- */
.hv-dash__referral { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hv-space-4); padding: var(--hv-space-5); }
.hv-dash__referral-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-dash__referral-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-dash__referral-body b { color: var(--hv-ink); }
.hv-dash__referral-body span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-dash__referral-code { text-align: right; }
.hv-dash__referral-label { display: block; font-size: var(--hv-fs-xs); color: var(--hv-muted); margin-bottom: 4px; }
.hv-dash__referral-row { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: 4px 4px 4px 12px; }
.hv-dash__referral-row code { font-family: var(--hv-font); font-weight: var(--hv-fw-black); color: var(--hv-primary); letter-spacing: .02em; }
.hv-copy { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: 0; background: var(--hv-blue-050); color: var(--hv-primary); border-radius: var(--hv-radius-sm); cursor: pointer; transition: background .15s ease; }
.hv-copy:hover { background: var(--hv-blue-100); }
.hv-copy.is-copied { background: var(--hv-green-100); color: #15803D; }

/* ---- Recent orders ---- */
.hv-recentorders { display: flex; flex-direction: column; }
.hv-recentorder { display: flex; align-items: center; gap: var(--hv-space-3); padding: var(--hv-space-3) 0; border-bottom: 1px solid var(--hv-line); text-decoration: none; }
.hv-recentorder:last-child { border-bottom: 0; }
.hv-recentorder__id { flex: 0 0 auto; font-size: var(--hv-fs-sm); color: var(--hv-muted); font-weight: var(--hv-fw-medium); }
.hv-recentorder__name { flex: 1 1 auto; min-width: 0; font-size: var(--hv-fs-sm); color: var(--hv-ink); font-weight: var(--hv-fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-recentorder:hover .hv-recentorder__name { color: var(--hv-primary); }
.hv-recentorder__date { flex: 0 0 auto; font-size: var(--hv-fs-xs); color: var(--hv-muted); white-space: nowrap; }
.hv-recentorder .hv-status { flex: 0 0 auto; }
.hv-recentorder__total { flex: 0 0 auto; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-black); color: var(--hv-primary); white-space: nowrap; }
.hv-recentorder__total .amount { color: inherit; }
.hv-recentorder__chev { flex: 0 0 auto; color: var(--hv-muted); display: inline-flex; }

/* ---- Instant win history ---------------------------------------------
   Reuses .hv-recentorder so the row rhythm matches Recent Orders exactly;
   only the pieces unique to a win are styled here. */
.hv-iw__sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hv-iw__sum .amount, .hv-iw__sum { color: var(--hv-primary); font-weight: var(--hv-fw-black); font-size: var(--hv-fs-h4); }
.hv-iw__sum small { color: var(--hv-muted); font-weight: var(--hv-fw-medium); font-size: var(--hv-fs-xs); margin-top: 1px; }

.hv-iw-row__ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hv-blue-050); color: var(--hv-primary);
}
.hv-iw-row__ico--cash { background: rgba(22, 163, 74, .10); color: #15803D; }
.hv-iw-row__ico--prize { background: rgba(212, 175, 55, .14); color: #8A6500; }

/* Prize artwork sits in the same 26px slot the glyph uses, so rows with and
   without an image line up on the same left edge. */
.hv-iw-row__media { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--hv-radius-sm); overflow: hidden; background: var(--hv-surface-2, #F4F7FB); display: block; }
.hv-iw-row__img { width: 26px; height: 26px; object-fit: cover; display: block; }

/* The draw name is context, not the headline — it yields first when space
   runs short, so the prize itself never gets truncated. */
.hv-iw-row__draw {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--hv-fs-xs); color: var(--hv-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hv-iw-row .hv-recentorder__name { flex: 0 1 auto; }

.hv-iw-row__tag {
  flex: 0 0 auto; font-size: 10px; font-weight: var(--hv-fw-bold);
  letter-spacing: var(--hv-ls-wide); text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--hv-radius-pill);
  background: var(--hv-blue-050); color: var(--hv-primary);
}
.hv-iw-row__tag--cash { background: rgba(22, 163, 74, .12); color: #15803D; }
.hv-iw-row__tag--prize { background: rgba(212, 175, 55, .16); color: #8A6500; }
.hv-iw-row__ico--draw { background: rgba(212, 175, 55, .14); color: #8A6500; }
.hv-iw-row__tag--draw { background: rgba(212, 175, 55, .16); color: #8A6500; }

/* .hv-recentorder is display:flex, and author CSS beats the UA stylesheet's
   [hidden] rule — without these guards the "hidden" extra rows render, and
   both tab panels render at once. */
.hv-iw-row[hidden] { display: none; }
.hv-winpanel[hidden] { display: none; }

.hv-iw-more { width: 100%; margin-top: var(--hv-space-4); }

/* ---- My Winnings tabs ----
   Underline tabs rather than pills: the panel below is already a card, and a
   second filled shape inside it would compete with the rows for attention. */
.hv-wintabs {
  display: flex; gap: var(--hv-space-5);
  border-bottom: 1px solid var(--hv-border);
  margin: 0 0 var(--hv-space-4);
}
/* !important on the background of every state: Elementor's global kit styles
   target bare `button` and `button:hover` with the old site's pink, and would
   otherwise paint a filled pink block behind these tabs on hover. */
.hv-wintabs__tab,
.hv-wintabs__tab:hover,
.hv-wintabs__tab:focus,
.hv-wintabs__tab:active {
  appearance: none; background: none !important; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 0 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  border-radius: 0; box-shadow: none; text-decoration: none;
  font: inherit; font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm);
  transition: color .15s ease, border-color .15s ease;
}
.hv-wintabs__tab { color: var(--hv-muted) !important; }
.hv-wintabs__tab:hover,
.hv-wintabs__tab:focus { color: var(--hv-text) !important; outline: none; }
.hv-wintabs__tab.is-active,
.hv-wintabs__tab.is-active:hover,
.hv-wintabs__tab.is-active:focus { color: var(--hv-primary) !important; border-bottom-color: var(--hv-primary); }
.hv-wintabs__tab:focus-visible { outline: 2px solid var(--hv-primary); outline-offset: 3px; }

.hv-wintabs__n {
  min-width: 20px; padding: 1px 6px; border-radius: var(--hv-radius-pill);
  background: var(--hv-surface-2, #F4F7FB); color: var(--hv-muted);
  font-size: 11px; font-weight: var(--hv-fw-bold); font-variant-numeric: tabular-nums;
}
.hv-wintabs__tab.is-active .hv-wintabs__n { background: var(--hv-blue-050); color: var(--hv-primary); }

.hv-winpanel__none {
  margin: 0; padding: var(--hv-space-5) 0;
  color: var(--hv-muted); font-size: var(--hv-fs-sm); text-align: center;
}

@media (max-width: 560px) {
  .hv-iw-row__draw, .hv-iw-row__tag { display: none; }
  .hv-wintabs { gap: var(--hv-space-4); }
}

/* ---- Recent winners ---- */
.hv-recentwins { display: flex; flex-direction: column; }
.hv-recentwin { display: flex; align-items: center; gap: var(--hv-space-3); padding: var(--hv-space-3) 0; border-bottom: 1px solid var(--hv-line); }
.hv-recentwin:last-child { border-bottom: 0; }
.hv-recentwin__avatar { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--hv-primary); color: #fff; font-weight: var(--hv-fw-black); }
.hv-recentwin__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hv-recentwin__body b { color: var(--hv-ink); font-size: var(--hv-fs-sm); }
.hv-recentwin__body span { color: var(--hv-muted); font-size: var(--hv-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-recentwin__body strong { color: var(--hv-ink); }
.hv-recentwin__time { flex: 0 0 auto; font-size: var(--hv-fs-xs); color: var(--hv-muted); white-space: nowrap; }
.hv-recentwin__prize { flex: 0 0 auto; }
.hv-recentwin__prize img { width: 34px; height: 42px; object-fit: cover; border-radius: var(--hv-radius-sm); display: block; }
.hv-recentwin__medal { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FEF3E2; color: #D97706; }

/* ---- Reassurance bar ---- */
.hv-dash__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4); background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-5); }
.hv-dash__bar-item { display: flex; align-items: center; gap: var(--hv-space-3); }
.hv-dash__bar-item:not(:last-child) { border-right: 1px solid var(--hv-line); }
.hv-dash__bar-ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--hv-radius); background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-dash__bar-item > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-dash__bar-item b { color: var(--hv-ink); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); }
.hv-dash__bar-item > span:last-child > span { color: var(--hv-muted); font-size: var(--hv-fs-xs); }

/* ---- Invite & Earn card (sidebar) ---- */
.hv-account-invite { margin-top: var(--hv-space-4); padding: var(--hv-space-5); background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm); text-align: center; }
.hv-account-invite__ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto var(--hv-space-3); border-radius: 50%; background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-account-invite__title { display: block; font-size: var(--hv-fs-body); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-account-invite__text { margin: var(--hv-space-2) 0 var(--hv-space-4); font-size: var(--hv-fs-sm); color: var(--hv-muted); line-height: var(--hv-lh-normal); }
.hv-account-invite__btn { display: block; padding: 0.7em 1em; border: 1px solid var(--hv-primary); border-radius: var(--hv-radius); color: var(--hv-primary); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none; }
.hv-account-invite__btn:hover { background: var(--hv-blue-050); color: var(--hv-primary); }

/* ---- Dashboard responsive ---- */
@media (max-width: 1080px) { .hv-dash__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .hv-dash__stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .hv-dash__bar { grid-template-columns: 1fr 1fr; gap: 0; }
  .hv-dash__bar-item { padding: var(--hv-space-3); }
  .hv-dash__bar-item:nth-child(odd) { border-right: 1px solid var(--hv-line); }
  .hv-dash__bar-item:nth-child(-n+2) { border-bottom: 1px solid var(--hv-line); }
}
@media (max-width: 560px) {
  .hv-dash__stats { grid-template-columns: 1fr; }
  .hv-dash-hero { padding: var(--hv-space-5); }
  .hv-dash-hero__aside { width: 100%; }
  .hv-actcomp { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .hv-actcomp__media, .hv-actcomp__media img { width: 56px; }
  .hv-actcomp__media img { height: 56px; }
  .hv-actcomp__end { display: none; }
  .hv-recentorder__date { display: none; }
  .hv-dash__referral { grid-template-columns: auto 1fr; }
  .hv-dash__referral-code { grid-column: 1 / -1; text-align: left; }
  .hv-dash__bar { grid-template-columns: 1fr; }
  .hv-dash__bar-item:nth-child(odd) { border-right: 0; }
  .hv-dash__bar-item:not(:last-child) { border-bottom: 1px solid var(--hv-line); }
}

/* ---- Tables (dashboard + orders/downloads/wallet endpoints) --------------- */
.hv-theme .hv-account-table,
.hv-theme .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-radius: 0;
}
.hv-theme .hv-account-table th, .hv-theme .hv-account-table td,
.hv-theme .woocommerce-MyAccount-content table.shop_table th,
.hv-theme .woocommerce-MyAccount-content table.shop_table td { border: 0; background: none; }
.hv-theme .hv-account-table thead th,
.hv-theme .woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--hv-surface-2);
  padding: var(--hv-space-3);
  font-size: var(--hv-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--hv-ls-wide);
  color: var(--hv-muted);
  text-align: left;
}
.hv-theme .hv-account-table tbody th, .hv-theme .hv-account-table td,
.hv-theme .woocommerce-MyAccount-content table.shop_table tbody th,
.hv-theme .woocommerce-MyAccount-content table.shop_table td {
  padding: var(--hv-space-3);
  border-bottom: 1px solid var(--hv-line);
  text-align: left;
  vertical-align: middle;
}
.hv-theme .hv-account-table tbody tr:nth-child(even) td,
.hv-theme .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(even) td,
.hv-theme .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(even) th { background: var(--hv-surface-2); background: color-mix(in srgb, var(--hv-surface-2) 55%, transparent); }
.hv-theme .hv-account-table tbody tr:hover td,
.hv-theme .woocommerce-MyAccount-content table.shop_table tbody tr:hover td,
.hv-theme .woocommerce-MyAccount-content table.shop_table tbody tr:hover th { background: var(--hv-blue-050); }
.hv-theme .woocommerce-MyAccount-content table .amount { color: var(--hv-primary); font-weight: var(--hv-fw-bold); white-space: nowrap; }
.hv-theme .hv-account-table a, .hv-theme .woocommerce-orders-table__cell-order-number a { font-weight: var(--hv-fw-bold); }
.hv-account-table__actions { text-align: right; }

/* Order-item meta on the View Order page (Chosen Answer / Ticket Number(s)).
   WooCommerce floats the meta label, which mis-stacks the value; lay each row
   out as a clean "Label: value" instead. */
.hv-theme .woocommerce-MyAccount-content .wc-item-meta {
  list-style: none; margin: var(--hv-space-2) 0 0; padding: 0;
  font-size: var(--hv-fs-sm); color: var(--hv-muted);
}
.hv-theme .woocommerce-MyAccount-content .wc-item-meta li {
  display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0 0 3px;
}
.hv-theme .woocommerce-MyAccount-content .wc-item-meta .wc-item-meta-label {
  float: none !important; margin: 0; font-weight: var(--hv-fw-bold); color: var(--hv-ink);
}
.hv-theme .woocommerce-MyAccount-content .wc-item-meta p { display: inline; margin: 0; overflow-wrap: anywhere; }
/* (.hv-btn--sm sizing lives in components.css — single source of truth) */

/* Order status badges (dashboard renders .hv-status; the orders endpoint gets
   the same look via its row status class) */
.hv-status { background: var(--hv-blue-100); color: #6CA8FF; }
.hv-status--completed { background: var(--hv-green-100); color: var(--hv-green-500); }
.hv-status--processing { background: var(--hv-blue-100); color: #6CA8FF; }
.hv-status--on-hold { background: var(--hv-orange-050); color: #6CA8FF; }
.hv-status--pending { background: var(--hv-orange-050); color: #6CA8FF; }
.hv-status--cancelled, .hv-status--refunded { background: var(--hv-surface-2); color: var(--hv-muted); }
.hv-status--failed { background: rgba(239,68,68,.14); color: var(--hv-red-500); }

/* Orders endpoint: status cell text → badge */
.hv-theme .woocommerce-orders-table__cell-order-status { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); }
.hv-theme .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--hv-green-500); }
.hv-theme .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { color: #6CA8FF; }
.hv-theme .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.hv-theme .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: #6CA8FF; }
.hv-theme .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.hv-theme .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--hv-muted); }
.hv-theme .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: var(--hv-red-500); }

/* Action buttons inside tables */
.hv-theme .woocommerce-MyAccount-content table .button { padding: 0.45em 0.95em; font-size: var(--hv-fs-sm); margin: 2px 4px 2px 0; }

/* Pagination */
.hv-theme .woocommerce-MyAccount-content .woocommerce-pagination { display: flex; gap: var(--hv-space-3); justify-content: center; margin-top: var(--hv-space-4); }

/* ---- Empty states ---------------------------------------------------------
   Dashboard renders .hv-empty; WooCommerce endpoints emit a .woocommerce-info
   notice with a button — both get the centred empty-state treatment. */
.hv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-3);
  padding: var(--hv-space-7) var(--hv-space-5);
  text-align: center;
}
.hv-empty__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-blue-050);
  color: var(--hv-primary);
}
.hv-empty__icon svg { width: 26px; height: 26px; }
.hv-empty p { margin: 0; color: var(--hv-muted); }

/* !important throughout: the site-wide notice skin (woocommerce.css SYSTEM
   MESSAGES) pins its tinted background/border/padding with !important — these
   endpoint notices are empty-states, not alerts, so reassert the look here
   (this file loads after woocommerce.css and wins on equal importance). */
.hv-theme .woocommerce-MyAccount-content > .woocommerce-info,
.hv-theme .woocommerce-MyAccount-content > .woocommerce-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-4);
  padding: var(--hv-space-7) var(--hv-space-5) !important;
  text-align: center;
  background: none !important;
  border: 1px dashed var(--hv-line) !important;
  border-radius: var(--hv-radius) !important;
  box-shadow: none;
  color: var(--hv-muted) !important;
  animation: none;
}
.hv-theme .woocommerce-MyAccount-content > .woocommerce-info::before,
.hv-theme .woocommerce-MyAccount-content > .woocommerce-message::before { content: none !important; }
.hv-theme .woocommerce-MyAccount-content > .woocommerce-info a.button,
.hv-theme .woocommerce-MyAccount-content > .woocommerce-message a.button { float: none; margin: 0 !important; }

/* ---- Forms (edit account, addresses, login — WC templates untouched) ------ */
.hv-theme .woocommerce-MyAccount-content .form-row label { display: block; margin-bottom: 4px; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium); color: var(--hv-ink); }
.hv-theme .woocommerce-MyAccount-content .input-text,
.hv-theme .woocommerce-MyAccount-content select,
.hv-theme .woocommerce-MyAccount-content textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-sm);
  background: var(--hv-surface);
  font-family: var(--hv-font);
  color: var(--hv-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-theme .woocommerce-MyAccount-content .input-text:focus,
.hv-theme .woocommerce-MyAccount-content select:focus,
.hv-theme .woocommerce-MyAccount-content textarea:focus { border-color: var(--hv-primary); box-shadow: var(--hv-ring); outline: none; }
.hv-theme .woocommerce-MyAccount-content fieldset { border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: var(--hv-space-4); margin: var(--hv-space-5) 0; }
.hv-theme .woocommerce-MyAccount-content fieldset legend { padding: 0 0.5em; font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
.hv-theme .woocommerce-MyAccount-content .show-password-input { top: 0.55em; right: 0.8em; }

/* Addresses: two equal cards in ONE row. Forced with !important + the Elementor
   My-Account widget selector because the widget's own CSS floats/staggers the
   cards and out-ran the plain grid rule. As grid items the cards ignore float. */
.hv-theme .woocommerce-MyAccount-content .hv-addresses,
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses,
.elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: var(--hv-space-5) !important; align-items: start !important; float: none !important;
}
/* Kill WC/Elementor column floats + widths that staggered the two cards */
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses .col-2,
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address {
  width: auto !important; max-width: none !important; float: none !important; margin: 0;
  background: var(--hv-surface-2); border: 1px solid var(--hv-line); border-radius: var(--hv-radius); padding: var(--hv-space-4);
}
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address address { border: 0; padding: 0; font-style: normal; line-height: 1.7; }
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--hv-space-3);
  border-bottom: 1px solid var(--hv-line); padding-bottom: var(--hv-space-2); margin-bottom: var(--hv-space-3);
}
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3) { font-size: var(--hv-fs-h4); margin: 0; color: var(--hv-ink); }
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium); white-space: nowrap; }

/* =========================================================================
   AUTHENTICATION — wide two-column (marketing + form), full site chrome.
   Rendered by woocommerce/myaccount/form-login.php inside login-canvas.php
   (standard hv header + footer). LIGHT (white) surface: on-white tokens are
   re-asserted on the auth canvas so every card/field reads dark-on-white.
   ========================================================================= */
.hv-auth-canvas {
  --hv-surface: #fff;
  --hv-ink:    #111827;
  --hv-body:   #4B5563;
  --hv-muted:  #6B7280;
  --hv-line:   #E7EAF0;
  --hv-blue-050: #EAF1FE;
  --hv-blue-100: #D7E4FD;
  --hv-green-100: #E7F6EC;
  --hv-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --hv-shadow:    0 18px 40px rgba(16, 24, 40, .10);
}

/* ---- Canvas + notices --------------------------------------------------- */
.hv-auth-canvas { max-width: 1360px; margin: 0 auto; padding: var(--hv-space-6) var(--hv-space-5); }
.hv-auth-canvas__notices { margin-bottom: var(--hv-space-4); }
.hv-auth-canvas .woocommerce-message,
.hv-auth-canvas .woocommerce-info,
.hv-auth-canvas .woocommerce-error {
  background: var(--hv-green-100) !important; color: #15803D !important;
  border: 1px solid rgba(22, 163, 74, .22) !important; border-left-width: 4px !important;
  border-radius: var(--hv-radius) !important; box-shadow: none !important;
  font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium);
}
.hv-auth-canvas .woocommerce-message::before,
.hv-auth-canvas .woocommerce-info::before { color: #16A34A !important; }
.hv-auth-canvas .woocommerce-error { background: rgba(239, 68, 68, .08) !important; color: var(--hv-red-600) !important; border-color: rgba(239, 68, 68, .25) !important; }
body.hv-theme.woocommerce-account:not(.logged-in) div.woocommerce { max-width: none; }

/* ---- Grid --------------------------------------------------------------- */
.hv-auth { animation: hv-fade-up .35s ease both; }
@media (prefers-reduced-motion: reduce) { .hv-auth { animation: none; } }
.hv-auth__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 520px;
  gap: clamp(1.75rem, 3vw, 3.5rem); align-items: start;
}

/* Signed-out confirmation banner (spans both columns) */
.hv-auth__signout {
  grid-column: 1 / -1; text-align: center; max-width: 640px; margin: 0 auto var(--hv-space-6);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-6);
}
.hv-auth__signout h2 { font-size: var(--hv-fs-h2); color: var(--hv-ink); margin: 0 0 var(--hv-space-2); }

/* =========================================================================
   MARKETING ASIDE
   ========================================================================= */
.hv-auth__aside { padding-top: var(--hv-space-4); }
.hv-auth__eyebrow {
  display: inline-block; margin-bottom: var(--hv-space-3);
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: var(--hv-ls-wider);
  text-transform: uppercase; color: var(--hv-muted);
}
.hv-auth .hv-auth__headline {
  font-family: var(--hv-font) !important;
  font-size: var(--hv-fs-hero); font-weight: var(--hv-fw-black); color: var(--hv-ink);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 var(--hv-space-3);
}
.hv-auth__headline .accent { color: var(--hv-primary); }
.hv-auth__lead { color: var(--hv-body); font-size: var(--hv-fs-lead); line-height: var(--hv-lh-normal); margin: 0 0 var(--hv-space-5); max-width: 44ch; }

.hv-auth__hero { margin: 0 0 var(--hv-space-5); }
.hv-auth__hero img { display: block; max-width: 100%; height: auto; max-height: 360px; margin: 0 auto; }

.hv-auth__feats { list-style: none; margin: 0 0 var(--hv-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--hv-space-4); }
.hv-auth__feat { display: flex; align-items: flex-start; gap: var(--hv-space-3); }
.hv-auth__feat-ico {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--hv-radius); background: #fff; border: 1px solid var(--hv-line);
  color: var(--hv-primary); box-shadow: var(--hv-shadow-sm);
}
.hv-auth__feat-txt { display: flex; flex-direction: column; gap: 2px; }
.hv-auth__feat-txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); }
.hv-auth__feat-txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); line-height: var(--hv-lh-normal); }

/* Stats card (login) */
.hv-auth__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-3);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-4) var(--hv-space-5); margin-bottom: var(--hv-space-4);
}
.hv-auth__stat { display: flex; align-items: center; gap: 10px; }
.hv-auth__stat:not(:last-child) { border-right: 1px solid var(--hv-line); }
.hv-auth__stat-ico { flex: 0 0 auto; color: var(--hv-primary); }
.hv-auth__stat b { display: block; font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: 1.1; }
.hv-auth__stat span { font-size: var(--hv-fs-xs); color: var(--hv-muted); }

/* Promo card (login) */
.hv-auth__promo {
  display: flex; align-items: center; gap: var(--hv-space-4);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-4) var(--hv-space-5);
}
.hv-auth__promo-ico { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--hv-primary); color: #fff; }
.hv-auth__promo-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-auth__promo-txt b { color: var(--hv-ink); }
.hv-auth__promo-txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-auth__promo-btn { flex: 0 0 auto; padding: 0.6em 1em; border: 1px solid var(--hv-line); border-radius: var(--hv-radius); color: var(--hv-primary); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none; white-space: nowrap; }
.hv-auth__promo-btn:hover { border-color: var(--hv-primary); background: var(--hv-blue-050); }

/* Social proof (register) */
.hv-auth__social-proof {
  display: flex; align-items: center; gap: var(--hv-space-4);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-4) var(--hv-space-5);
}
.hv-auth__avatars { display: inline-flex; align-items: center; flex: 0 0 auto; }
.hv-auth__avatars i { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; background: linear-gradient(135deg, #c7d2fe, #93c5fd); }
.hv-auth__avatars i:first-child { margin-left: 0; }
.hv-auth__avatars b { display: inline-flex; align-items: center; justify-content: center; margin-left: -10px; min-width: 44px; height: 36px; padding: 0 8px; border-radius: 999px; border: 2px solid #fff; background: var(--hv-primary); color: #fff; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-black); }
.hv-auth__social-proof-txt { display: flex; flex-direction: column; gap: 2px; }
.hv-auth__social-proof-txt b { color: var(--hv-ink); }
.hv-auth__social-proof-txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }

/* =========================================================================
   FORM CARD
   ========================================================================= */
.hv-auth__main { display: flex; flex-direction: column; }
.hv-auth__card {
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-xl);
  box-shadow: var(--hv-shadow); padding: clamp(1.5rem, 3vw, 2.75rem);
}
/* Lost-password / reset use a lone card (direct child of .hv-auth, no grid) —
   keep it centred and narrow instead of full-canvas width. */
.hv-auth > .hv-auth__card { max-width: 520px; margin: var(--hv-space-5) auto 0; }
.hv-auth__chip {
  width: 56px; height: 56px; margin: 0 auto var(--hv-space-4); display: grid; place-items: center;
  border-radius: var(--hv-radius); background: var(--hv-blue-050); color: var(--hv-primary);
}
.hv-auth__chip--success { background: var(--hv-green-100); color: var(--hv-green-600); font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); }
.hv-auth__head { text-align: center; margin-bottom: var(--hv-space-5); }
.hv-auth__head h2 { font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: var(--hv-ink); margin: 0 0 var(--hv-space-2); }
.hv-auth__sub { color: var(--hv-muted); margin: 0; max-width: none; }
.hv-auth__note { color: var(--hv-muted); font-size: var(--hv-fs-sm); margin: 0 0 var(--hv-space-4); }

/* Rows + labels */
.hv-auth__row { margin: 0 0 var(--hv-space-4); }
.hv-auth__row label,
.hv-auth form .woocommerce-form-row label { display: block; margin-bottom: 6px; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
.hv-auth form .woocommerce-form-row { margin-bottom: var(--hv-space-4); }

/* Field: icon inside input; survives WooCommerce's password wrapper */
.hv-auth__field { position: relative; display: block; }
.hv-auth__field .hv-auth__ico { position: absolute; left: 14px; top: 15px; color: var(--hv-muted); pointer-events: none; z-index: 1; }
.hv-auth__field .password-input { display: block; width: 100%; position: static; }
.hv-auth .hv-auth__field .input-text,
.hv-auth .woocommerce-form-row input.input-text,
.hv-auth .woocommerce-form-row input[type="text"],
.hv-auth .woocommerce-form-row input[type="email"],
.hv-auth .woocommerce-form-row input[type="password"],
.hv-auth .woocommerce-form-row input[type="tel"] {
  width: 100%;
  padding: 0.9em 1em !important;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  font-family: var(--hv-font);
  font-size: var(--hv-fs-body);
  color: var(--hv-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Icon fields → room for the left icon + right eye toggle */
/* The second selector is not redundant. The general input rule above includes
   `.hv-auth .woocommerce-form-row input.input-text` = (0,3,1), also !important,
   and the markup nests .hv-auth__field INSIDE .woocommerce-form-row - so a
   (0,3,0) selector loses and the 44px left padding silently reverts to 1em,
   dropping the icon straight onto the placeholder. Scoring (0,4,1) settles it.
   Fields outside .woocommerce-form-row stay covered by the first selector,
   which the general rule cannot reach either. */
.hv-auth .hv-auth__field .input-text,
.hv-auth .woocommerce-form-row .hv-auth__field input.input-text { padding: 0.9em 2.9em 0.9em 44px !important; }

/* Select fields (e.g. "Where did you hear about us?"). The native arrow is
   replaced by our own chevron, so appearance is stripped on all three engines
   and the right padding leaves room for it. */
.hv-auth__field--select { display: block; }
.hv-auth .hv-auth__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  padding: 0.9em 2.9em 0.9em 44px !important;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  font-family: var(--hv-font);
  font-size: var(--hv-fs-body);
  color: var(--hv-ink);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-auth .hv-auth__select:focus { border-color: var(--hv-primary); box-shadow: var(--hv-ring); outline: none; }
/* Unanswered reads as placeholder text, answered reads as a value. */
.hv-auth .hv-auth__select:invalid { color: var(--hv-muted); }
.hv-auth .hv-auth__select option { color: var(--hv-ink); }
.hv-auth__field--select .hv-auth__chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--hv-muted); pointer-events: none; z-index: 1;
}

.hv-auth .input-text::placeholder { color: var(--hv-muted); opacity: .85; }
.hv-auth .input-text:focus { border-color: var(--hv-primary); box-shadow: var(--hv-ring); outline: none; }
.hv-auth .input-text:user-invalid { border-color: var(--hv-red-500); }

/* WooCommerce show/hide password eye — strip native layers, draw one */
.hv-auth .show-password-input {
  position: absolute; right: 8px; top: 6px; transform: none;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0 !important; box-shadow: none;
  cursor: pointer; overflow: hidden; color: transparent; font-size: 0; line-height: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center/20px no-repeat !important;
}
.hv-auth .show-password-input::before,
.hv-auth .show-password-input::after { content: none !important; display: none !important; background: none !important; }
.hv-auth .password-input .show-password-input ~ .show-password-input { display: none !important; }
.hv-auth .password-input.display-password .show-password-input { opacity: .5; }
.hv-auth .show-password-input:focus-visible { outline: none; box-shadow: var(--hv-ring); border-radius: var(--hv-radius-sm); }

/* Custom password-strength bar (WC's own meter is hidden to avoid duplicates) */
.hv-auth .woocommerce-password-strength,
.hv-auth .woocommerce-password-hint { display: none !important; }

/* Why the submit button is disabled. Hiding WooCommerce's own hint (above) also
   hid the only explanation for its strength gate, so hv.js injects this and
   mirrors the button's real disabled state into it.
   Amber, not red: nothing has gone wrong yet — the password just is not strong
   enough to proceed, which is guidance rather than an error.
   The [hidden] guard is required: the display below would otherwise override
   the hidden attribute and pin the warning permanently on screen. */
.hv-auth__blocked {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 var(--hv-space-3);
  padding: 0.7em 0.9em;
  border-radius: var(--hv-radius-sm);
  background: rgba(245, 158, 11, .10);
  border: 1px solid rgba(245, 158, 11, .28);
  color: #92400E;
  font-size: var(--hv-fs-sm);
  line-height: 1.45;
}
.hv-auth__blocked[hidden] { display: none; }
.hv-auth__strength { display: block; margin-top: 8px; }
.hv-auth__strength[hidden] { display: none; }
.hv-auth__strength-bar { display: flex; gap: 5px; margin-bottom: 5px; }
.hv-auth__strength-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--hv-line); transition: background .2s ease; }
.hv-auth__strength-label { font-size: var(--hv-fs-xs); color: var(--hv-muted); }
.hv-auth__strength-label b { font-weight: var(--hv-fw-bold); }
.hv-auth__strength[data-level="1"] .hv-auth__strength-bar i:nth-child(-n+1) { background: var(--hv-red-500); }
.hv-auth__strength[data-level="1"] .hv-auth__strength-label b { color: var(--hv-red-500); }
.hv-auth__strength[data-level="2"] .hv-auth__strength-bar i:nth-child(-n+2) { background: #F59E0B; }
.hv-auth__strength[data-level="2"] .hv-auth__strength-label b { color: #D97706; }
.hv-auth__strength[data-level="3"] .hv-auth__strength-bar i:nth-child(-n+3) { background: var(--hv-primary); }
.hv-auth__strength[data-level="3"] .hv-auth__strength-label b { color: var(--hv-primary); }
.hv-auth__strength[data-level="4"] .hv-auth__strength-bar i:nth-child(-n+4) { background: var(--hv-green-500); }
.hv-auth__strength[data-level="4"] .hv-auth__strength-label b { color: var(--hv-green-600); }

/* Confirm-password match hint */
.hv-auth__match { display: block; margin-top: 6px; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-medium); }
.hv-auth__match[hidden] { display: none; }
.hv-auth__match.is-error { color: var(--hv-red-500); }
.hv-auth__match.is-ok { color: var(--hv-green-600); }

/* Keep me signed in + forgot */
.hv-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-3); flex-wrap: wrap; margin: 0 0 var(--hv-space-4); }
.hv-auth__meta .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; color: var(--hv-body); font-size: var(--hv-fs-sm); cursor: pointer; margin: 0; }
.hv-auth__meta input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--hv-primary); }
.hv-auth__forgot { font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-primary) !important; text-decoration: none !important; }
.hv-auth__forgot:hover { color: var(--hv-primary-strong) !important; }

/* Agree to terms (register) */
.hv-auth__agree { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--hv-space-4); font-size: var(--hv-fs-sm); color: var(--hv-body); cursor: pointer; }
.hv-auth__agree input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--hv-primary); }
.hv-auth__agree a { color: var(--hv-primary); font-weight: var(--hv-fw-bold); text-decoration: none; }
.hv-auth__agree a:hover { text-decoration: underline; }

/* Submit — primary button, full width, lock + label + arrow, spinner on submit */
.hv-auth__submit { margin: 0; }
.hv-auth button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 1em 1.4em;
  background: var(--hv-primary) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--hv-radius); font-family: var(--hv-font); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold);
  cursor: pointer; box-shadow: 0 8px 20px rgba(var(--hv-primary-rgb), .28);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.hv-auth button[type="submit"] svg { flex: 0 0 auto; }
.hv-auth__btn-arrow { margin-left: auto; }
.hv-auth--login .hv-auth__btn-label { text-transform: uppercase; letter-spacing: 0.05em; }
.hv-auth button[type="submit"]:hover { background: var(--hv-blue-700) !important; transform: translateY(-1px); box-shadow: var(--hv-shadow); }
.hv-auth button[type="submit"]:focus-visible { outline: none; box-shadow: var(--hv-ring); }
.hv-auth button[type="submit"]:disabled { opacity: .75; cursor: default; transform: none; }
.hv-auth button[type="submit"].is-loading .hv-auth__btn-label { opacity: .85; }
.hv-auth button[type="submit"].is-loading::after {
  content: ""; width: 17px; height: 17px; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: hv-spin .7s linear infinite;
}
@keyframes hv-spin { to { transform: rotate(360deg); } }

/* Social divider + buttons */
.hv-auth__or { display: flex; align-items: center; gap: 12px; margin: var(--hv-space-5) 0 var(--hv-space-4); color: var(--hv-muted); font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }
.hv-auth__or::before, .hv-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--hv-line); }
.hv-auth__social { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hv-space-3); }
.hv-auth__social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.8em 0.5em; border: 1px solid var(--hv-line); border-radius: var(--hv-radius);
  background: #fff; color: var(--hv-ink); font-family: var(--hv-font); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm);
  text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.hv-auth__social-btn:hover { border-color: var(--hv-primary); background: var(--hv-blue-050); }
.hv-auth__social-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.hv-auth__social-btn.is-disabled:hover { border-color: var(--hv-line); background: #fff; }
.hv-auth__social-btn svg { flex: 0 0 auto; }

/* Footer switch link */
.hv-auth__footer { text-align: center; margin: var(--hv-space-5) 0 0; color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-auth__footer a { color: var(--hv-primary) !important; font-weight: var(--hv-fw-bold); text-decoration: none !important; }
.hv-auth__footer a:hover { color: var(--hv-primary-strong) !important; }

/* Plugin-injected register rows (referral code, privacy text) inherit the look */
.hv-auth .rrs-field-note { display: block; margin-top: 6px; font-size: var(--hv-fs-xs); color: var(--hv-green-600); font-weight: var(--hv-fw-medium); }
.hv-auth .woocommerce-privacy-policy-text { font-size: var(--hv-fs-xs); color: var(--hv-muted); margin-bottom: var(--hv-space-4); }
.hv-auth .woocommerce-privacy-policy-text a { color: var(--hv-primary); }

/* Trust row under the form card */
.hv-auth__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4); margin: var(--hv-space-5) 0 0; padding: var(--hv-space-4) 0 0; list-style: none; border-top: 1px solid var(--hv-line); }
.hv-auth__trust-item { display: flex; align-items: center; gap: 10px; }
.hv-auth__trust-ico { flex: 0 0 auto; color: var(--hv-primary); }
.hv-auth__trust-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-auth__trust-txt b { color: var(--hv-ink); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); line-height: 1.2; }
.hv-auth__trust-txt span { color: var(--hv-muted); font-size: var(--hv-fs-xs); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .hv-auth__grid { grid-template-columns: 1fr; gap: var(--hv-space-6); }
  .hv-auth__main { order: -1; }               /* form first on tablet/mobile */
  .hv-auth__aside { padding-top: 0; }
  .hv-auth__hero { display: none; }            /* decorative image hidden when stacked */
  .hv-auth__headline { font-size: var(--hv-fs-h1); }
}
@media (max-width: 560px) {
  .hv-auth-canvas { padding: var(--hv-space-4); }
  .hv-auth__card { padding: var(--hv-space-5); }
  .hv-auth__stats { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-4) var(--hv-space-3); }
  .hv-auth__stat:nth-child(even) { border-right: 0; }
  .hv-auth__promo, .hv-auth__social-proof { flex-wrap: wrap; }
  .hv-auth__promo-btn { width: 100%; text-align: center; }
  .hv-auth__trust { grid-template-columns: 1fr 1fr; gap: var(--hv-space-4) var(--hv-space-3); }
  .hv-auth__social-btn { padding: 0.8em 0.35em; }
  .hv-auth-footer__inner { flex-direction: column; text-align: center; }
}

/* ---- Narrow phones: stop the auth page scrolling sideways -------------------
   The captcha is injected by a plugin and renders a FIXED 300px widget, which
   nothing in this stylesheet can shrink. On a 360px viewport the old padding
   (canvas --hv-space-4 + card --hv-space-5, both sides) left only 288px inside
   the card, so the widget pushed 12px past the edge and made the whole document
   horizontally scrollable - which is why every section looked shifted with a
   gap on the right, not just the form.

   Trimming the padding frees 310px, so the widget fits intact rather than being
   clipped or scaled. html{overflow-x:clip} in base.css is a safety net, not a
   fix: it is unsupported on older iOS Safari, and it would only have hidden the
   overflow rather than removing it. */
@media (max-width: 420px) {
  .hv-auth__card { padding: var(--hv-space-4); }
  .hv-auth-canvas { padding: var(--hv-space-4) var(--hv-space-3); }
}

/* Third-party widgets (captcha, embeds) size themselves and ignore the layout.
   Cap them so a vendor changing its width cannot break the page again. */
.hv-auth__card iframe,
.hv-auth__card .cf-turnstile,
.hv-auth__card .g-recaptcha,
.hv-auth__card .h-captcha { max-width: 100%; }

/* ---- Make the captcha FIT rather than clipping it -------------------------
   Turnstile renders a fixed 300px block that no stylesheet can reflow, and the
   canvas now clips its overflow - so without this the widget is simply cut off
   instead of pushing the page. Two steps, because one is not enough:

   1. Give the card's padding back to the widget. At 360px that lifts the usable
      width from 310px to 338px, so it sits comfortably.
   2. Below ~360px even the full card width falls short (320px screen = 298px),
      so scale it. `zoom`, NOT `transform: scale()`: zoom shrinks the LAYOUT box
      too, so the widget stops reserving 300px it no longer fills - transform
      would leave the original hole behind and the overflow with it. */
@media (max-width: 420px) {
  .hv-auth__card .cf-turnstile,
  .hv-auth__card .g-recaptcha,
  .hv-auth__card .h-captcha {
    margin-inline: calc(-1 * var(--hv-space-4));
  }
}
@media (max-width: 360px) {
  .hv-auth__card .cf-turnstile,
  .hv-auth__card .g-recaptcha,
  .hv-auth__card .h-captcha { zoom: 0.88; }
}

/* ---- Reach the captcha WITHOUT knowing its class ---------------------------
   Turnstile renders into a cross-origin iframe and its wrapper's class names
   are randomised on every load, so `.cf-turnstile` above is a guess that a
   plugin-injected widget may not match. The iframe's src, however, is stable —
   and :has() reaches the wrapper through it. That makes these rules work
   whatever the plugin calls its container.

   max-width carries !important because Turnstile sets an inline width on its
   own wrapper; zoom sits on the IFRAME rather than an ancestor so nested
   wrappers cannot compound it (0.88 x 0.88 would shrink it to 77%). */
@media (max-width: 420px) {
  /* NEVER set `display` on these. Turnstile injects a SECOND, hidden,
     position:fixed overlay container for its interactive challenge, and that
     container also holds a challenges.cloudflare.com iframe as a direct
     child - so it matches this selector too. `display: flex` overrode its
     `display: none`, laying an invisible full-viewport layer over the page
     that swallowed every click, Create Account included. Geometry only.
     Centring is done with margin on the IFRAME, which is safe because a
     hidden overlay ignores it. */
  .hv-auth__card :has(> iframe[src*="challenges.cloudflare.com"]) {
    margin-inline: calc(-1 * var(--hv-space-4));
  }
  .hv-auth__card iframe[src*="challenges.cloudflare.com"] { max-width: 100%; margin-inline: auto; }
}
@media (max-width: 360px) {
  .hv-auth__card iframe[src*="challenges.cloudflare.com"] { zoom: 0.88; }
}

/* Grid children default to min-width:auto, so a long unbreakable string makes
   the track wider than its share and the grid overflows its container. These
   two rows carry stat labels of unpredictable length. */
.hv-auth__stat,
.hv-auth__trust-item { min-width: 0; }
.hv-auth__stat b,
.hv-auth__stat span { overflow-wrap: anywhere; }

/* ---- Containment: the auth canvas never makes the DOCUMENT scroll ----------
   Scoped to login / register only, because that is the one place the page pulls
   in third-party markup (the captcha) whose width this stylesheet does not
   control. Applied to <main>, NOT html/body: body-level hidden would turn the
   root into a scroll container and break the sticky header, which is exactly
   why base.css uses `clip` there.

   `clip` over `hidden` for the same reason - hidden creates a scroll container,
   clip does not - with a hidden fallback for older iOS Safari, where `clip` is
   simply ignored and the overflow would come straight back. */
.hv-auth-canvas { overflow-x: clip; }
@supports not (overflow: clip) {
  .hv-auth-canvas { overflow-x: hidden; }
}
.hv-auth-canvas .hv-auth__card,
.hv-auth-canvas .hv-auth__grid > * { max-width: 100%; min-width: 0; }

/* Long unbreakable strings - an email in a notice, a referral URL - are the
   other way this page grows wider than the phone holding it. */
.hv-auth-canvas .woocommerce-message,
.hv-auth-canvas .woocommerce-info,
.hv-auth-canvas .woocommerce-error,
.hv-auth__card label,
.hv-auth__lead { overflow-wrap: anywhere; }


/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  /* :has() kept separate from the widget selector (old-browser rule validity) */
  .elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab > .woocommerce { flex-direction: column; gap: var(--hv-space-4); }
  .hv-theme.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { flex-direction: column; gap: var(--hv-space-4); }
  .hv-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  .elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation { width: 100%; flex-basis: auto; }
  .hv-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-content,
  .elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content { width: 100%; flex-basis: auto; }

  /* Sidebar → collapsible disclosure under a toggle button */
  .hv-account-nav { position: static; }
  .hv-account-nav__toggle { display: flex; }
  .hv-account-nav ul { display: none; margin-top: var(--hv-space-2); }
  .hv-account-nav.is-open ul { display: flex; }
  .hv-account-nav li.is-active a::before { display: none; }

  .hv-dash__stats { grid-template-columns: repeat(2, 1fr); }
  .hv-dash .hv-card { padding: var(--hv-space-5); }
}

@media (max-width: 640px) {
  .hv-dash__stats { grid-template-columns: 1fr 1fr; }
  /* Narrow cards: smaller value type + wrapping so long wallet amounts fit */
  .hv-stat-card { padding: var(--hv-space-4); min-width: 0; }
  .hv-stat-card b { font-size: var(--hv-fs-h3); overflow-wrap: anywhere; }
  .hv-dash__actions { flex-basis: 100%; grid-template-columns: 1fr; }
  .hv-theme .woocommerce-MyAccount-content { padding: var(--hv-space-4); }
  .hv-theme .woocommerce-MyAccount-content .hv-addresses,
  .hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses,
  .elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; }

  /* Tables stay TABLES on mobile — the row scrolls horizontally inside its
     container instead of stacking into per-row cards, so the desktop columns,
     hierarchy and styling are preserved (req: keep the table layout). */
  .hv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-table-scroll .hv-account-table { min-width: 460px; }
  /* WooCommerce responsive tables (orders / wallet / payment methods) have no
     wrapper we control, so the table element itself is the scroll container. */
  .hv-theme .woocommerce-MyAccount-content table.shop_table_responsive {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Compact cells + single-line rows so columns align and read in one swipe.
     Scoped to tables that HAVE a scroll container (.hv-table-scroll wrapper for
     the dashboard table; display:block scroll for .shop_table_responsive). The
     View-Order details table (.shop_table.order_details, no scroll container)
     is deliberately excluded so its product names keep wrapping — nowrap there
     would overflow the page. */
  .hv-theme .hv-account-table th, .hv-theme .hv-account-table td,
  .hv-theme .woocommerce-MyAccount-content table.shop_table_responsive th,
  .hv-theme .woocommerce-MyAccount-content table.shop_table_responsive td {
    white-space: nowrap; padding: var(--hv-space-2) var(--hv-space-3);
  }
  .hv-theme .woocommerce-MyAccount-content table .button,
  .hv-account-table .hv-btn--sm { width: auto; }
}

/* =========================================================================
   DRAW DASHBOARD — lottery "My Draws" account endpoint
   ----------------------------------------------------------------------------
   Plugin markup (unchanged): .lty-myaccount-lottery-wrapper > h2 (title) +
   .lty-dashboard-navigation nav a (tabs) + .lty-myaccount-lottery-contents >
   .lty-data-table-wrapper > table.lty-frontend-table (cells → .lty_lottery_
   {status}_status > span badges). Styled to the premium look here; the plugin's
   own frontend.css is overridden by load order + specificity (this sheet loads
   last on account pages). Only the tab icon markup is overridden (navigation.php).
   ========================================================================= */
.hv-theme .lty-myaccount-lottery-wrapper { display: flex; flex-direction: column; gap: var(--hv-space-5); }
.hv-theme .lty-myaccount-lottery-wrapper > h2 {
  margin: 0; font-size: var(--hv-fs-h2); font-weight: var(--hv-fw-black);
  color: var(--hv-ink); line-height: 1.1;
}
.hv-theme .lty-myaccount-lottery-contents { margin: 0; }

/* Tabs → premium segmented pills */
.hv-theme .lty-dashboard-navigation { margin: 0; }
.hv-theme .lty-dashboard-navigation nav {
  display: flex; flex-wrap: wrap; gap: var(--hv-space-2);
  background: var(--hv-surface-2); border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius); padding: var(--hv-space-2);
}
.hv-theme .lty-dashboard-navigation nav a {
  display: inline-flex; align-items: center; gap: var(--hv-space-2);
  padding: 0.6em 1em; border-radius: var(--hv-radius-sm);
  color: var(--hv-body) !important; font-weight: var(--hv-fw-medium);
  font-size: var(--hv-fs-sm); text-decoration: none !important; white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hv-theme .lty-dashboard-navigation nav a span { margin: 0; } /* neutralise plugin's margin-right:5px so the flex gap is the only spacing */
.hv-theme .lty-dashboard-navigation nav a .hv-draw-tab__ico { display: inline-flex; color: var(--hv-muted); transition: color .15s ease; }
.hv-theme .lty-dashboard-navigation nav a:hover { background: var(--hv-blue-050); color: var(--hv-primary) !important; }
.hv-theme .lty-dashboard-navigation nav a:hover .hv-draw-tab__ico { color: var(--hv-primary); }
.hv-theme .lty-dashboard-navigation nav a.lty-current {
  background: var(--hv-primary); color: #fff !important;
  font-weight: var(--hv-fw-bold); box-shadow: var(--hv-shadow-sm);
}
.hv-theme .lty-dashboard-navigation nav a.lty-current .hv-draw-tab__ico { color: #fff; }
/* Fallback: hide the plugin Dashicon if the navigation.php override didn't run */
.hv-theme .lty-dashboard-navigation nav a .dashicons { display: none; }

/* Table → premium card.
   Scoped to .lty-myaccount-lottery-contents so the "View more details" popup —
   which reuses .lty-data-table-wrapper / .lty-frontend-table but is moved to
   <body> (outside this container) when opened — keeps the plugin's own modal
   layout. */
.hv-theme .lty-myaccount-lottery-contents .lty-data-table-wrapper {
  background: var(--hv-surface); border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm); overflow: hidden;
}
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table thead { background: var(--hv-surface-2); }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table thead th {
  padding: var(--hv-space-3) var(--hv-space-4); border: 0;
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold);
  text-transform: uppercase; letter-spacing: var(--hv-ls-wide);
  color: var(--hv-muted); text-align: left; white-space: nowrap; word-break: normal;
}
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody td {
  padding: var(--hv-space-4); border: 0; border-bottom: 1px solid var(--hv-line);
  font-size: var(--hv-fs-sm); color: var(--hv-body); text-align: left;
  vertical-align: middle; word-break: normal; overflow-wrap: anywhere;
}
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody tr:last-child td { border-bottom: 0; }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody tr:nth-child(2n) { background: color-mix(in srgb, var(--hv-surface-2) 55%, transparent); }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody tr:hover td { background: var(--hv-blue-050); }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody td a {
  color: var(--hv-primary) !important; font-weight: var(--hv-fw-bold);
  font-size: var(--hv-fs-sm); text-decoration: none !important;
}
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody td a:hover { color: #6CA8FF !important; text-decoration: underline; }

/* Status → premium pill badges (brand palette; scoped to this table so product
   pages / loop cards keep the plugin's own status styling). */
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_not_started_status span,
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_started_status span,
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_failed_status span,
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_finished_status span,
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_closed_status span {
  display: inline-block; float: none; padding: 0.35em 0.85em;
  border-radius: var(--hv-radius-pill); font-size: var(--hv-fs-xs);
  font-weight: var(--hv-fw-bold); white-space: nowrap; letter-spacing: 0.01em;
}
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_finished_status span { background: var(--hv-blue-100); color: #6CA8FF; }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_closed_status span { background: var(--hv-orange-050); color: #6CA8FF; }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_started_status span { background: var(--hv-green-100); color: var(--hv-green-500); }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_not_started_status span { background: var(--hv-orange-050); color: #6CA8FF; }
.hv-theme .lty-myaccount-lottery-contents .lty-frontend-table .lty_lottery_failed_status span { background: rgba(239,68,68,.14); color: var(--hv-red-500); }

/* Empty / no-products notice */
.hv-theme .lty-myaccount-lottery-contents .lty-no-product-notice { display: block; padding: var(--hv-space-7) var(--hv-space-5); text-align: center; color: var(--hv-muted); }

/* ---- Draw Dashboard: mobile (≤768px, matching the plugin's own breakpoint) --
   Keep the desktop TABLE and scroll it horizontally instead of the plugin's
   per-row card stacking. Each rule out-specifies the plugin's frontend.css
   (.hv-theme + container prefix) and re-asserts table semantics + kills the
   data-title pseudo-labels. */
@media (max-width: 768px) {
  .hv-theme .lty-myaccount-lottery-contents .lty-data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table { min-width: 640px; }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table thead { display: table-header-group; }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody { display: table-row-group; }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody tr { display: table-row; }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tbody tr td {
    display: table-cell; text-align: left !important;
    border-right: 0; border-bottom: 1px solid var(--hv-line);
    padding: var(--hv-space-3);
  }
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tr td::before,
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tr td::after { content: none !important; display: none !important; }
  /* Pagination footer stays centred (the tbody-scoped left-align above skips it) */
  .hv-theme .lty-myaccount-lottery-contents .lty-frontend-table tfoot td { display: table-cell; text-align: center !important; }
  /* Tabs: one scrollable row rather than wrapping */
  .hv-theme .lty-dashboard-navigation nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-theme .lty-dashboard-navigation nav a { flex: 0 0 auto; }
  .hv-theme .lty-myaccount-lottery-wrapper > h2 { font-size: var(--hv-fs-h3); }
}

/* =========================================================================
   MY REFERRAL — referral-reward-system plugin reskin (.rrs-app)
   ----------------------------------------------------------------------------
   The plugin ships a solid, responsive premium layout but in off-brand indigo/
   violet/pink with a system font. We remap its --rrs-* design tokens to the
   Highland Vault tokens and rebrand the few hard-coded gradients / !important
   colours, so the whole page becomes a native part of the theme. CSS-only — no
   markup or logic change. Scoped to .hv-theme .rrs-app (only exists on this
   endpoint), and every rule out-specifies the plugin's own .rrs-* (0,1,x) via
   the .hv-theme prefix.
   ========================================================================= */
.hv-theme .rrs-app {
  --rrs-primary:   var(--hv-primary);
  --rrs-primary-2: var(--hv-blue-700);
  --rrs-primary-3: var(--hv-primary);
  --rrs-primary-d: var(--hv-blue-700);
  --rrs-success:   var(--hv-green-500);
  --rrs-success-d: var(--hv-green-600);
  --rrs-warning:   var(--hv-orange-500);
  --rrs-danger:    var(--hv-red-500);
  --rrs-gold:      var(--hv-gold-500);
  --rrs-text:      var(--hv-ink);
  --rrs-text-2:    var(--hv-body);
  --rrs-text-3:    var(--hv-muted);
  --rrs-bg:        var(--hv-surface);
  --rrs-bg-soft:   var(--hv-surface-2);
  --rrs-bg-soft-2: var(--hv-surface-2);
  --rrs-border:    var(--hv-line);
  --rrs-border-2:  var(--hv-line);
  --rrs-radius-sm: var(--hv-radius-sm);
  --rrs-radius:    var(--hv-radius);
  --rrs-radius-lg: var(--hv-radius-lg);
  --rrs-shadow-xs: var(--hv-shadow-sm);
  --rrs-shadow:    var(--hv-shadow-sm);
  --rrs-shadow-lg: var(--hv-shadow-lg);
  font-family: var(--hv-font);
}
/* Buttons/inputs don't inherit font-family by default — set it explicitly. */
.hv-theme .rrs-app button,
.hv-theme .rrs-app input { font-family: var(--hv-font); }

/* The referral page lays out its OWN cards (like the dashboard) → drop the
   account content-card chrome so they float cleanly instead of nesting. Mirrors
   the account-layout selectors (+ :has(.rrs-app)) so padval:0 out-specifies the
   generic (0,4,0) and Elementor-widget (0,5,0) content-padding rules above. */
.hv-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-content:has(.rrs-app),
.elementor-widget-woocommerce-my-account.e-my-account-tabs-vertical .e-my-account-tab .woocommerce .woocommerce-MyAccount-content:has(.rrs-app) {
  background: none; border: 0; box-shadow: none; padding: 0;
}

/* Hero → brand navy→blue gradient (was indigo→violet→pink); keep the soft
   white glow layers for depth. */
.hv-theme .rrs-hero {
  background:
    radial-gradient(at 20% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(at 80% 100%, rgba(255,255,255,.10) 0%, transparent 50%),
    linear-gradient(135deg, #0A0A0A 0%, var(--hv-primary-deep) 55%, var(--hv-primary) 100%);
}
.hv-theme .rrs-app .rrs-hero__title { font-size: var(--hv-fs-h2) !important; }
.hv-theme .rrs-hero__amt { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
/* Decorative hero glow blobs → brand gold + blue (were amber + cyan) */
.hv-theme .rrs-hero__shape--1 { background: var(--hv-gold-500); }
.hv-theme .rrs-hero__shape--2 { background: var(--hv-blue-500); }

/* Buttons → theme weight; rebrand the primary button's hard-coded indigo glow */
.hv-theme .rrs-btn { font-weight: var(--hv-fw-bold); }
.hv-theme .rrs-btn--primary { box-shadow: 0 1px 2px rgba(var(--hv-primary-rgb), .3), 0 4px 12px rgba(var(--hv-primary-rgb), .2); }

/* Stat icon chips → brand tints (were indigo/violet gradients) */
.hv-theme .rrs-stat__icon { background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-theme .rrs-stat--success .rrs-stat__icon { background: var(--hv-green-100); color: var(--hv-green-500); }
.hv-theme .rrs-stat--warn .rrs-stat__icon { background: var(--hv-orange-050); color: #6CA8FF; }
.hv-theme .rrs-stat--wallet .rrs-stat__icon { background: var(--hv-blue-100); color: #6CA8FF; }
.hv-theme .rrs-stat::before { background: linear-gradient(135deg, transparent, rgba(var(--hv-primary-rgb), .05)); }

/* "How it works" step icon chips → brand tints (step 1 base was hard-coded
   indigo). The modifier rules are re-asserted at (0,3,0) so the base override
   can't flatten the green/gold steps. */
.hv-theme .rrs-step__icon { background: var(--hv-blue-050); }
.hv-theme .rrs-step--success .rrs-step__icon { background: var(--hv-green-100); }
.hv-theme .rrs-step--gold .rrs-step__icon { background: var(--hv-orange-050); }

/* "Both code & link work" info tag → brand blue */
.hv-theme .rrs-tag--info { background: var(--hv-blue-050); color: #6CA8FF; border-color: var(--hv-blue-100); }

/* Big code card → brand navy with a blue glow (was violet/pink glow) */
.hv-theme .rrs-codecard {
  background:
    radial-gradient(at 80% -20%, rgba(var(--hv-primary-rgb), .5), transparent 50%),
    radial-gradient(at -10% 110%, rgba(59,130,246,.35), transparent 50%),
    linear-gradient(135deg, #0A0A0A, #141414);
}

/* Referral-link row → brand focus ring (was indigo) */
.hv-theme .rrs-linkrow:focus-within { border-color: var(--hv-primary); box-shadow: var(--hv-ring); background: var(--hv-surface); }

/* Referral status badges → brand status palette */
.hv-theme .rrs-badge--completed { background: var(--hv-green-100); color: var(--hv-green-500); border-color: var(--hv-green-100); }
.hv-theme .rrs-badge--pending { background: var(--hv-orange-050); color: #6CA8FF; border-color: var(--hv-orange-050); }
.hv-theme .rrs-badge--rejected,
.hv-theme .rrs-badge--flagged { background: rgba(239,68,68,.14); color: var(--hv-red-500); border-color: rgba(239,68,68,.35); }

/* Mobile → full-width hero CTAs (the plugin already handles the rest well) */
@media (max-width: 560px) {
  .hv-theme .rrs-hero__actions { flex-direction: column; }
  .hv-theme .rrs-hero__actions .rrs-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   MY ACCOUNT — ADDRESS · ACCOUNT DETAILS · CREDITS · WALLET · SPEND LIMITS
   ----------------------------------------------------------------------------
   Premium elevation for the remaining account endpoints. Generic rules (action
   buttons, form fields) apply to every section; section-specific rules follow.
   The plugin sections (Spend Limits = .usl-*, Credits = --wps-wpr-*, Wallet =
   .wps-*) are rebranded via their own hooks. No markup/logic change.
   ========================================================================= */

/* ---- Primary action buttons (Save address / Save changes / plugin submits) --
   Give every account submit/action button the theme's premium primary look.
   The auth (logged-out) submit button lives under .hv-auth, not here, so it is
   untouched; plugin buttons with their own skins (.rrs-btn/.usl-btn) are excluded. */
.hv-theme .woocommerce-MyAccount-content button.button:not(.wps-btn),
.hv-theme .woocommerce-MyAccount-content input.button:not(.wps-btn),
.hv-theme .woocommerce-MyAccount-content input[type="submit"]:not(.wps-btn),
.hv-theme .woocommerce-MyAccount-content button[type="submit"]:not(.rrs-btn):not(.usl-btn):not(.wps-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hv-space-2);
  padding: 0.85em 1.6em;
  background: var(--hv-primary) !important; color: var(--hv-primary-ink) !important;
  border: 0; border-radius: var(--hv-radius-sm);
  font-family: var(--hv-font); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-body);
  line-height: 1; cursor: pointer; text-decoration: none !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
/* bg is !important above (to beat the Elementor kit), so hover darkens via filter */
.hv-theme .woocommerce-MyAccount-content button.button:not(.wps-btn):hover,
.hv-theme .woocommerce-MyAccount-content input.button:not(.wps-btn):hover,
.hv-theme .woocommerce-MyAccount-content input[type="submit"]:not(.wps-btn):hover,
.hv-theme .woocommerce-MyAccount-content button[type="submit"]:not(.rrs-btn):not(.usl-btn):not(.wps-btn):hover {
  filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--hv-shadow);
}
.hv-theme .woocommerce-MyAccount-content button.button:not(.wps-btn):focus-visible,
.hv-theme .woocommerce-MyAccount-content input[type="submit"]:focus-visible,
.hv-theme .woocommerce-MyAccount-content button[type="submit"]:focus-visible { outline: none; box-shadow: var(--hv-ring); }
/* Keep in-table action buttons compact (re-assert over the block rule above). */
.hv-theme .woocommerce-MyAccount-content table .button { padding: 0.45em 0.95em !important; font-size: var(--hv-fs-sm); }

/* Intro line ("The following addresses will be used…") → muted lead. */
.hv-theme .woocommerce-MyAccount-content > p:first-of-type { color: var(--hv-muted); margin-top: 0; }

/* Slightly roomier form fields across every account form. */
.hv-theme .woocommerce-MyAccount-content .input-text,
.hv-theme .woocommerce-MyAccount-content select,
.hv-theme .woocommerce-MyAccount-content textarea { padding: 0.8em 1em; font-size: var(--hv-fs-body); }
.hv-theme .woocommerce-MyAccount-content .form-row .required { color: var(--hv-primary); border: 0; text-decoration: none; }

/* ===== ADDRESS — premium billing/shipping cards ========================= */
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses { gap: var(--hv-space-5); }
/* .woocommerce-Addresses ancestor added so bg/padding beat the existing
   .col-1/.col-2 rule (0,4,0) that also targets these cards. */
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
  background: var(--hv-surface); box-shadow: var(--hv-shadow-sm);
  padding: var(--hv-space-5);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address:hover {
  transform: translateY(-3px); box-shadow: var(--hv-shadow-lg); border-color: var(--hv-blue-100);
}
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3) { display: flex; align-items: center; gap: var(--hv-space-2); }
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3)::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto;
  background: center / contain no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/%3E%3Ccircle cx="12" cy="10" r="3"/%3E%3C/svg%3E');
}
/* "Edit …" link → pill button */
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.4em 0.95em; border: 1px solid var(--hv-primary); border-radius: var(--hv-radius-pill);
  color: var(--hv-primary) !important; font-weight: var(--hv-fw-bold);
  text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { background: var(--hv-primary); color: #fff !important; }
.hv-theme .woocommerce-MyAccount-content .woocommerce-Address address { color: var(--hv-body); }

/* ===== ACCOUNT DETAILS — cleaner form / password section ================= */
.hv-theme .woocommerce-EditAccountForm { max-width: 760px; }
.hv-theme .woocommerce-EditAccountForm fieldset { background: var(--hv-surface-2); }
.hv-theme .woocommerce-EditAccountForm fieldset legend { font-size: var(--hv-fs-h4); }
/* WooCommerce's field hints (<span><em>…</em></span>) → helper text. */
.hv-theme .woocommerce-EditAccountForm .woocommerce-form-row span em {
  display: block; margin-top: 5px; font-size: var(--hv-fs-xs); color: var(--hv-muted); font-style: normal;
}

/* ===== SPEND LIMITS (User-Spend-Limits-for-Giveaways, .usl-*) — recolor ===
   Same off-brand indigo + CSS-variable pattern as the referral plugin; remap
   its --usl-* tokens to brand + rebrand the hard-coded button gradient. */
.hv-theme .usl-dashboard {
  --usl-primary: var(--hv-primary);
  --usl-success: var(--hv-green-600);
  --usl-warning: var(--hv-orange-500);
  --usl-danger:  var(--hv-red-500);
  --usl-card:    var(--hv-surface);
  --usl-border:  var(--hv-line);
  --usl-text:    var(--hv-ink);
  --usl-muted:   var(--hv-muted);
  --usl-radius:  var(--hv-radius);
  --usl-shadow:  var(--hv-shadow-sm);
  font-family: var(--hv-font); max-width: none;
}
.hv-theme .usl-dashboard button,
.hv-theme .usl-dashboard input { font-family: var(--hv-font); }
.hv-theme .usl-btn { background: var(--hv-primary); }
.hv-theme .usl-btn:hover { background: var(--hv-blue-700); opacity: 1; }
.hv-theme .usl-field input[type="number"]:focus { border-color: var(--hv-primary); box-shadow: var(--hv-ring); }

/* ===== CREDITS (points-and-rewards; classes use wps_wpr_ underscores, the
   accent is var(--wps-wpr-primary)) — remap the accent to brand + rebrand the
   "View Point Log" button (it was rendering black/off-brand). !important beats
   the plugin's inline/admin-set colour value. ===== */
.hv-theme .woocommerce-MyAccount-content [class*="wps_wpr"] { --wps-wpr-primary: var(--hv-primary) !important; }
.hv-theme .woocommerce-MyAccount-content .wps_wpr_view_log a { background: var(--hv-primary) !important; color: #fff !important; }

/* ===== WALLET (wallet-system-for-woocommerce, .wps_wcb_* / .wps-*) ========
   The balance card colour comes from the plugin's admin-set --wallet-pc (was a
   purple); remap it to brand and paint the balance card a premium navy→blue. */
.hv-theme .wps_wcb_wallet_display_wrapper { --wallet-pc: var(--hv-primary) !important; }
.hv-theme .wps_wcb_wallet_balance_container {
  background: linear-gradient(135deg, #0A0A0A, var(--hv-primary)) !important;
  border-radius: var(--hv-radius-lg) !important; padding: var(--hv-space-5) !important;
}
.hv-theme .wps_wcb_wallet_balance_container .woocommerce-Price-amount {
  font-size: var(--hv-fs-h1) !important; font-weight: var(--hv-fw-black); color: #fff;
}
.hv-theme .wps_wcb_wallet_view_transaction a,
.hv-theme .wps_wcb_wallet_view_transaction a h4 { color: #fff !important; }
.hv-theme .wps-btn,
.hv-theme .wps-wsfw button.button {
  background: var(--hv-primary) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--hv-radius-sm) !important;
  font-family: var(--hv-font); font-weight: var(--hv-fw-bold);
}
.hv-theme .wps-btn:hover { filter: brightness(1.05); }
.hv-theme .wps-wsfw-wallet-field-table th { background: var(--hv-surface-2); color: var(--hv-muted); font-family: var(--hv-font); }
.hv-theme .wps-wsfw-wallet-field-table td { color: var(--hv-body); font-family: var(--hv-font); }

/* ---- Mobile: full-width action buttons + tighter cards ------------------ */
@media (max-width: 640px) {
  .hv-theme .woocommerce-MyAccount-content button.button:not(.wps-btn),
  .hv-theme .woocommerce-MyAccount-content input[type="submit"]:not(.wps-btn),
  .hv-theme .woocommerce-MyAccount-content button[type="submit"]:not(.rrs-btn):not(.usl-btn):not(.wps-btn),
  .hv-theme .usl-btn { width: 100%; }
  .hv-theme .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { padding: var(--hv-space-4); }
}