/* ================================================================
   Handmade Luxury Auth — Single-page combined login+register
   Palette: cream #f5f0e8 | dark brown #3d3022 | olive #5c6145
            burgundy #8b2635 | gold #b8860b
   Fonts: Cormorant Garamond + Lato
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Lato:wght@300;400;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cream:#f5f0e8;--cream-d:#ede6d8;--white:#fdfaf5;
  --brown:#3d3022;--brown-l:#6b5c44;
  --olive:#5c6145;--red:#8b2635;--red-l:#a63040;
  --gold:#b8860b;--gold-l:#d4a017;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Lato',sans-serif;
  --r:10px;--rl:18px;--t:.22s ease;
  --shadow:0 24px 64px rgba(61,48,34,.10),0 4px 16px rgba(61,48,34,.06);
}

body.hma-auth-body{
  font-family:var(--fb);background:var(--cream);
  color:var(--brown);min-height:100vh;overflow-x:hidden;
}

/* ── Page split layout ──────────────────────────────────────── */
.hma-page-wrap{display:flex;min-height:100vh}

/* ── Brand panel ────────────────────────────────────────────── */
.hma-brand-panel{
  position:relative;flex:0 0 40%;
  background:var(--brown);color:var(--cream);
  display:flex;flex-direction:column;
  padding:48px 48px 40px;overflow:hidden;
}
.hma-brand-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 8%,rgba(184,134,11,.14) 0%,transparent 52%),
    radial-gradient(ellipse at 78% 88%,rgba(139,38,53,.11) 0%,transparent 46%);
}

/* Ornament */
.hma-ornament{
  position:absolute;width:380px;height:380px;
  top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--cream);opacity:.16;pointer-events:none;
  animation:hma-spin 90s linear infinite;
}
@keyframes hma-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Logo */
.hma-logo{
  display:block;position:relative;z-index:1;
  text-decoration:none;color:var(--cream);margin-bottom:auto;
}
.hma-logo img{max-height:52px;filter:brightness(0) invert(1)}
.hma-logo-text{
  display:block;font-family:var(--fd);font-size:1.5rem;
  font-weight:400;letter-spacing:.05em;
}
.hma-logo-sub{
  display:block;font-size:.62rem;font-family:var(--fb);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,240,232,.4);margin-top:3px;
}

/* Brand body */
.hma-brand-body{position:relative;z-index:1;margin:auto 0}
.hma-brand-headline{
  font-family:var(--fd);font-size:clamp(2rem,3vw,3rem);
  font-weight:300;line-height:1.18;margin-bottom:18px;
}
.hma-brand-headline em{font-style:italic;color:var(--gold-l)}
.hma-brand-copy{
  font-size:.86rem;font-weight:300;line-height:1.78;
  color:rgba(245,240,232,.55);max-width:280px;
}

/* Badges */
.hma-badges{list-style:none;margin-top:36px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.hma-badge{display:flex;align-items:center;gap:12px;font-size:.75rem;color:rgba(245,240,232,.42);letter-spacing:.03em}
.hma-badge-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(245,240,232,.14);
  display:flex;align-items:center;justify-content:center;
}
.hma-badge-icon svg{width:13px;height:13px;opacity:.5}

/* Back link */
.hma-back-link{
  position:relative;z-index:1;margin-top:36px;display:block;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,240,232,.32);text-decoration:none;
  transition:color var(--t);
}
.hma-back-link:hover{color:var(--cream)}

/* ── Form panel ─────────────────────────────────────────────── */
.hma-form-panel{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:48px 28px;background:var(--cream);position:relative;
}
.hma-form-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,48,34,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,48,34,.025) 1px,transparent 1px);
  background-size:42px 42px;
}
.hma-form-inner{width:100%;max-width:456px;position:relative;z-index:1}

/* ── Tab switcher ───────────────────────────────────────────── */
.hma-tabs{
  display:flex;background:var(--cream-d);border-radius:12px;
  padding:4px;position:relative;margin-bottom:24px;
  border:1px solid rgba(61,48,34,.1);
}
.hma-tab{
  flex:1;padding:11px 0;border:none;background:transparent;
  font-family:var(--fb);font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brown-l);
  cursor:pointer;border-radius:9px;
  transition:color var(--t);position:relative;z-index:1;
}
.hma-tab.active{color:var(--brown)}
.hma-tab-ink{
  position:absolute;top:4px;bottom:4px;left:4px;
  background:var(--white);border-radius:9px;
  box-shadow:0 2px 8px rgba(61,48,34,.10);
  transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* ── Tab panels ─────────────────────────────────────────────── */
.hma-panel{display:none}
.hma-panel.active{display:block;animation:hma-fade .35s cubic-bezier(.22,1,.36,1) both}
@keyframes hma-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── Card ───────────────────────────────────────────────────── */
.hma-card{
  background:var(--white);border:1px solid rgba(61,48,34,.07);
  border-radius:var(--rl);padding:40px 44px;
  box-shadow:var(--shadow);
}

/* Card header */
.hma-card-header{text-align:center;margin-bottom:28px}
.hma-eyebrow{
  display:block;font-size:.67rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px;
}
.hma-card-title{
  font-family:var(--fd);font-size:2.2rem;font-weight:400;
  color:var(--brown);line-height:1.1;margin-bottom:7px;
}
.hma-card-sub{
  font-size:.82rem;font-weight:300;color:var(--brown-l);line-height:1.65;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.hma-alert{
  padding:11px 14px;border-radius:6px;
  font-size:.81rem;line-height:1.5;margin-bottom:18px;
}
.hma-alert--error{background:#fdf0f1;border-left:3px solid var(--red);color:var(--red)}
.hma-alert--success{background:#f0f5f0;border-left:3px solid var(--olive);color:var(--olive)}

/* ── Fields ─────────────────────────────────────────────────── */
.hma-field{margin-bottom:18px;flex:1}
.hma-field-row{display:flex;gap:14px}
.hma-field-row .hma-field{margin-bottom:18px}

.hma-label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.71rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--brown);margin-bottom:7px;
}
.hma-label-btn{
  background:none;border:none;cursor:pointer;
  font-size:.71rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--red);
  transition:color var(--t);padding:0;
}
.hma-label-btn:hover{color:var(--red-l)}

/* Input wrapper */
.hma-input-wrap{position:relative;display:flex;align-items:center}
.hma-iicon{
  position:absolute;left:13px;color:var(--brown-l);opacity:.38;
  display:flex;align-items:center;pointer-events:none;
  transition:opacity var(--t);
}
.hma-iicon svg{width:14px;height:14px}

.hma-input{
  width:100%;padding:12px 40px 12px 40px;
  font-family:var(--fb);font-size:.88rem;color:var(--brown);
  background:var(--cream);border:1.5px solid rgba(61,48,34,.14);
  border-radius:var(--r);outline:none;appearance:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.hma-input--bare{padding-left:14px}
.hma-input::placeholder{color:rgba(61,48,34,.27)}
.hma-input:focus{
  border-color:var(--gold);background:var(--white);
  box-shadow:0 0 0 3px rgba(184,134,11,.13);
}
.hma-input:focus~.hma-iicon,.hma-input-wrap:focus-within .hma-iicon{opacity:.8}

/* Password toggle */
.hma-pw-btn{
  position:absolute;right:11px;background:none;border:none;cursor:pointer;
  color:var(--brown-l);opacity:.32;display:flex;align-items:center;padding:4px;
  transition:opacity var(--t);
}
.hma-pw-btn:hover{opacity:.85}
.hma-pw-btn svg{width:15px;height:15px}

/* ── Password strength ──────────────────────────────────────── */
.hma-str-bar{
  height:3px;background:rgba(61,48,34,.08);
  border-radius:2px;margin-top:7px;overflow:hidden;
}
.hma-str-bar span{
  display:block;height:100%;width:0;border-radius:2px;
  transition:width .4s ease,background .4s ease;
}
.hma-str-label{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:block;min-height:1em;
  margin-top:4px;color:var(--brown-l);transition:color var(--t);
}

/* ── Forgot password inline box ─────────────────────────────── */
.hma-forgot-wrap{margin-bottom:18px}
.hma-forgot-inner{
  background:var(--cream-d);border-radius:10px;
  padding:18px;border:1px solid rgba(61,48,34,.08);
}
.hma-forgot-title{font-family:var(--fd);font-size:1.15rem;font-weight:400;color:var(--brown);margin-bottom:4px}
.hma-forgot-copy{font-size:.8rem;color:var(--brown-l);line-height:1.6;margin-bottom:14px}
.hma-row-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ── Checkbox ───────────────────────────────────────────────── */
.hma-check-wrap{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.81rem;color:var(--brown-l);cursor:pointer;
  margin-bottom:22px;line-height:1.5;user-select:none;
}
.hma-check-native{position:absolute;opacity:0;width:0;height:0}
.hma-check-box{
  flex-shrink:0;width:17px;height:17px;margin-top:1px;
  border:1.5px solid rgba(61,48,34,.2);border-radius:4px;
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:background var(--t),border-color var(--t);
}
.hma-check-native:checked+.hma-check-box{background:var(--brown);border-color:var(--brown)}
.hma-check-native:checked+.hma-check-box::after{
  content:'';display:block;width:5px;height:8px;
  border:2px solid var(--cream);border-top:none;border-left:none;
  transform:rotate(45deg) translateY(-1px);
}
.hma-check-wrap a{color:var(--red);text-decoration:none}
.hma-check-wrap a:hover{text-decoration:underline}

/* ── Buttons ────────────────────────────────────────────────── */
.hma-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:13px 22px;border:none;border-radius:var(--r);
  font-family:var(--fb);font-size:.77rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;position:relative;overflow:hidden;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.hma-btn--primary{
  width:100%;background:var(--brown);color:var(--cream);
  box-shadow:0 2px 8px rgba(61,48,34,.2);
}
.hma-btn--primary:hover{background:var(--brown-l);transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,48,34,.24)}
.hma-btn--primary:active{transform:translateY(0)}
.hma-btn--ghost{
  width:auto;background:transparent;color:var(--brown-l);
  border:1.5px solid rgba(61,48,34,.18);
}
.hma-btn--ghost:hover{border-color:var(--brown);color:var(--brown)}
.hma-btn--sm{padding:10px 18px;font-size:.72rem}

/* Loading state */
.hma-btn.hma-loading .hma-btn-label{opacity:0}
.hma-btn.hma-loading .hma-btn-spin{opacity:1}
.hma-btn-spin{
  position:absolute;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(245,240,232,.25);border-top-color:var(--cream);
  opacity:0;animation:hma-bspin .65s linear infinite;
}
@keyframes hma-bspin{to{transform:rotate(360deg)}}

/* ── Switch link ────────────────────────────────────────────── */
.hma-switch{
  text-align:center;font-size:.82rem;color:var(--brown-l);margin-top:22px;
}
.hma-link-btn{
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--red);font-size:.82rem;font-weight:700;
  font-family:var(--fb);transition:color var(--t);
}
.hma-link-btn:hover{color:var(--red-l)}

/* ── WC notice overrides ────────────────────────────────────── */
.hma-card .woocommerce-message,.hma-card .woocommerce-error,.hma-card .woocommerce-info{
  font-size:.83rem;border-radius:6px;margin-bottom:16px;padding:10px 14px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:960px){
  .hma-page-wrap{flex-direction:column}
  .hma-brand-panel{
    flex:none;min-height:auto;padding:28px 28px 24px;
    flex-direction:row;align-items:center;gap:24px;
  }
  .hma-ornament{display:none}
  .hma-brand-body{margin:0}
  .hma-brand-headline{font-size:1.75rem;margin-bottom:0}
  .hma-brand-copy,.hma-badges,.hma-back-link{display:none}
  .hma-logo{margin-bottom:0}
  .hma-form-panel{padding:32px 20px 48px}
  .hma-card{padding:32px 28px}
}
@media(max-width:520px){
  .hma-field-row{flex-direction:column;gap:0}
  .hma-card{padding:28px 20px;border-radius:14px}
  .hma-card-title{font-size:1.9rem}
  .hma-brand-panel{padding:20px 20px 18px}
  .hma-brand-headline{font-size:1.5rem}
}