/* Define custom Diatype font */
@font-face {
  font-family: "Diatype Regular";
  src: url("/fonts/ABCDiatype-Regular-Trial.woff2") format("woff2"),
       url("/fonts/ABCDiatype-Regular-Trial.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures fallback font is used while Diatype loads */
}

/* General Body and Form Styles */
body {
  font-family: "Diatype Regular", sans-serif; /* Apply Diatype Regular globally */
  background: #F2EEE8;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.form {
  padding: 1rem;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

/* Title group should not behave like normal sections */
.title-group {
  margin-bottom: 0rem !important;
  padding-bottom: 0rem !important;
  border-bottom: none !important;  /* remove the line under the title */
}

/* Title styling */
.form-title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;  /* small controlled spacing */
}

/* Label styling (for questions and options) */
.question-title {
  display: block;   
  font-size: 1.1rem;
  font-weight: 400; /* Bold for question titles */
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 0.4rem; /* Space between label and options/input fields */
}

/* Style for the additional text */
.sub-text {
  display: block; /* Forces the text to appear on a new line */
  color: rgba(0, 0, 0, 0.55);
  font-size: 1rem; /* Optional: Reduce the font size for a subtler effect */
}


.option-label {
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 0rem; /* Space between label and input */
}

/* Form group styling (adds horizontal line between sections) */
.form-group {
  margin-bottom: 1rem; /* Space between each question */
  padding-bottom: 1rem; /* Adds padding to the bottom */
  border-bottom: 1px solid #ddd; /* Horizontal line separating sections */
}

.form-group > div {
  margin-top: 0.5rem; /* Space between the question title and options */
}

/* Radio buttons container for questions 1 and 3 */
/* Radio buttons in the first and third questions */
.radio-group {
  display: flex; /* Align radio buttons horizontally */
  flex-direction: column; /* Stack them vertically */
  gap: 0.5rem; /* Add space between radio button options */
  align-items: flex-start; /* Align radio buttons with the text */
}

input[type="radio"] {
  margin-right: 1rem; /* Space between radio buttons and text */
  vertical-align: middle; /* Align radio button vertically with text */
  display: inline-block; /* Keeps radio buttons inline with the label text */
  margin-top: 0; /* Remove any extra space above the radio button */
  line-height: 1.2; /* Adjust line height to fine-tune vertical alignment */
  position: relative; /* Allow position adjustments */
  top: -0.1rem; /* Small vertical adjustment to center the radio button */
}

/* For checkboxes in the second question */
.checkbox-group {
  display: flex; /* Align checkboxes horizontally */
  gap: 1rem;     /* Space between each checkbox option */
  flex-wrap: wrap; /* Allow wrapping if needed */
  justify-content: flex-start; /* Align checkboxes to the left */
  align-items: center; /* Vertically center checkbox with its label */
}

/* Each checkbox should behave inline and aligned */
.checkbox-group div {
  display: flex; /* Keeps the checkbox and its label in a row */
  align-items: center; /* Ensures vertical alignment of checkbox and label */
  gap: 0.5rem; /* Space between checkbox and its label */
}

.checkbox-group input[type="checkbox"] {
  margin-right: 0.3rem; /* Space between checkbox and label */
  display: inline-block; /* Keeps checkbox inline with the label text */
  vertical-align: middle; /* Align checkbox with the text */
  height: auto !important; /* Prevents default height */
  width: auto !important;  /* Prevents default width */
}


/* For the size question inputs (Width & Height on the Same Line) */
.size-fields {
  display: flex; /* Align the children (Width and Height fields) horizontally */
  justify-content: space-between; /* Space out the elements evenly */
  gap: 1rem; /* Small gap between the fields */
  width: 100%; /* Full width container */
}

.size-item {
  display: flex; /* Ensure that label and input are aligned horizontally */
  flex-direction: column; /* Stack label on top of the input */
  width: 48%; /* Each element takes up 48% of the line */
}

.size-item label {
  display: block; /* Block ensures that the label stays above the input */
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 0.5rem; /* Space between the label and input */
}

.size-item input {
  width: 100%; /* Input should fill its container */
  padding: 0rem; /* Padding inside the input field */
  font-size: 1.1rem;
  font-family: "Diatype Regular", sans-serif;
  border: 1px solid #ccc;
  border-radius: 0;
  box-sizing: border-box; /* Include padding and border in the width and height */
  height: 2rem; /* Set height for consistency */
}


/* General Input Fields Styling (text, email, file, etc.) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="file"],
select {
  padding: 0.5rem;             /* Padding inside the input field */
  font-size: 1.1rem;           /* Font size */
  font-family: "Diatype Regular", sans-serif; /* Use custom font */
  border: 1px solid #ccc;      /* Border style */
  border-radius: 0;            /* Remove border radius */
  width: 100%;                 /* Full width */
  box-sizing: border-box;      /* Include padding and border in width and height */
  height: 2.5rem;              /* Set height for all input fields */
  margin-bottom: 0.1rem;       /* Space below the input fields */
}

/* Special styling for input[type="file"] */
input[type="file"] {
  font-size: 1.1rem;           /* Adjust font size for file input */
  padding: 0.4rem;             /* Padding inside the file input */
  height: 2.5rem;              /* Ensure the file input height is consistent with others */
}

/* Remove default styling of radio buttons and checkboxes */
input[type="radio"], input[type="checkbox"] {
  -webkit-appearance: none; /* Remove default styles for WebKit browsers (Chrome, Safari) */
  -moz-appearance: none; /* For Firefox */
  appearance: none; /* Standard */
  border: 2px solid #ccc; /* Default border */
  border-radius: 50%; /* Circle for radio buttons */
  width: 1rem; /* Set size for radio button */
  height: 1rem; /* Set size for radio button */
  display: inline-block;
  position: relative;
  background-color: #fff; /* Default background */
}

/* For radio buttons when checked */
input[type="radio"]:checked {
  background-color: #f94b15; /* Color when selected */
  border-color: #f94b15; /* Border color when selected */
}

/* For checkboxes when checked */
input[type="checkbox"]:checked {
  background-color: #f94b15; /* Color when selected */
  border-color: #f94b15; /* Border color when selected */
}

/* Styling the inner circle for radio buttons */
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 0px; /* Center the inner circle vertically */
  left: 0px; /* Center the inner circle horizontally */
  width: 0.8rem; /* Size of the inner circle */
  height: 0.8rem; /* Size of the inner circle */
  border-radius: 50%; /* Make it circular */
  background-color:  #f94b15; /* Inner circle color when selected */
}

/* Styling the inner square for checkboxes */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%; /* Center the inner circle vertically */
  left: 50%; /* Center the inner circle horizontally */
  width: 0.8rem; /* Size of the inner square */
  height: 0.8rem; /* Size of the inner square */
  background-color: #f94b15; /* Inner square color when selected */
  transform: translate(-50%, -50%); /* Offset by 50% to perfectly center */
}


/* Button Styling */
.button-15-1 {
  width: 100%;
  padding: 0.6rem;
  font-size: 1.2rem;
  font-family: "Diatype Regular", sans-serif; /* Apply Diatype Regular to button */
  background-color: #bcebfa;
  color: rgba(0, 0, 0, 0.85);
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  display: block;
  box-sizing: border-box;
}

/* Anchor tag inside button */
.button-15-1 a {
  display: block;
  width: 100%;
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

/* Hover effects */
.button-15-1:hover {
  background-color: #f94b15;
}

.button-15-1:hover a {
  background-color: #f94b15;
  
}

.form-footer {
  font-size: 0.9rem;                /* caption size */
  color: rgba(0, 0, 0, 0.45);       /* softer caption grey */
  font-weight: 300;
  font-family: "Diatype Regular", sans-serif;

  text-align: center;
  margin-top: 3rem;                 /* space above footer */
  padding-bottom: 1rem;             /* spacing from page bottom */
}

.inline-link {
  color: #f94b15;
  text-decoration: underline;
  font-weight: inherit; /* keep same weight as paragraph */
}

.inline-link:hover {
  opacity: 0.7; /* optional nice touch */
}


/* MOBILE STYLES */
@media (max-width: 600px) {

  .form {
    padding: 2rem;
  }

  form {
    gap: 0.5rem;
  }

  .question-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="file"],
  select {
    height: 2rem;
    font-size: 1rem;
  }

  .button-15-1 {
    font-size: 1.1rem;
    padding: 0.7rem;
  }

  .button-15-1 a {
    padding: 0.7rem;
  }
}