/* =========================
   ISAK — Form visual polish (replace or append)
   - softer, cleaner look
   - outlines CTAs (ghost) to match homepage tone
   ========================= */

/* --- helpers & tokens (re-declare safe values) --- */
:root {
  --brand-teal: #7FBEC5;
  --brand-teal-dark: #1B6A73;
  --brand-deep: #192035;
  --radius: 12px;
  --form-max-width: 680px;
  --body-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --heading-font: "Clockwise", var(--body-font);
}

/* --- Page/frame container: reduce giant white space and center form --- */
.cs_formbg {
  display: flex !important;
  align-items: start !important;           /* start so header sits higher */
  justify-content: center !important;
  padding: 28px 18px 70px 18px !important; /* less top padding than before */
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* form card wrapper — keep it visually minimal but constrained */
.cs_formbg .cs_form, .cs_formbg .cs_form_inner, #deftform-instance {
  width: 100% !important;
  max-width: var(--form-max-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* tighten header spacing (title & subtitle) */
.cs_formbg .form-head, #deftform-instance .form-head, #deftform-instance header {
  margin-bottom: 10px !important;
  text-align: center !important;
}

/* Heading sizes — use Clockwise for headings, Inter for body */
.cs_formbg h1, #deftform-instance h1 {
  font-family: var(--heading-font) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin: .25rem 0 .65rem !important;
  color: var(--brand-deep) !important;
  line-height: 1.12 !important;
}
.cs_formbg h2, #deftform-instance h2 {
  font-family: var(--heading-font) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin: .2rem 0 .5rem !important;
}

/* Subtitle / blurb */
.cs_formbg .lead,
#deftform-instance .lead,
.cs_formbg p.lead {
  font-family: var(--body-font) !important;
  color: rgba(25,32,53,0.88) !important;
  margin-bottom: .6rem !important;
  font-size: .98rem !important;
  line-height: 1.45 !important;
  text-align: center;
}

/* --- fields: lighter inset, consistent sizing --- */
.cs_formbg input[type="text"],
.cs_formbg input[type="email"],
.cs_formbg input[type="tel"],
.cs_formbg textarea,
.cs_formbg select,
#deftform-instance input.field.cs_field,
#deftform-instance textarea.field.cs_field,
#deftform-instance select.field.cs_field {
  width: 100% !important;
  border: 1px solid #E6EBF0 !important;            /* lighter border */
  border-radius: calc(var(--radius) - 2px) !important;
  padding: 12px 14px !important;                   /* slight reduction for elegance */
  font-family: var(--body-font) !important;
  font-size: .98rem !important;
  color: var(--brand-deep) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(25,32,53,0.02) inset !important; /* very subtle */
  transition: border-color .14s ease, box-shadow .14s ease !important;
}

/* keep inline side-by-side fields balanced */
.cs_formbg .cs_row { display:flex !important; gap:12px !important; align-items:center !important; flex-wrap:wrap !important; }
.cs_formbg .cs_row .cs_field { flex:1 1 auto !important; min-width: 140px !important; }

/* placeholder */
.cs_formbg input::placeholder,
.cs_formbg textarea::placeholder { color: #94A0AD !important; }

/* focus: visible but gentle */
.cs_formbg input:focus,
.cs_formbg textarea:focus,
.cs_formbg select:focus,
#deftform-instance input:focus,
#deftform-instance textarea:focus {
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 4px rgba(127,190,197,0.12) !important;
  outline: none !important;
}

/* reduce decorative input icons if present so they don't distract */
.cs_formbg .field .field-icon,
.cs_formbg .cs_icon { opacity: .7 !important; filter: none !important; }

/* --- lists, privacy, small text --- */
.cs_formbg ul, #deftform-instance ul { padding-left: 1.15rem !important; margin: .3rem 0 .6rem !important; color: rgba(25,32,53,0.9) !important; }
.cs_formbg .privacy, #deftform-instance .privacy { text-align:center !important; margin-top:.45rem !important; font-size:.92rem !important; color: rgba(25,32,53,0.75) !important; }

/* --- CTA: ghost / outline style (matches homepage highlighted links) --- */
/* Apply class isak-cta-ghost to the submit button, OR let this target .cs_button if you prefer */
.cs_formbg .cs_button.isak-cta-ghost,
#deftform-instance .cs_button.isak-cta-ghost,
.cs_formbg .cs_button.isak-cta-ghost svg {
  background: transparent !important;
}
.cs_formbg .cs_button.isak-cta-ghost,
#deftform-instance .cs_button.isak-cta-ghost {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.5rem !important;
  padding:10px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--brand-teal-dark) !important;
  color: var(--brand-teal-dark) !important;
  box-shadow: 0 8px 22px rgba(27,106,115,0.06) !important;
  font-family: var(--body-font) !important;
  font-weight: 700 !important;
  transition: background-color .22s ease, box-shadow .22s ease, transform .14s ease !important;
}

/* Hover / focus for ghost */
.cs_formbg .cs_button.isak-cta-ghost:hover,
.cs_formbg .cs_button.isak-cta-ghost:focus,
#deftform-instance .cs_button.isak-cta-ghost:hover {
  background: rgba(127,190,197,0.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 30px rgba(27,106,115,0.09) !important;
}
.cs_formbg .cs_button.isak-cta-ghost:active { transform: none !important; box-shadow: 0 6px 16px rgba(27,106,115,0.06) !important; }

/* If you prefer to keep filled gradient button (uncomment & apply .isak-cta-filled instead)
   .cs_button.isak-cta-filled { background: linear-gradient(180deg,var(--brand-teal),var(--brand-teal-dark)) !important; color:#fff !important; border:none !important; } */

/* make the default provider button use ghost look if you didn't add class: (safer fallback) */
.cs_formbg .cs_button:not(.isak-cta-filled) {
  border-radius: 999px !important;
  border: 1.25px solid var(--brand-teal-dark) !important;
  background: transparent !important;
  color: var(--brand-teal-dark) !important;
  padding: 10px 18px !important;
  box-shadow: 0 8px 22px rgba(27,106,115,0.06) !important;
}

/* small spinner color */
.cs_formbg .cs_button svg, .cs_formbg .cs_button .spinner { fill: currentColor !important; color: currentColor !important; }

/* --- errors & validation (gentle) --- */
.cs_formbg .has_error input.field.cs_field,
#deftform-instance .has_error input.field.cs_field {
  border-color: #EE6A5B !important;
  box-shadow: 0 0 0 4px rgba(238,106,91,0.12) !important;
}

/* --- subtle polish: add faint top divider above privacy/notes if content long --- */
.cs_formbg .privacy:before,
#deftform-instance .privacy:before {
  content: "" ;
  display: block;
  width: 40%;
  height: 1px;
  margin: 12px auto 6px auto;
  background: linear-gradient(90deg, transparent, rgba(25,32,53,0.06), transparent);
}

/* --- responsiveness --- */
@media (max-width: 880px) {
  .cs_formbg { padding: 20px 14px 40px 14px !important; }
  .cs_formbg h1 { font-size: 1.25rem !important; }
  .cs_formbg .cs_row { flex-direction: column !important; gap:10px !important; }
  .cs_formbg .cs_button { width: 100% !important; min-height: 48px !important; }
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cs_formbg .cs_button,
  .cs_formbg input,
  .cs_formbg textarea { transition: none !important; }
}