@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| Use Only Contact Form Page and accompanying components
|--------------------------------------------------------------------------
*/

.contact-form-page .first-title {
  text-align: center;
}
.form-container {
  max-width: 800px;
  margin: 0 auto;
}
.contact-form {
  padding: var(--spacing-large);
  background-color: var(--color-primary-pale2);
  border-radius: var(--border-radius-medium);
}
.contact-form .form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-small);
  margin-bottom: calc(var(--spacing-large) * 1.25);
}
.contact-form .form-wrap.one-column {
  grid-template-columns: 1fr;
}
.contact-form .form-wrap.three-column {
  grid-template-columns: 1fr 1fr 1fr;
} 
.contact-form .form-wrap .form-group {
  margin-top: 0;
}
.contact-form .form-wrap .radio-label,
.contact-form .form-wrap .checkbox-label {
  margin-bottom: 0;
}
.contact-form .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xsmall);
}
.contact-form .checkbox-group .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
}

/* Postal Code */
.postal-code-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
}
.postal-code-input input[type="text"] {
  width: fit-content;
}

/* Privacy Policy */
.privacy-policy-block .checkbox-group {
  margin: 0;
}
.privacy-policy-block .checkbox-group label {
  padding: var(--spacing-medium);
  width: 100%;
  background-color: var(--color-white);
  justify-content: center;
  margin-bottom: 0;
}

/* Password */
.password-strength {
  margin-top: var(--spacing-xsmall);
}
.password-strength .strength-bar {
  height: var(--border-width-medium);
  background: #eee;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}
.password-strength .strength-bar .bar {
  height: 100%;
  width: 0;
  transition: all 0.5s;
}
.password-strength .strength-bar .bar.weak { width: 33%; background: #dc3545; }
.password-strength .strength-bar .bar.medium { width: 66%; background: #ffc107; }
.password-strength .strength-bar .bar.strong { width: 100%; background: #28a745; }
.password-strength .strength-text {
  font-size: var(--font-size-xsmall);
  color: var(--color-gray);
  margin-top: var(--spacing-xsmall);
  display: block;
}
.password-requirements {
  margin-top: var(--spacing-xsmall);
  font-size: var(--font-size-xsmall);
  display: flex;
  gap: var(--spacing-small);
}
.password-requirements p {
  margin: var(--spacing-xsmall) 0;
  color: var(--color-gray);
}
.password-requirements span.valid {
  color: #28a745;
}
.password-requirements span.valid i {
  color: #28a745;
}
.password-match-message {
  display: none;
  color: var(--color-accent02);
  font-size: var(--font-size-xsmall);
  margin-top: var(--spacing-xsmall);
}

.form-item {
  margin-bottom: var(--spacing-small);
  padding: var(--spacing-small);
  background-color: var(--color-white);
  border-radius: var(--border-radius-small);
  text-align: center;
}
.form-item .lable {
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: var(--spacing-small);
}
.form-item p {
  font-weight: bold;
  margin-bottom: 0;
  color: var(--color-secondary);
}

/* Confirm */
.confirm-content .confirm-list dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-small);
  font-size: var(--font-size-medium);
  padding: var(--spacing-xsmall);
}
.confirm-content .confirm-list dl + dl {
  margin-top: var(--spacing-small);
}
.confirm-content .confirm-list dl dt {
  color: var(--color-primary);
  font-weight: bold;
}
.confirm-content .confirm-list dl dd {
  margin-left: var(--spacing-small);
}

@media (max-width: 480px) {
  .contact-form-page .first-title {
    text-align: left;
  }
  .form-container {
    max-width: 100%;
  }
  .contact-form {
    padding: var(--spacing-medium);
  }

  .contact-form .form-wrap {
    grid-template-columns: 1fr;
  }
}