/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Form */

.form {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 1.8rem 0 0 0;
  background-color: var(--creme);
  padding: 3.6rem 2.4rem;
}

@media (min-width: 768px) {
  .form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, auto);
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    gap: 3.6rem;
    border-radius: 3.6rem 0 0 0;
  }
}

@media (min-width: 1280px) {
  .form {
    max-width: 61.2rem;
    margin-left: auto;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Honey Pot */

.honey {
  display: none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Box */

.input-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  margin: 0 0 3.6rem 0;
}

@media (min-width: 768px) {
  .input-box {
    margin: 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Label */

.input-label {
  font-family: montserrat, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.2rem;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Field */

.input-field {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: quicksand, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  width: 100%;
  border: none;
  border-radius: 0 1.8rem 0 1.8rem;
  color: var(--grey);
  background-color: var(--white);
  box-shadow: 0 0 1.2rem 0 var(--shadow);
  padding: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.input-field:focus {
  outline: none;
}

.input-field:focus-visible {
  background-color: var(--pink-light);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Field Date */

.input-field-date {
  position: relative;
  /* Show a custom calendar icon as the input background for better mobile support */
  background-image: url(../assets/icons/calendar.svg);
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 2.4rem 2.4rem;
  padding-right: 4.8rem;
}

/* Keep native picker clickable but hide native icon where possible */
.input-field-date::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
}

.input-field-date::-moz-focus-inner {
  border: 0;
}

.input-field-date::-moz-calendar-picker-indicator {
  opacity: 0;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Error Message */

.error-message {
  box-sizing: border-box;
  display: none;
  font-family: quicksand, sans-serif;
  font-weight: 700;
  border: 0.3rem solid red;
  border-radius: 1.8rem 0 1.8rem 0;
  color: var(--grey);
  background-color: var(--white);
  padding: 1.2rem;
  margin-top: 1.2rem;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Textarea */

.input-textarea {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: quicksand, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  resize: vertical;
  height: 18rem;
  width: 100%;
  border: none;
  border-radius: 0 1.8rem 0 1.8rem;
  color: var(--grey);
  background-color: var(--white);
  box-shadow: 0 0 1.2rem 0 var(--shadow);
  padding: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.input-textarea:focus {
  outline: none;
}

.input-textarea:focus-visible {
  background-color: var(--pink-light);
}

@media (min-width: 768px) {
  .input-textarea {
    height: 100%;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Note */

.form-note {
  font-family: montserrat, sans-serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  text-align: left;
  margin-bottom: 3.6rem;
}

@media (min-width: 768px) {
  .form-note {
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: start;
    margin-bottom: 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Input Label */

.terms-input-label {
  grid-column: 2;
  grid-row: 1;
  font-family: montserrat, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: none;
  text-align: left;
  width: 100%;
  margin-bottom: 0;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Input Box */

.terms-input-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .terms-input-box {
    grid-column: 1 / -1;
    grid-row: 7;
    justify-self: start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Input Label Box */

.terms-input-label-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Input */

.terms-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
}

.terms-input input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  height: 4.8rem;
  width: 4.8rem;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Button Icon */

.terms-button-icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 100rem;
  color: var(--white);
  background-color: var(--white);
  padding: 1.2rem;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.terms-input input[type="checkbox"]:checked + .terms-button-icon {
  color: var(--grey);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Input Link */

.input-link {
  text-decoration: underline;
  color: var(--grey);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Terms Error */

.terms-error {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* CTA */

.form-cta {
  align-self: flex-start;
  border-radius: 1.8rem 0 0 0;
  color: var(--white);
  background-color: var(--grey);
  margin-top: 3.6rem;
}

.form-cta:active {
  color: var(--grey);
  background-color: var(--pink);
}

@media (min-width: 768px) {
  .form-cta {
    grid-column: 1;
    grid-row: 8;
    justify-self: start;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .form-cta:hover {
    color: var(--grey);
    background-color: var(--pink);
  }

  .form-cta:active {
    color: var(--white);
    background-color: var(--grey);
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Grids */

@media (min-width: 768px) {
  .input-grid-1 {
    grid-column: 1 /-1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    gap: 3.6rem;
  }

  .input-grid-2 {
    grid-column: 1 /-1;
    grid-row: 5;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    gap: 3.6rem;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Grid Items */

@media (min-width: 768px) {
  .input-grid-item-1 {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
  }

  .input-grid-item-2 {
    grid-column: 2;
    grid-row: 1;
  }

  .input-grid-item-3 {
    grid-column: 2;
    grid-row: 2;
  }

  .input-grid-item-4 {
    grid-column: 1;
    grid-row: 1;
  }

  .input-grid-item-5 {
    grid-column: 2;
    grid-row: 1 / 4;
    height: 100%;
  }

  .input-grid-item-6 {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .input-grid-item-7 {
    grid-column: 1;
    grid-row: 2;
  }

  .input-grid-item-8 {
    grid-column: 1;
    grid-row: 3;
  }
}