/*
 * CSS Variables for easy customization
 * The red color is used for required field asterisks and labels.
 */

/* Base Form Styling */
.clean-form {
  max-width: 800px;
  margin: 40px auto;
  /* padding: 20px; */
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.6;
}

/* Grouping for Spacing */
.form-group {
  margin-bottom: 25px;
}

/* Label Styling - Matches the font weight/color */
/* .clean-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.1em;
  font-weight: 500;
} */

/* Required Asterisk Styling - Matches the red color */
/* .clean-form label::after {
  content: " *";
  color: var(--primary-color);
} */

/* Input Fields and Textarea Styling */
.clean-form input[type="text"],
.clean-form input[type="email"],
.clean-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--color-text);
  box-sizing: border-box; /* Crucial for padding/border not affecting width */
  font-size: var(--font-size-sm); /* font 16px*/
  font-family: inherit;
  color: var(--color-text);
  outline: none; /* Removes default focus outline */
  transition: border-color 0.3s;
  resize: none; /* Prevents user from resizing the textarea */
  /* border-radius: 4px; */
}

.clean-form textarea {
  height: 150px; /* Specific height for the large question box */
}

/* Focus State */
.clean-form input:focus,
.clean-form textarea:focus {
  border-color: var(--color-gold);
}

/* Placeholder Text */
.clean-form ::placeholder {
  color: var(--color-dark-grey);
  font-style: italic;
  opacity: 1;
}

/* Two-Column Layout for Name and Email */
.form-row {
  display: flex;
  gap: 30px; /* Space between the name and email fields */
}

.form-row .form-group {
  flex: 1; /* Makes both name and email fields take up equal space */
}

/* Checkbox and Button Layout (Footer) */
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Checkbox Container */
.checkbox-group {
  display: flex;
  align-items: center;
  /* font-size: 1.1em; */
  user-select: none; /* Makes the text non-selectable */
}

/* Custom Checkbox Styling (mimicking the default, but ensuring alignment) */

/* Responsive Adjustments for smaller screens */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
    /* gap: 20px; */
  }

  .submit-button {
    width: 100%;
  }
}