/* ============================================================
   Veilong Account — branded WooCommerce My Account login/register
   
   Design direction: asymmetric split (DESIGN_VARIANCE 8), 
   restrained motion (MOTION_INTENSITY 6), airy density 
   (VISUAL_DENSITY 4). Single accent: gold (#E8C766) on 
   slate/navy neutral base. No purple, no neon, no emoji.
   
   Restyles WooCommerce's own markup; doesn't replace any of its
   form logic. Falls back to plain-but-consistent input/button
   styling on screens this plugin doesn't restructure.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

.woocommerce-account{
  --va-navy:#12294A;
  --va-navy-deep:#0B1620;
  --va-gold:#E8C766;
  --va-gold-lt:#F0D68A;
  --va-gold-dk:#C9A23F;
  --va-ink:#10233B;
  --va-muted:#6B7A90;
  --va-line:#E7EAEF;
  --va-bg:#F8F9FB;
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.woocommerce-account .woocommerce *{ box-sizing:border-box; }

/* page background — subtle warm gray instead of raw white */
.woocommerce-account .site-main,
.woocommerce-account .entry-content{ background:var(--va-bg); }

/* content shell — don't constrain the full page width (that was
   breaking the header nav), only constrain the login card itself */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce{
  max-width:none; margin:0 auto; padding:48px 24px 72px;
}

/* ================= SPLIT PANEL SHELL ================= */
.va-wrap{
  display:grid; grid-template-columns:1fr 1.1fr;
  max-width:1020px; margin:0 auto;
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:
    0 1px 2px rgba(16,35,59,.04),
    0 24px 56px -16px rgba(16,35,59,.18);
  min-height:580px;
}

/* ---- promo panel ---- */
.va-promo{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232,199,102,.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--va-navy) 0%, var(--va-navy-deep) 100%);
  color:#fff; padding:52px 44px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
/* faint dot-grid texture (restrained, not noisy) */
.va-promo::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 25% 15%, #000 30%, transparent 70%);
          mask-image:radial-gradient(circle at 25% 15%, #000 30%, transparent 70%);
}

.va-logo{
  height:100px; width:auto; max-width:320px; object-fit:contain;
  opacity:.95; margin-bottom:28px; position:relative; z-index:1;
  /* no filter — render at natural colors to prevent blur/distortion */
}
.va-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--va-gold); margin-bottom:16px; position:relative; z-index:1;
}
.va-eyebrow::before{
  content:""; width:16px; height:2px; border-radius:2px; background:var(--va-gold); flex-shrink:0;
}
.va-headline{
  font-size:28px; font-weight:800; line-height:1.22; margin:0 0 14px;
  letter-spacing:-.02em; color:#fff; position:relative; z-index:1;
  max-width:18ch;
}
.va-sub{
  font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.7;
  margin:0 0 32px; max-width:34ch; position:relative; z-index:1;
}
.va-perks{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px; position:relative; z-index:1;
}
.va-perks li{
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.82);
}
.va-perks svg{ width:18px; height:18px; color:var(--va-gold); flex-shrink:0; }

/* ---- form panel ---- */
.va-panel{
  padding:52px 48px; display:flex; flex-direction:column;
  background:#fff;
}

/* tabs with sliding indicator */
.va-tabs{
  position:relative;
  display:flex; background:#F2F4F7; border-radius:12px; padding:4px; margin-bottom:36px;
}
.va-tab-indicator{
  position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:#fff; border-radius:9px;
  box-shadow:0 1px 4px rgba(16,35,59,.1);
  transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:0;
}
.va-tab{
  position:relative; z-index:1;
  flex:1; background:none; border:0; border-radius:9px; padding:11px 8px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--va-muted);
  transition:color .18s ease;
}
.va-tab.is-active{ color:var(--va-navy); }

/* WooCommerce's default column layout, overridden into stacked tab panels */
.va-columns{ display:block !important; }
.va-columns .u-column1,
.va-columns .u-column2{
  width:100% !important; float:none !important; margin:0 !important;
  display:none;
}
.va-columns .u-column1.is-active,
.va-columns .u-column2.is-active{
  display:block;
  animation:va-fade .22s cubic-bezier(.4,0,.2,1);
}
@keyframes va-fade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* h2 titles are redundant once tabs exist; hide them, keep for no-JS fallback */
.va-columns h2{
  font-size:13px; font-weight:700; color:var(--va-navy); margin:0 0 22px;
  text-transform:uppercase; letter-spacing:.08em;
}
.va-tabs + #customer_login h2,
.va-tabs ~ .va-columns h2{ display:none; }

/* ================= FORM ELEMENTS ================= */
.woocommerce-account .woocommerce .woocommerce-form-row{
  margin-bottom:18px; position:relative;
}
.woocommerce-account .woocommerce .woocommerce-form-row label{
  display:block; font-size:12px; font-weight:600; color:var(--va-muted);
  margin-bottom:8px; letter-spacing:.02em; text-transform:uppercase;
}
.woocommerce-account .woocommerce .woocommerce-form-row .required{
  color:var(--va-gold); text-decoration:none;
}

.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"]{
  width:100%; height:48px; padding:0 40px;
  border:1.5px solid var(--va-line); border-radius:11px;
  font-family:inherit; font-size:13.5px; color:var(--va-ink); background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce input[type="text"]:focus,
.woocommerce-account .woocommerce input[type="email"]:focus,
.woocommerce-account .woocommerce input[type="password"]:focus{
  outline:0; border-color:var(--va-navy);
  box-shadow:0 0 0 3.5px rgba(18,41,74,.07);
}

/* icon-prefixed inputs */
.va-input-row{ position:relative; }
.va-input-row input{ padding-left:42px; }
.va-input-ico{
  position:absolute; left:14px; top:57%; width:16px; height:16px;
  color:#B4BBC6; pointer-events:none; display:flex;
  transition:color .18s ease;
}
.va-input-ico svg{ width:100%; height:100%; }
.va-input-row input:focus + .va-input-ico,
.va-input-row input:focus ~ .va-input-ico{ color:var(--va-navy); }

/* password row */
.va-pw-row{ position:relative; }
.va-pw-row input{ padding-right:42px; }
.va-pw-toggle{
  position:absolute; right:10px; top:31px; width:auto; height:auto;
  background:none; border:0; padding:6px; margin:0;
  color:#B4BBC6; cursor:pointer; display:flex;
  transition:color .18s ease;
}
.va-pw-toggle svg{ width:16px; height:16px; }
.va-pw-toggle:hover{ color:var(--va-ink); }
.va-pw-toggle.is-shown{ color:var(--va-navy); }

/* remember me */
.woocommerce-account .woocommerce .woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--va-muted);
  font-weight:500; margin:0 0 22px; cursor:pointer;
}
.woocommerce-account .woocommerce .woocommerce-form-login__rememberme input{
  width:17px; height:17px; accent-color:var(--va-gold); cursor:pointer; border-radius:4px;
}

/* submit buttons */
.woocommerce-account .woocommerce .woocommerce-form-row button:not(.va-pw-toggle),
.woocommerce-account .woocommerce button[type="submit"]:not(.va-pw-toggle),
.woocommerce-account .woocommerce .woocommerce-Button:not(.va-pw-toggle){
  display:block; width:100%; height:50px; margin-top:8px;
  background:var(--va-navy); color:#fff; border:0; border-radius:11px;
  font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer;
  letter-spacing:.01em; position:relative;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow:0 4px 14px rgba(18,41,74,.2);
}
.woocommerce-account .woocommerce .woocommerce-form-row button:not(.va-pw-toggle):hover,
.woocommerce-account .woocommerce button[type="submit"]:not(.va-pw-toggle):hover{
  background:var(--va-navy-deep);
  box-shadow:0 6px 20px rgba(18,41,74,.28);
}
.woocommerce-account .woocommerce .woocommerce-form-row button:not(.va-pw-toggle):active,
.woocommerce-account .woocommerce button[type="submit"]:not(.va-pw-toggle):active{
  transform:translateY(1px) scale(0.99);
}

/* loading spinner */
.woocommerce-account .woocommerce .woocommerce-form-row button.is-loading,
.woocommerce-account .woocommerce button[type="submit"].is-loading{
  color:transparent; pointer-events:none;
}
.woocommerce-account .woocommerce .woocommerce-form-row button.is-loading::after,
.woocommerce-account .woocommerce button[type="submit"].is-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px;
  border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:va-spin .6s linear infinite;
}
@keyframes va-spin{ to{ transform:rotate(360deg); } }

/* lost password */
.woocommerce-account .woocommerce .woocommerce-LostPassword{
  display:block; text-align:center; margin-top:18px; font-size:12.5px;
}
.woocommerce-account .woocommerce .woocommerce-LostPassword a{
  color:var(--va-muted); text-decoration:none; font-weight:600;
  transition:color .16s ease;
}
.woocommerce-account .woocommerce .woocommerce-LostPassword a:hover{ color:var(--va-navy); }

/* divider between form sections (if WC renders them) */
.woocommerce-account .woocommerce .woocommerce-form-row + .clear + .woocommerce-form-row{
  padding-top:18px; border-top:1px solid var(--va-line); margin-top:6px;
}

/* notices/errors — inline, not boxed-card style */
.woocommerce-account .woocommerce .woocommerce-error,
.woocommerce-account .woocommerce .woocommerce-message,
.woocommerce-account .woocommerce .woocommerce-info{
  list-style:none; margin:0 0 22px; padding:14px 18px; border-radius:11px;
  font-size:12.5px; font-weight:500; display:flex; flex-direction:column; gap:4px;
  border-left:3px solid transparent;
}
.woocommerce-account .woocommerce .woocommerce-error{
  background:#FEF2F2; color:#991B1B; border-left-color:#EF4444;
}
.woocommerce-account .woocommerce .woocommerce-message{
  background:#F0FDF4; color:#166534; border-left-color:#22C55E;
}
.woocommerce-account .woocommerce .woocommerce-info{
  background:#EFF6FF; color:var(--va-navy); border-left-color:var(--va-gold);
}

/* ---- logged-in dashboard: light-touch consistency ---- */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{
  max-width:1020px; margin:0 auto;
}
.woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.woocommerce-MyAccount-navigation a{
  display:block; padding:12px 16px; border-radius:10px; text-decoration:none;
  color:var(--va-muted); font-size:13.5px; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation a:hover{ background:#F2F4F7; color:var(--va-navy); }
.woocommerce-MyAccount-navigation .is-active a{
  background:rgba(232,199,102,.12); color:var(--va-navy);
}

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .woocommerce-account .entry-content,
  .woocommerce-account .woocommerce{ padding:28px 16px 48px; }

  .va-wrap{
    grid-template-columns:1fr; border-radius:20px;
    max-width:480px;
  }
  .va-promo{ padding:32px 28px; text-align:center; align-items:center; }
  .va-headline{ font-size:22px; max-width:none; }
  .va-perks{ display:none; }
  .va-panel{ padding:32px 26px; }
}
@media (max-width:480px){
  .woocommerce-account .entry-content,
  .woocommerce-account .woocommerce{ padding:16px 10px 36px; }

  .va-wrap{ border-radius:16px; }
  .va-promo{ padding:26px 22px; text-align:center; align-items:center; }
  .va-eyebrow{ font-size:9.5px; margin-bottom:12px; }
  .va-headline{ font-size:19px; }
  .va-sub{ font-size:12.5px; margin-bottom:20px; }
  .va-panel{ padding:26px 20px; }
  .va-tabs{ margin-bottom:28px; }
}