:root {
  --brand: #3b8fa3;
  --brand-light: #5aa9bb;
}

body {
  background: #f7fafc;
}

.topbar { background: var(--brand); }

.btn-brand { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: .65rem 1.5rem; font-weight: 600; }
.btn-brand:hover { background: var(--brand-light); color: #fff; }
.btn-brand:disabled { background: #a0aec0; }

.card { border-radius: 10px; }

.hero-headline {
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 480px) {
  .hero-headline { font-size: 1.4rem; margin: 1rem 0 1.5rem; }
  .topbar { font-size: .72rem; line-height: 1.4; padding: .4rem .5rem; }
}

/* Rounded, borderless-style fields matching the practice's existing booking form */
.field-borderless {
  background: #f4f6f8;
  border: none;
  border-radius: 8px;
  padding: .85rem 1rem;
  width: 100%;
}
.field-borderless:focus {
  background: #eef1f3;
  box-shadow: 0 0 0 2px var(--brand-light);
  outline: none;
}

.field-icon-wrap { position: relative; }
.field-icon-wrap input { padding-right: 2.5rem; }
.field-icon-wrap i {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: #94a3b8; pointer-events: none;
}
/* Native date inputs draw their own picker icon on top of ours in some browsers;
   hide it so only our icon shows. */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }

select.field-borderless { appearance: none; -webkit-appearance: none; background-image: none; }

.upload-box {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #f4f6f8; border-radius: 8px; padding: .85rem 1rem;
  cursor: pointer; color: #64748b; font-weight: 500; text-align: center;
}
.upload-box:hover { background: #eef1f3; }

.slot {
  display: flex; align-items: center; justify-content: center;
  padding: .75rem; border-radius: 8px; margin-bottom: .5rem;
  cursor: pointer; font-weight: 600; font-size: .95rem;
  border: 2px solid transparent; transition: filter .1s;
}
.slot:hover { filter: brightness(.95); }
.slot.free { background: #dcfce7; border-color: #86efac; color: #166534; }
.slot.busy { background: #fee2e2; border-color: #fca5a5; color: #991b1b; cursor: default; }
.slot.busy:hover { filter: none; }
.slot.selected { outline: 3px solid var(--brand); outline-offset: 1px; }