/**
 * Dripex My Account — sign-in screen, dashboard, orders, addresses, account details, wallet.
 * Loaded only on the account page (all endpoints). Markup: template-account.php,
 * woocommerce/myaccount/{form-login,dashboard,navigation}.php; everything else is
 * WooCommerce's / the wallet plugin's own markup, re-skinned here.
 *
 * All colors come from the design tokens in dripex-variables.css.
 * swap (--color-white / --color-navy / --gray-*) carries through with no per-mode
 * overrides. Body copy is --gray-800 (dark); the lightest text color used is --gray-600.
 */

/* ==========================================================================
   0. SCOPE, TOKENS & STOREFRONT RESETS
   ========================================================================== */
.dxs-account {
  --ac-surface: var(--color-white);
  --ac-border: var(--gray-200);
  --ac-border-strong: var(--gray-300);
  --ac-tint: color-mix(in srgb, var(--color-blue) 8%, var(--ac-surface));
  --ac-tint-strong: color-mix(in srgb, var(--color-blue) 15%, var(--ac-surface));
  /* Brand colors mixed toward --color-navy: darker on light surfaces, lighter in dark mode. */
  --ac-blue-ink: color-mix(in srgb, var(--color-blue) 72%, var(--color-navy));
  --ac-green-ink: color-mix(in srgb, var(--color-green) 58%, var(--color-navy));
  --ac-amber-ink: color-mix(in srgb, var(--color-orange) 58%, var(--color-navy));
  --ac-red-ink: color-mix(in srgb, var(--color-red) 70%, var(--color-navy));
  --ac-head: var(--color-navy);
  --ac-ink: var(--gray-800);
  --ac-radius: 20px;
  --ac-field-h: 48px;
  /* pinned nav + WP admin bar (when logged in) + breathing room */
  --ac-sticky-top: calc(var(--dripex-nav-h, 86px) + var(--dripex-adminbar-h, 0px) + 20px);

  background: var(--gray-50);
  color: var(--ac-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dxs-account *,
.dxs-account *::before,
.dxs-account *::after {
  box-sizing: border-box;
}

/* Storefront wraps every page in .col-full (max-width + side padding). */
.dxs-account-page .site-content > .col-full {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.dxs-account-page .site-content { padding: 0; margin: 0; }
.dxs-account-page .content-area,
.dxs-account-page .site-main { width: 100%; float: none; margin: 0; padding: 0; }

.dxs-account-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Storefront floats the nav/content and clears with pseudo-elements. */
.dxs-account .woocommerce::before,
.dxs-account .woocommerce::after,
.dxs-account .col2-set::before,
.dxs-account .col2-set::after { display: none !important; }

.dxs-account .woocommerce-MyAccount-navigation,
.dxs-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

/* Shared: outline for keyboard users */
.dxs-account a:focus-visible,
.dxs-account button:focus-visible,
.dxs-account input:focus-visible,
.dxs-account select:focus-visible,
.dxs-account textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-blue) 55%, transparent);
  outline-offset: 2px;
}

/* ==========================================================================
   1. ICON SET (24px, 2px stroke) — used as masks by nav, cards, perks, alerts
   ========================================================================== */
.ic-dashboard, .woocommerce-MyAccount-navigation-link--dashboard  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
.ic-orders, .woocommerce-MyAccount-navigation-link--orders        { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7.5h12l1.3 12.3a1 1 0 0 1-1 1.2H5.7a1 1 0 0 1-1-1.2L6 7.5Z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E"); }
.ic-downloads, .woocommerce-MyAccount-navigation-link--downloads  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 11 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4.5 19.5h15'/%3E%3C/svg%3E"); }
.ic-address, .woocommerce-MyAccount-navigation-link--edit-address { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11.2A7 7 0 0 0 5 9.8C5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3C/svg%3E"); }
.ic-wallet, .woocommerce-MyAccount-navigation-link--woo-wallet    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5A2.5 2.5 0 0 1 7 5h10.5a1.5 1.5 0 0 1 1.5 1.5V9'/%3E%3Cpath d='M4.5 7.5v10A2.5 2.5 0 0 0 7 20h11.5A1.5 1.5 0 0 0 20 18.5v-8A1.5 1.5 0 0 0 18.5 9H7a2.5 2.5 0 0 1-2.5-1.5Z'/%3E%3Ccircle cx='16' cy='14.5' r='1.2'/%3E%3C/svg%3E"); }
.ic-user, .woocommerce-MyAccount-navigation-link--edit-account    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.ic-logout, .woocommerce-MyAccount-navigation-link--customer-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3.5'/%3E%3Cpath d='m15.5 16.5 4.5-4.5-4.5-4.5'/%3E%3Cpath d='M20 12H9.5'/%3E%3C/svg%3E"); }
.ic-clock   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-support { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5v-1a7 7 0 0 1 14 0v1'/%3E%3Crect x='3.5' y='12' width='4' height='6.5' rx='1.6'/%3E%3Crect x='16.5' y='12' width='4' height='6.5' rx='1.6'/%3E%3Cpath d='M18.5 18.5c0 1.4-1.6 2-4 2h-1'/%3E%3C/svg%3E"); }
.ic-lock    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); }
.ic-info    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E"); }
.ic-check   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E"); }
.ic-alert   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.2v.1'/%3E%3C/svg%3E"); }

/* ==========================================================================
   2. HERO (signed-in)
   ========================================================================== */
.dxs-account-hero {
  padding: clamp(18px, 2.6vw, 32px) 0 clamp(22px, 3.2vw, 38px);
  background:
    radial-gradient(60% 140% at 90% -40%, color-mix(in srgb, var(--color-blue) 13%, transparent), transparent 62%),
    linear-gradient(180deg, var(--gray-50) 0%, var(--ac-surface) 100%);
  border-bottom: 1px solid var(--ac-border);
}

.dxs-account-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(12px, 2vw, 20px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
}

.dxs-account-crumbs a { color: var(--gray-700); text-decoration: none; }
.dxs-account-crumbs a:hover { color: var(--ac-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.dxs-account-crumbs [aria-current] { color: var(--ac-head); font-weight: 600; }
.dxs-account-crumbs [aria-hidden] { color: var(--gray-500); }
.dxs-account-crumbs--guest { margin-bottom: clamp(16px, 2.6vw, 28px); }

.dxs-account .dxs-account-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--ac-head);
}

.dxs-account-body {
  padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 96px);
}

.dxs-account--guest .dxs-account-body {
  padding-top: clamp(16px, 2.4vw, 32px);
}

.dxs-account-content { max-width: none; margin: 0; padding: 0; }

/* ==========================================================================
   3. SIGNED-IN LAYOUT: side navigation + content
   ========================================================================== */
.dxs-account--user .dxs-account-content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 1024px) {
  .dxs-account--user .dxs-account-content > .woocommerce {
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 28px;
  }

  .dxs-account-side {
    position: sticky;
    top: var(--ac-sticky-top);
  }
}

.dxs-account-side {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  overflow: hidden;
}

/* --- account card -------------------------------------------------------- */
.dxs-account-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ac-border);
  background: linear-gradient(180deg, var(--ac-tint) 0%, var(--ac-surface) 100%);
}

.dxs-account-user__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-blue), color-mix(in srgb, var(--color-blue) 55%, #7c3aed));
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.dxs-account-user__meta { display: grid; min-width: 0; }
.dxs-account-user__name { color: var(--ac-head); font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxs-account-user__email { color: var(--gray-700); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- navigation ---------------------------------------------------------- */
.dxs-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.dxs-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }

.dxs-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  color: var(--gray-800);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

/* Storefront draws its own icon-font glyph in ::before — replace it with a mask icon. */
.dxs-account .woocommerce-MyAccount-navigation li a::before {
  content: '' !important;
  flex: none;
  float: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--gray-600);
  -webkit-mask: var(--ic, none) center / contain no-repeat;
  mask: var(--ic, none) center / contain no-repeat;
  font: inherit;
  transition: background-color .15s ease;
}

.dxs-account .woocommerce-MyAccount-navigation li a::after { display: none; }

.dxs-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--gray-100);
  color: var(--ac-head);
}

.dxs-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--ac-tint-strong);
  color: var(--ac-head);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-blue);
}

.dxs-account .woocommerce-MyAccount-navigation li.is-active a::before,
.dxs-account .woocommerce-MyAccount-navigation li a:hover::before { background: var(--ac-blue-ink); }

.dxs-account .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--ac-border) !important;
}

.dxs-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ac-red-ink); }
.dxs-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { background: var(--ac-red-ink); }
.dxs-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: color-mix(in srgb, var(--color-red) 10%, var(--ac-surface)); color: var(--ac-red-ink); }

/* --- content panel ------------------------------------------------------- */
.dxs-account .woocommerce-MyAccount-content {
  min-width: 0;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  color: var(--ac-ink);
  font-size: 16px;
  line-height: 1.7;
}

/* Dashboard and wallet bring their own cards. */
.dxs-endpoint-dashboard .woocommerce-MyAccount-content,
.dxs-endpoint-woo-wallet .woocommerce-MyAccount-content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.dxs-account .woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }
.dxs-account .woocommerce-MyAccount-content p { margin: 0 0 1em; }

.dxs-account .woocommerce-MyAccount-content h2,
.dxs-account .woocommerce-MyAccount-content h3 {
  margin: 0 0 .7em;
  color: var(--ac-head);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.dxs-account .woocommerce-MyAccount-content h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.dxs-account .woocommerce-MyAccount-content h3 { font-size: 1.1rem; }

.dxs-account .woocommerce-MyAccount-content a:not(.button):not(.dxs-btn) {
  color: var(--ac-blue-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
}

.dxs-account .woocommerce-MyAccount-content a:not(.button):not(.dxs-btn):hover { color: var(--color-blue); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.dxs-account .button,
.dxs-account button.button,
.dxs-account input[type="submit"],
.dxs-account .woocommerce-Button,
.dxs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--color-blue);
  border-radius: 12px;
  background: var(--color-blue);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 14px -8px color-mix(in srgb, var(--color-blue) 70%, transparent);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.dxs-account .button:hover,
.dxs-account button.button:hover,
.dxs-account input[type="submit"]:hover,
.dxs-account .woocommerce-Button:hover,
.dxs-btn:hover {
  background: color-mix(in srgb, var(--color-blue) 86%, #000);
  border-color: color-mix(in srgb, var(--color-blue) 86%, #000);
  transform: translateY(-1px);
}

.dxs-btn--primary { display: inline-flex; }

/* Light button, for use on dark/gradient banners */
.dxs-btn--light {
  border-color: transparent;
  background: #fff;
  color: #0D1B3E !important;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}

.dxs-btn--light:hover { background: #F1F5F9; border-color: transparent; }

/* Compact "View" style buttons inside tables */
.dxs-account .woocommerce-orders-table .button,
.dxs-account .order-again .button,
.dxs-account .woocommerce-Address-title .edit {
  min-height: 38px;
  padding: 8px 16px;
  border-color: var(--ac-border-strong);
  background: var(--ac-surface);
  color: var(--ac-head) !important;
  font-size: 14px;
  box-shadow: none;
}

.dxs-account .woocommerce-orders-table .button:hover,
.dxs-account .order-again .button:hover,
.dxs-account .woocommerce-Address-title .edit:hover {
  border-color: var(--color-blue);
  background: var(--ac-tint);
  transform: none;
}

/* ==========================================================================
   5. FORMS (account details, addresses, lost password, wallet)
   ========================================================================== */
.dxs-account form .form-row,
.dxs-account form p.form-row {
  margin: 0 0 18px;
  padding: 0;
  float: none;
  width: auto;
}

.dxs-account form label {
  display: block;
  margin: 0 0 7px;
  color: var(--ac-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.dxs-account form label .required,
.dxs-account form .required { color: var(--ac-red-ink); text-decoration: none; border: 0; font-weight: 700; }
.dxs-account form label .optional { color: var(--gray-600); font-weight: 500; }

.dxs-account input[type="text"],
.dxs-account input[type="email"],
.dxs-account input[type="password"],
.dxs-account input[type="tel"],
.dxs-account input[type="number"],
.dxs-account input[type="search"],
.dxs-account input[type="url"],
.dxs-account textarea,
.dxs-account select {
  width: 100%;
  min-height: var(--ac-field-h);
  padding: 11px 14px;
  border: 1.5px solid var(--ac-border-strong);
  border-radius: 12px;
  background: var(--ac-surface);
  color: var(--gray-900);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dxs-account textarea { min-height: 120px; resize: vertical; }

.dxs-account input::placeholder,
.dxs-account textarea::placeholder { color: var(--gray-500); opacity: 1; }

.dxs-account input:hover,
.dxs-account select:hover,
.dxs-account textarea:hover { border-color: var(--gray-400); }

.dxs-account input:focus,
.dxs-account select:focus,
.dxs-account textarea:focus {
  border-color: var(--color-blue);
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 22%, transparent);
}

.dxs-account .woocommerce-invalid input,
.dxs-account .woocommerce-invalid select { border-color: var(--color-red); }

.dxs-account form em,
.dxs-account form .description,
.dxs-account form span > em {
  display: block;
  margin-top: 6px;
  color: var(--gray-700);
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.5;
}

/* two-up rows (first/last name, city/postcode …) */
.dxs-account .woocommerce-address-fields__field-wrapper,
.dxs-account .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.dxs-account .woocommerce-address-fields__field-wrapper .form-row-wide,
.dxs-account .woocommerce-EditAccountForm .form-row-wide,
.dxs-account .woocommerce-EditAccountForm > fieldset,
.dxs-account .woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last),
.dxs-account .woocommerce-EditAccountForm > .clear + p { grid-column: 1 / -1; }

.dxs-account .woocommerce-address-fields { grid-column: 1 / -1; }
.dxs-account .woocommerce-address-fields .clear,
.dxs-account .woocommerce-EditAccountForm .clear { display: none; }
.dxs-account .woocommerce-address-fields > p:last-child,
.dxs-account .woocommerce-address-fields > p.form-row:last-of-type { margin-bottom: 0; }

.dxs-account .form-row-first,
.dxs-account .form-row-last { width: auto; float: none; }

.dxs-account fieldset {
  margin: 8px 0 22px;
  padding: 20px 20px 4px;
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  background: var(--gray-50);
}

.dxs-account fieldset legend {
  padding: 0 8px;
  color: var(--ac-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* password field with the show/hide button WooCommerce adds */
.dxs-account .password-input { position: relative; display: block; }
.dxs-account .password-input input { padding-right: 52px; }

.dxs-account .show-password-input {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-700);
  cursor: pointer;
  transform: translateY(-50%);
}

.dxs-account .show-password-input:hover { background: var(--gray-100); color: var(--ac-head); }

.dxs-account .show-password-input::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' 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='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' 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='3'/%3E%3C/svg%3E") center / contain no-repeat;
  font: inherit;
}

.dxs-account .show-password-input.display-password::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.2A9.6 9.6 0 0 1 12 6c6 0 9.5 6 9.5 6a16.7 16.7 0 0 1-3.2 3.9M6.6 7.9C3.9 9.6 2.5 12 2.5 12S6 18 12 18c1.4 0 2.6-.3 3.7-.8'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.1 4.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.2A9.6 9.6 0 0 1 12 6c6 0 9.5 6 9.5 6a16.7 16.7 0 0 1-3.2 3.9M6.6 7.9C3.9 9.6 2.5 12 2.5 12S6 18 12 18c1.4 0 2.6-.3 3.7-.8'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.1 4.1'/%3E%3C/svg%3E");
}

/* checkbox */
.dxs-account input[type="checkbox"],
.dxs-account input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 8px 0 0;
  padding: 0;
  accent-color: var(--color-blue);
  vertical-align: -3px;
}

.dxs-account .woocommerce-form__label-for-checkbox,
.dxs-account label.checkbox {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--ac-ink);
  font-weight: 500;
  cursor: pointer;
}

/* select2 (country / state pickers) */
.dxs-account .select2-container { width: 100% !important; }

.dxs-account .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: var(--ac-field-h);
  border: 1.5px solid var(--ac-border-strong);
  border-radius: 12px;
  background: var(--ac-surface);
}

.dxs-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 14px;
  padding-right: 34px;
  color: var(--gray-900);
  font-size: 16px;
  line-height: 1.4;
}

.dxs-account .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 6px; height: 100%; }
.dxs-account .select2-container--default.select2-container--focus .select2-selection--single,
.dxs-account .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-blue) 22%, transparent);
}

.select2-dropdown {
  border: 1.5px solid var(--gray-300);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--gray-900);
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--color-blue); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--gray-300); border-radius: 8px; background: var(--color-white); color: var(--gray-900); }

/* ==========================================================================
   6. NOTICES
   ========================================================================== */
.dxs-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.dxs-account .woocommerce-notices-wrapper:empty { display: none; }

.dxs-account .woocommerce-message,
.dxs-account .woocommerce-info,
.dxs-account .woocommerce-error {
  --nt: var(--color-blue);
  --nt-ink: var(--ac-blue-ink);
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 14px 18px 14px 52px;
  border: 1px solid color-mix(in srgb, var(--nt) 28%, transparent);
  border-left: 4px solid var(--nt);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nt) 8%, var(--ac-surface));
  color: var(--ac-ink);
  font-size: 15px;
  line-height: 1.55;
  list-style: none;
}

.dxs-account .woocommerce-message { --nt: var(--color-green); --nt-ink: var(--ac-green-ink); }
.dxs-account .woocommerce-error { --nt: var(--color-red); --nt-ink: var(--ac-red-ink); }

/* replace Storefront's icon-font glyph */
.dxs-account .woocommerce-message::before,
.dxs-account .woocommerce-info::before,
.dxs-account .woocommerce-error::before {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 18px;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--nt-ink);
  -webkit-mask: var(--ic-notice) center / contain no-repeat;
  mask: var(--ic-notice) center / contain no-repeat;
  font: inherit;
  transform: translateY(-50%);
}

.dxs-account .woocommerce-message { --ic-notice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E"); }
.dxs-account .woocommerce-info { --ic-notice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6v.1'/%3E%3C/svg%3E"); }
.dxs-account .woocommerce-error { --ic-notice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.2v.1'/%3E%3C/svg%3E"); }

.dxs-account .woocommerce-error li { margin: 0; }
.dxs-account .woocommerce-message .button,
.dxs-account .woocommerce-info .button,
.dxs-account .woocommerce-error .button {
  order: 2;
  margin-left: auto;
  padding: 9px 18px;
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: #fff !important;
  font-size: 14px;
}
.dxs-account .woocommerce-message a:not(.button),
.dxs-account .woocommerce-info a:not(.button),
.dxs-account .woocommerce-error a:not(.button) { color: var(--nt-ink); font-weight: 700; }

/* ==========================================================================
   7. DASHBOARD
   ========================================================================== */
.dxs-dash { display: grid; gap: 18px; }

.dxs-dash-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: clamp(22px, 3.2vw, 34px);
  border-radius: var(--ac-radius);
  /* fixed dark brand banner in both color schemes */
  background: radial-gradient(120% 160% at 100% 0%, #24469f 0%, transparent 55%), #0D1B3E;
  color: #F8FAFC;
}

.dxs-dash-welcome__text { flex: 1 1 320px; min-width: 0; }

.dxs-account .dxs-dash-welcome h2 {
  margin: 0 0 6px;
  color: #FFFFFF !important; /* dripex-woocommerce.css forces .woocommerce headings to navy */
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing: -.02em;
}

.dxs-dash-welcome p { margin: 0 !important; color: #CBD5E1; font-size: 15.5px; line-height: 1.6; }

.dxs-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dxs-dash-stats li { margin: 0; }

.dxs-stat {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  background: var(--ac-surface);
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dxs-stat:hover {
  border-color: color-mix(in srgb, var(--color-blue) 45%, var(--ac-border));
  box-shadow: 0 14px 28px -18px rgba(15, 23, 42, .3);
  transform: translateY(-2px);
}

.dxs-stat__icon,
.dxs-dash-links__icon,
.dxs-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 13px;
  background: var(--ac-tint-strong);
  color: var(--ac-blue-ink);
}

.dxs-stat__icon::before,
.dxs-dash-links__icon::before,
.dxs-empty__icon::before,
.dxs-auth__perk-icon::before {
  content: '';
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.dxs-stat__value { color: var(--ac-head); font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dxs-stat__value--sm { font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.3; }
.dxs-stat__value .woocommerce-Price-amount { color: inherit; }
.dxs-stat__label { color: var(--gray-700); font-size: 14px; font-weight: 500; }

.dxs-dash-card {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  overflow: hidden;
}

.dxs-dash-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ac-border);
}

.dxs-account .dxs-dash-card__head h3 { margin: 0; font-size: 1.05rem; }
.dxs-dash-card__head a { font-size: 14px; }

.dxs-dash-orders { margin: 0; padding: 0; list-style: none; }
.dxs-dash-orders li { margin: 0; }
.dxs-dash-orders li + li { border-top: 1px solid var(--ac-border); }

.dxs-account .dxs-dash-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  color: var(--ac-ink) !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}

.dxs-dash-order:hover { background: var(--gray-50); }
.dxs-dash-order__main { display: grid; gap: 1px; min-width: 0; }
.dxs-dash-order__main strong { color: var(--ac-head); font-size: 15.5px; }
.dxs-dash-order__main time { color: var(--gray-700); font-size: 13.5px; }
.dxs-dash-order__total { color: var(--ac-head); font-size: 15px; font-weight: 700; text-align: right; }
.dxs-dash-order__go { color: var(--gray-500); font-weight: 700; }
.dxs-dash-order:hover .dxs-dash-order__go { color: var(--ac-blue-ink); }

.dxs-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: clamp(28px, 4vw, 44px) 20px;
  text-align: center;
}

.dxs-empty p { margin: 0 0 14px !important; color: var(--gray-800); }
.dxs-empty p strong { color: var(--ac-head); font-size: 1.05rem; }
.dxs-empty__icon { margin-bottom: 10px; width: 52px; height: 52px; border-radius: 16px; }

.dxs-dash-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dxs-dash-links li { margin: 0; }

.dxs-account .dxs-dash-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  background: var(--ac-surface);
  color: var(--ac-ink) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dxs-dash-links a:hover { border-color: color-mix(in srgb, var(--color-blue) 45%, var(--ac-border)); box-shadow: 0 12px 24px -18px rgba(15, 23, 42, .3); }
.dxs-dash-links__icon { flex: none; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
.dxs-dash-links a > span:last-child { display: grid; min-width: 0; }
.dxs-dash-links strong { color: var(--ac-head); font-size: 15px; }
.dxs-dash-links small { color: var(--gray-700); font-size: 13px; line-height: 1.4; }

/* ==========================================================================
   8. ORDER STATUS PILLS
   ========================================================================== */
.dxs-status,
.dxs-account mark.order-status {
  --st: var(--gray-500);
  --st-ink: var(--gray-800);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st) 14%, var(--ac-surface));
  color: var(--st-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dxs-status::before,
.dxs-account mark.order-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st);
}

.dxs-status--completed { --st: var(--color-green); --st-ink: var(--ac-green-ink); }
.dxs-status--processing { --st: var(--color-blue); --st-ink: var(--ac-blue-ink); }
.dxs-status--pending,
.dxs-status--on-hold { --st: var(--color-orange); --st-ink: var(--ac-amber-ink); }
.dxs-status--cancelled,
.dxs-status--failed { --st: var(--color-red); --st-ink: var(--ac-red-ink); }
.dxs-status--refunded { --st: #8B5CF6; --st-ink: color-mix(in srgb, #8B5CF6 65%, var(--color-navy)); }

/* ==========================================================================
   9. TABLES (orders, order details, downloads)
   ========================================================================== */
.dxs-account table.shop_table,
.dxs-account table.woocommerce-orders-table {
  width: 100%;
  margin: 0 0 1.4em;
  border: 1px solid var(--ac-border);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ac-surface);
  overflow: hidden;
  font-size: 15px;
}

.dxs-account table.shop_table th,
.dxs-account table.shop_table td {
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--ac-border);
  background: transparent;
  color: var(--ac-ink);
  text-align: left;
  vertical-align: middle;
}

.dxs-account table.shop_table thead th {
  border-top: 0;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dxs-account table.shop_table tbody tr:hover td,
.dxs-account table.shop_table tbody tr:hover th { background: var(--gray-50); }

.dxs-account table.shop_table tfoot th { color: var(--gray-700); font-weight: 600; }
.dxs-account table.shop_table tfoot tr:last-child th,
.dxs-account table.shop_table tfoot tr:last-child td { color: var(--ac-head); font-size: 1.05rem; font-weight: 800; }

.dxs-account .woocommerce-orders-table__cell-order-number a {
  color: var(--ac-blue-ink);
  font-weight: 800;
  text-decoration: none;
}

.dxs-account .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dxs-account .woocommerce-orders-table__cell-order-actions { text-align: right !important; }
.dxs-account .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: 8px; }

.dxs-account .woocommerce-pagination { display: flex; gap: 10px; justify-content: space-between; margin-top: 4px; }

/* order view header line ("Order #x was placed on … and is currently …") */
.dxs-account .woocommerce-MyAccount-content mark {
  padding: 0;
  background: none;
  color: var(--ac-head);
  font-weight: 700;
}

.dxs-account .woocommerce-MyAccount-content mark.order-status {
  padding: 5px 12px;
  background: color-mix(in srgb, var(--st) 14%, var(--ac-surface));
  color: var(--st-ink);
  font-size: 13px;
  vertical-align: 1px;
}

.dxs-account .woocommerce-order-details,
.dxs-account .woocommerce-customer-details { margin-top: 1.6em; }

.dxs-account .woocommerce-order-details__title,
.dxs-account .woocommerce-column__title { margin-bottom: .6em !important; }

.dxs-account .woocommerce-table__product-name a { color: var(--ac-head) !important; font-weight: 700; }
.dxs-account .woocommerce-table__product-name .product-quantity { color: var(--gray-700); font-weight: 600; }
.dxs-account ul.wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.dxs-account ul.wc-item-meta li { margin: 0 0 4px; }
.dxs-account ul.wc-item-meta p { display: inline; margin: 0; }

/* ==========================================================================
   10. ADDRESSES
   ========================================================================== */
.dxs-account .woocommerce-Addresses,
.dxs-account .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0;
}

.dxs-account .woocommerce-Addresses .col-1,
.dxs-account .woocommerce-Addresses .col-2,
.dxs-account .woocommerce-columns--addresses .col-1,
.dxs-account .woocommerce-columns--addresses .col-2,
.dxs-account .u-column1,
.dxs-account .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

.dxs-account .woocommerce-Address,
.dxs-account .woocommerce-column--billing-address,
.dxs-account .woocommerce-column--shipping-address {
  padding: 22px;
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  background: var(--gray-50);
}

.dxs-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dxs-account .woocommerce-Address-title h2,
.dxs-account .woocommerce-Address-title h3 { margin: 0 !important; font-size: 1.05rem; text-align: left; }

.dxs-account .woocommerce-Address-title a.edit {
  position: static;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  font-size: 14px;
  line-height: 1.2;
  text-indent: 0;
  text-align: center;
}

.dxs-account .woocommerce-Address-title a.edit::before,
.dxs-account .woocommerce-Address-title a.edit::after { display: none !important; content: none !important; }

.dxs-account address {
  margin: 0;
  color: var(--ac-ink);
  font-size: 15.5px;
  font-style: normal;
  line-height: 1.75;
}

/* ==========================================================================
   11. SIGN-IN / CREATE ACCOUNT
   ========================================================================== */
.dxs-account--guest .dxs-account-content > .woocommerce { display: block; }

.dxs-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--ac-border);
  border-radius: 28px;
  background: var(--ac-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 28px 60px -32px rgba(15, 23, 42, .28);
  overflow: hidden;
}

@media (min-width: 900px) {
  .dxs-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* Stacked (phones/tablets): the form comes first, the pitch underneath. */
@media (max-width: 899px) {
  .dxs-auth__card { order: -1; }
}

.dxs-auth__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(26px, 4vw, 48px);
  /* fixed dark brand panel in both color schemes */
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(47, 111, 237, .55) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(139, 92, 246, .28) 0%, transparent 60%),
    #0D1B3E;
  color: #F8FAFC;
}

.dxs-account .dxs-auth__eyebrow {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #DCE6FF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
}

.dxs-account .dxs-auth__headline {
  margin: 0;
  color: #FFFFFF !important;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.dxs-auth__perks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dxs-auth__perks li { display: flex; align-items: center; gap: 14px; margin: 0; color: #E8EEFC; font-size: 15.5px; font-weight: 500; line-height: 1.45; }

.dxs-auth__perk-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  color: #9DBBFF;
}

.dxs-auth__perk-icon::before { width: 20px; height: 20px; }

.dxs-account .dxs-auth__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #C5D2EA;
  font-size: 14px;
  line-height: 1.6;
}

.dxs-auth__note .dxs-auth__perk-icon { width: 34px; height: 34px; }

/* form side */
.dxs-auth__card { padding: clamp(24px, 4vw, 52px); background: var(--ac-surface); }

.dxs-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: clamp(22px, 3vw, 32px);
  padding: 4px;
  border-radius: 14px;
  background: var(--gray-100);
}

.dxs-auth__tab {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--gray-700);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Hover sets fill AND text: the global button hover (dark fill) would otherwise show through under navy text. */
.dxs-auth__tab:hover { background: var(--ac-tint-strong); border-color: transparent; color: var(--ac-head); }

.dxs-auth__tab[aria-selected="true"] {
  background: var(--ac-surface);
  color: var(--ac-head);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 4px 10px -6px rgba(15, 23, 42, .2);
}

/* panes: without JS both show stacked; JS marks the wrapper enhanced and shows one */
.dxs-auth__pane + .dxs-auth__pane { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--ac-border); }
.dxs-auth.is-enhanced .dxs-auth__pane + .dxs-auth__pane { margin-top: 0; padding-top: 0; border-top: 0; }
.dxs-auth.is-enhanced .dxs-auth__pane[hidden] { display: none; }

.dxs-account .dxs-auth__title {
  margin: 0 0 4px;
  color: var(--ac-head);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.dxs-auth__sub { margin: 0 0 24px; color: var(--gray-700); font-size: 15.5px; }

.dxs-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 2px 0 20px;
}

.dxs-auth .lost_password { margin: 0; }
.dxs-auth .lost_password a { color: var(--ac-blue-ink); font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.dxs-auth__submit { margin: 0 !important; }
.dxs-auth__submit .button { width: 100%; min-height: 50px; font-size: 16px; }

.dxs-auth__hint { margin: 0 0 18px; color: var(--gray-700); font-size: 14.5px; }

.dxs-auth__switch { margin: 22px 0 0; color: var(--gray-700); font-size: 14.5px; text-align: center; }

.dxs-auth__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ac-blue-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A text link stays a text link on hover — no dark button fill from the global button hover. */
.dxs-auth__link:hover,
.dxs-auth__link:focus { background: none; border-color: transparent; color: var(--ac-head); }

.dxs-auth .woocommerce-privacy-policy-text { margin: 4px 0 18px; }
.dxs-auth .woocommerce-privacy-policy-text p { margin: 0; color: var(--gray-700); font-size: 13.5px; line-height: 1.6; }
.dxs-auth .woocommerce-privacy-policy-text a { color: var(--ac-blue-ink); font-weight: 600; }

/* Google reCAPTCHA is a fixed 304px widget — scale it to fit narrow phones. */
.dxs-account .g-recaptcha { margin: 0 0 16px; transform-origin: 0 0; }
.dxs-account .g-recaptcha + br { display: none; }

@media (max-width: 420px) {
  .dxs-account .g-recaptcha { transform: scale(.86); margin-bottom: -8px; }
}

@media (max-width: 360px) {
  .dxs-account .g-recaptcha { transform: scale(.76); margin-bottom: -16px; }
}

/* Lost / reset password (signed out, other endpoints): one centred card */
.dxs-account--guest .woocommerce-ResetPassword,
.dxs-account--guest .lost_reset_password {
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--ac-border);
  border-radius: 24px;
  background: var(--ac-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 50px -30px rgba(15, 23, 42, .25);
}

.dxs-account--guest .lost_reset_password > p:first-child { margin-top: 0; color: var(--gray-800); font-size: 15.5px; line-height: 1.65; }
.dxs-account--guest .lost_reset_password .form-row-first,
.dxs-account--guest .lost_reset_password .form-row-last { width: auto; float: none; }
.dxs-account--guest .lost_reset_password .woocommerce-Button { width: 100%; min-height: 50px; }
.dxs-account--guest .woocommerce-notices-wrapper { max-width: 520px; margin: 0 auto; }
.dxs-account--guest .dxs-auth ~ .woocommerce-notices-wrapper { max-width: none; }

/* notices above the auth card use the full width */
.dxs-account--guest .woocommerce-notices-wrapper:has(+ .dxs-auth) { max-width: none; }

/* ==========================================================================
   12. WALLET (plugin markup, re-skinned)
   ========================================================================== */
.dxs-account .woo-wallet-my-wallet-container {
  --wallet-primary-color: var(--color-blue);
  --wallet-text-color: var(--ac-ink);
  --wallet-bg-color: var(--gray-50);
  --wallet-border-color: var(--ac-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a bare 1fr can't shrink below the transactions table's min-width */
  gap: 18px;
  color: var(--ac-ink);
  font-family: inherit;
}

.dxs-account .woo-wallet-my-wallet-container > * { min-width: 0; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-transactions-list,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-content-area { min-width: 0; }
.dxs-account .woo-wallet-my-wallet-container .dataTables_wrapper,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-table-wrapper { max-width: 100%; overflow-x: auto; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-table-controls { flex-wrap: wrap; gap: 10px; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-header { margin: 0; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-header h2 { margin: 0 0 4px !important; color: var(--ac-head); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-header p { margin: 0 !important; color: var(--gray-700); font-size: 15.5px; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-top-section {
  margin: 0;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  box-shadow: none;
  overflow: hidden;
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-balance-card {
  padding: clamp(28px, 4vw, 44px) 28px;
  border-radius: 0;
  /* fixed dark brand card in both color schemes */
  background: radial-gradient(120% 180% at 100% 0%, #2F6FED 0%, transparent 60%), #0D1B3E;
  text-align: left;
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-balance-card h3 { margin: 0 0 8px !important; color: #CBD5E1 !important; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-balance-card .woo-wallet-price { color: #FFFFFF; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tabs {
  gap: 0;
  border-radius: 0;
  background: var(--ac-surface);
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab {
  justify-content: center;
  min-height: 54px;
  padding: 14px 12px;
  border: 0;
  border-top: 1px solid var(--ac-border);
  border-right: 1px solid var(--ac-border);
  background: var(--ac-surface);
  color: var(--gray-800);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-item-wrapper:last-child .woo-wallet-nav-tab { border-right: 0; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab:hover,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab:focus,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab.active { background: var(--ac-tint); color: var(--ac-blue-ink); }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-content-area { padding: 0; background: none; box-shadow: none; overflow: visible; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stats-grid { gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card {
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--ac-border);
  border-radius: 18px;
  background: var(--ac-surface);
  box-shadow: none;
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card__icon { margin-bottom: 10px; width: 42px; height: 42px; border-radius: 12px; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card--success .woo-wallet-stat-card__icon { background: color-mix(in srgb, var(--color-green) 16%, var(--ac-surface)); color: var(--ac-green-ink); }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card--danger .woo-wallet-stat-card__icon { background: color-mix(in srgb, var(--color-red) 14%, var(--ac-surface)); color: var(--ac-red-ink); }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card--neutral .woo-wallet-stat-card__icon,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card--brand .woo-wallet-stat-card__icon,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card--info .woo-wallet-stat-card__icon { background: var(--ac-tint-strong); color: var(--ac-blue-ink); }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card__value { color: var(--ac-head); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-stat-card__label { color: var(--gray-700); font-size: 14px; font-weight: 500; }

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-transactions-list,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-form-wrapper {
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  background: var(--ac-surface);
  box-shadow: none;
  overflow: hidden;
}

.dxs-account .woo-wallet-my-wallet-container .woo-wallet-form-wrapper { padding: clamp(20px, 3vw, 32px); overflow: visible; }
.dxs-account .woo-wallet-my-wallet-container .ww-txn-head { padding: 18px 22px; border-bottom: 1px solid var(--ac-border); }
.dxs-account .woo-wallet-my-wallet-container .ww-txn-head .ww-txn-title,
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-section-title { color: var(--ac-head); font-size: 1.05rem; font-weight: 800; }
.dxs-account .woo-wallet-my-wallet-container .woo-wallet-section-title { border-color: var(--ac-border); background: none; padding-inline: 0; }
.dxs-account .woo-wallet-my-wallet-container .ww-txn-empty { margin: 0 !important; padding: 34px 20px; color: var(--gray-700); text-align: center; }
.dxs-account .woo-wallet-my-wallet-container .ww-txn-head .ww-txn-meta { color: var(--gray-700); }

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  /* Navigation becomes a scrolling tab bar above the content */
  .dxs-account-side { border-radius: 16px; }
  .dxs-account-user { display: none; }

  .dxs-account .woocommerce-MyAccount-navigation ul {
    position: relative; /* offsetParent for the JS that centres the active tab */
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dxs-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .dxs-account .woocommerce-MyAccount-navigation li { flex: none; }

  .dxs-account .woocommerce-MyAccount-navigation li a {
    padding: 10px 14px;
    white-space: nowrap;
  }

  .dxs-account .woocommerce-MyAccount-navigation li.is-active a { box-shadow: none; background: var(--color-blue); color: #fff; }
  .dxs-account .woocommerce-MyAccount-navigation li.is-active a::before { background: #fff; }

  .dxs-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
}

@media (max-width: 760px) {
  /* Orders table → one card per order */
  .dxs-account table.shop_table_responsive,
  .dxs-account table.woocommerce-orders-table {
    border: 0;
    background: none;
    border-radius: 0;
  }

  .dxs-account table.woocommerce-orders-table thead { display: none; }
  .dxs-account table.woocommerce-orders-table,
  .dxs-account table.woocommerce-orders-table tbody,
  .dxs-account table.woocommerce-orders-table tr,
  .dxs-account table.woocommerce-orders-table th,
  .dxs-account table.woocommerce-orders-table td { display: block; }

  .dxs-account table.woocommerce-orders-table tr {
    margin: 0 0 14px;
    border: 1px solid var(--ac-border);
    border-radius: 16px;
    background: var(--ac-surface);
    overflow: hidden;
  }

  .dxs-account table.woocommerce-orders-table th.woocommerce-orders-table__cell,
  .dxs-account table.woocommerce-orders-table td.woocommerce-orders-table__cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--ac-border);
    text-align: right !important;
  }

  .dxs-account table.woocommerce-orders-table th.woocommerce-orders-table__cell:first-child { border-top: 0; background: var(--gray-50); }

  /* WooCommerce's own responsive rule prints the label via ::before { content: attr(data-title) } */
  .dxs-account table.woocommerce-orders-table td::before,
  .dxs-account table.woocommerce-orders-table th::before {
    content: attr(data-title) !important;
    float: none !important;
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .dxs-account .woocommerce-orders-table__cell-order-actions::before { display: none !important; }
  .dxs-account .woocommerce-orders-table__cell-order-actions { justify-content: stretch !important; }
  .dxs-account .woocommerce-orders-table__cell-order-actions .button { flex: 1; }

  .dxs-account .dxs-dash-order { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .dxs-account .dxs-dash-order .dxs-status { grid-column: 1; justify-self: start; }
  .dxs-account .dxs-dash-order__total { grid-column: 2; grid-row: 1; }
  .dxs-account .dxs-dash-order__go { display: none; }
}

@media (max-width: 640px) {
  .dxs-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dxs-dash-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dxs-stat { padding: 16px; }
  .dxs-stat__value { font-size: 1.5rem; }

  .dxs-account .woocommerce-address-fields__field-wrapper,
  .dxs-account .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); }

  .dxs-account .woocommerce-MyAccount-content { padding: 20px 16px; border-radius: 18px; }

  .dxs-auth { border-radius: 22px; }
  .dxs-dash-welcome .dxs-btn { width: 100%; }
  .dxs-account .dxs-dash-links a { padding: 14px; }
  .dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab { font-size: 14px; padding: 12px 6px; }
  .dxs-account .woo-wallet-my-wallet-container .woo-wallet-nav-tab > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dxs-account * { transition: none !important; }
  .dxs-stat:hover,
  .dxs-account .button:hover,
  .dxs-btn:hover { transform: none; }
}

/* ==========================================================================
   14. LOGIN METHODS, PHONE FIELD, "ONE MORE STEP"
   Email link / email code / password switcher, the emailed-code field, the
   "check your email" screen, the country-code phone field and the profile step.
   ========================================================================== */

/* --- method switcher (inside the Log in tab) -------------------------------- */
.dxs-auth__methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--ac-border);
  border-radius: 12px;
  background: var(--gray-50);
}

.dxs-auth__method {
  min-height: 40px;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--gray-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.dxs-auth__method:hover { background: var(--ac-tint-strong); border-color: transparent; color: var(--ac-head); }

.dxs-auth__method[aria-selected="true"] {
  background: var(--ac-surface);
  color: var(--ac-blue-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 3px 8px -5px rgba(15, 23, 42, .25);
}

.dxs-auth__methodpanel[hidden] { display: none; }
/* Without JS the switcher does nothing, so it's hidden and every method shows, stacked. */
.dxs-auth__methods:not(.is-enhanced) { display: none; }
.dxs-auth__methodpanel + .dxs-auth__methodpanel { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ac-border); }
.dxs-auth__methods.is-enhanced ~ .dxs-auth__methodpanel + .dxs-auth__methodpanel { margin-top: 0; padding-top: 0; border-top: 0; }

/* With JavaScript (html.dxs-js is set in <head> before the first paint) the switcher is shown and ONLY the active panel
   takes space from the very first frame. Before this, all three panels showed stacked (2,100 px) and the tab row had no
   height until the script ran, so the form jumped ~70 px and the page scored a layout shift of 0.18. Without JavaScript
   nothing changes: the rules above still stack every method. */
.dxs-js .dxs-auth__methods { display: grid; }
.dxs-js .dxs-auth__methodpanel:not(.is-active) { display: none; }
.dxs-js .dxs-auth__methodpanel + .dxs-auth__methodpanel { margin-top: 0; padding-top: 0; border-top: 0; }

.dxs-auth__hint { line-height: 1.55; }

/* --- emailed code ------------------------------------------------------------ */
.dxs-account input.dxs-auth__otp {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;
}

.dxs-auth__resend { margin: 18px 0 0; color: var(--gray-700); font-size: 14.5px; text-align: center; }
.dxs-auth__resend .dxs-auth__link { font-size: inherit; }

.dxs-auth__email { color: var(--ac-head); overflow-wrap: anywhere; }

/* --- notices raised by the login handlers ------------------------------------ */
.dxs-auth__notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-red) 28%, transparent);
  border-left: 4px solid var(--color-red);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-red) 8%, var(--ac-surface));
  color: var(--ac-ink);
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- "check your email" ------------------------------------------------------- */
.dxs-auth__sent { text-align: center; }

.dxs-auth__sent-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-green) 14%, var(--ac-surface));
  color: var(--ac-green-ink);
}

.dxs-auth__meta {
  display: grid;
  gap: 6px;
  margin: 18px 0 8px;
  padding: 0;
  list-style: none;
  color: var(--gray-700);
  font-size: 14px;
}

.dxs-auth__meta li { margin: 0; }
.dxs-auth__link--block { display: inline-block; margin-top: 10px; font-size: 14.5px; }
a.dxs-auth__link { color: var(--ac-blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.dxs-auth__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
}

.dxs-auth__trust li { margin: 0; }

/* --- phone: country code above the number ------------------------------------- */
.dxs-phone { display: grid; gap: 8px; }
.dxs-account .dxs-phone select { appearance: auto; }

/* --- "just one more step" ----------------------------------------------------- */
.dxs-endpoint-complete-profile .dxs-account-content > .woocommerce {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.dxs-profile-step .dxs-auth__sub { margin-bottom: 20px; }
.dxs-profile-step .dxs-auth__submit .button { width: 100%; }

@media (max-width: 400px) {
  .dxs-auth__method { font-size: 13px; padding: 8px 4px; }
  .dxs-account input.dxs-auth__otp { font-size: 22px; letter-spacing: .4em; text-indent: .4em; }
}

/* A mouse click on a tab shouldn't leave the browser's default coloured ring; keyboard users still get the theme's focus ring. */
.dxs-auth__tab:focus:not(:focus-visible),
.dxs-auth__method:focus:not(:focus-visible) { outline: 0; }