/* Appointment Form Component Styles */

.appointment-form--fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-20);
}

.appointment-form--field {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.appointment-form--field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rem-16);
}

.appointment-form--field-half {
  flex: 1;
}

.appointment-form--label {
  font-size: var(--text-sm);
  font-weight: var(--text-medium);
  color: var(--text-label);
}

.appointment-form--input,
.appointment-form--select,
.appointment-form--textarea {
  padding: var(--rem-10) var(--rem-12);
  border: 1px solid var(--neutral-300);
  border-radius: var(--input-radius);
  font-size: var(--text-sm);
  color: var(--neutral-900);
  background-color: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.appointment-form--input:focus,
.appointment-form--select:focus,
.appointment-form--textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.appointment-form--select {
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%23586B79" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--rem-12) center;
  padding-right: var(--rem-34);
}

.appointment-form--textarea {
  resize: vertical;
  min-height: var(--rem-80);
  font-family: inherit;
}

.appointment-form--radio-group {
  display: flex;
  gap: var(--rem-16);
}

.appointment-form--radio-label {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--neutral-700);
}

.appointment-form--radio {
  width: var(--rem-16);
  height: var(--rem-16);
  cursor: pointer;
}

.appointment-form--radio:checked + span {
  font-weight: var(--text-medium);
  color: var(--primary-600);
}

/* Error Messages */
.error-messages {
  padding: var(--rem-16);
  background-color: #FEE2E2; /* Red-100 */
  border: 1px solid #FCA5A5; /* Red-300 */
  border-radius: var(--radius-sm);
  margin-bottom: var(--rem-20);
}

.error-messages h2 {
  font-size: var(--text-sm);
  font-weight: var(--text-semibold);
  color: #DC2626; /* Red-600 */
  margin: 0 0 var(--rem-8) 0;
}

.error-messages ul {
  margin: 0;
  padding-left: var(--rem-20);
  list-style: disc;
}

.error-messages li {
  font-size: var(--text-sm);
  color: #DC2626; /* Red-600 */
  margin-bottom: var(--rem-4);
}

.error-messages li:last-child {
  margin-bottom: 0;
}

turbo-frame#overlapping-appointments-warning {
  width: 100%;
  max-width: 100%;
  display: none;

  &:has(.appointment-form--overlapping-warning) {
    display: block;
  }
}

.appointment-form--overlapping-warning {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
  outline: solid 1px var(--border-warning);
  background-color: var(--surface-warning);
  padding: .5rem;
  border-radius: var(--radius-md);

  p {
    font-size: var(--rem-14);
    color: var(--text-warning);
    line-height: var(--rem-21);
    font-variation-settings: 'wght' var(--text-semibold);
  }

  li {
    font-size: var(--rem-12);
    color: var(--text-warning);
    line-height: var(--rem-20);
  }
}

.appointment-form--errors {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
/* Wraps the Procedure Type field so it can be hidden as one piece. The wrapper has to
   stretch like the input groups around it, or the select stops short of the form's width. */
.appointment-form--procedure-type {
  width: 100%;

  &[hidden] {
    display: none;
  }
}

/* Wraps a Shared::ToastComponent so the browser can show and hide it as the study and
   start time change. */
.appointment-form--alert {
  width: 100%;

  &[hidden] {
    display: none;
  }
}

/* The modal is `width: max-content`, so a long line in an alert would drag it wider than
   the form. Held at the modals' 600px minimum, and the alerts wrap inside it. */
#appointment_modal > dialog.modals--main-modal {
  width: 600px;
  max-width: calc(100vw - 2rem);
}

/* A confirms--dialog like the app's others, opened with showModal() so it sits above the
   booking modal it belongs to; ::backdrop dims that modal. */
dialog.appointment-form--confirm::backdrop {
  background-color: var(--modal-backdrop);
}

/* The rule leads; the reason and the question under it are the dialog's usual body text. */
.appointment-form--confirm-rule {
  font-variation-settings: "wght" var(--text-medium);
}