/**
 * Gravity Forms styling, carried over verbatim from the live Oxygen site
 * (Oxygen → Stylesheets). Loaded on the front end and in the editor.
 *
 * @package Novara
 */

/* ==========================================================================
   Novara Laser & Aesthetics Clinic — Gravity Forms styling
   Matches novara.clinic (Oxygen Builder / DM Sans / optima-nova-lt-pro)
   Target: Gravity Forms 2.5+ (Orbital & gravity-theme markup)
   --------------------------------------------------------------------------
   HOW TO USE
   1. Paste this whole file into Oxygen → Manage → Stylesheets (new stylesheet
      called "Gravity Forms"), or into WPCode as a CSS snippet, or your
      child theme's style.css.
   2. Everything is scoped to .gform_wrapper so nothing else on the site moves.
   3. To style ONE form only, wrap the shortcode in a div and swap the two
      lines marked [SCOPE] at the bottom of this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens — lifted from the live site
   -------------------------------------------------------------------------- */

.gform_wrapper {
  /* Brand colours */
  --nv-green-dark:   #236E5A;   /* headings, nav links */
  --nv-green:        #4F8B7B;   /* sage — footer, inline links */
  --nv-green-tint:   #F2F6F4;   /* very light sage wash */
  --nv-green-line:   #D6E2DD;   /* field borders */
  --nv-copper:       #E4693F;   /* accent — "Book Online" outline */
  --nv-ink:          #1F2322;   /* body text */
  --nv-muted:        #6B7472;   /* helper text */
  --nv-error:        #C4472B;

  /* Typography */
  --nv-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --nv-font-head:    optima-nova-lt-pro, Optima, Palatino, Georgia, serif;

  /* Shape */
  --nv-radius:       6px;
  --nv-radius-pill:  100px;
  --nv-gap:          26px;
}


/* --------------------------------------------------------------------------
   2. Gravity Forms Orbital CSS API overrides
   --------------------------------------------------------------------------
   IMPORTANT — WHY THE SELECTOR LOOKS ODD, AND WHY IT IS "html:" NOT "body:"

   Gravity Forms scopes its Orbital variables to an ID-based selector:

       #gform_wrapper_1[data-form-index="0"].gform-theme, [data-parent-form="1_0"]

   That's specificity (1,2,0) — an ID beats any number of classes. A plain
   ".gform_wrapper.gform-theme" rule is (0,2,0) and silently loses, so the
   variables never take.

   The submit button is styled ENTIRELY from these variables, which is why
   the button is always the one element that ignores custom CSS while
   every other field styles fine.

   "html:has(#gravity_forms_theme_framework-css)" borrows an ID's specificity
   (:has() inherits the weight of its argument) without hardcoding the form ID.

   ---> IT MUST BE "html:has(...)", NOT "body:has(...)". <---

   GF's stylesheet <link> lives in <head>. <head> is NOT a descendant of
   <body>, so body:has() never matches and the whole block silently does
   nothing. <head> IS a descendant of <html>. Verified on the live site:
   body:has() -> GF default blue square button
   html:has() -> green pill. One word, entire difference.
   -------------------------------------------------------------------------- */

html:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper.gform-theme {

  /* --- Submit button (the ones that actually matter) --- */
  --gf-ctrl-btn-bg-color-primary:           var(--nv-green-dark);
  --gf-ctrl-btn-bg-color-hover-primary:     var(--nv-green);
  --gf-ctrl-btn-bg-color-focus-primary:     var(--nv-green);
  --gf-ctrl-btn-color-primary:              #ffffff;
  --gf-ctrl-btn-color-hover-primary:        #ffffff;
  --gf-ctrl-btn-border-color-primary:       var(--nv-green-dark);
  --gf-ctrl-btn-border-color-hover-primary: var(--nv-green);
  --gf-ctrl-btn-radius:                     var(--nv-radius-pill);
  --gf-ctrl-btn-font-size:                  17px;
  --gf-ctrl-btn-font-weight:                400;
  --gf-ctrl-btn-padding-x:                  34px;
  --gf-ctrl-btn-padding-y:                  14px;
  --gf-ctrl-btn-shadow:                     none;
  --gf-ctrl-btn-size:                       auto;  /* else GF forces a fixed height */
  --gf-ctrl-btn-font-family:                var(--nv-font-body);

  /* --- Global palette --- */
  --gf-color-primary:            var(--nv-green-dark);
  --gf-color-primary-rgb:        35, 110, 90;
  --gf-color-primary-contrast:   #ffffff;
  --gf-color-primary-darker:     #1B5545;
  --gf-color-primary-lighter:    var(--nv-green);

  --gf-color-secondary:          #ffffff;
  --gf-color-secondary-contrast: var(--nv-ink);
  --gf-color-secondary-darker:   var(--nv-green-tint);
  --gf-color-secondary-lighter:  #ffffff;

  --gf-color-in-ctrl:            #ffffff;
  --gf-color-in-ctrl-contrast:   var(--nv-ink);
  --gf-color-in-ctrl-primary:    var(--nv-green-dark);

  --gf-color-out-ctrl-light:     var(--nv-green-line);
  --gf-color-out-ctrl-dark:      var(--nv-ink);

  --gf-color-danger:             var(--nv-error);
  --gf-radius:                   var(--nv-radius);
  --gf-font-size-primary:        17px;
  --gf-font-size-secondary:      15px;
}


/* --------------------------------------------------------------------------
   3. Form shell
   -------------------------------------------------------------------------- */

.gform_wrapper {
  font-family: var(--nv-font-body);
  color: var(--nv-ink);
  max-width: 640px;   /* remove this line if you want full-width */
}

.gform_wrapper form { margin: 0; }

/* Form title & description */
.gform_wrapper .gform_heading { margin-bottom: 32px; }

.gform_wrapper .gform_title {
  font-family: var(--nv-font-head);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
  color: var(--nv-green-dark);
  margin: 0 0 10px;
}

.gform_wrapper .gform_description {
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--nv-muted);
  display: block;
}

/* Field spacing */
.gform_wrapper .gform_fields {
  grid-row-gap: var(--nv-gap);
  row-gap: var(--nv-gap);
}

.gform_wrapper .gfield { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   4. Labels & helper text
   -------------------------------------------------------------------------- */

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gfield_label_before_complex {
  font-family: var(--nv-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--nv-ink);
  margin-bottom: 8px;
  display: block;
}

/* Required asterisk in the copper accent */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk {
  color: var(--nv-copper);
  font-weight: 400;
  margin-left: 3px;
}

/* Sub-labels (First / Last, Area / Number) */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gform-field-label--type-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--nv-muted);
  margin-top: 6px;
}

/* Description / instructions under a field */
.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--nv-muted);
  padding-top: 6px;
}


/* --------------------------------------------------------------------------
   5. Text inputs, textareas, selects
   -------------------------------------------------------------------------- */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--nv-ink);
  background-color: #ffffff;
  border: 1px solid var(--nv-green-line);
  border-radius: var(--nv-radius);
  padding: 13px 16px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.gform_wrapper textarea {
  min-height: 150px;
  resize: vertical;
  padding: 14px 16px;
}

/* Placeholder */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #A3AFAB;
  font-weight: 300;
  opacity: 1;
}

/* Hover */
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper textarea:hover,
.gform_wrapper select:hover {
  border-color: var(--nv-green);
}

/* Focus — sage ring, matches the site's soft feel */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--nv-green-dark);
  box-shadow: 0 0 0 3px rgba(79, 139, 123, 0.18);
  background-color: #ffffff;
}

/* Autofill — stop Chrome's yellow */
.gform_wrapper input:-webkit-autofill,
.gform_wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nv-ink);
  box-shadow: 0 0 0 1000px #ffffff inset;
}


/* --------------------------------------------------------------------------
   6. Select / dropdown — custom chevron in brand green
   -------------------------------------------------------------------------- */

.gform_wrapper select,
.gform_wrapper .ginput_container_select select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23236E5A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 9px !important;
  padding-right: 44px;
  cursor: pointer;
}

/* Multi-select shouldn't get the chevron */
.gform_wrapper select[multiple] {
  background-image: none !important;
  padding-right: 16px;
  min-height: 160px;
}

/* Dropdown option list (Firefox / Windows respect these) */
.gform_wrapper select option {
  color: var(--nv-ink);
  background: #ffffff;
  padding: 8px;
}


/* --------------------------------------------------------------------------
   7. Radios & checkboxes
   -------------------------------------------------------------------------- */

.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .ginput_container_consent input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  border: 1px solid var(--nv-green-line);
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .ginput_container_consent input[type="checkbox"] { border-radius: 4px; }
.gform_wrapper .gfield_radio input[type="radio"]                { border-radius: 50%; }

.gform_wrapper .gfield_checkbox input[type="checkbox"]:hover,
.gform_wrapper .ginput_container_consent input[type="checkbox"]:hover,
.gform_wrapper .gfield_radio input[type="radio"]:hover {
  border-color: var(--nv-green);
}

.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked,
.gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
  background-color: var(--nv-green-dark);
  border-color: var(--nv-green-dark);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.5L4 7.5L10 1.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked {
  border-color: var(--nv-green-dark);
  background-color: #ffffff;
  box-shadow: inset 0 0 0 4px var(--nv-green-dark);
}

.gform_wrapper .gfield_checkbox input:focus-visible,
.gform_wrapper .ginput_container_consent input:focus-visible,
.gform_wrapper .gfield_radio input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 139, 123, 0.25);
}

.gform_wrapper .gchoice label {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--nv-ink);
  cursor: pointer;
  margin: 0;
}

/* Consent field */
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gform_wrapper .ginput_container_consent label {
  font-size: 15px;
  font-weight: 300;
  color: var(--nv-muted);
  line-height: 1.5;
}

.gform_wrapper .ginput_container_consent a {
  color: var(--nv-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* --------------------------------------------------------------------------
   8. Submit button — pill, matching the site's button shape
   -------------------------------------------------------------------------- */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 32px;
  padding: 0;
}

/* NOTE: every submit-button rule below is prefixed with
   html:has(#gravity_forms_theme_framework-css) to match the ID-level
   specificity Gravity Forms uses on its own button styles. Without the
   prefix these rules are silently outranked — see the explainer in
   section 2. Keep the prefix even though it looks redundant.

   Covers all four button markup variants GF can output:
     .gform_button        — standard submit
     .gform-button        — inline submit (#field_submit)
     .gform-theme-button  — theme framework
     .gform_image_button  — image submit                                    */

html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_footer input[type="submit"],
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_footer button[type="submit"],
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_page_footer input[type="submit"],
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_page_footer input[type="button"],
html:has(#gravity_forms_theme_framework-css) .gform_wrapper #field_submit .gform-button,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_button,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform-theme-button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_button {
  display: inline-block;
  width: auto;
  font-family: var(--nv-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #ffffff;
  background-color: var(--nv-green-dark);
  border: 1px solid var(--nv-green-dark);
  border-radius: var(--nv-radius-pill);
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}

html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_footer input[type="submit"]:hover,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_footer button[type="submit"]:hover,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform_button:hover,
html:has(#gravity_forms_theme_framework-css) .gform_wrapper .gform-theme-button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background-color: var(--nv-green);
  border-color: var(--nv-green);
}

.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_footer button[type="submit"]:active {
  transform: translateY(1px);
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 139, 123, 0.35);
}

/* Secondary "Previous" button on multi-page forms */
.gform_wrapper .gform_page_footer .gform_previous_button {
  background-color: transparent;
  color: var(--nv-green-dark);
  border: 1px solid var(--nv-green-line);
  margin-right: 10px;
}

.gform_wrapper .gform_page_footer .gform_previous_button:hover {
  background-color: var(--nv-green-tint);
  border-color: var(--nv-green);
}

/* Spinner */
.gform_wrapper .gform_ajax_spinner {
  margin-left: 12px;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   9. Validation & errors
   -------------------------------------------------------------------------- */

/* Summary box at the top */
.gform_wrapper .gform_validation_errors {
  background-color: #FDF1EE;
  border: 1px solid rgba(228, 105, 63, 0.4);
  border-radius: var(--nv-radius);
  box-shadow: none;
  padding: 16px 20px;
  margin-bottom: 28px;
}

.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_submission_error {
  font-family: var(--nv-font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--nv-error);
  margin: 0;
}

.gform_wrapper .gform_validation_errors > h2 .gform-icon { display: none; }

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ul {
  margin: 10px 0 0 18px;
  font-size: 15px;
  font-weight: 300;
}

.gform_wrapper .gform_validation_errors a {
  color: var(--nv-error);
  text-decoration: underline;
}

/* Field-level error state */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error .ginput_container input {
  border-color: var(--nv-error);
  background-color: #FEF8F6;
}

.gform_wrapper .gfield_error,
.gform_wrapper .gfield.gfield_error {
  background: transparent;
  border: none;
  padding: 0;
}

.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_error legend.gfield_label {
  color: var(--nv-ink);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  background: transparent;
  border: none;
  border-left: 2px solid var(--nv-error);
  border-radius: 0;
  padding: 2px 0 2px 10px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  color: var(--nv-error);
}


/* --------------------------------------------------------------------------
   10. Confirmation message
   -------------------------------------------------------------------------- */

.gform_confirmation_wrapper .gform_confirmation_message,
.gform_wrapper .gform_confirmation_message {
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--nv-ink);
  background-color: var(--nv-green-tint);
  border: 1px solid var(--nv-green-line);
  border-left: 3px solid var(--nv-green);
  border-radius: var(--nv-radius);
  padding: 24px 28px;
}


/* --------------------------------------------------------------------------
   11. Odds & ends
   -------------------------------------------------------------------------- */

/* Section break */
.gform_wrapper .gsection {
  border-bottom: 1px solid var(--nv-green-line);
  padding-bottom: 12px;
  margin-top: 16px;
}

.gform_wrapper .gsection_title {
  font-family: var(--nv-font-head);
  font-weight: 400;
  font-size: 24px;
  color: var(--nv-green-dark);
  margin: 0 0 4px;
}

/* HTML block inside a form inherits site body type */
.gform_wrapper .gfield_html {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--nv-ink);
}

.gform_wrapper .gfield_html a { color: var(--nv-green); }

/* File upload */
.gform_wrapper input[type="file"] {
  font-family: var(--nv-font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--nv-muted);
  border: 1px dashed var(--nv-green-line);
  border-radius: var(--nv-radius);
  padding: 14px 16px;
  width: 100%;
  background: var(--nv-green-tint);
}

/* Progress bar (multi-page) */
.gform_wrapper .gf_progressbar_wrapper .gf_progressbar {
  background-color: var(--nv-green-tint);
  border-radius: var(--nv-radius-pill);
}

.gform_wrapper .gf_progressbar_percentage {
  background-color: var(--nv-green);
  border-radius: var(--nv-radius-pill);
}

.gform_wrapper .gf_progressbar_title {
  font-family: var(--nv-font-body);
  font-weight: 300;
  color: var(--nv-muted);
}

/* Honeypot / hidden fields shouldn't create gaps */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden { display: none !important; }


/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .gform_wrapper { --nv-gap: 20px; }

  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper textarea,
  .gform_wrapper select {
    font-size: 16px;      /* stops iOS zooming on focus — do not lower */
    padding: 12px 14px;
  }

  .gform_wrapper select { padding-right: 40px; }

  .gform_wrapper .gform_footer input[type="submit"],
  .gform_wrapper .gform_footer button[type="submit"] {
    width: 100%;
    padding: 15px 24px;
  }
}


/* --------------------------------------------------------------------------
   [SCOPE] Optional: limit these styles to one form only
   --------------------------------------------------------------------------
   If you'd rather this only applied to the new contact form, wrap the
   shortcode in Oxygen like this:

       <div class="novara-form">[gravityform id="1" title="true"]</div>

   ...then find-and-replace ".gform_wrapper" with ".novara-form .gform_wrapper"
   throughout this file.
   -------------------------------------------------------------------------- */