/* ==========================================================================
   Contact SPA Layout & Transitions
   ========================================================================== */

/* Outer wrapping column */
.contact-form-col {
  position: relative;
  overflow: hidden;
  min-height: 500px;
}

/* Step Panel Base */
.contact-step-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
  pointer-events: none;
}

/* Step Panel Active (Visible) */
.contact-step-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out, visibility 0s;
  pointer-events: auto;
}

/* Step Panel Slided out to the left (Previous steps) */
.contact-step-panel.is-slide-left {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
  pointer-events: none;
}

/* Error text containers */
.form-errors-block {
  display: none;
  color: #dc2626; /* red-600 */
  font-size: 14px;
  margin-bottom: 16px;
  background-color: #fef2f2;
  border: 1px solid #f87171;
  padding: 10px 15px;
  border-radius: 4px;
}
.form-errors-block.is-visible {
  display: block;
}

/* Input validation error state */
.input-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2;
}

/* Loading Spinner */
.contact-form__submit {
  position: relative;
}
.btn-text {
  transition: opacity 0.2s;
}
.btn-text.is-hidden {
  opacity: 0;
}
.spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner.is-visible {
  display: block;
}

/* Complete Icon */
.contact-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #d1fae5;
  color: #10b981;
  margin: 0 auto 24px;
  text-align: center;
}
.contact-complete-wrap {
  text-align: center;
  padding: 48px 0;
}
.contact-complete-btn {
  display: inline-block;
  margin-top: 32px;
  text-decoration: none;
}