/* =========================================================
   GoHighLevel Form Embed + Skeleton Loader
   Scoped to avoid site-wide side effects
   ========================================================= */

/* Wrapper around the embedded iframe */
.ghl-form-wrapper {
  width: 100%;
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  contain: layout size;
  min-height: 656px;
  aspect-ratio: 720 / 656;
  position: relative;
}

.ghl-form-wrapper.loading {
  background: #f5f7fa;
}

.ghl-form-wrapper iframe {
  width: 100%;
  height: 656px;
  border: none;
  display: block;
  background: transparent;
  will-change: contents;
}

/* ---------------------------------------------------------
   Helper wrapper (fix typo + support both class names)
   --------------------------------------------------------- */
.feature-section-inner,
.feature-sectioninner {
  position: relative;
  margin-top: 0;
}

/* ---------------------------------------------------------
   Form subtitle styling (SAFE replacement for global h6)
   Use <p class="form-subtitle">...</p> or <h3 class="form-subtitle">...</h3>
   --------------------------------------------------------- */
.form-subtitle {
  font-size: 1.05rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  margin: 0.25rem 0 0;
}

/* Backward-friendly: if you still have an h6 in a form section,
   it will look correct BUT only within known form wrappers. */
.feature-section-inner h6,
.feature-sectioninner h6,
.section-inner h6 {
  font-size: 1.05rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  margin: 0.25rem 0 0;
}

.feature-section-inner h1,
.feature-sectioninner h1 {
  font-size: 2rem;
  text-align: center;
  font-weight: 650;
  color: var(--text);
  margin: 0 0;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
   Skeleton Loader
   --------------------------------------------------------- */
.form-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  border-radius: 12px;
  padding: 2rem;
  pointer-events: none;
}

.form-skeleton::before,
.form-skeleton::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  height: 16px;
  background: linear-gradient(
    90deg,
    #e0e4e8 0%,
    #f0f2f5 50%,
    #e0e4e8 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.form-skeleton::before {
  top: 2rem;
  width: 60%;
}

.form-skeleton::after {
  top: 5rem;
  width: 100%;
  height: 48px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.form-skeleton .skeleton-field {
  position: absolute;
  left: 2rem;
  right: 2rem;
  height: 48px;
  background: linear-gradient(
    90deg,
    #e0e4e8 0%,
    #f0f2f5 50%,
    #e0e4e8 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.form-skeleton .skeleton-field:nth-child(1) { top: 9rem; }
.form-skeleton .skeleton-field:nth-child(2) { top: 13rem; }
.form-skeleton .skeleton-field:nth-child(3) { top: 17rem; width: 48%; }
.form-skeleton .skeleton-field:nth-child(4) { top: 17rem; right: 2rem; left: auto; width: 48%; }
.form-skeleton .skeleton-field:nth-child(5) { top: 21rem; height: 120px; }

/* ---------------------------------------------------------
   Responsive heights (embed forms are often fixed-height)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .ghl-form-wrapper {
    max-width: 100%;
    margin-top: 2rem;
    min-height: 720px;
    aspect-ratio: auto;
  }

  .ghl-form-wrapper iframe {
    height: 720px;
  }
}

@media (max-width: 480px) {
  .ghl-form-wrapper {
    min-height: 800px;
  }

  .ghl-form-wrapper iframe {
    height: 800px;
  }
}