:root {
  --bg:#f8f9fa;
  --card-bg:#ffffff;
  --text:#212529;
  --primary:#0d6efd;
  --border:#dee2e6;
  --muted:#6c757d;
}
[data-theme="dark"] {
  --bg:#121212;
  --card-bg:#1e1e1e;
  --text:#e0e0e0;
  --primary:#4d94ff;
  --border:#333;
  --muted:#8c8c8c;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:system-ui;
  min-height:100vh;
  transition:all .3s;
}

.main-card {
  max-width:1100px;
  margin:2rem auto;
  background:var(--card-bg);
  border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  overflow:hidden;
  border:1px solid var(--border);
}

.sidebar {
  background:rgba(13,110,253,.05);
  border-right:1px solid var(--border);
  padding:2rem;
  height:100%;
  position:sticky;
  top:0;
}
[data-theme="dark"] .sidebar {
  background:rgba(77,148,255,.1);
}

.sidebar h5 {
  color:var(--primary);
  font-weight:700;
}

.selected-service {
  background:rgba(13,110,253,.1);
  border:1px solid var(--primary);
  border-radius:12px;
  padding:.9rem 1.2rem;
  margin-bottom:.8rem;
  font-size:.95rem;
}
[data-theme="dark"] .selected-service {
  background:rgba(77,148,255,.2);
}

.selected-service .badge {
  background:var(--primary);
}

.service-card, .employee-card, .category-card {
  cursor:pointer;
  transition:all .25s ease;
  border:2px solid #e0e0e0;
  border-radius:16px;
  padding:1.5rem;
  text-align:center;
  background:#fff;
  color:var(--text);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .employee-card,
[data-theme="dark"] .category-card {
  background:#2d2d2d;
  border-color:#444;
}

.service-card:hover, .employee-card:hover, .category-card:hover {
  border-color:var(--primary);
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(13,110,253,.2);
}

.selected {
  border-color:var(--primary)!important;
  background:#e7f0ff!important;
  box-shadow:0 10px 30px rgba(13,110,253,.35);
}
[data-theme="dark"] .selected {
  background:rgba(77,148,255,.3)!important;
}

.step {
  display:none;
}
.step.active {
  display:block;
  animation:fadeIn .5s;
}
@keyframes fadeIn {
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.btn-outline-secondary,
.btn-link,
.form-check-label,
.text-muted {
  color:var(--text)!important;
}
[data-theme="dark"] .text-muted {
  color:var(--muted)!important;
}

.btn-outline-secondary:hover,
.btn-link:hover {
  color:var(--primary)!important;
}

.form-control {
  background-color:var(--card-bg);
  color:var(--text);
  border-color:var(--border);
}
.form-control::placeholder {
  color:var(--muted);
}

.form-check-label a {
  color:var(--primary);
  text-decoration:underline;
}

.card {
  background:var(--card-bg);
  border-color:var(--border);
  color:var(--text);
}
.card-header.bg-light {
  background:#f8f9fa!important;
}
[data-theme="dark"] .card-header.bg-light {
  background:#2a2a2a!important;
}

.darkmode-toggle {
  position:fixed;
  top:20px;
  right:20px;
  z-index:1000;
  background:var(--card-bg);
  border:1px solid var(--border);
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  font-size:1.5rem;
  color:var(--text);
}

.time-buttons button {
  margin:.3rem;
  padding:.6rem 1.2rem;
  font-size:.95rem;
}

.btn-booking {
  background:linear-gradient(135deg,#28a745,#20c997);
  border:none;
  font-weight:700;
  letter-spacing:.5px;
}
.btn-booking:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(40,167,69,.4);
}

.thankyou-card {
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:white;
  border-radius:24px;
  padding:3rem;
  text-align:center;
  max-width:700px;
  margin:0 auto;
}

.booking-title {
  color:var(--primary);
}

.privacy-modal-body {
  line-height:1.7;
}

.powered-by {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  text-align:center;
}

.powered-by-link {
  color:var(--primary);
  font-size:.9rem;
  text-decoration:none;
  opacity:.8;
  transition:opacity .3s;
}

@media (max-width:992px) {
  .sidebar {
    border-right:none;
    border-bottom:1px solid var(--border);
  }
}