/* Wanda's Pet Grooming — Service Status tracker
   Self-contained, brand-cohesive styling (plum / magenta / cream / marigold). */

.wandas-status{
  --wps-plum:#2b1022; --wps-plum-2:#3a1730; --wps-magenta:#c01f86; --wps-magenta-2:#e24da6;
  --wps-cream:#f7efe7; --wps-paper:#fffdfb; --wps-marigold:#e8a13a;
  --wps-ink:#26121f; --wps-ink-2:#806f78; --wps-line:#ece1d8; --wps-ok:#2f9e6f;
  --wps-rad:18px;
  max-width:780px; margin:0 auto; color:var(--wps-ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;
}
.wandas-status *{ box-sizing:border-box; }
.wandas-status h2,.wandas-status h3{
  font-family:"Fraunces","Georgia",serif; line-height:1.08; margin:0; color:var(--wps-plum);
}

/* ---- Lookup card ---------------------------------------------------- */
.wps-card{
  background:var(--wps-paper); border:1px solid var(--wps-line); border-radius:var(--wps-rad);
  padding:clamp(22px,4vw,38px); box-shadow:0 18px 50px -28px rgba(43,16,34,.5);
}
.wps-eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wps-magenta); margin:0 0 .55em;
}
.wps-lookup h2{ font-size:clamp(1.55rem,1.1rem+1.7vw,2.2rem); }
.wps-lookup p.sub{ color:var(--wps-ink-2); margin:.5em 0 1.4em; }
.wps-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wps-field{ display:flex; flex-direction:column; gap:6px; }
.wps-field label{ font-size:.82rem; font-weight:700; color:var(--wps-plum-2); }
.wps-field input{
  width:100%; padding:13px 15px; font-size:1rem; font-family:inherit; color:var(--wps-ink);
  background:#fff; border:1.5px solid var(--wps-line); border-radius:12px; transition:border-color .15s,box-shadow .15s;
}
.wps-field input:focus{ outline:none; border-color:var(--wps-magenta); box-shadow:0 0 0 4px rgba(192,31,134,.14); }
.wps-actions{ display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; }
.wps-btn{
  appearance:none; cursor:pointer; border:0; border-radius:999px; font-family:inherit;
  font-weight:700; font-size:1rem; padding:13px 26px; color:#fff;
  background:linear-gradient(135deg,var(--wps-magenta),var(--wps-plum-2));
  box-shadow:0 10px 24px -10px rgba(192,31,134,.7); transition:transform .12s,box-shadow .12s,filter .12s;
}
.wps-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.wps-btn:active{ transform:translateY(0); }
.wps-btn[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.wps-link{ background:none; border:0; cursor:pointer; font-family:inherit; font-weight:700;
  color:var(--wps-magenta); font-size:.95rem; padding:4px 0; }
.wps-link:hover{ text-decoration:underline; }
.wps-err{ color:#b3261e; font-size:.9rem; margin-top:12px; font-weight:600; }
.wps-hint{ color:var(--wps-ink-2); font-size:.85rem; margin-top:10px; }

/* ---- Result card ---------------------------------------------------- */
.wps-results{ display:flex; flex-direction:column; gap:18px; }
.wps-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin:6px 0 2px; flex-wrap:wrap; }
.wps-pet{ font-size:clamp(1.5rem,1.1rem+1.4vw,2rem); }
.wps-meta{ color:var(--wps-ink-2); font-size:.92rem; margin-top:4px; }
.wps-meta b{ color:var(--wps-plum-2); font-weight:700; }
.wps-when{
  flex:0 0 auto; text-align:right; font-size:.86rem; color:var(--wps-ink-2);
  background:var(--wps-cream); border:1px solid var(--wps-line); border-radius:12px; padding:8px 13px;
}
.wps-order{ font-variant-numeric:tabular-nums; color:var(--wps-plum-2); font-weight:700; }

/* Stepper */
.wps-track{ margin:26px 2px 8px; }
.wps-steps{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column;
  grid-auto-columns:1fr; position:relative; }
.wps-steps::before{ content:""; position:absolute; left:0; right:0; top:13px; height:3px;
  background:var(--wps-line); border-radius:3px; }
.wps-prog{ position:absolute; left:0; top:13px; height:3px; width:var(--wps-pct,0%); border-radius:3px;
  background:linear-gradient(90deg,var(--wps-magenta),var(--wps-marigold)); transition:width .5s ease; }
.wps-step{ position:relative; text-align:center; padding-top:0; }
.wps-dot{
  width:28px; height:28px; border-radius:50%; margin:0 auto 8px; position:relative; z-index:1;
  background:#fff; border:3px solid var(--wps-line); display:flex; align-items:center; justify-content:center;
  font-size:13px; color:transparent; transition:all .25s;
}
.wps-step.done .wps-dot{ background:var(--wps-magenta); border-color:var(--wps-magenta); color:#fff; }
.wps-step.current .wps-dot{ background:#fff; border-color:var(--wps-magenta);
  box-shadow:0 0 0 5px rgba(192,31,134,.16); color:var(--wps-magenta); }
.wps-step.current .wps-dot::after{ content:""; width:11px; height:11px; border-radius:50%; background:var(--wps-magenta); }
.wps-slabel{ font-size:.72rem; line-height:1.25; color:var(--wps-ink-2); font-weight:600; }
.wps-step.done .wps-slabel,.wps-step.current .wps-slabel{ color:var(--wps-plum); }
.wps-step.current .wps-slabel{ font-weight:800; }

.wps-statusline{ margin-top:18px; font-size:1.02rem; }
.wps-statusline b{ color:var(--wps-magenta); }
.wps-cancelled{ color:#b3261e; font-weight:700; }

/* Groomer controls */
.wps-edit{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--wps-line); }
.wps-edit-label{ font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wps-ink-2); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.wps-edit-label::before{ content:"🔧"; font-size:.95rem; }
.wps-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.wps-chip{
  cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:700; padding:8px 14px;
  border-radius:999px; border:1.5px solid var(--wps-line); background:#fff; color:var(--wps-plum-2);
  transition:all .14s;
}
.wps-chip:hover{ border-color:var(--wps-magenta); color:var(--wps-magenta); }
.wps-chip.active{ background:var(--wps-magenta); border-color:var(--wps-magenta); color:#fff; cursor:default; }
.wps-chip[disabled]{ opacity:.55; cursor:default; }
.wps-saved{ color:var(--wps-ok); font-weight:700; font-size:.85rem; margin-top:10px; min-height:1.1em; }

/* Empty / loading */
.wps-state{ text-align:center; padding:14px 4px; }
.wps-state .emoji{ font-size:2.2rem; }
.wps-state h3{ font-size:1.3rem; margin:.4em 0 .3em; }
.wps-state p{ color:var(--wps-ink-2); margin:.2em 0 1em; }
.wps-spinner{ width:30px; height:30px; border-radius:50%; border:3px solid var(--wps-line);
  border-top-color:var(--wps-magenta); animation:wps-spin .8s linear infinite; margin:8px auto; }
@keyframes wps-spin{ to{ transform:rotate(360deg); } }

@media (max-width:560px){
  .wps-fields{ grid-template-columns:1fr; }
  .wps-when{ text-align:left; }
  /* vertical stepper on small screens */
  .wps-steps{ grid-auto-flow:row; grid-auto-columns:auto; gap:2px; }
  .wps-steps::before{ left:13px; right:auto; top:0; bottom:0; width:3px; height:auto; }
  .wps-prog{ left:13px; right:auto; top:0; width:3px !important; height:var(--wps-pct,0%); }
  .wps-step{ display:grid; grid-template-columns:28px 1fr; align-items:center; gap:12px; text-align:left; padding:7px 0; }
  .wps-dot{ margin:0; }
  .wps-slabel{ font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce){
  .wps-prog,.wps-dot,.wps-btn,.wps-chip{ transition:none; }
  .wps-spinner{ animation-duration:0s; }
}

/* v0.11.0: focus + selection parity */
:is(.wps-btn,.wps-link,.wps-chip,#wpsPet,#wpsRef):focus-visible{ outline:3px solid #f2a93b; outline-offset:2px; }
.wps-chip{ transition:transform .18s cubic-bezier(.22,.61,.36,1), border-color .18s, background .18s; }
.wps-chip:not([disabled]):hover{ transform:translateY(-1px); }