@charset "UTF-8";
/* =============================================================================
   Gravity Forms overrides — "Share Your LIVMARLI Story"
   Target: GF 2.10 "orbital" theme. Skins GF to match the bespoke source design
   (values mirror the old .regForm rules in style.min.css) and neutralizes
   orbital's spacing model.

   !important is used deliberately throughout: orbital ships high-specificity,
   CSS-variable-driven framework styles, and this file must win against them.
   ============================================================================= */
/* ---- Color tokens (source design palette) ---- */
:root {
  --snow-navy: #013A71; /* primary — links, submit button, focus ring */
  --snow-field-bg: #F5F5F5; /* input / checkbox fill */
  --snow-text: #7b7b7b; /* labels, body copy, counters */
  --snow-placeholder: #9b9fa7; /* input placeholders */
  --snow-error: #da3732; /* validation errors */
  --snow-ink: #000000; /* input text, checkmark */
  --snow-on-navy: #ffffff; /* text on the navy button */
}

/* GF's own required legend is hidden — the "*Required" header lives in the
   template (form-single.php) as it did in the original design. */
.gform_wrapper .gform_required_legend {
  display: none !important;
}

/* ---- Required indicator: convert orbital's "(Required)" text to a superscript *
   NOTE: this assumes the form's Required Indicator stays on the default
   "(Required)" text mode. If you switch it to "Asterisk" in the GF UI you'll get
   a double asterisk — remove the ::after rule below if you do. -------------- */
.gform_wrapper .gfield_label .gfield_required .gfield_required_text {
  display: none !important;
}

.gform_wrapper .gfield_label .gfield_required::after {
  content: "*";
  vertical-align: super;
  color: var(--snow-text) !important; /* text color, not orbital's default red */
  top: 2px;
  position: relative;
  left: -3px;
}

/* Asterisk after required checkbox choices (Consent / 18+), whose field labels
   are hidden — mirrors the <sup>*</sup> in the original markup. */
.gform_wrapper .gfield--type-checkbox.gfield_contains_required .gchoice label::after {
  content: " *";
  vertical-align: super;
  font-size: 0.7em;
  color: var(--snow-text);
}

/* ---- Drop the "X of Y max characters" counters on the short fields ---- */
.gform_wrapper .ginput_counter,
.gform_wrapper .charleft {
  display: none !important;
}

/* ...but keep the counter below the story textarea */
.gform_wrapper .gfield--type-textarea .ginput_counter {
  display: block !important;
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  line-height: 16px;
  color: var(--snow-text);
}

/* ---- Spacing: remove orbital's grid gap; control rhythm via field padding,
   matching the original .form-row (30px bottom). ---- */
.gform_wrapper .gform_fields {
  row-gap: 0 !important;
  column-gap: 20px !important;
}

.gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 0 30px 0 !important;
}

.gform_wrapper .gfield--type-html {
  padding-bottom: 10px !important;
}

.gform_wrapper .gfield--type-checkbox {
  padding-bottom: 6px !important;
}

/* ---- Labels & body copy ---- */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield p,
.gform_wrapper .gfield li,
.gform_wrapper .gfield_html {
  font-family: filson-pro, sans-serif;
  color: var(--snow-text) !important;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.gform_wrapper .gfield_label {
  display: block;
  margin: 0 0 2px 0 !important;
}

/* ---- Text / email / tel inputs & selects ---- */
.gform_wrapper .gfield input[type=text],
.gform_wrapper .gfield input[type=email],
.gform_wrapper .gfield input[type=tel],
.gform_wrapper .gfield select {
  width: 100% !important;
  height: 40px !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: var(--snow-field-bg) !important;
  padding: 0 0 0 15px !important;
  margin: 5px 0 !important;
  outline: none;
  font-family: filson-pro, sans-serif;
  font-size: 14px;
  color: var(--snow-ink);
  box-sizing: border-box;
}

.gform_wrapper .gfield input::placeholder {
  color: var(--snow-placeholder);
}

/* ---- Textarea (story) ---- */
.gform_wrapper .gfield textarea {
  width: 100% !important;
  height: 110px !important; /* ~half the default rows="10" height; still resizable */
  min-block-size: 120px !important;
  background-color: var(--snow-field-bg) !important;
  border: none !important;
  border-radius: 4px !important;
  outline: none;
  padding: 15px !important;
  margin: 5px 0 !important;
  resize: vertical;
  font-family: filson-pro, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

.gform_wrapper .gfield textarea::placeholder {
  color: var(--snow-placeholder);
  font-style: italic;
}

/* ---- Custom checkboxes (Consent / 18+ / Opt-in) ---- */
.gform_wrapper .gfield_checkbox {
  margin: 0 !important;
}

.gform_wrapper .gfield_checkbox .gchoice {
  position: relative;
  display: block;
  margin: 6px 0 !important;
  padding: 0;
}

.gform_wrapper .gfield_checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.gform_wrapper .gfield_checkbox label {
  position: relative;
  display: block;
  padding: 0 10px 0 28px !important;
  margin: 0 !important;
  color: var(--snow-text);
  line-height: 20px;
  cursor: pointer;
}

.gform_wrapper .gfield_checkbox label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background-color: var(--snow-field-bg);
  box-sizing: border-box;
}

.gform_wrapper .gfield_checkbox input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  height: 6px;
  width: 11px;
  border-left: 3px solid var(--snow-ink);
  border-bottom: 3px solid var(--snow-ink);
  transform: rotate(-45deg);
}

/* Keyboard focus indicator for the visually-hidden native checkbox (WCAG 2.4.7) */
.gform_wrapper .gfield_checkbox input[type=checkbox]:focus-visible + label::before {
  outline: 2px solid var(--snow-navy);
  outline-offset: 2px;
}

/* ---- Consent HTML block links ---- */
.gform_wrapper .gfield_html a,
.gform_wrapper .gfield li a {
  color: var(--snow-navy);
  text-decoration: underline;
}

/* ---- Validation messages & error state ---- */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--snow-error);
  font-size: 14px;
  line-height: 16px;
  font-style: italic;
  font-weight: 700;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border: 1px solid var(--snow-error) !important;
}

.gform_wrapper .gfield_error {
  background: none !important;
  border: none !important;
}

/* ---- Submit button: LEFT aligned, navy pill (matches .button.sendSubmit) ---- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 20px 0 0 0 !important;
}

.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform-footer input[type=submit] {
  width: auto !important;
  max-width: 100%;
  height: 60px !important;
  border-radius: 30px !important;
  background-color: var(--snow-navy) !important;
  border: none !important;
  padding: 0 80px !important;
  margin: 0 0 20px 0 !important;
  outline: none;
  cursor: pointer;
  font-family: filson-pro, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--snow-on-navy) !important;
}

.gform_wrapper .gform_footer input[type=submit]:hover {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.5);
}

/* ---- Inline confirmation (reuses the old .screen-thankyou copy) ---- */
.gform_confirmation_message .screen-thankyou h1 {
  color: var(--snow-navy);
}