/* HighLevel form skeleton (assets/js/jf-forms.js): a grey outline of the form while its iframe loads. */
.jf-inquiry-form,
.jf-quote-form,
.jf-cta-form,
.jf-pricing-form,
.jf-meeting-form {
  position: relative;
  width: 100%;
}

/* ── Skeleton base ─────────────────────────────────────────────────────────── */
.jf-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity .3s ease;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.jf-skeleton.is-hidden { opacity: 0; }

.jf-skeleton .sk {
  display: block;
  border-radius: 4px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

/* ── Inline skeleton ───────────────────────────────────────────────────────── */
.jf-skeleton .sk-label      { height: 12px; width: 30%; margin-bottom: 6px; background: #d1d5db; }
.jf-skeleton .sk-input      { height: 60px; width: 100%; margin-bottom: 16px; border-radius: 6px; }
.jf-skeleton .sk-input-half { height: 40px; width: 48%; display: inline-block; border-radius: 6px; }
.jf-skeleton .sk-row        { display: flex; gap: 4%; margin-bottom: 16px; }
.jf-skeleton .sk-btn        { height: 44px; width: 46%; margin-top: 8px; border-radius: 6px; background: #d1d5db; }

/* ── Popup skeleton ────────────────────────────────────────────────────────── */
.jf-skeleton .sk-popup-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.jf-skeleton .sk-logo-circle { height: 72px; width: 72px; border-radius: 50%; background: #d1d5db; }
.jf-skeleton .sk-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin-bottom: 0;
  background: none;
}

.jf-skeleton .sk-popup-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.jf-skeleton .sk-textarea   { height: 120px; width: 100%; margin-bottom: 16px; border-radius: 6px; }
.jf-skeleton .sk-captcha    { height: 78px;  width: 180px; margin-bottom: 20px; border-radius: 6px; }
.jf-skeleton .sk-btn-full   { height: 58px;  width: 100%; margin-top: 4px; border-radius: 8px; background: #d1d5db; }

/* ── Popup skeleton — mobile: 1 column ────────────────────────────────────── */
@media (max-width: 767px) {
  .jf-skeleton .sk-popup-grid {
    grid-template-columns: 1fr;
  }
}