/* =====================================================================
   Wellness Dream Center — real booking widget
   Multi-step: soin → date & heure → infos + vérification → paiement → confirmé
   Built on site.css tokens. Rendered into #wdcBooking by booking.js.
   ===================================================================== */

.wdc-booking{ --bk-gap:clamp(20px,3vw,34px); color:var(--ink); }
/* safety net: any inline icon defaults to a small inline size unless a more specific rule overrides */
.wdc-booking svg{ width:18px; height:18px; flex:0 0 auto; }

/* ---------- step rail ---------- */
.bk-steps{
  display:flex; align-items:flex-start; gap:0;
  padding:6px 4px clamp(22px,3vw,30px);
  list-style:none; margin:0;
}
.bk-steps li{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; min-width:0; }
.bk-steps li::before{ /* connector */
  content:""; position:absolute; top:18px; inset-inline-start:-50%; width:100%; height:1.5px;
  background:var(--line); z-index:0;
}
.bk-steps li:first-child::before{ display:none; }
.bk-steps li.done::before, .bk-steps li.active::before{ background:var(--gold-line); }
.bk-steps .bk-bullet{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; position:relative; z-index:1;
  display:grid; place-items:center; background:var(--bg-2); border:1.5px solid var(--line);
  font-family:var(--mono); font-size:.82rem; color:var(--muted); transition:.35s var(--ease);
}
.bk-steps .bk-bullet svg{ width:17px; height:17px; }
.bk-steps li.active .bk-bullet{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,78,.1); box-shadow:0 0 0 4px rgba(201,162,78,.08); }
.bk-steps li.done .bk-bullet{ background:var(--gold); border-color:var(--gold); color:#1a1306; }
.bk-steps .bk-slab{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center; line-height:1.3; transition:color .35s var(--ease);
  padding-inline:4px;
}
.bk-steps li.active .bk-slab{ color:var(--gold-soft); }
.bk-steps li.done .bk-slab{ color:var(--ink-soft); }
@media (max-width:620px){
  .bk-steps li .bk-slab{ display:none; }
  .bk-steps li.active .bk-slab{ display:block; position:absolute; top:46px; white-space:nowrap; }
  .bk-steps{ padding-bottom:46px; }
}

/* ---------- stage / panels ---------- */
.bk-stage{ position:relative; }
.bk-panel{ display:none; animation:bkFade .45s var(--ease); }
.bk-panel.active{ display:block; }
@keyframes bkFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.bk-phead{ margin-bottom:22px; }
.bk-phead h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:-.02em; }
.bk-phead p{ color:var(--muted); font-size:.94rem; margin-top:8px; max-width:60ch; }

/* ---------- step 1 · categories ---------- */
.bk-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .bk-cats{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .bk-cats{ grid-template-columns:repeat(2,1fr); } }
.bk-cat{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:start;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  cursor:pointer; transition:.3s var(--ease); position:relative; overflow:hidden;
}
.bk-cat:hover{ border-color:var(--gold-line); transform:translateY(-3px); background:var(--bg-3); }
.bk-cat.on{ border-color:var(--gold); background:rgba(201,162,78,.08); }
.bk-cat .bk-cic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--gold-line); background:rgba(201,162,78,.05); flex-shrink:0; }
.bk-cat .bk-cic svg{ width:21px; height:21px; }
.bk-cat b{ font-family:var(--serif); font-weight:500; font-size:1.02rem; line-height:1.2; }
.bk-cat .bk-cfrom{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--muted); margin-top:-4px; }
.bk-cat .bk-ctick{ position:absolute; top:14px; inset-inline-end:14px; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#1a1306; display:grid; place-items:center; opacity:0; transform:scale(.6); transition:.3s var(--ease); }
.bk-cat .bk-ctick svg{ width:12px; height:12px; }
.bk-cat.on .bk-ctick{ opacity:1; transform:none; }

/* ---------- step 1 · services ---------- */
.bk-svcs{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.bk-svcs-h{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.bk-svc{
  display:flex; align-items:center; gap:16px; width:100%; text-align:start;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  cursor:pointer; transition:.25s var(--ease);
}
.bk-svc:hover{ border-color:var(--gold-line); background:var(--bg-2); }
.bk-svc.on{ border-color:var(--gold); background:rgba(201,162,78,.07); }
.bk-svc .bk-radio{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
  display:grid; place-items:center; transition:.25s; }
.bk-svc .bk-radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); transform:scale(0); transition:.25s var(--ease); }
.bk-svc.on .bk-radio{ border-color:var(--gold); }
.bk-svc.on .bk-radio::after{ transform:scale(1); }
.bk-svc .bk-sinfo{ flex:1; min-width:0; }
.bk-svc .bk-sinfo b{ font-weight:600; font-size:.98rem; display:block; }
.bk-svc .bk-sinfo span{ color:var(--muted); font-size:.82rem; display:inline-flex; align-items:center; gap:6px; }
.bk-svc .bk-sinfo span svg{ width:13px; height:13px; color:var(--gold); }
.bk-svc .bk-sprice{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-soft); white-space:nowrap; }

/* custom-package banner on the date step */
.bk-pkgbanner{ display:flex; align-items:center; gap:10px; margin-bottom:20px; padding:13px 18px;
  border:1px solid var(--gold-line); border-radius:var(--r); background:rgba(201,162,78,.07);
  font-size:.9rem; color:var(--ink); }
.bk-pkgbanner svg{ color:var(--gold); }
.bk-pkgbanner span{ font-weight:500; }
[data-lang="ar"] .bk-pkgbanner span{ direction:rtl; }

/* ---------- step 2 · horizontal calendar ---------- */
.bk-monthbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.bk-monthbar b{ font-family:var(--serif); font-weight:500; font-size:1.05rem; }
.bk-cal-nav{ display:flex; gap:8px; }
.bk-cal-nav button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink);
  display:grid; place-items:center; transition:.25s; }
.bk-cal-nav button:hover:not(:disabled){ border-color:var(--gold-line); color:var(--gold); }
.bk-cal-nav button:disabled{ opacity:.3; cursor:not-allowed; }
.bk-cal-nav button svg{ width:16px; height:16px; }
.bk-cal{ display:flex; align-items:stretch; gap:10px; position:relative; }
.bk-cal-strip{ display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px 12px; flex:1;
  scrollbar-width:thin; scrollbar-color:var(--gold-line) transparent; }
.bk-cal-strip::-webkit-scrollbar{ height:6px; }
.bk-cal-strip::-webkit-scrollbar-thumb{ background:var(--gold-line); border-radius:100px; }
.bk-cal-strip::-webkit-scrollbar-track{ background:transparent; }
.bk-day{
  flex:0 0 auto; width:74px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
  padding:14px 8px; text-align:center; cursor:pointer; transition:.25s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.bk-day:hover:not(.disabled){ border-color:var(--gold-line); transform:translateY(-2px); }
.bk-day.on{ border-color:var(--gold); background:rgba(201,162,78,.12); }
.bk-day.disabled{ opacity:.32; cursor:not-allowed; }
.bk-day .dow{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.bk-day .dn{ font-family:var(--serif); font-size:1.5rem; font-weight:400; line-height:1; }
.bk-day.on .dn{ color:var(--gold-soft); }
.bk-day .dm{ font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.bk-day .ddot{ width:4px; height:4px; border-radius:50%; background:var(--gold); margin-top:2px; opacity:0; }
.bk-day.on .ddot{ opacity:1; }

/* time slots */
.bk-times-wrap{ margin-top:24px; }
.bk-times-h{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.bk-times{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.bk-time{
  border:1px solid var(--line); border-radius:100px; background:var(--bg-2); color:var(--ink-soft);
  padding:.72em .6em; font-family:var(--mono); font-size:.86rem; letter-spacing:.04em; transition:.25s var(--ease);
}
.bk-time:hover:not(.disabled){ border-color:var(--gold-line); color:#fff; }
.bk-time.on{ background:var(--gold); border-color:var(--gold); color:#1a1306; font-weight:500; }
.bk-time.disabled{ opacity:.28; cursor:not-allowed; text-decoration:line-through; }
.bk-empty{ color:var(--faint); font-size:.9rem; padding:18px 0; }

/* practitioner select */
.bk-pract{ margin-top:24px; }
.bk-pract-h{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.bk-pract-row{ display:flex; flex-wrap:wrap; gap:10px; }
.bk-chip{
  display:inline-flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:100px; padding:.55em 1em .55em .6em; color:var(--ink-soft); font-size:.88rem; font-weight:500;
  cursor:pointer; transition:.25s var(--ease);
}
.bk-chip:hover{ border-color:var(--gold-line); color:#fff; }
.bk-chip.on{ border-color:var(--gold); background:rgba(201,162,78,.1); color:#fff; }
.bk-chip .av{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:.78rem; color:var(--gold);
  background:linear-gradient(135deg,var(--bg-3),var(--bg-2)); border:1px solid var(--gold-line); }

/* ---------- step 3 · form + verification ---------- */
.bk-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bk-field{ display:flex; flex-direction:column; gap:8px; }
.bk-field.full{ grid-column:1 / -1; }
.bk-field label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bk-field input, .bk-field select{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink);
  padding:.85em 1em; font-size:.95rem; font-family:var(--sans); outline:none; transition:border-color .25s; width:100%;
}
.bk-field input:focus, .bk-field select:focus{ border-color:var(--gold-line); }
.bk-field input::placeholder{ color:var(--faint); }
.bk-field input.bad{ border-color:var(--danger,#cd8473); }
.bk-err{ font-size:.76rem; color:#cd8473; min-height:1px; }

/* verification block */
.bk-verify{
  grid-column:1 / -1; margin-top:6px; border:1px dashed var(--gold-line); border-radius:var(--r-lg);
  padding:20px; background:repeating-linear-gradient(135deg, rgba(201,162,78,.022) 0 12px, transparent 12px 24px);
}
.bk-verify-top{ display:flex; align-items:center; gap:12px; }
.bk-verify-top .vic{ width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  color:var(--gold); border:1px solid var(--gold-line); background:rgba(201,162,78,.06); }
.bk-verify-top .vic svg{ width:19px; height:19px; }
.bk-verify-top b{ font-size:.96rem; display:block; }
.bk-verify-top span{ color:var(--muted); font-size:.82rem; }
.bk-otp{ display:flex; gap:10px; margin-top:16px; }
.bk-otp input{ width:56px; height:60px; text-align:center; font-family:var(--serif); font-size:1.5rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); outline:none; transition:.25s; }
.bk-otp input:focus{ border-color:var(--gold); }
.bk-verify-actions{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.bk-verify-actions .hint{ font-family:var(--mono); font-size:.72rem; color:var(--faint); }
.bk-verify.ok{ border-style:solid; border-color:var(--ok-line,rgba(127,176,138,.4)); background:rgba(127,176,138,.06); }
.bk-verify.ok .vic{ color:var(--ok,#7fb08a); border-color:var(--ok-line,rgba(127,176,138,.4)); background:rgba(127,176,138,.1); }

/* ---------- step 4 · payment ---------- */
.bk-pay-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--bk-gap); align-items:start; }
@media (max-width:820px){ .bk-pay-grid{ grid-template-columns:1fr; } }
.bk-paymethods{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.bk-pm{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--r); padding:15px 18px;
  cursor:pointer; transition:.25s var(--ease); background:var(--bg-2); }
.bk-pm:hover{ border-color:var(--gold-line); }
.bk-pm.on{ border-color:var(--gold); background:rgba(201,162,78,.07); }
.bk-pm .bk-radio{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:grid; place-items:center; }
.bk-pm .bk-radio::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); transform:scale(0); transition:.25s var(--ease); }
.bk-pm.on .bk-radio{ border-color:var(--gold); }
.bk-pm.on .bk-radio::after{ transform:scale(1); }
.bk-pm .pm-ic{ width:24px; color:var(--gold); flex-shrink:0; }
.bk-pm .pm-meta b{ font-size:.95rem; display:block; font-weight:600; }
.bk-pm .pm-meta span{ color:var(--muted); font-size:.8rem; }
.bk-card{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bk-card .bk-field.full{ grid-column:1 / -1; }
.bk-cardrow{ display:flex; align-items:center; gap:10px; }
.bk-securenote{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:.8rem; color:var(--muted); }
.bk-securenote svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; }

/* recap card */
.bk-recap{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; position:sticky; top:100px; }
.bk-recap h4{ font-family:var(--serif); font-weight:500; font-size:1.1rem; margin-bottom:16px; }
.bk-recap-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.bk-recap-list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--line-2); font-size:.9rem; }
.bk-recap-list li .k{ color:var(--muted); font-size:.78rem; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.bk-recap-list li .v{ color:var(--ink); text-align:end; font-weight:500; }
.bk-recap-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.bk-recap-total .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.bk-recap-total .v{ font-family:var(--serif); font-size:2rem; font-weight:300; letter-spacing:-.02em; }
.bk-recap-total .v small{ font-family:var(--sans); font-size:.82rem; color:var(--muted); }

/* ---------- step 5 · confirmation ---------- */
.bk-success{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; padding:clamp(20px,4vw,40px) 0; }
.bk-success .bk-check{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:var(--ok,#7fb08a);
  border:1.5px solid var(--ok-line,rgba(127,176,138,.4)); background:rgba(127,176,138,.08);
  animation:bkPop .5s var(--ease); }
.bk-success .bk-check svg{ width:40px; height:40px; }
@keyframes bkPop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); opacity:1; } }
.bk-success h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); }
.bk-success p{ color:var(--muted); max-width:48ch; }
.bk-ref{ font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; color:var(--gold-soft);
  border:1px solid var(--gold-line); background:rgba(201,162,78,.06); border-radius:100px; padding:.55em 1.2em; }
.bk-success-card{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 28px;
  width:100%; max-width:460px; text-align:start; margin-top:6px; }
.bk-success-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }

/* ---------- nav footer ---------- */
.bk-nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:var(--bk-gap);
  padding-top:22px; border-top:1px solid var(--line); }
.bk-nav .bk-back{ visibility:hidden; }
.bk-nav .bk-back.show{ visibility:visible; }
.bk-mini-recap{ font-size:.84rem; color:var(--muted); display:flex; align-items:baseline; gap:8px; }
.bk-mini-recap b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--ink); }
.bk-mini-recap b small{ font-family:var(--sans); font-size:.7rem; color:var(--muted); }
@media (max-width:560px){ .bk-mini-recap{ display:none; } }

.bk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:.95em 1.7em; border-radius:100px;
  font-family:var(--sans); font-weight:600; font-size:.92rem; border:1px solid transparent; transition:.4s var(--ease); white-space:nowrap; }
.bk-btn .ar{ transition:transform .4s var(--ease); display:inline-flex; }
.bk-btn:hover .ar{ transform:translateX(4px); }
.bk-btn-gold{ background:var(--gold); color:#1a1306; box-shadow:0 16px 40px -18px rgba(201,162,78,.55); }
.bk-btn-gold:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.bk-btn-gold:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
.bk-btn-ghost{ border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.015); }
.bk-btn-ghost:hover{ border-color:var(--gold-line); color:#fff; transform:translateY(-2px); }
.bk-btn-sm{ padding:.7em 1.2em; font-size:.84rem; }

/* RTL: keep latin tokens (times, prices, card) ltr */
[data-lang="ar"] .bk-time, [data-lang="ar"] .bk-day .dn, [data-lang="ar"] .bk-sprice,
[data-lang="ar"] .bk-recap-total .v, [data-lang="ar"] .bk-ref, [data-lang="ar"] .bk-otp{ direction:ltr; unicode-bidi:embed; }

/* =====================================================================
   package card — two-button action row (used on index + packages pages)
   ===================================================================== */
.pk-actions{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.pk-actions .btn{ width:100%; }