/* modal card – light theme */
.appointment-modal{
  background:linear-gradient(135deg,#ffffff,#fff8db);
  border-radius:26px;
  color:#111827;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.appointment-modal::before,
.appointment-modal::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,#facc15,#f97316);
  opacity:.16;
}
.appointment-modal::before{
  width:220px;height:220px;top:-70px;left:-40px;
}
.appointment-modal::after{
  width:180px;height:180px;bottom:-60px;right:-20px;
}
.appointment-modal .modal-title{
  font-weight:800;
  color:#f59e0b;
}

/* form fields */
.ap-input{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.ap-input label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b7280;
}
.ap-input label i{
  margin-right:.4rem;
  color:#f59e0b;
}
.ap-input .form-control,
.ap-input .form-select{
  background:#ffffff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  color:#111827;
  padding:.7rem .9rem;
  font-size:.93rem;
  box-shadow:none;
  transition:border-color .25s, box-shadow .25s, transform .15s, background .25s;
}
.ap-input .form-control::placeholder{
  color:#9ca3af;
}

/* focus */
.ap-input .form-control:focus,
.ap-input .form-select:focus{
  border-color:#fbbf24;
  background:#ffffff;
  box-shadow:0 0 0 0.12rem rgba(251,191,36,.3);
  transform:translateY(-1px);
}

/* button */
.appointment-btn{
  background:linear-gradient(135deg,#facc15,#fbbf24);
  color:#111827;
  border:none;
  border-radius:999px;
  padding:.75rem 2.2rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
.appointment-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  filter:brightness(1.03);
  color: white;
}
.appointment-btn i{
  font-size:.95rem;
}