/* =====================================================================
   THRIVE skin for embedded Jotform forms
   ---------------------------------------------------------------------
   HOW TO USE: paste a Jotform "Source Code" embed inside a wrapper:
       <div class="thrive-jotform"> ...jotform source... </div>
   All rules below are scoped to .thrive-jotform so they ONLY affect the
   embedded form and never leak into the rest of the site. High specificity
   + !important so they win over Jotform's own CDN theme CSS.
   Works for any Jotform (contact form, symptom checklist, etc.).
   ===================================================================== */

.thrive-jotform {
  --tj-forest: var(--t-forest);
  --tj-forest-deep: var(--t-forest-deep);
  --tj-cream: var(--t-cream);
  --tj-sand: var(--t-sand);
  --tj-gold: var(--t-gold);
  --tj-gold-soft: var(--t-gold-soft);
  --tj-border: rgb(var(--t-forest-rgb) / 0.12);
  --tj-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- container / reset ---- */
.thrive-jotform .form-all {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--tj-forest) !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 16px !important;
  box-shadow: none !important;
  border: 0 !important;
}
.thrive-jotform .supernova,
.thrive-jotform .form-all:before { background: transparent !important; }
.thrive-jotform ul.form-section,
.thrive-jotform .form-section {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;   /* kill the <ul> disc bullets */
}
.thrive-jotform .form-line {
  margin: 0 0 1.15rem !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
}
.thrive-jotform .form-line-active { background: transparent !important; }

/* hide Jotform's own cover logo — the page is already branded */
.thrive-jotform .form-cover-wrapper,
.thrive-jotform #formCoverLogo { display: none !important; }

/* ---- labels ---- */
.thrive-jotform .form-label,
.thrive-jotform .form-label-top,
.thrive-jotform .form-label-auto {
  font-family: "Inter", sans-serif !important;
  color: var(--tj-forest) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.45rem !important;
}
.thrive-jotform .form-sub-label { color: rgb(var(--t-forest-rgb) / 0.55) !important; font-weight: 400 !important; }
.thrive-jotform .form-required { color: var(--tj-gold) !important; }

/* ---- text inputs / textarea / dropdown ---- */
.thrive-jotform .form-textbox,
.thrive-jotform .form-textarea,
.thrive-jotform .form-dropdown,
.thrive-jotform input[type="text"],
.thrive-jotform input[type="email"],
.thrive-jotform input[type="tel"],
.thrive-jotform input[type="number"],
.thrive-jotform select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: var(--t-white) !important;
  color: var(--tj-forest) !important;
  border: 1px solid var(--tj-border) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.95rem !important;
  font-family: "Inter", sans-serif !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.thrive-jotform .form-textarea { min-height: 150px !important; resize: vertical !important; }
.thrive-jotform .form-textbox:focus,
.thrive-jotform .form-textarea:focus,
.thrive-jotform .form-dropdown:focus,
.thrive-jotform select:focus,
.thrive-jotform input:focus {
  outline: 2px solid var(--t-forest) !important; /* A4: visible focus, not outline:none */
  outline-offset: 1px !important;
  border-color: var(--tj-gold) !important;
  box-shadow: 0 0 0 3px rgb(var(--t-gold-rgb) / 0.45) !important;
}
.thrive-jotform input::placeholder,
.thrive-jotform textarea::placeholder { color: rgb(var(--t-forest-rgb) / 0.4) !important; }

/* ---- layout: make half/full fields full width, stack sub-fields ---- */
.thrive-jotform .form-input,
.thrive-jotform .form-input-wide,
.thrive-jotform div[data-layout="half"],
.thrive-jotform div[data-layout="full"] { width: 100% !important; max-width: 100% !important; }
.thrive-jotform .form-sub-label-container { width: 100% !important; margin: 0 0 0.5rem 0 !important; }
.thrive-jotform .form-sub-label-container:last-child { margin-bottom: 0 !important; }
/* full name = two columns */
.thrive-jotform li[data-type="control_fullname"] [data-wrapper-react="true"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.8rem !important;
}
.thrive-jotform input#input_3_full { width: 100% !important; }

/* ---- checkboxes / radios: recolor brand (Jotform default is blue) ---- */
.thrive-jotform .form-multiple-column {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.55rem 1.2rem !important;
}
.thrive-jotform .form-checkbox-item,
.thrive-jotform .form-radio-item {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  clear: none !important;
}
.thrive-jotform .dragger-item { display: none !important; }
.thrive-jotform .form-checkbox-item label,
.thrive-jotform .form-checkbox-item span,
.thrive-jotform .form-radio-item label,
.thrive-jotform .form-radio-item span { color: var(--tj-forest) !important; font-size: 0.95rem !important; }
/* on-brand checked state even without Jotform's theme CSS pseudo-elements */
.thrive-jotform .form-checkbox,
.thrive-jotform .form-radio,
.thrive-jotform input[type="checkbox"],
.thrive-jotform input[type="radio"] {
  accent-color: var(--tj-forest) !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 0.55rem !important;
  flex-shrink: 0 !important;
}
.thrive-jotform .form-checkbox:checked + label:before,
.thrive-jotform .form-checkbox:checked + span:before {
  background-color: var(--tj-forest) !important;
  border-color: var(--tj-forest) !important;
}
.thrive-jotform .form-radio:checked + label:before,
.thrive-jotform .form-radio:checked + span:before { border-color: var(--tj-forest) !important; }
.thrive-jotform .form-radio:checked + label:after,
.thrive-jotform .form-radio:checked + span:after { background-color: var(--tj-gold) !important; }
.thrive-jotform .form-checkbox:hover + label:before,
.thrive-jotform .form-checkbox:hover + span:before,
.thrive-jotform .form-radio:hover + label:before,
.thrive-jotform .form-radio:hover + span:before {
  border-color: rgb(var(--t-gold-rgb) / 0.6) !important;
  box-shadow: 0 0 0 2px rgb(var(--t-gold-rgb) / 0.22) !important;
}
.thrive-jotform .form-checkbox:focus + label:before,
.thrive-jotform .form-checkbox:focus + span:before,
.thrive-jotform .form-radio:focus + label:before,
.thrive-jotform .form-radio:focus + span:before {
  border-color: var(--tj-gold) !important;
  box-shadow: 0 0 0 3px rgb(var(--t-gold-rgb) / 0.25) !important;
}

/* ---- submit button → THRIVE gradient pill (matches .btn-primary) ---- */
.thrive-jotform .form-submit-button,
.thrive-jotform button.form-submit-button,
.thrive-jotform .form-submit-button-simple_blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(115deg, var(--tj-forest-deep) 0%, var(--tj-forest) 32%, var(--tj-gold) 118%) !important;
  color: var(--tj-cream) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 1rem 2.4rem !important;
  min-width: 200px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgb(var(--t-forest-rgb) / 0.18) !important;
  transition: transform 0.3s var(--tj-ease), box-shadow 0.3s var(--tj-ease) !important;
}
.thrive-jotform .form-submit-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgb(var(--t-gold-rgb) / 0.32) !important;
}
.thrive-jotform .form-buttons-wrapper { margin-top: 0.6rem !important; text-align: left !important; padding: 0 !important; }

/* ---- pagebreak (multi-page forms like the symptom checklist) ---- */
.thrive-jotform .form-pagebreak-back,
.thrive-jotform .form-pagebreak-next {
  background: var(--tj-forest) !important;
  color: var(--tj-cream) !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.8rem !important;
}
.thrive-jotform .form-pagebreak-back:hover,
.thrive-jotform .form-pagebreak-next:hover { background: var(--tj-gold) !important; color: var(--tj-forest-deep) !important; }
.thrive-jotform .form-product-item.selected,
.thrive-jotform .form-product-item:hover { border-color: var(--tj-gold) !important; }

/* ---- form header (if shown) → Playfair ---- */
.thrive-jotform .form-header,
.thrive-jotform .form-header-group .form-header {
  font-family: "Playfair Display", Georgia, serif !important;
  color: var(--tj-forest) !important;
  font-weight: 500 !important;
}
.thrive-jotform .form-subHeader { color: rgb(var(--t-forest-rgb) / 0.6) !important; }

/* ---- errors: keep red but on-brand, rounded ---- */
.thrive-jotform .form-line-error .form-error-message {
  background-color: var(--t-error) !important;
  border-radius: 8px !important;
}
.thrive-jotform .form-line-error .form-error-message .form-error-arrow { border-bottom-color: var(--t-error) !important; }
.thrive-jotform .form-line-error input:not(#coupon-input),
.thrive-jotform .form-line-error textarea,
.thrive-jotform .form-line-error select {
  border: 1px solid var(--t-error) !important;
  box-shadow: 0 0 0 3px rgb(var(--t-error-rgb) / 0.18) !important;
}

/* ---- hide Jotform branding inside our card ---- */
.thrive-jotform .jotform-powered-by,
.thrive-jotform .formFooter-heading,
.thrive-jotform [class*="poweredBy"] { display: none !important; }

/* HIPAA badge stays; keep it quiet inside the card */
.thrive-jotform .hipaa-badge,
.thrive-jotform [class*="hipaaBadge"],
.thrive-jotform [class*="HIPAA"] {
  margin-top: 0.75rem !important;
  opacity: 0.85;
}

/* ---- responsive ---- */
@media (max-width: 600px) {
  .thrive-jotform .form-multiple-column { grid-template-columns: 1fr !important; }
  .thrive-jotform li[data-type="control_fullname"] [data-wrapper-react="true"] { grid-template-columns: 1fr !important; }
  .thrive-jotform .form-submit-button { width: 100% !important; }
}

/* ---------------------------------------------------------------------
   .thrive-jotform-frame — wrapper for an IFRAME embed (cross-origin forms
   Jotform only exposes as an iframe, e.g. Cards/HIPAA forms). We can't skin
   inside the iframe, so we frame it cleanly and let the form's own (already
   on-brand) theme show through with allowtransparency. Tighten the card
   padding so the embed fills the frame. jotformEmbedHandler owns height.
   --------------------------------------------------------------------- */
.echo .sc-card.thrive-jotform-frame { padding: 0.5rem !important; overflow: hidden; }
.echo .q-contact-card.thrive-jotform-frame {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100%;
  transform: none !important;
}
.echo .q-contact-card.thrive-jotform-frame:hover {
  box-shadow: none !important;
  transform: none !important;
}
.echo .thrive-jotform-frame iframe {
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 920px;
  min-height: 880px;
  border: none !important;
  border-radius: 16px;
  background: transparent !important;
}
@media (max-width: 700px) {
  .echo .q-contact-card.thrive-jotform-frame { padding: 0 !important; }
  .echo .thrive-jotform-frame iframe {
    height: 1180px;
    min-height: 1100px;
  }
}