/* ==========================================================================
   Program request page
   ========================================================================== */

.programRequest {
  padding: 72px 0;
}


/* ==========================================================================
   Intro
   ========================================================================== */

.programRequest__intro {
  width: 100%;
  max-width: 900px;

  margin: 0 auto;

  text-align: center;
}

.programRequest__intro .eyebrow {
  display: block;

  margin-bottom: 8px;
}

.programRequest__intro .h2 {
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;

  text-align: center;
}

.programRequest__intro .sub {
  max-width: 800px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
  line-height: 1.7;
}


/* ==========================================================================
   Form
   ========================================================================== */

.programForm {
  width: 100%;
  max-width: 720px;

  margin: 32px auto 0;
  padding: 32px;

  box-sizing: border-box;

  background: #fff;

  border: 1px solid rgba(15, 18, 34, 0.10);
  border-radius: 28px;

  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   Form header
   ========================================================================== */

.programForm__header {
  margin-bottom: 26px;

  text-align: center;
}

.programForm__title {
  margin: 0 0 8px;

  font-size: 24px;
  line-height: 1.2;
}

.programForm__text {
  margin: 0;

  line-height: 1.6;
}


/* ==========================================================================
   Form fields
   ========================================================================== */

.programForm__fields {
  display: grid;

  gap: 18px;
}

.programForm__field {
  display: grid;

  gap: 8px;

  margin: 0 0 18px;
}

.programForm__field label,
.programForm__field legend {
  font-size: 14px;
  font-weight: 600;

  color: rgba(15, 18, 34, 0.88);
}

.programForm__field input,
.programForm__field select {
  width: 100%;
  min-width: 0;
  min-height: 52px;

  padding: 0 16px;

  box-sizing: border-box;

  font: inherit;
  color: inherit;

  background: #fff;

  border: 1px solid rgba(15, 18, 34, 0.16);
  border-radius: 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.programForm__field input::placeholder {
  color: rgba(15, 18, 34, 0.42);
}

.programForm__field input:focus,
.programForm__field select:focus {
  border-color: #63325d;

  box-shadow:
    0 0 0 3px rgba(99, 50, 93, 0.10);
}


/* ==========================================================================
   Select
   ========================================================================== */

.programForm__field select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 44px;

  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, #63325d 50%),
    linear-gradient(135deg, #63325d 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 22px,
    calc(100% - 15px) 22px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}


/* ==========================================================================
   Optional label
   ========================================================================== */

.programForm__optional {
  margin-left: 6px;

  font-size: 12px;
  font-weight: 400;

  color: rgba(15, 18, 34, 0.46);
}


/* ==========================================================================
   Request reason
   ========================================================================== */

.programForm__options {
  padding: 0;

  border: 0;
}

.programForm__options legend {
  margin-bottom: 4px;
}

.programForm__option {
  display: flex;
  align-items: center;

  min-height: 48px;

  padding: 0 14px;

  box-sizing: border-box;

  cursor: pointer;

  background: #fff;

  border: 1px solid rgba(15, 18, 34, 0.14);
  border-radius: 14px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.programForm__option:hover {
  border-color: rgba(99, 50, 93, 0.42);

  background: rgba(99, 50, 93, 0.025);
}

.programForm__option input {
  width: 18px;
  height: 18px;
  min-height: 0;

  margin: 0 10px 0 0;
  padding: 0;

  accent-color: #63325d;

  box-shadow: none;
}

.programForm__option input:focus {
  box-shadow: none;
}

.programForm__option span {
  font-size: 14px;
  font-weight: 500;

  color: rgba(15, 18, 34, 0.82);
}

.programForm__option:has(input:checked) {
  border-color: #63325d;

  background: rgba(99, 50, 93, 0.045);

  box-shadow:
    0 0 0 2px rgba(99, 50, 93, 0.06);
}


/* ==========================================================================
   Submit
   ========================================================================== */

.programForm__submit {
  display: block;

  margin: 22px auto 0;
}


/* ==========================================================================
   Privacy
   ========================================================================== */

.programForm__privacy {
  max-width: 560px;

  margin: 14px auto 0;

  font-size: 12px;
  line-height: 1.5;

  text-align: center;

  color: rgba(15, 18, 34, 0.58);
}


/* ==========================================================================
   Messages
   ========================================================================== */

.programForm__messages {
  margin-bottom: 22px;
}

.programForm__message {
  padding: 14px 16px;

  font-size: 14px;
  line-height: 1.5;

  background: rgba(99, 50, 93, 0.06);

  border: 1px solid rgba(99, 50, 93, 0.12);
  border-radius: 14px;

  color: #63325d;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 768px) {

  .programRequest {
    padding: 48px 0;
  }

  .programRequest__intro {
    max-width: 680px;

    padding: 0 4px;
  }

  .programRequest__intro .sub {
    max-width: 600px;
  }

  .programForm {
    max-width: 100%;

    margin-top: 26px;
    padding: 26px 22px;

    border-radius: 24px;
  }

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 480px) {

  .programRequest {
    padding: 36px 0 40px;
  }

  .programRequest__intro .eyebrow {
    margin-bottom: 6px;
  }

  .programRequest__intro .h2 {
    margin-bottom: 14px;

    font-size: 30px;
    line-height: 1.15;
  }

  .programRequest__intro .sub {
    max-width: 100%;

    font-size: 15px;
    line-height: 1.6;
  }

  .programForm {
    margin-top: 22px;

    padding: 22px 16px;

    border-radius: 20px;
  }

  .programForm__header {
    margin-bottom: 22px;
  }

  .programForm__title {
    font-size: 22px;
  }

  .programForm__field input,
  .programForm__field select {
    min-height: 50px;

    padding-left: 14px;
  }

  .programForm__option {
    min-height: 46px;

    padding: 0 12px;
  }

  .programForm__submit {
    width: 100%;
  }

}

/* ==========================================================================
   Request details
   ========================================================================== */

.programForm__details[hidden] {
  display: none;
}

.programForm__field textarea {
  width: 100%;
  min-width: 0;
  min-height: 150px;

  padding: 14px 16px;

  box-sizing: border-box;

  font: inherit;
  line-height: 1.6;
  color: inherit;

  background: #fff;

  border: 1px solid rgba(15, 18, 34, 0.16);
  border-radius: 14px;

  outline: none;
  resize: vertical;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.programForm__field textarea::placeholder {
  color: rgba(15, 18, 34, 0.42);
}

.programForm__field textarea:focus {
  border-color: #63325d;

  box-shadow:
    0 0 0 3px rgba(99, 50, 93, 0.10);
}