.elf-appt-app, .elf-appt-login {
  max-width: 720px; margin: 0 auto; padding: 24px;
  background: #ffffff; border-radius: 16px;
  box-shadow: 0 6px 32px rgba(30,40,90,.10);
  font-family: inherit;
}
.elf-appt-title { margin-top: 0; }
.elf-appt-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.elf-appt-header h2 { margin:0; }
.elf-appt-user { display:flex; flex-direction:column; align-items:flex-end; }
.elf-appt-pkg { background:#eef2ff; color:#3b4bbf; padding:4px 12px; border-radius:99px; font-size:13px; margin-top:4px; }

.elf-appt-stats { display:flex; gap:12px; margin:20px 0; }
.elf-appt-stats .stat {
  flex:1; text-align:center; background:#f6f8ff; border-radius:12px; padding:14px 8px;
}
.elf-appt-stats .stat .n { display:block; font-size:26px; font-weight:700; color:#2f3ec7; }
.elf-appt-stats .stat .l { font-size:12px; color:#667; }

.elf-appt-form label { display:block; margin:10px 0 4px; font-weight:600; font-size:14px; }
.elf-appt-form input[type="text"], .elf-appt-form input[type="date"] {
  width:100%; padding:10px 12px; border:1px solid #d6dbe6; border-radius:10px; font-size:15px; box-sizing:border-box;
}
.elf-appt-btn {
  margin-top:14px; background:#4353ff; border:0; color:#fff; font-weight:700;
  padding:12px 26px; border-radius:10px; cursor:pointer; font-size:15px;
}
.elf-appt-btn:hover { background:#3341e0; }
.elf-appt-btn:disabled { opacity:.5; cursor:wait; }

.elf-appt-slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:10px; }
.elf-appt-slot {
  padding:10px 6px; border-radius:9px; border:1.5px solid #d6dbe6; background:#fff;
  font-size:14px; cursor:pointer; text-align:center;
}
.elf-appt-slot.open:hover { border-color:#4353ff; }
.elf-appt-slot.selected { background:#4353ff; color:#fff; border-color:#4353ff; }
.elf-appt-slot.closed { opacity:.38; cursor:not-allowed; text-decoration:line-through; }
.elf-appt-slot.mine { border-color:#27ae60; color:#27ae60; }

.elf-appt-error { color:#c0392b; background:#fdecea; padding:10px 14px; border-radius:9px; margin-top:10px; display:inline-block; }
.elf-appt-ok { color:#1e7e45; background:#e6f7ee; padding:10px 14px; border-radius:9px; margin-top:10px; display:inline-block; }
.elf-appt-note { background:#eefaf1; color:#20734a; padding:14px 18px; border-radius:12px; margin:16px 0; }

.elf-appt-table { width:100%; border-collapse:collapse; margin-top:12px; }
.elf-appt-table th, .elf-appt-table td { padding:9px 10px; border-bottom:1px solid #eef0f5; text-align:left; font-size:14px; }
.elf-appt-table th { background:#f6f8ff; }
.elf-appt-cancel { background:#fdecea; color:#c0392b; border:0; padding:6px 12px; border-radius:8px; cursor:pointer; }
.elf-appt-mybookings { margin-top:26px; }
.elf-appt-mybookings h3, .elf-appt-booking h3 { margin-bottom:6px; }
.elf-appt-app select, .elf-appt-login select {
  padding: 9px 12px; border: 1px solid #d6dbe6; border-radius: 9px; font-size: 14px;
  background: #fff; margin-right: 6px; min-width: 110px; box-sizing: border-box;
}

.elf-appt-layout { display: flex; gap: 20px; align-items: flex-start; }
.elf-appt-col-left { flex: 1.15; min-width: 260px; }
.elf-appt-col-right { flex: 1; min-width: 240px; }
.elf-appt-col-right .elf-appt-table { font-size: 13px; }
.elf-appt-col-right .elf-appt-table th, .elf-appt-col-right .elf-appt-table td { padding: 7px 8px; }
.elf-appt-full { width: 100%; }
@media (max-width: 760px) {
  .elf-appt-layout { flex-direction: column; }
  .elf-appt-col-left, .elf-appt-col-right { width: 100%; }
}