/* WooCommerce Edit Account Modern Styles
   Version: 1.1.2 (First & Last Name two-column on desktop)
   -------------------------------------------------------------------------- */

/* =========================
   ROOT TOKENS (SCOPED)
   ========================= */
.woocommerce-account,
.woocommerce-MyAccount-content {
  --wc-accent: #3b82f6;
  --wc-accent-hover: #1d64d8;
  --wc-accent-rgb: 59 130 246;

  --wc-bg: #ffffff;
  --wc-surface: #ffffffee;
  --wc-border: #d9dde4;
  --wc-border-strong: #b8bfc9;
  --wc-field-bg: #f7f9fb;
  --wc-field-bg-alt: #eef2f6;
  --wc-field-border: #cfd6df;
  --wc-field-focus: #3b82f6;

  --wc-radius-xs: 4px;
  --wc-radius-sm: 6px;
  --wc-radius-md: 10px;
  --wc-radius-lg: 18px;

  --wc-shadow-color: 220 230 240;

  --wc-text: #1f2933;
  --wc-text-subtle: #5a6b7d;

  --wc-danger: #dc2626;
  --wc-danger-bg: #fee2e2;
  --wc-success: #059669;
  --wc-success-bg: #d1fae5;

  --wc-focus-ring: 0 0 0 3px rgba(var(--wc-accent-rgb) / 0.35);
  --wc-transition: 120ms cubic-bezier(.4,0,.2,1);

  --wc-label-weight: 600;
  --wc-font-stack: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  --wc-code: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family: var(--wc-font-stack);
}

/* =========================
   CORE FORM PANEL
   ========================= */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account {
  background: linear-gradient(135deg, #ffffffcc, #f5f9ffcc);
  backdrop-filter: blur(8px);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.75rem);
  box-shadow:
    0 4px 8px -2px rgba(var(--wc-shadow-color) / 0.45),
    0 12px 28px -6px rgba(var(--wc-shadow-color) / 0.55);
  position: relative;
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 95% 10%, rgba(var(--wc-accent-rgb) / 0.10), transparent 70%),
    radial-gradient(100% 70% at 5% 90%, rgba(99 102 241 / 0.12), transparent 70%);
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: .55;
}

/* =========================
   TYPOGRAPHY
   ========================= */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account h3,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account legend {
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  margin: 1.25rem 0 .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--wc-text);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account p {
  line-height: 1.5;
  margin: 0 0 1.15rem;
  color: var(--wc-text-subtle);
}

/* =========================
   FORM ROWS
   ========================= */
.woocommerce form .form-row {
  margin: 0 0 1.35rem;
  padding: 0;
  display: block;
  position: relative;
}

/* Base: stack first/last name on mobile */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  float: none;
  display: block;
  clear: both;
}

/* Desktop ≥640px: ONLY first & last name become two columns */
@media (min-width: 640px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 0.75rem);
    margin: 0 0 1.35rem;
  }
  .woocommerce form .form-row-first {
    margin-right: 1.5rem;
  }
  .woocommerce form .form-row-last {
    margin-right: 0;
  }
  .woocommerce form .form-row-first input,
  .woocommerce form .form-row-last input {
    width: 100%;
  }
}

/* =========================
   LABELS
   ========================= */
.woocommerce form .form-row label {
  font-weight: var(--wc-label-weight);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wc-text-subtle);
  display: flex;
  align-items: center;
  gap: .4ch;
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}

.woocommerce form .form-row label .required {
  color: var(--wc-accent);
  font-weight: 700;
  margin-left: .15rem;
}

/* Helper text */
.woocommerce form .form-row .description,
.woocommerce form .form-row .woocommerce-password-hint {
  font-size: .72rem;
  line-height: 1.3;
  color: var(--wc-text-subtle);
  background: var(--wc-field-bg);
  padding: .5rem .65rem;
  border-radius: var(--wc-radius-sm);
  border: 1px solid var(--wc-border);
  margin: .25rem 0 0;
}

/* =========================
   INPUTS
   ========================= */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="url"],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="date"] {
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: .85rem .9rem;
  border-radius: var(--wc-radius-md);
  border: 1px solid var(--wc-field-border);
  background: linear-gradient(#ffffff, #f8fafc);
  color: var(--wc-text);
  transition:
    border-color var(--wc-transition),
    background-color var(--wc-transition),
    box-shadow var(--wc-transition),
    color var(--wc-transition);
  box-shadow: 0 0 0 0 transparent;
  line-height: 1.25;
  min-height: 48px;
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account input::placeholder {
  color: #8da0b3;
  opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account input:hover {
  border-color: var(--wc-border-strong);
  background: linear-gradient(#ffffff, #f1f5f9);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account input:focus-visible {
  outline: none;
  border-color: var(--wc-field-focus);
  box-shadow: var(--wc-focus-ring);
  background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account input:disabled {
  opacity: .65;
  cursor: not-allowed;
  background: var(--wc-field-bg-alt);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #f0f6ff inset;
  -webkit-text-fill-color: var(--wc-text);
  transition: background-color 9999s linear 0s;
}

/* =========================
   FULL WIDTH TARGET FIELDS (exclude first/last)
   ========================= */
form.edit-account #account_display_name,
form.edit-account #account_email,
form.edit-account #password_current,
form.edit-account #password_1,
form.edit-account #password_2,
form.edit-account #birthday {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* =========================
   PASSWORD VISIBILITY TOGGLE
   ========================= */
.woocommerce-MyAccount-content form.edit-account .password-input {
  position: relative;
  overflow: visible;
}

.woocommerce-MyAccount-content form.edit-account
  .password-input input[type="password"],
.woocommerce-MyAccount-content form.edit-account
  .password-input input[type="text"] {
  padding-right: 2.4rem;
}

.woocommerce-MyAccount-content form.edit-account
  .show-password-input,
.woocommerce-MyAccount-content form.edit-account
  .hide-password-input {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  cursor: pointer;
  opacity: .65;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  background: transparent;
  border: 0;
  padding: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
  z-index: 2;
}

.woocommerce-MyAccount-content form.edit-account
  .show-password-input:hover,
.woocommerce-MyAccount-content form.edit-account
  .hide-password-input:hover {
  opacity: 1;
}

.woocommerce-MyAccount-content form.edit-account
  .show-password-input::before,
.woocommerce-MyAccount-content form.edit-account
  .hide-password-input::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: transparent;
}

.woocommerce-MyAccount-content form.edit-account
  .show-password-input:hover::before,
.woocommerce-MyAccount-content form.edit-account
  .hide-password-input:hover::before {
  background: rgba(var(--wc-accent-rgb,59 130 246) / 0.10);
}

/* =========================
   VALIDATION
   ========================= */
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--wc-danger);
  background: #fff;
  box-shadow: 0 0 0 1px var(--wc-danger), 0 0 0 4px rgba(220 38 38 / 0.15);
}

.woocommerce form .form-row.woocommerce-invalid .description {
  border-color: var(--wc-danger);
  background: var(--wc-danger-bg);
  color: var(--wc-danger);
}

.woocommerce form .form-row.is-valid input {
  border-color: var(--wc-success);
  box-shadow: 0 0 0 1px var(--wc-success), 0 0 0 4px rgba(5 150 105 / 0.18);
}

/* =========================
   SUBMIT BUTTON
   ========================= */
.woocommerce-account .woocommerce-MyAccount-content form.edit-account button[type=submit],
.woocommerce-account .woocommerce-MyAccount-content form.edit-account .woocommerce-Button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  padding: .9rem 1.35rem;
  border-radius: var(--wc-radius-lg);
  background: linear-gradient(135deg, var(--wc-accent), var(--wc-accent-hover));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow:
    0 2px 4px -1px rgba(var(--wc-accent-rgb) / 0.4),
    0 6px 18px -4px rgba(var(--wc-accent-rgb) / 0.55);
  transition:
    transform var(--wc-transition),
    box-shadow var(--wc-transition),
    background-position 220ms ease;
  background-size: 160% 160%;
  background-position: 0% 50%;
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account button[type=submit]:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px -2px rgba(var(--wc-accent-rgb) / 0.55),
    0 10px 28px -6px rgba(var(--wc-accent-rgb) / 0.65);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account button[type=submit]:active {
  transform: translateY(0);
  box-shadow:
    0 2px 6px -1px rgba(var(--wc-accent-rgb) / 0.5),
    0 6px 16px -4px rgba(var(--wc-accent-rgb) / 0.55);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account button[type=submit]:focus-visible {
  outline: none;
  box-shadow: var(--wc-focus-ring), 0 4px 10px -2px rgba(var(--wc-accent-rgb) / 0.55);
}

.woocommerce-account .woocommerce-MyAccount-content form.edit-account button.is-loading {
  pointer-events: none;
  opacity: .8;
}
.woocommerce-account .woocommerce-MyAccount-content form.edit-account button.is-loading::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255 255 255 / .55);
  border-top-color: #ffffff;
  animation: wc-spin .75s linear infinite;
}

@keyframes wc-spin {
  to { transform: rotate(360deg); }
}

/* =========================
   NOTICES
   ========================= */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--wc-radius-md);
  border-width: 1px;
  font-size: .85rem;
  padding: .9rem 1.1rem;
  line-height: 1.4;
}

.woocommerce-message {
  background: var(--wc-success-bg);
  border-color: var(--wc-success);
  color: var(--wc-success);
}
.woocommerce-error {
  background: var(--wc-danger-bg);
  border-color: var(--wc-danger);
  color: var(--wc-danger);
}

/* =========================
   PASSWORD STRENGTH
   ========================= */
.woocommerce-password-strength {
  font-size: .7rem;
  margin-top: .4rem;
  padding: .4rem .55rem;
  border-radius: var(--wc-radius-sm);
  background: var(--wc-field-bg-alt);
  color: var(--wc-text-subtle);
}
.woocommerce-password-strength.strong {
  background: var(--wc-success-bg);
  color: var(--wc-success);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  background: var(--wc-danger-bg);
  color: var(--wc-danger);
}

/* =========================
   DARK MODE
   ========================= */
@media (prefers-color-scheme: dark) {
  .woocommerce-account,
  .woocommerce-MyAccount-content {
    --wc-bg: #0d1117;
    --wc-surface: #161b22f2;
    --wc-border: #2d3642;
    --wc-border-strong: #3d4855;
    --wc-field-bg: #1f2731;
    --wc-field-bg-alt: #25303b;
    --wc-field-border: #3a4653;
    --wc-text: #e6edf3;
    --wc-text-subtle: #9fb1c3;
    --wc-shadow-color: 20 25 32;
  }

  .woocommerce-account .woocommerce-MyAccount-content form.edit-account {
    background: linear-gradient(145deg, #161b22f5, #1e2731ef);
    box-shadow:
      0 4px 12px -2px rgba(0 0 0 / .55),
      0 18px 42px -10px rgba(0 0 0 / .65);
  }

  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="text"],
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="email"],
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="password"],
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="tel"],
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="url"],
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input[type="date"] {
    background: linear-gradient(#1d242c, #1d242c);
    color: var(--wc-text);
  }

  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input:hover {
    background: linear-gradient(#222b34,#222b34);
  }

  .woocommerce-account .woocommerce-MyAccount-content form.edit-account input::placeholder {
    color: #6d7d8b;
  }

  .woocommerce form .form-row .description,
  .woocommerce form .form-row .woocommerce-password-hint {
    background: #222b34;
    border-color: #313d49;
    color: var(--wc-text-subtle);
  }

  .woocommerce-password-strength {
    background: #222b34;
  }

  .woocommerce-account .woocommerce-MyAccount-content form.edit-account button[type=submit] {
    box-shadow:
      0 3px 8px -1px rgba(var(--wc-accent-rgb) / 0.5),
      0 10px 24px -8px rgba(var(--wc-accent-rgb) / 0.45);
  }
}

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account *,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account *::before,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   VARIANT OPTIONS (Opt-in Classes)
   ========================================================================== */

/* Minimal */
form.edit-account.wc-form--minimal {
  background: var(--wc-bg);
  backdrop-filter: none;
  box-shadow: none;
}
form.edit-account.wc-form--minimal::before { display: none; }

/* Compact */
form.edit-account.wc-form--compact {
  padding: 1.25rem 1.25rem;
}
form.edit-account.wc-form--compact .form-row {
  margin-bottom: .9rem;
}
form.edit-account.wc-form--compact input {
  padding: .65rem .75rem;
  font-size: .9rem;
  min-height: 42px;
}
form.edit-account.wc-form--compact button[type=submit] {
  padding: .7rem 1.05rem;
  font-size: .85rem;
  border-radius: var(--wc-radius-md);
}

/* Outlined */
form.edit-account.wc-form--outlined input {
  background: #fff;
  border-width: 2px;
  border-color: var(--wc-border);
}
form.edit-account.wc-form--outlined input:focus-visible {
  border-color: var(--wc-accent);
  box-shadow: 0 0 0 4px rgba(var(--wc-accent-rgb) / .18);
}

/* Floating labels (requires markup changes) */
.wc-form--floating-labels .wc-floating-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.wc-form--floating-labels .wc-floating-group input {
  padding: 1.15rem .9rem .55rem;
}
.wc-form--floating-labels .wc-floating-group label {
  position: absolute;
  top: .85rem;
  left: .9rem;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--wc-text-subtle);
  pointer-events: none;
  transition: transform var(--wc-transition), color var(--wc-transition),
              top var(--wc-transition), font-size var(--wc-transition);
  text-transform: uppercase;
}
.wc-form--floating-labels .wc-floating-group input:focus + label,
.wc-form--floating-labels .wc-floating-group input:not(:placeholder-shown) + label {
  top: .4rem;
  font-size: .58rem;
  color: var(--wc-accent);
}

/* Optional grid variant (not needed for first/last now, kept for flexibility) */
form.edit-account.wc-form--grid-2 .form-row.can-split {
  width: 100%;
}
@media (min-width: 640px) {
  form.edit-account.wc-form--grid-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.25rem;
  }
  form.edit-account.wc-form--grid-2 .form-row.can-split {
    grid-column: span 6;
  }
  form.edit-account.wc-form--grid-2 #account_display_name,
  form.edit-account.wc-form--grid-2 #account_email,
  form.edit-account.wc-form--grid-2 #password_current,
  form.edit-account.wc-form--grid-2 #password_1,
  form.edit-account.wc-form--grid-2 #password_2,
  form.edit-account.wc-form--grid-2 #birthday {
    grid-column: 1 / -1;
  }
}

/* Accent presets */
form.edit-account[data-accent="teal"] {
  --wc-accent: #0d9488;
  --wc-accent-hover: #0f766e;
  --wc-accent-rgb: 13 148 136;
  --wc-field-focus: #0d9488;
}
form.edit-account[data-accent="violet"] {
  --wc-accent: #7c3aed;
  --wc-accent-hover: #5b21b6;
  --wc-accent-rgb: 124 58 237;
  --wc-field-focus: #7c3aed;
}
form.edit-account[data-accent="amber"] {
  --wc-accent: #f59e0b;
  --wc-accent-hover: #d97706;
  --wc-accent-rgb: 245 158 11;
  --wc-field-focus: #f59e0b;
}
form.edit-account[data-accent="rose"] {
  --wc-accent: #e11d48;
  --wc-accent-hover: #be123c;
  --wc-accent-rgb: 225 29 72;
  --wc-field-focus: #e11d48;
}

/* Utilities */
.wc-hidden { display: none !important; }
.wc-inline-hint { font-size: .65rem; opacity: .75; }

/* =========================
   END
   ========================= */