/* Elements - Forms Start */
/* ------------------------------------------------*/
.form-container {
  position: relative;
}

.form {
  opacity: 1;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}
.form.is-hidden {
  opacity: 0;
}

form {
  position: relative;
  width: 100%;
}




/* Row spacing — the contact form uses Bootstrap `row gx-0` which zeroes
   horizontal AND vertical gutters. Add explicit breathing room between
   fields so the form reads like the dbeta design. Scoped to .form so
   admin / other Bootstrap rows aren't affected. */
.form .row > [class*="col-"] { margin-bottom: 2.5rem; }
@media only screen and (min-width: 768px) {
  .form .row > [class*="col-"]     { margin-bottom: 4rem; }
  .form .row > [class*="col-md-6"] { padding-right: 2.5rem; }
  .form .row > [class*="col-md-6"]:nth-child(even) { padding-right: 0; padding-left: 2.5rem; }
}
@media only screen and (min-width: 1200px) {
  .form .row > [class*="col-"]     { margin-bottom: 6rem; }
  .form .row > [class*="col-md-6"] { padding-right: 4rem; }
  .form .row > [class*="col-md-6"]:nth-child(even) { padding-right: 0; padding-left: 4rem; }
}

/* Submit button row gets less bottom margin — it's the last item. */
.form .row > [class*="col-"]:last-child { margin-bottom: 0; }
form ::-webkit-input-placeholder {
  color: var(--t-muted);
}
form :-moz-placeholder {
  color: var(--t-muted);
}
form ::-moz-placeholder {
  color: var(--t-muted);
}
form :-ms-input-placeholder {
  color: var(--t-muted);
}

.form__reply {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}
.form__reply.centered {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  max-width: 400px;
}
.form__reply.is-visible {
  opacity: 1;
}

.reply__icon {
  display: block;
  font-size: 6rem;
  color: var(--t-bright);
  margin-bottom: 1.2rem;
}

.reply__title {
  font: normal var(--fw-medium) 3.6rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin-bottom: 1.4rem;
}

.reply__text {
  display: block;
  font: normal var(--fw-regular) 1.8rem/1.6 var(--_font-accent);
  color: var(--t-medium);
}

/* ------------------------------------------------*/
/* Elements - Forms End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/

/* Contact form — success state replaces the form entirely.
 * The theme's default .form__reply uses position: absolute (centered
 * over the form). When the form is removed from the DOM after submit,
 * absolute positioning leaves the success block floating against the
 * top of the container. .form__reply--inline keeps it in normal flow
 * and adds breathing room. */
.form__reply--inline {
  position: static;
  transform: none;
  max-width: 540px;
  margin: 6rem auto;
  padding: 3rem 1rem;
  opacity: 1;
}
.form-container.is-success { min-height: auto; }