/* Contact Form — branded Gravity Forms card */
.upside-contactform.surf-care { background: var(--surface-care); }
.upside-contactform-inner { max-width: 760px; margin: 0 auto; }
.upside-contactform-head { text-align: center; margin-bottom: 32px; }
.upside-contactform-head h1 { font-size: 46px; }
.upside-contactform-head p { font-size: 17px; margin-top: 12px; }
.upside-contactform-card {
  background: #fff; border-radius: var(--r-lg); padding: 44px;
  box-shadow: 0 30px 70px -40px rgba(9, 76, 138, .35); border: 1px solid #eef2f6;
}

/* --- Gravity Forms brand overrides (GF Orbital/Gravity theme — compound + !important) --- */
.upside-contactform-card .gform_wrapper .gfield_label { font-family: var(--font) !important; font-weight: 600 !important; color: var(--dark) !important; font-size: 15px !important; }
.upside-contactform-card .gform_required_legend { display: none !important; }
.upside-contactform-card .gfield_required { color: var(--brand-primary) !important; }

.upside-contactform-card .gform_wrapper input[type="text"],
.upside-contactform-card .gform_wrapper input[type="email"],
.upside-contactform-card .gform_wrapper input[type="tel"],
.upside-contactform-card .gform_wrapper select,
.upside-contactform-card .gform_wrapper textarea {
  font-family: var(--font) !important;
  border: 1.5px solid var(--secl) !important;
  border-radius: var(--r-sm) !important;
  padding: 13px 15px !important;
  font-size: 15px !important;
  color: var(--black) !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* <select> needs its own treatment — the shared rule above breaks it two ways:
   1. GF sets line-height:38px on selects. With 13px of vertical padding in a
      border-box that computes to ~38px tall, the content box is ~9px, so the
      line box is clipped and the select paints EMPTY (a text input survives the
      same padding because it renders its text in an overflow-visible inner box).
   2. `background: #fff` as a SHORTHAND resets background-image, wiping GF's
      --gf-ctrl-select-icon — that's the missing dropdown arrow. Hence
      background-color above, and the icon restored here.
   Drop the vertical padding and let the text center in the 38px box, which also
   keeps State the same height as the City input beside it. */
.upside-contactform-card .gform_wrapper select {
  line-height: normal !important;
  padding: 0 38px 0 15px !important;
  height: 38px !important;
  background-image: var(--gf-ctrl-select-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  /* With appearance:none + an explicit height, Chrome does NOT vertically
     centre a select's text the way it does an input's — dropping the vertical
     padding above left "Ohio" sitting 8.5px high against the City field next to
     it. Flex-centring the select's own text lands it pixel-identical to the
     sibling input. (Josh's fix.) */
  display: flex !important;
  align-items: center !important;
}
.upside-contactform-card .gform_wrapper input:focus,
.upside-contactform-card .gform_wrapper select:focus,
.upside-contactform-card .gform_wrapper textarea:focus {
  border-color: var(--brand-primary) !important;
  outline: 2px solid rgba(37, 135, 226, .18) !important;
  outline-offset: 1px !important;
}
.upside-contactform-card .gfield_description { color: var(--brand-primary) !important; font-size: 12.5px !important; }

/* --- Path switcher (field 1) — three-panel pill switcher, spec v1.2 ---------
   Real radios stay in the DOM (kept accessible + GF conditional logic reads
   them); the <label> is what's painted as the panel. Sub-labels are injected by
   upside_pathswitch_sublabel() in functions.php. */
.upside-contactform-card .upside-pathswitch .gfield_label { text-align: center !important; display: block !important; margin-bottom: 14px !important; }
/* Hide the "(Required)" tag on the toggle only — picking a path is obvious, and
   the tag reads as noise above the panels. The field stays isRequired (and
   aria-required) so validation still blocks a pathless submit, which would
   otherwise route nowhere. */
.upside-contactform-card .upside-pathswitch .gfield_required { display: none !important; }
/* GF's Orbital theme sets flex-direction:column on .gfield_radio and leaves
   .gchoice a grid whose items don't stretch — both need overriding by hand or
   the panels stack and shrink-wrap to their text. */
.upside-contactform-card .upside-pathswitch .gfield_radio { display: flex !important; flex-direction: row !important; gap: 10px !important; }
.upside-contactform-card .upside-pathswitch .gchoice { display: block !important; flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; }
/* Visually hidden, not display:none — display:none drops it from the a11y tree
   and stops keyboard selection. */
.upside-contactform-card .upside-pathswitch input[type="radio"] {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important;
}
.upside-contactform-card .upside-pathswitch .gchoice label {
  display: flex !important; flex-direction: column !important; gap: 3px !important;
  height: 100% !important; padding: 15px 16px !important; margin: 0 !important;
  border: 1.5px solid var(--secl) !important; border-radius: var(--r-sm) !important;
  background: #fff !important; cursor: pointer !important; transition: .18s !important;
  font-family: var(--font) !important; font-weight: 600 !important; font-size: 14.5px !important;
  line-height: 1.3 !important; color: var(--secdark) !important; text-align: left !important;
}
.upside-contactform-card .upside-pathswitch .gchoice label:hover { border-color: var(--brand-primary) !important; }
.upside-contactform-card .upside-pathswitch .gchoice:has(input:checked) label {
  border-color: var(--brand-primary) !important; background: var(--light) !important; color: var(--dark) !important;
}
.upside-contactform-card .upside-pathswitch input[type="radio"]:focus-visible + label {
  outline: 2px solid rgba(37, 135, 226, .45) !important; outline-offset: 2px !important;
}
.upside-switch-sub { font-weight: 400 !important; font-size: 12px !important; color: var(--sec) !important; line-height: 1.35 !important; }
.upside-contactform-card .upside-pathswitch .gchoice:has(input:checked) .upside-switch-sub { color: var(--dark) !important; }
/* Three panels need more room than two did — stack before they crowd. */
@media (max-width: 780px) {
  .upside-contactform-card .upside-pathswitch .gfield_radio { flex-direction: column !important; }
  .upside-contactform-card .upside-pathswitch .gchoice { flex: 0 0 auto !important; }
  .upside-contactform-card .upside-pathswitch .gchoice label { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; }
}

/* Radio + checkbox selected states (Brand Light bg, Brand Primary accent) */
.upside-contactform-card .gform_wrapper .gchoice { padding: 4px 0 !important; }
.upside-contactform-card .gform_wrapper input[type="radio"],
.upside-contactform-card .gform_wrapper input[type="checkbox"] { accent-color: var(--brand-primary) !important; }
.upside-contactform-card .gform_wrapper .gchoice label { font-family: var(--font) !important; color: var(--secdark) !important; }

/* Half-width fields: let Gravity Forms' own grid + conditional-hide handle
   display; we only nudge the column span so it doesn't override hiding. */

/* Submit button → brand pill */
.upside-contactform-card .gform_footer input[type="submit"],
.upside-contactform-card .gform_footer button,
.upside-contactform-card .gform-theme-button {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  padding: 15px 36px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(37, 135, 226, .26) !important;
  transition: .2s !important;
}
.upside-contactform-card .gform_footer input[type="submit"]:hover,
.upside-contactform-card .gform_footer button:hover { transform: translateY(-2px) !important; }

.upside-contactform-card .gform_confirmation_message {
  font-size: 18px !important; color: var(--dark) !important; text-align: center !important; padding: 30px 0 !important;
}

@media (max-width: 600px) {
  .upside-contactform-card { padding: 28px; }
}