/* NextFume – Fluent Forms skin (moved from Fluent Forms > Custom CSS into the child theme). */

/* =========================================================
   NextFume - Premium Fluent Forms skin (v4)
   Modeled on the competitor's clean "Request a Free Quote"
   card, but dialed up: brand gradient accent, deeper card
   shadow, refined focus states, gradient CTA button, and a
   trust line under the button - all in NextFume's own
   purple/navy palette instead of their flat blue.
   Scoped to `.fluentform`, so style once and reuse the same
   [fluentform id="3"] shortcode on every service page.
   ========================================================= */

/* Sized for a ~420px container (a sidebar/card slot), not a wide
   full-page form - tighter padding, gap and type sizes throughout so
   two real columns still fit comfortably at that width. Everything
   here scales down from the wide version rather than fighting a
   cramped 2-column layout crammed into leftover space. */
.fluentform {
  position: relative;
  font-family: "Poppins", sans-serif;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 24px 22px 22px 22px;
  box-shadow: 0 24px 56px rgba(11, 30, 61, 0.14), 0 6px 16px rgba(109, 99, 255, 0.10);
  border: 1px solid #EEF0F7;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}
.fluentform * { box-sizing: border-box; }

/* ---- Kill the "blank card, then form pops in" flash. -------------
   Fluent Forms renders the form with a `ff-form-loading` class
   already on it, and its own bundled CSS keeps the form hidden while
   that class is present - it only gets removed once the plugin's JS
   finishes initializing. That JS runs after the card's own
   background/shadow (pure CSS, no JS dependency) has already painted,
   so there's a visible gap: card shows first, empty, then the fields
   pop in once JS catches up.

   Every field here is already fully styled by plain CSS alone (no JS
   needed to look right), so there's no unstyled-flash risk to protect
   against in the first place - it's safe to force the form visible
   immediately instead of waiting on FF's own "loading" gate. A short
   fade is layered on top so even a very brief JS delay reads as
   intentional rather than a jump. */
.fluentform form.ff-form-loading,
.fluentform form.ff-form-loading * {
  opacity: 1 !important;
  visibility: visible !important;
}
.fluentform form {
  opacity: 1;
  animation: ff-fade-in 260ms ease both;
}
@keyframes ff-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reserve the form's real height on the card from the very first
   paint (before FF's JS runs), so the card never visibly resizes or
   jumps once the fields are confirmed present - it's the right size
   from frame one. Matches this form's real content (Name+Email row,
   Country+Phone row, Description, button, trust line) at this card's
   ~420px width; adjust if fields are added or removed later. */
.fluentform {
  min-height: 460px;
}
@media (max-width: 640px) {
  .fluentform { min-height: 620px; }
}

/* Thin gradient accent bar across the very top of the card */
.fluentform::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #6D63FF 0%, #9088FF 50%, #6D63FF 100%);
}

/* ---- Field spacing ---- */
.fluentform .ff-el-group,
.fluentform .ff-el-form-control-wrap,
.fluentform > form > div {
  margin-bottom: 14px;
}
.fluentform .ff-el-group:last-of-type { margin-bottom: 0; }

/* ---- Two-column rows (Name+Email, Country+Phone): a fixed CSS Grid,
   never a wrapping flex row, so it can never collapse to one tall
   column no matter how narrow the card sits. Gap kept tight since the
   whole card is only ~420px wide. ---- */
.fluentform .ff-t-container,
.fluentform [class*="ff-grid-"],
.fluentform [class*="ff-row"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.fluentform .ff-t-cell,
.fluentform [class*="ff-t-cell-"],
.fluentform [class*="ff-col"] {
  min-width: 0;
}
.fluentform .ff-t-container .ff-el-group,
.fluentform .ff-t-cell .ff-el-group {
  margin-bottom: 0;
}

/* A composite field - Fluent Forms' Name field is the one that does
   this - can wrap its single sub-field in its OWN .ff-t-container,
   nested inside a column cell of the outer row. That inner container
   is not a real two-column row (it only ever holds one field), but it
   still matches the grid rule above by class name alone, so it was
   being split into two grid columns and the one cell inside it only
   filled the first column - roughly half width, which is exactly why
   First Name came out narrower than Email while Country/Phone (plain
   fields, no inner container) matched fine. Any .ff-t-container that
   is itself nested inside a column cell is that inner, single-field
   kind, so it's forced back to a plain full-width block instead of a
   second grid. */
.fluentform .ff-t-cell .ff-t-container,
.fluentform .ff-t-cell [class*="ff-grid-"],
.fluentform .ff-t-cell [class*="ff-row"] {
  display: block !important;
  width: 100% !important;
}

/* Fluent Forms sets its own inline width (from the "column width"
   setting on each field, e.g. style="width:50%") somewhere inside
   each cell. Guessing at Fluent Forms' exact class names to override
   that didn't reach far enough - different installs/versions nest
   things differently. This version doesn't guess names at all: it
   forces width:100% + !important on every element at every nesting
   depth inside a two-column row, up to 5 levels deep, using plain
   child combinators. Whatever FF actually calls its wrappers, and
   however deep the real input sits, this reaches it and overrides
   any inline width FF set, so all 4 boxes end up genuinely identical. */
.fluentform .ff-t-container > *,
.fluentform .ff-t-container > * > *,
.fluentform .ff-t-container > * > * > *,
.fluentform .ff-t-container > * > * > * > *,
.fluentform .ff-t-container > * > * > * > * > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  box-sizing: border-box !important;
}
/* The actual field controls need their own box-sizing too, so 100%
   width includes their padding/border rather than overflowing it. */
.fluentform .ff-t-container input,
.fluentform .ff-t-container select,
.fluentform .ff-t-container textarea {
  box-sizing: border-box !important;
}

/* The "Name" field is Fluent Forms' special composite widget - behind
   the scenes it's actually a mini First/Middle/Last row of its own,
   even with Middle and Last turned off (they're still in the DOM,
   just hidden), and that inner row keeps its own flex/grid column
   split (sized as if for 3 fields) regardless of the width forced
   above on its outer wrapper. That's why First Name specifically
   stayed narrow while plain fields (Country, Phone) didn't - the
   composite's own internal sizing is nested deeper than the 5 levels
   handled above. This extends the same reset two levels deeper.
   Important: it only ever touches sizing (width/flex-basis/etc.),
   never `display` - so a field FF has genuinely hidden (Middle/Last
   name, in this case) stays hidden and never gets un-hidden by
   accident. */
.fluentform .ff-t-container > * > * > * > * > * > *,
.fluentform .ff-t-container > * > * > * > * > * > * > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  box-sizing: border-box !important;
}

/* One more real-world wrinkle the Name-Fields widget exposes: its own
   bundled CSS puts a small padding-right (a manual gap) on EACH name
   sub-field wrapper, including the hidden Middle/Last ones - so even
   though only First Name renders, that wrapper's own leftover padding
   still eats into its width, leaving it a few pixels narrower than
   Email. Structural wrapper divs shouldn't carry their own padding at
   all (the visible input/select/textarea already gets its padding
   from the field-control rules below), so this strips padding from
   every non-control element inside a two-column row. The :not() list
   means it can never match an actual input/select/textarea, so it
   can't touch - and can't lose to - their own padding rules. */
.fluentform .ff-t-container *:not(input):not(select):not(textarea) {
  padding: 0 !important;
}

/* The same "extra wrapper" problem shows up vertically, not just
   horizontally: a composite field's inner divs (see the Name-field
   fix above) can carry their own margin, border or min-height from
   Fluent Forms' bundled CSS, making that field's row taller than a
   plain field's row even once the widths match. Wrapper divs should
   never contribute height of their own - only the label and the
   actual control should - so every non-control, non-label element in
   a two-column row is flattened to zero box model. This can never
   touch the input/select/textarea's own padding (which gives it its
   height) or the label's own spacing, because both are excluded. */
.fluentform .ff-t-container *:not(input):not(select):not(textarea):not(label):not(button) {
  margin: 0 !important;
  border: none !important;
  min-height: 0 !important;
  line-height: normal;
}

/* Belt-and-suspenders: target the actual First Name input directly by
   its known name/placeholder, so it's forced full-width regardless of
   how many levels of wrapping Fluent Forms puts around it. */
.fluentform input[name="first_name"],
.fluentform input[name*="names"],
.fluentform input[placeholder="Enter Your Name"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Fluent Forms gives a field's label-wrapper a different default gap
   before its input depending on whether that field sits inside a
   composite widget (like Name) or stands alone (like Email) - one of
   its own internal layout variants, not something with a class we can
   reliably target and zero out from outside. Rather than chase that
   difference, every field row (label-wrapper + control-wrapper) is
   turned into a flex column with one fixed, explicit gap, so the
   space between label and box can only ever be the number set here -
   it no longer depends on FF's own default at all, for either kind of
   field. */
.fluentform .ff-el-group,
.fluentform.fluentform .ff-el-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
/* Selector strength matters here: Fluent Forms' own rule for this
   exact spacing may itself be a multi-class, !important selector (the
   composite-vs-plain variants are exactly the kind of thing a plugin
   qualifies heavily), so a plain 2-class override can still lose the
   specificity fight even with !important on both sides. The repeated
   `.fluentform.fluentform...` prefix is a deliberate, harmless way to
   outrank that without guessing FF's exact selector. */
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--content,
.fluentform.fluentform .ff-el-group .ff-el-input--label,
.fluentform.fluentform .ff-el-group .ff-el-input--content,
.fluentform.fluentform.fluentform .ff-el-input--label,
.fluentform.fluentform.fluentform .ff-el-input--content {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Labels: normal case, dark, confident - not shouty uppercase.
   No margin-bottom here - the flex `gap` above is now the single
   source of the label-to-input spacing, so the label's own margin
   would only double it up. ---- */
.fluentform label,
.fluentform .ff-el-input--label label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #131A2C;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fluentform label .ff_req_astric,
.fluentform label .required,
.fluentform label span[class*="required"] {
  color: #6D63FF;
  margin-left: 2px;
}

/* ---- Inputs, textarea, select: clean white fields with a crisp
   border, a little roomier than the reference, premium focus glow. ---- */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: #131A2C;
  background: #FFFFFF;
  border: 1.5px solid #E1E4EE;
  border-radius: 10px;
  padding: 11px 12px;
  line-height: 1.4;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  outline: none;
  box-shadow: none;
}
.fluentform textarea { min-height: 90px; resize: vertical; }

.fluentform input::placeholder,
.fluentform textarea::placeholder { color: #9AA2B5; }

.fluentform input:hover,
.fluentform textarea:hover,
.fluentform select:hover { border-color: #C9CEDE; }

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
  border-color: #6D63FF;
  box-shadow: 0 0 0 4px rgba(109, 99, 255, 0.14);
}

/* Custom select arrow - bigger, brand-purple, and forced with
   !important so a theme's own default select styling (which is often
   !important itself, or just more specific) can't hide it. */
.fluentform select,
.fluentform .ff-el-form-control[type="select"],
.fluentform select.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 1.5L8 8.5L15 1.5' stroke='%230B1E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 13px 8px !important;
  cursor: pointer;
}
/* If a theme wraps the select in its own arrow icon/pseudo-element,
   hide that duplicate so only ours shows. */
.fluentform .ff-el-form-control-wrap::after,
.fluentform select + .select-arrow,
.fluentform select ~ i,
.fluentform select ~ .icon {
  display: none !important;
}

/* ---- Validation / error states ---- */
.fluentform .error,
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select,
.fluentform input.error,
.fluentform textarea.error,
.fluentform select.error {
  border-color: #E5484D !important;
}
.fluentform .error:not(input):not(select):not(textarea) {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #E5484D;
  margin-top: 6px;
}

/* ---- Submit button: rounded-rect (matches the reference's more
   corporate shape) with NextFume's brand gradient, soft shadow and a
   hover lift instead of the reference's flat, shadowless blue. ---- */
.fluentform button[type="submit"],
.fluentform .ff-btn-submit,
.fluentform input[type="submit"] {
  display: block;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #6D63FF 0%, #564CDB 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px 24px !important;
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(109, 99, 255, 0.32);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:hover,
.fluentform input[type="submit"]:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(109, 99, 255, 0.42);
}
.fluentform button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Trust line under the button, baked in the same way as the heading -
   edit the text on the line below to change it. */
.fluentform form::after {
  content: "\1F512  100% Privacy Guaranteed";
  display: block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: #8892AC;
  margin-top: 12px;
}

/* ---- Success / confirmation message ---- */
.fluentform .ff-message-success,
.fluentform .ff_success_message,
.fluentform .ff-form-success {
  background: #F3F1FF;
  border: 1px solid rgba(109, 99, 255, 0.25);
  color: #131A2C;
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

/* ---- Help text under a field ---- */
.fluentform .ff-el-help-text,
.fluentform .ff_help_message {
  font-size: 12.5px;
  color: #5B6478;
  margin-top: 6px;
}

/* ---- Mobile: single column, bigger touch targets. Two columns work
   in a ~420px desktop/tablet card slot, but on an actual phone that
   same two-up layout squeezes every field into ~half the screen width
   - cramped labels, small tap targets, the opposite of the clean,
   full-width single-column feel a phone form should have. Below
   640px (covers real phone widths, not just very small ones) every
   row drops to one field per line, full width, with roomier padding
   and a taller, easier-to-tap input - matching the pattern a mobile
   visitor already expects. ---- */
@media (max-width: 640px) {
  .fluentform {
    max-width: 100%;
    padding: 24px 18px 20px 18px;
    border-radius: 16px;
  }
  .fluentform .ff-t-container,
  .fluentform [class*="ff-grid-"],
  .fluentform [class*="ff-row"] {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .fluentform .ff-el-group,
  .fluentform .ff-el-form-control-wrap {
    margin-bottom: 16px;
  }
  .fluentform label,
  .fluentform .ff-el-input--label label {
    font-size: 14px;
  }
  .fluentform input[type="text"],
  .fluentform input[type="email"],
  .fluentform input[type="tel"],
  .fluentform input[type="number"],
  .fluentform input[type="url"],
  .fluentform textarea,
  .fluentform select,
  .fluentform .ff-el-form-control {
    font-size: 16px; /* 16px+ stops iOS Safari auto-zooming on focus */
    padding: 14px 14px;
    border-radius: 12px;
  }
  .fluentform textarea { min-height: 110px; }
  .fluentform button[type="submit"],
  .fluentform .ff-btn-submit,
  .fluentform input[type="submit"] {
    padding: 15px 24px !important;
    font-size: 15.5px;
  }
}