* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(160deg, #fdf0f5 0%, #fce8ef 50%, #fdf4f0 100%); min-height: 100vh; }

/* ── Pages ── */
.page { display: none; }
.page.active { display: block; }
@keyframes slideInRight { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-36px); } to { opacity:1; transform:translateX(0); } }
.page.active.dir-fwd  { animation: slideInRight .35s ease; }
.page.active.dir-back { animation: slideInLeft  .35s ease; }

/* ── Reveal (within-page) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Progress ── */
.sdot { width:2rem;height:2rem;border-radius:9999px;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;transition:all .4s; }
.sdot.active  { background:#9b51e0;border-color:#9b51e0;color:#fff; }
.sdot.done    { background:#9b51e0;border-color:#9b51e0;color:#fff; }
.sdot.pending { background:#fff;border-color:#cbd5e1;color:#94a3b8; }
.sline { height:3px;border-radius:9999px;flex:1;margin:0 4px;transition:background .4s; }
.sline.done    { background: linear-gradient(90deg,#9b51e0,#0693e3); }
.sline.pending { background: #e2e8f0; }

/* ── Toggle ── */
.toggle { overflow:hidden; transition:max-height .4s ease, opacity .35s ease; }
.toggle.off { max-height:0; opacity:0; pointer-events:none; }
.toggle.on  { max-height:800px; opacity:1; }

/* ── Inputs ── */
input,select,textarea { -webkit-appearance:none; appearance:none; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:#9b51e0; box-shadow:0 0 0 3px rgba(155,81,224,.15);
}

/* ── Country chips ── */
.country-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 6px;
  cursor:pointer; transition:all .18s; text-align:center; font-size:11px; font-weight:600;
}
.country-chip:hover  { border-color:#9b51e0; background:#f3ebfd; }
.country-chip.sel    { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }

/* ── Symptom chips (smaller, 4-col grid) ── */
.sym-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 4px;
  cursor:pointer; transition:all .18s; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.sym-chip:hover { border-color:#9b51e0; background:#f3ebfd; }
.sym-chip.sel   { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }
.sym-chip.sel p { color:#fff; }

/* ── Insurance chips ── */
.ins-chip {
  border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 8px;
  cursor:pointer; transition:all .18s; text-align:center;
}
.ins-chip:hover { border-color:#9b51e0; background:#f3ebfd; }
.ins-chip.sel   { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }
.ins-chip.sel .ins-sub { color:rgba(255,255,255,.75); }

/* ── Type cards ── */
.type-card {
  border:2px solid #e2e8f0; border-radius:14px; padding:14px 8px;
  cursor:pointer; transition:all .2s; text-align:center; flex:1;
}
.type-card:hover { border-color:#9b51e0; background:#f3ebfd; }
.type-card.sel   { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }
.type-card.sel .type-sub { color:rgba(255,255,255,.75); }

/* ── Clinic cards ── */
.clinic-card {
  border:2px solid #e2e8f0; border-radius:12px; padding:10px 8px;
  cursor:pointer; transition:all .2s; text-align:center;
}
.clinic-card:hover { border-color:#9b51e0; background:#f3ebfd; }
.clinic-card.sel   { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }
.clinic-card.sel .clinic-sub { color:rgba(255,255,255,.75); }

/* ── Slot cards ── */
.slot-card { border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 6px; cursor:pointer; transition:all .18s; text-align:center; }
.slot-card:hover { border-color:#9b51e0; background:#f3ebfd; }
.slot-card.sel   { border-color:#9b51e0; background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; }
.slot-card.busy  { background:#f8fafc; border-color:#f1f5f9; cursor:not-allowed; opacity:.5; }

/* ── Stripe ── */
.stripe-field {
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px;
  padding:12px 14px; font-size:14px; color:#94a3b8; letter-spacing:.08em;
}

/* ── Buttons ── */
.btn-p {
  width:100%; background:linear-gradient(135deg,#9b51e0,#0693e3);
  color:#fff; font-weight:700; padding:.9rem 1rem; border-radius:.75rem; font-size:.95rem;
  box-shadow:0 4px 14px rgba(155,81,224,.28); transition:all .2s; border:none; cursor:pointer;
}
.btn-p:hover  { filter:brightness(1.07); }
.btn-p:active { transform:scale(.97); }
.btn-o {
  width:100%; background:#fff; color:#9b51e0; font-weight:700;
  padding:.85rem 1rem; border-radius:.75rem; font-size:.875rem;
  border:2px solid #9b51e0; transition:all .2s; cursor:pointer;
}
.btn-o:hover  { background:#f3ebfd; }
.btn-o:active { transform:scale(.97); }

/* ── Pulse ── */
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(155,81,224,.5); }
  70%  { box-shadow:0 0 0 8px rgba(155,81,224,0); }
  100% { box-shadow:0 0 0 0 rgba(155,81,224,0); }
}
.pulse { animation:pulse-ring 1.8s infinite; }

/* ── Section divider ── */
.section-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem; border-radius:9999px; font-size:.7rem; font-weight:800;
  background:linear-gradient(135deg,#9b51e0,#0693e3); color:#fff; margin-right:.5rem; flex-shrink:0;
}

/* ── Availability board ── */
.slot-mini {
  border: 1.5px solid #e2e8f0; border-radius: 6px; padding: 5px 2px;
  cursor: pointer; transition: all .15s; text-align: center;
  font-size: 11px; font-weight: 700; color: #374151;
}
.slot-mini:hover { border-color: #9b51e0; background: #f3ebfd; color: #9b51e0; }
.slot-mini.sel   { border-color: #9b51e0; background: linear-gradient(135deg,#9b51e0,#0693e3); color: #fff; }
.slot-mini.busy  { background: #f8fafc; border-color: #f1f5f9; cursor: not-allowed; opacity: .4; text-decoration: line-through; color: #94a3b8; }
.slot-mini.earliest { border-color: #f59e0b; border-style: dashed; background: #fff; color: #374151; }
.slot-mini.earliest:hover { border-color: #9b51e0; border-style: solid; background: #f3ebfd; color: #9b51e0; }
.slot-mini.earliest.sel { border-color: #9b51e0; border-style: solid; background: linear-gradient(135deg,#9b51e0,#0693e3); color: #fff; }
.earliest-badge { display: block; font-size: 9px; font-weight: 700; color: #d97706; margin-top: 1px; line-height: 1.2; }
.slot-mini.sel .earliest-badge { color: rgba(255,255,255,.8); }

/* ── Calendar tabs (pill style) ── */
.tab-pill {
  border: none; cursor: pointer; color: #94a3b8; background: transparent;
}
.tab-pill:hover { color: #9b51e0; }
.tab-pill.active { background: #fff; color: #9b51e0; box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ── Language switcher ── */
.lang-btn {
  font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 6px;
  border: 1.5px solid #e2e8f0; background: white; cursor: pointer;
  color: #6b7280; transition: all .15s;
}
@media (max-width: 380px) {
  .lang-btn { font-size: 10px; padding: 2px 5px; }
}
.lang-btn:hover { border-color: #9b51e0; color: #9b51e0; }
.lang-btn.active { border-color: #9b51e0; background: #9b51e0; color: white; }

/* ── Field validation errors ── */
.field-error { display: block; }
.field-error.hidden { display: none; }

/* ── Future calendar day cells ── */
.cal-day { cursor: pointer; color: #374151; transition: all .15s; border-radius: 8px; }
.cal-day:hover { background: #f3ebfd; color: #9b51e0; }
.cal-day.sel { background: #9b51e0; color: #fff; }

/* ── Clinic mini chips ── */
.clinic-mini-chip {
  font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 20px;
  border: 1.5px solid #e2e8f0; background: white; cursor: pointer; transition: all .15s; color: #6b7280;
  white-space: nowrap;
}
.clinic-mini-chip:hover { border-color: #9b51e0; color: #9b51e0; }
.clinic-mini-chip.sel   { border-color: #9b51e0; background: #9b51e0; color: #fff; }

/* ── Contact channel cards ── */
.contact-card {
  border: 2px solid #e2e8f0; border-radius: 14px;
  cursor: pointer; transition: all .2s;
}
.contact-card:hover { border-color: #9b51e0; background: #f3ebfd; }
.contact-card.sel   { border-color: #9b51e0; box-shadow: 0 0 0 3px rgba(155,81,224,.15); }
.contact-card-online.sel  { background: linear-gradient(135deg,#eef6ff,#f3ebfd); }
.contact-card-wa.sel      { background: #f0fdf4; border-color: #4ade80; }
.contact-card-phone.sel   { background: #fdf4ff; border-color: #9b51e0; }

/* ── Mobile adjustments ── */
@media (max-width: 400px) {
  .country-chip { font-size: 10px; padding: 6px 4px; }
  .slot-mini { font-size: 10px; padding: 4px 1px; }
  .ins-chip { padding: 8px 4px; }
}