.stepper { display: flex; justify-content: space-between; margin-bottom: 18px; }
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1px solid var(--line); font: 700 12px var(--mono); color: var(--sage);
}
.step-dot.active .step-num, .step-dot.done .step-num { background: var(--forest); border-color: var(--forest); color: #fff; }
.step-lbl { font: 400 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.step-dot.active .step-lbl, .step-dot.done .step-lbl { color: var(--forest); }

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 6px; }
@media (max-width: 520px) { .service-grid { grid-template-columns: 1fr; } }
.svc-btn {
  padding: 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--cream);
  font: 700 13.5px var(--grot); color: var(--ink); text-align: left; cursor: pointer; transition: .15s;
}
.svc-btn:hover { border-color: var(--forest); }
.svc-btn.active { background: var(--forest); border-color: var(--forest); color: #fff; }

.date-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 16px 0 6px; }
.date-btn {
  padding: 10px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--cream);
  font: 600 12px var(--grot); color: var(--ink); text-align: center; cursor: pointer;
}
.date-btn .dow { display: block; font: 400 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sage); margin-bottom: 3px; }
.date-btn:hover { border-color: var(--forest); }
.date-btn.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.date-btn.active .dow { color: rgba(255,255,255,.75); }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 6px; }
@media (max-width: 480px) { .slot-grid { grid-template-columns: 1fr; } }
.slot-btn {
  padding: 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--cream);
  font: 700 13.5px var(--grot); color: var(--ink); text-align: center; cursor: pointer;
}
.slot-btn:hover:not([disabled]) { border-color: var(--forest); }
.slot-btn.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.slot-btn[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.confirm-box { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 14px 0; }
.confirm-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font: 500 13.5px var(--grot); }
.confirm-row:last-child { border-bottom: none; }
.confirm-row .k { color: var(--sage); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.done-box { text-align: center; padding: 20px 0; }
.done-check {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(47,107,79,.14); color: var(--forest);
  font: 800 26px var(--grot); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}

.btn-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.btn-row .btn { flex: 1; }