/* Wanda's — My Account dashboard (front end).
   Brand tokens with fallbacks; cohesive with theme v0.4+ finish. */
.wacct{
  --magenta:var(--wp--preset--color--magenta,#b6309f);
  --magenta-2:var(--wp--preset--color--magenta-2,#d24bc0);
  --plum:var(--wp--preset--color--plum,#7e2b73);
  --plum-850:#22091c; --plum-700:#3c1533;
  --plum-deep:var(--wp--preset--color--plum-deep,#591e51);
  --marigold:var(--wp--preset--color--marigold,#f2a93b);
  --cream:var(--wp--preset--color--cream,#f8f1ea);
  --paper:var(--wp--preset--color--paper,#fffaf5);
  --line:var(--wp--preset--color--line,#e6d6ca);
  --ink:var(--wp--preset--color--ink,#241019);
  --ink-2:var(--wp--preset--color--ink-2,#5a4651);
  --ok:#2f9e6f;
  --ff-display:var(--wp--preset--font-family--display,"Fraunces",Georgia,serif);
  --ease:cubic-bezier(.22,.61,.36,1);
  --rad:16px; --rad-lg:28px; --rad-pill:999px;
  --shadow:0 18px 40px -22px rgba(46,8,38,.55);
  --shadow-soft:0 10px 30px -18px rgba(46,8,38,.4);
  max-width:1020px; margin-inline:auto;
}
.wacct *{ box-sizing:border-box; }

/* ---- loading ---- */
.wacct-loading{ text-align:center; padding:70px 0; color:var(--ink-2); }
.wacct-spinner{ width:34px; height:34px; border-radius:50%; display:inline-block;
  border:3px solid var(--line); border-top-color:var(--magenta); animation:wacctSpin .8s linear infinite; }
@keyframes wacctSpin{ to{ transform:rotate(360deg); } }

/* ---- hero ---- */
.wacct-hero{
  position:relative; overflow:hidden; color:#fff; border-radius:var(--rad-lg);
  background:linear-gradient(150deg,var(--plum-850),var(--plum-700) 55%,var(--plum-deep));
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow); margin-bottom:26px;
}
.wacct-hero::after{ content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px); background-size:3px 3px; }
.wacct-hero::before{ content:""; position:absolute; top:-90px; right:-60px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(210,75,192,.45),transparent 65%); pointer-events:none; }
.wacct-eyebrow{ display:inline-block; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:var(--marigold); margin-bottom:.5em; }
.wacct-hero h2{ font-family:var(--ff-display); font-weight:600; color:#fff; margin:0 0 .25em;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.06; letter-spacing:-.01em; }
.wacct-chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0; position:relative; z-index:1; }
.wacct-chip{ font-size:.8rem; color:#f3dcec; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24); border-radius:var(--rad-pill); padding:.36em .85em; }

/* loyalty punch card inside hero */
.wacct-loyal{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:1; }
.wacct-loyal-title{ font-weight:700; color:#fff; margin:0 0 4px; }
.wacct-loyal-sub{ color:#e7cfe0; font-size:.88rem; margin:0 0 14px; }
.wacct-stamps{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.wacct-stamp{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  border:2px dashed rgba(255,255,255,.45); color:rgba(255,255,255,.55); background:rgba(255,255,255,.06);
  transition:transform .3s var(--ease); }
.wacct-stamp svg{ width:24px; height:24px; }
.wacct-stamp.on{ border-style:solid; border-color:var(--marigold); color:#fff;
  background:rgba(242,169,59,.18); animation:wacctStampIn .45s var(--ease) backwards; }
.wacct-stamp.on:nth-child(2){ animation-delay:.08s; } .wacct-stamp.on:nth-child(3){ animation-delay:.16s; }
@keyframes wacctStampIn{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.wacct-stamp.spa{ width:auto; min-width:54px; padding:0 16px; border-radius:var(--rad-pill);
  font-weight:800; font-size:.8rem; letter-spacing:.05em; }
.wacct-stamp.spa.earned{ border-style:solid; background:var(--marigold); color:#3a2406; border-color:var(--marigold);
  box-shadow:0 8px 22px -8px rgba(242,169,59,.8); animation:wacctStampIn .45s var(--ease) .24s backwards; }
.wacct-earned-note{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-weight:700;
  color:#3a2406; background:var(--marigold); border-radius:var(--rad-pill); padding:.5em 1em; font-size:.88rem; }

/* ---- grid of cards ---- */
.wacct-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start; }
@media(max-width:760px){ .wacct-grid{ grid-template-columns:1fr; } }
.wacct-col{ display:grid; gap:22px; }
.wacct-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--rad-lg);
  padding:24px 26px; box-shadow:var(--shadow-soft); }
.wacct-card h3{ font-family:var(--ff-display); font-weight:600; color:var(--ink); margin:0 0 4px;
  font-size:1.25rem; display:flex; align-items:center; gap:9px; }
.wacct-card h3 svg{ color:var(--magenta); flex:none; }
.wacct-card .sub{ color:var(--ink-2); font-size:.86rem; margin:0 0 16px; }

/* upcoming appointments */
.wacct-appt{ display:flex; gap:14px; align-items:center; padding:12px 0; border-top:1px dashed var(--line); }
.wacct-appt:first-of-type{ border-top:0; padding-top:2px; }
.wacct-date{ flex:0 0 58px; text-align:center; background:var(--cream); border:1px solid var(--line);
  border-radius:12px; padding:8px 4px; line-height:1.15; }
.wacct-date b{ display:block; color:var(--magenta); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.wacct-date span{ font-weight:700; color:var(--ink); font-size:.95rem; }
.wacct-appt-meta{ min-width:0; flex:1; }
.wacct-appt-meta b{ display:block; color:var(--ink); }
.wacct-appt-meta small{ color:var(--ink-2); }
.wacct-stage{ flex:none; font-size:.72rem; font-weight:700; color:var(--magenta);
  background:rgba(182,48,159,.09); border-radius:var(--rad-pill); padding:.35em .8em; white-space:nowrap; }

/* pets & records */
.wacct-pet{ border-top:1px dashed var(--line); padding:14px 0 4px; }
.wacct-pet:first-of-type{ border-top:0; padding-top:0; }
.wacct-pet-name{ font-family:var(--ff-display); font-size:1.05rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
.wacct-pet-name small{ font-family:var(--ff-body,inherit); font-size:.75rem; font-weight:700; color:var(--ink-2); }
.wacct-doc{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.wacct-doc .tag{ flex:none; width:38px; height:26px; display:grid; place-items:center; border-radius:8px;
  background:rgba(182,48,159,.1); color:var(--magenta); font-size:.66rem; font-weight:800; }
.wacct-doc .nm{ min-width:0; flex:1; font-size:.88rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wacct-doc .nm small{ display:block; font-weight:400; color:var(--ink-2); font-size:.74rem; }
.wacct-doc a{ flex:none; font-size:.82rem; font-weight:700; color:var(--magenta); text-decoration:none; }
.wacct-doc a:hover{ text-decoration:underline; }

/* quick actions + account */
.wacct-actions{ display:grid; gap:10px; }
.wacct-action{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:14px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; font-weight:700;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.wacct-action svg{ color:var(--magenta); flex:none; transition:transform .25s var(--ease); }
.wacct-action:hover{ transform:translateY(-2px); border-color:var(--magenta); box-shadow:var(--shadow-soft); }
.wacct-action:hover svg{ transform:scale(1.12) rotate(-5deg); }
.wacct-action small{ display:block; font-weight:400; color:var(--ink-2); font-size:.78rem; }

.wacct-btn{ appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--magenta),var(--plum)); border-radius:var(--rad-pill);
  padding:.85em 1.5em; display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  box-shadow:var(--shadow-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.wacct-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:#fff; }
.wacct-btn.ghost{ background:transparent; color:var(--ink-2); border:1.5px solid var(--line); box-shadow:none; }
.wacct-btn.ghost:hover{ border-color:var(--magenta); color:var(--magenta); }

/* empty states */
.wacct-empty{ text-align:center; color:var(--ink-2); font-size:.9rem; padding:16px 6px; }
.wacct-empty a{ color:var(--magenta); font-weight:700; text-decoration:none; }

/* ---- gate (logged-out login card) ---- */
.wacct--gate{ max-width:440px; }
.wacct-login{ border-radius:var(--rad-lg); overflow:hidden; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow); }
.wacct-login-head{ background:linear-gradient(150deg,var(--plum-850),var(--plum-700) 60%,var(--plum-deep));
  color:#fff; text-align:center; padding:30px 26px 24px; }
.wacct-login-head h2{ font-family:var(--ff-display); color:#fff; margin:.1em 0 .2em; }
.wacct-login-head .wacct-sub{ color:#e7cfe0; font-size:.9rem; margin:0; }
.wacct-login-form{ padding:26px; display:grid; gap:14px; }
.wacct-login-form label span{ display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--ink); }
.wacct-login-form input[type=text], .wacct-login-form input[type=password]{
  width:100%; font:inherit; padding:.8em 1em; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.wacct-login-form input:focus{ outline:0; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(182,48,159,.15); }
.wacct-login-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.85rem; }
.wacct-remember{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; }
.wacct-remember input{ width:17px; height:17px; accent-color:var(--magenta); }
.wacct-login-row a{ color:var(--magenta); font-weight:600; text-decoration:none; }
.wacct-login-form .wacct-btn{ width:100%; justify-content:center; }

/* focus + motion discipline */
.wacct :is(a,button,input):focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .wacct *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* inline login failure (bounced back from wp-login) */
.wacct-login-error{
  margin:0 0 2px; padding:.7rem .95rem; font-size:.88rem; line-height:1.45; color:#8f1d3f;
  background:rgba(216,69,107,.09); border:1.5px solid rgba(216,69,107,.35); border-radius:12px;
}

/* reset-flow success notice */
.wacct-login-ok{
  margin:0 0 2px; padding:.7rem .95rem; font-size:.88rem; line-height:1.45; color:#1c6b3c;
  background:rgba(38,140,80,.09); border:1.5px solid rgba(38,140,80,.32); border-radius:12px;
}