/* Hair Temple – Booking Form */
.salon-booking-form { --card-bg:#fff; --card-bd:#eaeaea; --muted:#6b7280; --primary:#111827; --accent:#111827; }
.salon-booking-form {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(17,24,39,.06);
}
.salon-booking-form h1 {
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  margin: 0 0 12px 0;
}
.salon-booking-form .field { margin: 14px 0; }
.salon-booking-form label { color: var(--primary); font-weight: 600; display: inline-block; margin-bottom: 6px; }
.salon-booking-form select,
.salon-booking-form input[type="date"] {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
  background: #fff;
}
.salon-booking-form select:focus,
.salon-booking-form input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(17,24,39,.08);
}
.salon-booking-form .field > label input[type="checkbox"] { margin-right: 8px; transform: translateY(1px); }
.salon-booking-form .actions { margin-top: 18px; }

.salon-booking-form .button {
  appearance: none;
  border: 1px solid #BC8A86;
  background: #BC8A86;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.salon-booking-form .button:hover { box-shadow: 0 8px 24px rgba(17,24,39,.18); }
.salon-booking-form .button:active { transform: translateY(1px); }

/* Small helper text style when no times */
.salon-booking-form .hint { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Use site’s primary/body font for the booking form */
.salon-booking-form,
.salon-booking-form * {
  font-family: var(--wp--preset--font-family--body, inherit) !important;
}

/* Ensure inputs also inherit (some themes override these) */
.salon-booking-form input,
.salon-booking-form select,
.salon-booking-form button,
.salon-booking-form label {
  font-family: inherit !important;
}

/* Base */
.salon-booking-form button#salon-to-checkout.button.button-primary {
  background: #BC8A86 !important;
  border-color: #BC8A86 !important;
  color: #fff !important;
}

/* Hover / focus */
.salon-booking-form button#salon-to-checkout.button.button-primary:hover,
.salon-booking-form button#salon-to-checkout.button.button-primary:focus {
  background: #a97470 !important;   /* slightly darker */
  border-color: #a97470 !important;
  color: #fff !important;
}

/* If your theme styles .wp-element-button, cover that too */
.salon-booking-form button#salon-to-checkout.wp-element-button {
  background: #BC8A86 !important;
  border-color: #BC8A86 !important;
  color: #fff !important;
}




@media (max-width: 480px){
  .salon-booking-form { padding: 18px; border-radius: 14px; }
}