/* ==============================
   ABA Appointment Form Styles
   ============================== */

/* Material-style floating inputs */
.form-field-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.form-input,
.textarea-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  font-size: 16px;
  padding: 10px 0 6px 0;
  background: transparent;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.textarea-input:focus {
  border-bottom-color: #e91e63; /* pink underline */
}

.form-field-wrapper label {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
}

/* Float label up when focused or not empty */
.form-input:focus + label,
.form-input:not(:placeholder-shown) + label,
.textarea-input:focus + label,
.textarea-input:not(:placeholder-shown) + label {
  top: -12px;
  font-size: 12px;
  color: #e91e63; /* pink label */
}


/* Wrapper spacing */
.w-form {
  margin-bottom: 20px;
}

/* Alert banners */
#alert-container .alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 16px;
}

#alert-container .alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

#alert-container .alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* Close button for alerts */
#alert-container .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
}
#alert-container .btn-close:hover {
  opacity: 0.75;
}

/* Form layout */
.form-2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-2-col {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.form-field-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative; /* Needed for floating label */
  margin-bottom: 20px;
}

/* Inputs & Textarea */
.form-input,
.textarea-input,
.w-select {
    width: 100% !important;
    padding: 14px 12px !important;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff;
    transition: border-color 0.2s ease-in-out !important;
}

.form-input:focus,
.textarea-input:focus,
.w-select:focus {
  border-color: #0066cc;
  outline: none;
}

/* Floating Labels */
.form-field-wrapper label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  padding: 0 6px;
  font-size: 14px;
  color: #999;
  transition: 0.2s ease all;
  pointer-events: none;
}
/* Checkbox Consent Wrapper */
.form-field-wrapper.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.form-field-wrapper.consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.form-field-wrapper.consent .checkbox-label {
    font-size: 12px;
    line-height: 1.4;
    color: #324A6D;
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
}
.form-field-wrapper.consent .checkbox-label a {
  color: #324A6D !important;
  text-decoration: underline;
}


/* When field is focused or not empty */
.form-input:focus + label,
.form-input:not(:placeholder-shown) + label,
.textarea-input:focus + label,
.textarea-input:not(:placeholder-shown) + label,
.w-select:focus + label,
.w-select:not([value=""]) + label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  color: #324A6D;
}


/* Floating label for select */
.select-wrapper label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
  background: #fff;
  padding: 0 4px;
}

/* When select has focus or a chosen value */
.select-wrapper select:focus + label,
.select-wrapper select:not([value=""]) + label {
  top: -10px;
  left: 8px;
  font-size: 12px;
  background-color: transparent !important;
}

/* Textarea specifics */
.is-text-area {
  min-height: 120px;
  resize: vertical;
}

/* Checkbox */
.w-checkbox {
  display: flex;
  align-items: flex-start;
}
.w-checkbox-input {
  margin-right: 8px;
  margin-top: 2px;
}
.checkbox-label {
  font-size: 12px;
  line-height: 1.4;
}