/* Wanda's Pet Grooming — booking & receptionist styles (ported from Layer A).
   Self-contained: maps to the theme's design tokens when present, with safe
   fallbacks so the plugin also works under other themes. */
:root{
  --magenta:var(--wp--preset--color--magenta,#b6309f);
  --magenta-2:var(--wp--preset--color--magenta-2,#d24bc0);
  --plum:var(--wp--preset--color--plum,#7e2b73);
  --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; --err:#d8456b;
  --ff-display:var(--wp--preset--font-family--display,"Fraunces",Georgia,serif);
  --ff-body:var(--wp--preset--font-family--body,"Hanken Grotesk",system-ui,sans-serif);
  --step-0:1.05rem; --step-1:1.3rem; --step--1:.85rem; --step-2:1.7rem;
  --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);
  --ease:cubic-bezier(.22,.61,.36,1);
}
.wandas-booking-root,#wandasChatPanel,#wandasChatFab{font-family:var(--ff-body)}
.wandas-booking-root *,.wandas-booking-root *::before,.wandas-booking-root *::after,
#wandasChatPanel *,#wandasChatPanel *::before,#wandasChatPanel *::after{box-sizing:border-box}
.wandas-booking-root .inp,.wandas-booking-root textarea.inp{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.fade-in{animation:wandasFadeUp .5s var(--ease) both}
@keyframes wandasFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* buttons (booking UI) */
.wandas-booking-root .btn,.wandas-booking-root a.btn{--bg:var(--magenta);--c:#fff;appearance:none;border:0;cursor:pointer;
  font-family:var(--ff-body);font-weight:700;font-size:var(--step-0);background:var(--bg);color:var(--c);
  padding:.85em 1.5em;border-radius:var(--rad-pill);display:inline-flex;align-items:center;gap:.5em;text-decoration:none;line-height:1;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 10px 22px -12px rgba(182,48,159,.9)}
.wandas-booking-root .btn:hover{transform:translateY(-2px)}
.wandas-booking-root .btn[disabled],.wandas-booking-root .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wandas-booking-root .btn.ghost{--bg:transparent;--c:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.wandas-booking-root .btn.ghost:hover{background:rgba(182,48,159,.08);border-color:var(--magenta)}
.wandas-booking-root .btn.loading{pointer-events:none}
.wandas-booking-root .spin{width:1em;height:1em;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:wandasSpin .7s linear infinite;display:inline-block}
@keyframes wandasSpin{to{transform:rotate(360deg)}}
.booking{max-width:760px;margin-inline:auto}
.steps{display:flex;gap:6px;margin-bottom:30px;list-style:none;padding:0;flex-wrap:wrap}
.steps li{flex:1;min-width:90px;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--ink-2);
  text-transform:uppercase;padding-top:14px;border-top:3px solid var(--line);transition:.3s}
.steps li[aria-current="step"]{color:var(--magenta);border-top-color:var(--magenta)}
.steps li.done{color:var(--ok);border-top-color:var(--ok)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad-lg);padding:clamp(22px,4vw,40px);box-shadow:var(--shadow-soft)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice{appearance:none;text-align:left;cursor:pointer;background:var(--cream);border:2px solid var(--line);
  border-radius:var(--rad);padding:22px;font:inherit;transition:.2s;display:flex;gap:14px;align-items:center}
.choice:hover{border-color:var(--magenta);transform:translateY(-2px)}
.choice[aria-pressed="true"]{border-color:var(--magenta);background:rgba(182,48,159,.07);box-shadow:0 0 0 3px rgba(182,48,159,.12)}
.choice:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.choice .emoji{font-size:2rem}
.choice b{display:block}.choice small{color:var(--ink-2)}
label.fld{display:block;margin-bottom:16px}
label.fld>span{display:block;font-weight:600;font-size:var(--step--1);margin-bottom:6px}
.inp{width:100%;font:inherit;padding:.8em 1em;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:.2s}
.inp:focus{outline:0;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(182,48,159,.15)}
.inp[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(216,69,107,.14)}
.err-msg{color:var(--err);font-size:.78rem;margin-top:5px;display:flex;gap:5px;align-items:center}
.combo{position:relative}
.combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
  border-radius:12px;max-height:240px;overflow:auto;box-shadow:var(--shadow);padding:6px}
.combo-list button{display:flex;justify-content:space-between;width:100%;text-align:left;background:none;border:0;
  padding:.6em .7em;border-radius:8px;cursor:pointer;font:inherit}
.combo-list button:hover,.combo-list button.hl{background:rgba(182,48,159,.1)}
.combo-list .muted{color:var(--ink-2);font-size:.85em}
.combo-empty{padding:.7em;color:var(--ink-2);font-size:.85rem}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc{cursor:pointer;border:2px solid var(--line);border-radius:var(--rad);padding:18px;transition:.2s;background:var(--cream)}
.svc:hover{border-color:var(--magenta)}
.svc.sel{border-color:var(--magenta);background:rgba(182,48,159,.07)}
.svc .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.svc b{font-size:var(--step-1)}
.svc .price{font-family:var(--ff-display);color:var(--magenta);font-weight:600;font-size:var(--step-1)}
.svc small{color:var(--ink-2)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal .dow{font-size:.7rem;text-align:center;color:var(--ink-2);font-weight:700}
.day{aspect-ratio:1;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.15s;line-height:1.1}
.day:hover:not([disabled]){border-color:var(--magenta)}
.day[disabled]{opacity:.32;cursor:not-allowed}
.day.sel{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.day small{font-size:.6rem;opacity:.7}
.slots{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.slot{border:1.5px solid var(--line);border-radius:var(--rad-pill);background:#fff;padding:.55em 1em;cursor:pointer;font:inherit;font-size:.85rem;transition:.15s}
.slot:hover:not([disabled]){border-color:var(--magenta)}
.slot[disabled]{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.slot.sel{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.summary{background:var(--cream);border-radius:var(--rad);padding:20px;margin:8px 0 20px}
.summary .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.summary .row:last-child{border:0}
.summary .total{font-family:var(--ff-display);font-size:var(--step-1);color:var(--magenta);font-weight:600}
.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.notice{background:linear-gradient(135deg,rgba(242,169,59,.16),rgba(255,122,92,.12));border:1px solid rgba(242,169,59,.4);
  border-radius:14px;padding:14px 16px;font-size:var(--step--1);display:flex;gap:10px;align-items:flex-start;margin-top:16px}
.success{text-align:center;padding:20px}
.success .check{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--ok),#2bbf86);
  display:grid;place-items:center;margin:0 auto 18px;color:#fff;animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.returning{background:rgba(47,158,111,.1);border:1px solid rgba(47,158,111,.4);border-radius:12px;padding:12px 14px;font-size:.85rem;margin-bottom:14px}

/* ============================================================
   AI RECEPTIONIST CHAT
   ============================================================ */
#wandasChatFab{position:fixed;right:22px;bottom:22px;z-index:80;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--magenta),var(--plum));color:#fff;box-shadow:0 14px 30px -10px rgba(182,48,159,.85);
  display:grid;place-items:center;transition:transform .25s var(--ease)}
#wandasChatFab:hover{transform:scale(1.08)}
#wandasChatFab:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
#wandasChatFab .badge{position:absolute;top:-2px;right:-2px;background:var(--marigold);color:#3a2406;font-size:.6rem;font-weight:800;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
#wandasChatPanel{position:fixed;right:22px;bottom:96px;z-index:81;width:min(380px,calc(100vw - 32px));height:min(560px,70vh);
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -20px rgba(20,4,16,.6);
  display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;
  transform:scale(.9) translateY(10px);opacity:0;pointer-events:none;transition:.25s var(--ease)}
#wandasChatPanel.open{transform:none;opacity:1;pointer-events:auto}
.chat-head{background:linear-gradient(135deg,var(--plum-700),var(--plum-deep));color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px}
.chat-head .av{width:40px;height:40px;border-radius:50%;background:var(--magenta);display:grid;place-items:center;font-size:1.2rem}
.chat-head b{display:block;line-height:1.2}.chat-head small{opacity:.8;display:flex;align-items:center;gap:5px}
.chat-head .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block}
.chat-head button{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;opacity:.8;padding:4px}
.chat-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.msg{max-width:82%;padding:.7em .9em;border-radius:16px;font-size:.9rem;line-height:1.45;animation:msgIn .3s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.msg.user{background:var(--magenta);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.msg.bot a{color:var(--magenta);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 6px}
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--rad-pill);padding:.45em .9em;font-size:.78rem;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--magenta);background:rgba(182,48,159,.07)}
.typing{display:flex;gap:4px;padding:.8em .9em;background:#fff;border:1px solid var(--line);border-radius:16px;align-self:flex-start;width:fit-content}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.chat-input input{flex:1;border:1.5px solid var(--line);border-radius:var(--rad-pill);padding:.7em 1em;font:inherit}
.chat-input input:focus{outline:0;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(182,48,159,.15)}
.chat-input button{width:44px;height:44px;border-radius:50%;border:0;background:var(--magenta);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.chat-input button:disabled{opacity:.4;cursor:not-allowed}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes wandasMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
