/* 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);
  }
}