/* Form Styles (page-contact-us.php) */

.form {
  width: 50%;
  margin: 0 auto;
  max-width: 37.5000rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: 1.5rem 1.5rem 0 0;
}

.form__title {
  margin-bottom: 1.5rem;
  color: var(--color-text);
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.form__subtitle {
  margin-bottom: 2.5rem;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.form form p {
  width: 100%;
  margin-bottom: 1rem
}

.form form p:nth-last-of-type(1) {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: row-reverse;
  margin-bottom: 0
}

.form form input:not([type=submit]),
.form form textarea {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  width: 100%;
  padding: 1.25rem 1rem;
  font-size: var(--fs-base);
  caret-color: var(--color-primary);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.08);
  color: var(--color-text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.form form input:not([type=submit]):focus,
.form form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.form form input:not([type=submit]):hover,
.form form textarea:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.9);
}

.form form input[type=submit] {
  padding-left: 2.5000rem;
  padding-right: 2.5000rem;
  background-color: var(--color-primary)
}

.form form input[type=submit]:hover {
  background-color: var(--color-primary-hover)
}

.form form .wpcf7-spinner {
  top: 50%;
  width: 1.2500rem;
  height: 1.2500rem;
  right: 1rem;
  margin: 0;
  opacity: 1;
  position: absolute;
  transform: translateY(-50%);
  background-color: transparent
}

.form form .wpcf7-spinner:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform-origin: center;
  background-color: transparent;
  border-color: var(--color-white) transparent var(--color-white) transparent
}

.form form .wpcf7-response-output {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  color: var(--color-text);
  border: none;
  padding: .75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin: 2rem 0 0;
  border-radius: 0.3750rem
}

.form form .wpcf7-not-valid-tip {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  color: var(--color-error);
  display: block;
  font-size: var(--fs-sm);
  margin-top: -0.1250rem;
  background-color: transparent;
  padding: 0.5000rem 1rem 0
}

.form form.sent .wpcf7-response-output {
  background-color: var(--color-success)
}

.form form.aborted .wpcf7-response-output,
.form form.failed .wpcf7-response-output {
  color: var(--color-text-secondary);
  background-color: var(--color-error)
}

.form form.spam .wpcf7-response-output {
  background-color: var(--color-warning)
}

.form form.invalid .wpcf7-response-output,
.form form.payment-required .wpcf7-response-output,
.form form.unaccepted .wpcf7-response-output {
  background-color: var(--color-info)
}

.form form.submitting input[type=submit] {
  padding-right: 2.8750rem
}

.form form.submitting .wpcf7-spinner {
  visibility: visible
}

@media (max-width:62rem) {
  .form {
    width: 75%
  }
}

/* Responsive Styles */
@media (max-width:48rem) {
  .form {
      width: 85%
  }
}

@media (max-width:36rem) {
  .form {
      width: 100%;
      padding: 0 1rem;
      box-shadow: none;
      border-radius: 0;

      &::before {
        display: none;
      }
  }
}