@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ARCADE ACCOUNT — Master stylesheet
   Covers: My Account, Login, Register, Lost Password, Reset Password,
           Edit Account, Dashboard, Navigation
   Inherits design tokens from arcade.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── GOOGLE FONTS (extend arcade.css imports if not already loaded) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  --bg:              #0a0d0a;
  --bg-surface:      #0f1410;
  --bg-card:         #111814;
  --bg-card-h:       #141f16;
  --bg-input:        #0d110e;
  --green:           #22ff6e;
  --green-dim:       #16c952;
  --green-muted:     #0e7a32;
  --green-glow:      rgba(34, 255, 110, 0.18);
  --green-glow-h:    rgba(34, 255, 110, 0.42);
  --green-glow-btn:  rgba(34, 255, 110, 0.28);
  --border:          rgba(34, 255, 110, 0.12);
  --border-h:        rgba(34, 255, 110, 0.50);
  --border-focus:    rgba(34, 255, 110, 0.80);
  --text-primary:    #e8f5ec;
  --text-secondary:  #7aaa88;
  --text-muted:      #3d6147;
  --text-label:      #5a8a68;
  --error:           #ff4d6a;
  --error-bg:        rgba(255, 77, 106, 0.08);
  --success:         #22ff6e;
  --success-bg:      rgba(34, 255, 110, 0.08);
  --notice-bg:       rgba(34, 255, 110, 0.06);
  --font-display:    'Orbitron', monospace;
  --font-body:       'DM Mono', monospace;
  --radius:          6px;
  --radius-lg:       10px;
  --transition:      0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: 0.16s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--green);
    text-shadow: 0 0 30px rgba(34, 255, 110, 0.55), 0 0 80px rgba(34, 255, 110, 0.2);
    opacity: 0;
    animation: fadeUp 0.7s 0.2s forwards;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE SHELL — woocommerce-account body context
   ═══════════════════════════════════════════════════════════════════════════ */

/*.woocommerce-account,
.woocommerce-page {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}*/

/* Scanline atmosphere — same vibe as arcade.css hero */
.woocommerce-account .site-main::before,
.woocommerce-page .site-main::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* Ambient glow behind content area */
.woocommerce-account .woocommerce,
.woocommerce-page .woocommerce {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. PAGE HEADER — account section title (h1 / page title)
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.entry-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  color: var(--green);
  text-shadow:
    0 0 24px rgba(34, 255, 110, 0.50),
    0 0 60px rgba(34, 255, 110, 0.18);
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  animation: acct-fadeUp 0.7s 0.1s both;
}

.entry-header h1, 
.entry-header h2 {
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT — two-column account shell (navigation.php + my-account.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The .row wrapper from navigation.php / my-account.php */
.woocommerce-MyAccount-navigation + .col-md-8,
.woocommerce-account .row {
  animation: acct-fadeIn 0.5s 0.15s both;
}

.entry-header {
	margin: 2em auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR NAVIGATION — navigation.php
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 100px;
}

/* Container */
.woocommerce-MyAccount-navigation .list-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 0;
}

/* Individual nav items */
.woocommerce-MyAccount-navigation .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.2rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color var(--transition), background var(--transition), padding-left var(--transition);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation .list-group-item::before {
  content: '▸';
  font-size: 0.6rem;
  color: var(--green-muted);
  transition: color var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.woocommerce-MyAccount-navigation .list-group-item:last-child {
  border-bottom: none;
}

/* Left accent bar */
.woocommerce-MyAccount-navigation .list-group-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--green);
  transform: scaleY(0);
  transition: transform var(--transition);
  box-shadow: 0 0 8px var(--green);
}

/* Hover state */
.woocommerce-MyAccount-navigation .list-group-item:hover {
  background: var(--bg-card-h);
  color: var(--green);
  padding-left: 1.5rem;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation .list-group-item:hover::before {
  color: var(--green);
  transform: translateX(2px);
}

.woocommerce-MyAccount-navigation .list-group-item:hover::after {
  transform: scaleY(1);
}

/* Active/current state */
.woocommerce-MyAccount-navigation .list-group-item[aria-current="page"],
.woocommerce-MyAccount-navigation .list-group-item.is-active {
  background: rgba(34, 255, 110, 0.06);
  color: var(--green);
  font-weight: 500;
  padding-left: 1.5rem;
}

.woocommerce-MyAccount-navigation .list-group-item[aria-current="page"]::before {
  color: var(--green);
}

.woocommerce-MyAccount-navigation .list-group-item[aria-current="page"]::after {
  transform: scaleY(1);
}

/* Nav section header label — optional enhancement */
.woocommerce-MyAccount-navigation .list-group::before {
  content: '// PLAYER MENU';
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--text-muted);
  padding: 0.85rem 1.2rem 0.5rem;
  border-bottom: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CONTENT PANEL — my-account.php / woocommerce-MyAccount-content
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
  animation: acct-fadeUp 0.55s 0.2s both;
  position: relative;
  overflow: hidden;
}

/* Subtle corner decoration */
.woocommerce-MyAccount-content::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(34, 255, 110, 0.06) 0%, transparent 70%);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. DASHBOARD — dashboard.php
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-content p {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.woocommerce-MyAccount-content p strong {
  color: var(--green);
  font-weight: 500;
}

.woocommerce-MyAccount-content p a {
  color: var(--green-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 255, 110, 0.2);
  transition: color var(--transition), border-color var(--transition);
}

.woocommerce-MyAccount-content p a:hover {
  color: var(--green);
  border-color: rgba(34, 255, 110, 0.6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. SECTION HEADINGS — inside content panel
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-column__title,
.woocommerce-Address-title h3 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 12px rgba(34, 255, 110, 0.30);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.woocommerce-MyAccount-content h2::after,
.woocommerce-MyAccount-content h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* Login / Register headings specifically */
.woocommerce-form-login h2,
.woocommerce-form-register h2,
#customer_login h2 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 14px rgba(34, 255, 110, 0.35);
  margin-bottom: 1.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.woocommerce-form-login h2::after,
.woocommerce-form-register h2::after,
#customer_login h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. LOGIN / REGISTER COLUMNS — form-login.php
   ═══════════════════════════════════════════════════════════════════════════ */

#customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  animation: acct-fadeUp 0.6s 0.1s both;
}

@media (max-width: 768px) {
  #customer_login {
    grid-template-columns: 1fr;
  }
}

#customer_login .u-column1,
#customer_login .u-column2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100% !important;
}

/*#customer_login .u-column1::before,
#customer_login .u-column2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-muted), transparent);
}*/

.woocommerce .col2-set::after, .woocommerce .col2-set::before, .woocommerce-page .col2-set::after, .woocommerce-page .col2-set::before{
  content: none !important;
}

#customer_login .u-column1:hover,
#customer_login .u-column2:hover {
  border-color: var(--border-h);
  box-shadow: 0 0 40px var(--green-glow);
}

/* If only login (no registration), wrap it nicely */
.woocommerce-form-login:not(#customer_login .woocommerce-form-login) {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  max-width: 440px;
  margin: 0 auto;
  animation: acct-fadeUp 0.6s 0.1s both;
  position: relative;
  overflow: hidden;
}

.woocommerce-form-login:not(#customer_login .woocommerce-form-login)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-muted), transparent);
}

.woocommerce form .show-password-input::before, .woocommerce-page form .show-password-input::before {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="white"/></svg>');
    content: "";
    display: block;
    height: 22px;
    width: 22px;
}
.woocommerce form .show-password-input.display-password::before, .woocommerce-page form .show-password-input.display-password::before {
    background-image: url(data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="white"/></svg>);
}

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input{
	top: 1rem;
}

.woocommerce form .form-row-first, .woocommerce form .form-row-last {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
	

/* ═══════════════════════════════════════════════════════════════════════════
   9. FORM ROWS & LABELS — all account forms
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-form-row,
.woocommerce-account .form-row {
  margin-bottom: 1.2rem;
}

.woocommerce-form-row label,
.woocommerce-account .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-ResetPassword label, p, span {
  /* font-family: var(--font-body); */
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-label);
  transition: color var(--transition-fast);
}

.woocommerce-form-row label,
.woocommerce-account .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-ResetPassword label{
  display: block;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.woocommerce-form-row:focus-within label,
.woocommerce-account .form-row:focus-within label {
  color: var(--green-dim);
}

/* Required asterisk */
.woocommerce-form-row label .required,
.woocommerce-account label .required {
  color: var(--green-muted);
  margin-left: 2px;
  font-size: 0.75rem;
}

/* Screen reader only text */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.woocommerce table.shop_table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. INPUTS & TEXTAREAS
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"],
.woocommerce-account input[type="search"],
.woocommerce-account textarea,
.woocommerce-account select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.7rem 0.95rem;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-Input::placeholder,
.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.woocommerce-Input:hover,
.woocommerce-account input[type="text"]:hover,
.woocommerce-account input[type="email"]:hover,
.woocommerce-account input[type="password"]:hover {
  border-color: rgba(34, 255, 110, 0.28);
  background: #0e1510;
}

.woocommerce-Input:focus,
.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account input[type="tel"]:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
  border-color: var(--border-focus);
  background: #0d1410;
  box-shadow:
    0 0 0 3px rgba(34, 255, 110, 0.08),
    0 0 16px rgba(34, 255, 110, 0.10);
}

/* Select dropdown arrow */
.woocommerce-account select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316c952' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. CHECKBOX — rememberme
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--text-secondary) !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  font-size: 0.75rem !important;
}

.woocommerce-form__input-checkbox {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.woocommerce-form__input-checkbox:hover {
  border-color: var(--border-h) !important;
}

.woocommerce-form__input-checkbox:checked {
  background: var(--green-muted) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 8px rgba(34, 255, 110, 0.3) !important;
}

.woocommerce-form__input-checkbox:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. BUTTONS — submit, primary, secondary
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-button.button,
.woocommerce-Button.button,
.woocommerce-account .button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
button[name="login"],
button[name="register"],
button[name="save_account_details"],
button[type="submit"].woocommerce-Button,
button[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--green-dim);
  border-radius: var(--radius);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.75rem 1.8rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition:
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

/* Shimmer sweep */
.woocommerce-button.button::before,
.woocommerce-Button.button::before,
.woocommerce-account .button::before,
.woocommerce-form-login__submit::before,
.woocommerce-form-register__submit::before,
button[name="login"]::before,
button[name="register"]::before,
button[name="save_account_details"]::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 100%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(34, 255, 110, 0.15) 50%, transparent 80%);
  transition: left 0.5s ease;
  pointer-events: none;
}

.woocommerce-button.button:hover,
.woocommerce-Button.button:hover,
.woocommerce-account .button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
button[name="login"]:hover,
button[name="register"]:hover,
button[name="save_account_details"]:hover {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
  box-shadow:
    0 0 24px var(--green-glow-btn),
    0 0 60px rgba(34, 255, 110, 0.12),
    0 4px 16px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

.woocommerce-button.button:hover::before,
.woocommerce-form-login__submit:hover::before,
button[name="login"]:hover::before {
  left: 110%;
}

.woocommerce-button.button:active,
.woocommerce-form-login__submit:active {
  transform: translateY(0);
  box-shadow: 0 0 12px var(--green-glow);
}

/* Focus ring */
.woocommerce-button.button:focus-visible,
.woocommerce-form-login__submit:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. FORM ROW LAYOUT — inline button + checkbox row
   ═══════════════════════════════════════════════════════════════════════════ */

/*.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row:last-of-type,
.woocommerce-ResetPassword .form-row:last-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.4rem;
}*/

/* Side-by-side half-width rows */
.woocommerce-form-row--first,
.woocommerce-form-row--last,
.form-row-first,
.form-row-last {
  width: calc(50% - 0.5rem);
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 540px) {
  .woocommerce-form-row--first,
  .woocommerce-form-row--last,
  .form-row-first,
  .form-row-last {
    width: 100%;
  }
}

.clear { clear: both; }

/* Full-width rows */
.woocommerce-form-row--wide,
.form-row-wide {
  width: 100%;
  clear: both;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. LOST PASSWORD LINK
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-LostPassword,
.lost_password {
  margin-top: 1rem;
  font-size: 0.7rem;
}

.woocommerce-LostPassword a,
.lost_password a {
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.65rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.woocommerce-LostPassword a:hover,
.lost_password a:hover {
  color: var(--green-dim);
  border-color: rgba(34, 255, 110, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. LOST PASSWORD FORM — form-lost-password.php
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-ResetPassword {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  max-width: 480px;
  margin: 0 auto;
  animation: acct-fadeUp 0.6s 0.1s both;
  position: relative;
  overflow: hidden;
}

.woocommerce-ResetPassword::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-muted), transparent);
}

/* Intro text inside lost/reset forms */
.woocommerce-ResetPassword > p:first-of-type {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.65;
  margin-bottom: 1.6rem;
  padding: 0.9rem 1rem;
  background: var(--notice-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 2px solid var(--green-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. LOST PASSWORD CONFIRMATION — lost-password-confirmation.php
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-before-lost-password-confirmation-message,
.woocommerce-after-lost-password-confirmation-message {
  /* hooks — no styles needed */
}

/* The woocommerce notice printed by wc_print_notice */
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  background: var(--success-bg);
  border: 1px solid rgba(34, 255, 110, 0.2);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
  list-style: none;
  animation: acct-fadeIn 0.4s ease both;
}

.woocommerce-error {
  background: var(--error-bg);
  border: 1px solid rgba(255, 77, 106, 0.2);
  border-left: 3px solid var(--error);
  border-radius: var(--radius);
  color: #ff8fa0;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
  list-style: none;
  animation: acct-shake 0.4s ease both;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. EDIT ACCOUNT FORM — form-edit-account.php
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-EditAccountForm {
  animation: acct-fadeUp 0.5s 0.1s both;
}

/* Password change fieldset */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1rem;
  margin: 1.8rem 0 1.4rem;
  position: relative;
  background: rgba(34, 255, 110, 0.02);
  transition: border-color var(--transition);
}

.woocommerce-EditAccountForm fieldset:hover {
  border-color: rgba(34, 255, 110, 0.22);
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green-dim);
  background: var(--bg-card);
  padding: 0 0.7rem;
  margin-left: -0.4rem;
}

/* Display name hint */
#account_display_name_description {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-style: normal;
  letter-spacing: 0.03em;
}

input[type="radio"],input[type="checkbox"] {
	margin-right: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. WOOCOMMERCE ORDERS TABLE (my orders section)
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-orders-table,
.woocommerce-table,
table.woocommerce-MyAccount-orders {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}

.woocommerce-orders-table th,
.woocommerce-table th,
table.woocommerce-MyAccount-orders th {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-dim);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0.8rem;
  text-align: left;
}

.woocommerce-orders-table td,
.woocommerce-table td,
table.woocommerce-MyAccount-orders td {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 0.8rem;
  vertical-align: middle;
  transition: color var(--transition), background var(--transition);
}

.woocommerce-orders-table tr:hover td,
table.woocommerce-MyAccount-orders tr:hover td {
  background: rgba(34, 255, 110, 0.025);
  color: var(--text-primary);
}

.woocommerce-orders-table td a,
table.woocommerce-MyAccount-orders td a {
  color: var(--green-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.woocommerce-orders-table td a:hover,
table.woocommerce-MyAccount-orders td a:hover {
  color: var(--green);
  border-color: rgba(34, 255, 110, 0.4);
}

/* Order status badge */
.woocommerce-order-status,
.order-status,
mark.order-status {
  background: transparent !important;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--green-dim) !important;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  font-family: var(--font-body);
}

mark.order-status.status-completed {
  border-color: rgba(34, 255, 110, 0.3);
  color: var(--green) !important;
}

mark.order-status.status-processing {
  border-color: rgba(34, 255, 110, 0.2);
  color: var(--green-dim) !important;
}

mark.order-status.status-on-hold,
mark.order-status.status-pending {
  border-color: rgba(255, 200, 50, 0.3);
  color: #ffc832 !important;
}

mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded {
  border-color: rgba(255, 77, 106, 0.3);
  color: var(--error) !important;
}

/* View order button in table */
.woocommerce-orders-table .button,
table.woocommerce-MyAccount-orders .button {
  font-size: 0.58rem;
  padding: 0.4rem 0.9rem;
  letter-spacing: 0.18em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. ADDRESS SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition);
}

.woocommerce-column--billing-address:hover,
.woocommerce-column--shipping-address:hover {
  border-color: var(--border-h);
}

.woocommerce-Address address {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.7;
  font-style: normal;
  letter-spacing: 0.02em;
}

.woocommerce-column .edit {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.woocommerce-column .edit:hover {
  color: var(--green-dim);
  border-color: rgba(34, 255, 110, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-pagination ul,
.woocommerce-Pagination ul {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-family: var(--font-display);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.woocommerce-pagination ul li a:hover {
  color: var(--green);
  border-color: var(--border-h);
  background: var(--bg-card-h);
}

.woocommerce-pagination ul li span.current {
  color: var(--green);
  border-color: var(--green-dim);
  background: rgba(34, 255, 110, 0.06);
  box-shadow: 0 0 10px rgba(34, 255, 110, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. MISC WOO ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nonce hidden fields — no visual impact needed */
input[name="woocommerce-login-nonce"],
input[name="woocommerce-register-nonce"],
input[name="woocommerce-lost-password-nonce"],
input[name="woocommerce-reset-password-nonce"],
input[name="save-account-details-nonce"],
input[name="wc_reset_password"],
input[name="reset_key"],
input[name="reset_login"],
input[name="action"] {
  display: none;
}

/* WooCommerce "required" field note */
.woocommerce-form-row .required,
.woocommerce-account .required {
  color: var(--green-muted);
}

/* .clear dividers */
.woocommerce-account .clear {
  clear: both;
  display: block;
  height: 0;
}

/* Account content top nav breadcrumb */
.woocommerce-breadcrumb {
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: acct-fadeIn 0.5s 0.05s both;
}

.woocommerce-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.woocommerce-breadcrumb a:hover {
  color: var(--green-dim);
}

.woocommerce-breadcrumb span {
  margin: 0 0.4em;
  color: var(--green-muted);
}

/* Woo description text / em tags */
.woocommerce-account em {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.72rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. TERMINAL CURSOR BLINK — decorative detail on focused inputs
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-Input:focus::after {
  content: '_';
  animation: acct-blink 1s step-end infinite;
  color: var(--green);
}


/* ═══════════════════════════════════════════════════════════════════════════
   23. KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes acct-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes acct-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes acct-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

@keyframes acct-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes acct-pulse-border {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: rgba(34, 255, 110, 0.35); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   24. RESPONSIVE — mobile adjustments
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .woocommerce-MyAccount-content {
    padding: 1.4rem 1.2rem;
  }

  .woocommerce-ResetPassword,
  .woocommerce-form-login {
    padding: 1.4rem;
  }

  .woocommerce-MyAccount-navigation {
    position: static;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-orders-table th:nth-child(n+4),
  table.woocommerce-MyAccount-orders th:nth-child(n+4),
  .woocommerce-orders-table td:nth-child(n+4),
  table.woocommerce-MyAccount-orders td:nth-child(n+4) {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   25. FOCUS / ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-account a:focus-visible,
.woocommerce-account button:focus-visible,
.woocommerce-account input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius);
}