/* ================================================================
   AIER — Gravity Forms Custom CSS v2
   Forms: #23 (Individual Membership) · #7 (Group) · #12 (Course Checkout)
   Design: Mulish · Navy #143b66 · Teal #1499a6 · BG #f5f7fa
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800;900&display=swap');

/* ================================================================
   PAGE BACKGROUND
   ================================================================ */
body {
  background: #f5f7fa !important;
}

/* Reset Elementor section background that shows teal */
.elementor-section,
.elementor-top-section,
.e-con,
.e-con-inner {
  background-color: #f5f7fa !important;
}

/* ================================================================
   GLOBAL FONT RESET
   ================================================================ */
.gform_wrapper,
.gform_wrapper *,
.gform_legacy_markup_wrapper,
.gform_legacy_markup_wrapper * {
  font-family: 'Mulish', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

/* ================================================================
   OUTER WRAPPER — remove GF's own padding/margin
   ================================================================ */
.gform_wrapper {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ================================================================
   FORM CARD
   ================================================================ */
.gform_wrapper .gform_body,
.gform_wrapper form {
  background: #ffffff !important;
  border: 1px solid #e4e8ec !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 16px rgba(20,59,102,.09) !important;
  padding: 36px 40px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ================================================================
   FORM TITLE
   ================================================================ */
.gform_heading {
  text-align: center !important;
  margin-bottom: 28px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid #e4e8ec !important;
}

.gform_title {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #143b66 !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}

.gform_description {
  font-size: 14px !important;
  color: #5a6776 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================================================
   STEP PROGRESS INDICATOR
   Actual GF HTML:
   <div class="gf_page_steps">
     <div class="gf_step gf_step_completed gf_step_previous">
       <span class="gf_step_number">1</span>
       <span class="gf_step_label">Determine your member type</span>
     </div>
     <div class="gf_step gf_step_active gf_step_last">
       <span class="gf_step_number">2</span>
       <span class="gf_step_label">Complete Payment</span>
     </div>
   </div>
   ================================================================ */

/* Wrapper */
.gf_page_steps {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 0 24px !important;
  margin: 0 0 28px !important;
  border-bottom: 1px solid #e4e8ec !important;
  gap: 0 !important;
}

/* Each step: number + label inline */
.gf_step {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #94a0ab !important;
}

/* First step grows to push the connector line across */
.gf_step:not(.gf_step_last) {
  flex: 1 !important;
}

/* Connector line after the first step's label */
.gf_step:not(.gf_step_last)::after {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: #e4e8ec !important;
  flex: 1 !important;
  min-width: 40px !important;
  margin-left: 12px !important;
  align-self: center !important;
}

/* Completed step — teal connector */
.gf_step_completed:not(.gf_step_last)::after {
  background: #7fd6b3 !important;
}

/* ── Step number circle — all states same size ── */
.gf_step_number,
.gf_step_completed .gf_step_number,
.gf_step_active .gf_step_number,
.gf_step_previous .gf_step_number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: 'Mulish', sans-serif !important;
  background: #f3f5f7 !important;
  color: #94a0ab !important;
  border: 2px solid #d3dae1 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* ── Active step ── */
.gf_step_active .gf_step_number {
  background: #143b66 !important;
  color: #fff !important;
  border-color: #143b66 !important;
}

.gf_step_active .gf_step_label {
  color: #143b66 !important;
  font-weight: 800 !important;
}

/* ── Completed step ── */
.gf_step_completed .gf_step_number {
  background: #e9f8f1 !important;
  color: #0f7a5e !important;
  border-color: #7fd6b3 !important;
  position: relative !important;
}

/* Override GF gravity-theme ::before that injects a 40px overlay */
.gform_wrapper.gravity-theme .gf_step_completed .gf_step_number::before,
.gf_step_completed .gf_step_number::before {
  width: 28px !important;
  height: 28px !important;
  top: -2px !important;
  left: -2px !important;
  /* background: #e9f8f1 !important;
  border: 2px solid #7fd6b3 !important; */
  border-radius: 50% !important;
}

.gf_step_completed .gf_step_label {
  color: #0f7a5e !important;
}

/* ── Step label ── */
.gf_step_label {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Mulish', sans-serif !important;
  white-space: nowrap !important;
}

/* ================================================================
   FIELD GRID — 2 columns by default
   ================================================================ */
.gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 20px !important;
  row-gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fields that should always be full width */
.gfield.gfield--width-full,
.gfield--type-address,
.gfield--type-textarea,
.gfield--type-select,
.gfield--type-multiselect,
.gfield--type-html,
.gfield--type-section,
.gfield--type-checkbox,
.gfield--type-radio,
.gfield--type-consent,
.gfield--type-list,
.gfield--type-repeater,
.gfield--type-fileupload,
.gfield--type-product,
.gfield--type-total,
.gfield--type-shipping,
.gfield--type-coupon,
.gfield--type-creditcard,
.gfield--type-donation,
.gfield_html,
.gsection {
  grid-column: 1 / -1 !important;
}

/* ---- Name field ----
   Spans full width BUT its internal grid must exactly mirror
   the parent 2-col grid so First/Last visually align with
   Phone/Email below them.
   Key: strip all padding/margin from the li so the internal
   grid starts at the same x-position as grid column 1. */
.gfield--type-name {
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gfield--type-name .ginput_complex {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each name span must not add extra space */
.gfield--type-name .ginput_complex span {
  margin: 0 !important;
  padding: 0 !important;
}

.gfield--type-name .ginput_complex span input {
  width: 100% !important;
}

/* Phone + Email: sit in the 2-col parent grid.
   Strip any GF default padding so their width
   equals exactly 1fr of the same parent grid. */
li.gf_left_half,
li.gf_right_half {
  padding: 0 !important;
  margin: 0 !important;
}

li.gf_left_half  { grid-column: 1 !important; }
li.gf_right_half { grid-column: 2 !important; }

/* Phone & Email inputs — constrain to match Name sub-field width */
.ginput_container_phone input,
.ginput_container_email input {
  max-width: 87% !important;
  width: 100% !important;
}

/* Also strip GF's default li padding on ALL fields */
.gform_fields > li,
.gform_fields .gfield {
  padding: 0 !important;
  margin: 0 !important;
}

/* ================================================================
   FIELD LABELS
   ================================================================ */
.gfield_label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #3f4a57 !important;
  margin-bottom: 6px !important;
  display: block !important;
  line-height: 1.4 !important;
}

.gfield_required,
.gfield_required_asterisk,
.gfield_required_text {
  color: #c0392b !important;
  margin-left: 2px !important;
  font-weight: 800 !important;
}

/* Sub-labels: First, Last */
.gfield_sublabel,
label.gfield_sublabel,
.ginput_complex .gf_clear + label,
.ginput_complex span label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a0ab !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Section break title */
.gsection_title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #143b66 !important;
  padding: 4px 0 12px !important;
  border-bottom: 1px solid #e4e8ec !important;
  margin-bottom: 0 !important;
}

.gsection_description {
  font-size: 13px !important;
  color: #5a6776 !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}

/* Field description / helper text */
.gfield_description,
.gfield--type-select .gfield_description {
  font-size: 12px !important;
  color: #82909c !important;
  margin-top: 5px !important;
  line-height: 1.5 !important;
}

/* ================================================================
   INPUTS · SELECTS · TEXTAREAS
   ================================================================ */
.gfield input[type=text],
.gfield input[type=email],
.gfield input[type=tel],
.gfield input[type=number],
.gfield input[type=url],
.gfield input[type=password],
.gfield input[type=date],
.gfield input[type=time],
.gfield select,
.gfield textarea,
.ginput_container input[type=text],
.ginput_container input[type=email],
.ginput_container input[type=tel],
.ginput_container input[type=number],
.ginput_container input[type=url],
.ginput_container input[type=password],
.ginput_container select,
.ginput_container textarea {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #cdd6de !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Mulish', sans-serif !important;
  color: #3f4a57 !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .12s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.gfield textarea,
.ginput_container textarea {
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
}

/* Focus */
.gfield input:focus,
.gfield select:focus,
.gfield textarea:focus,
.ginput_container input:focus,
.ginput_container select:focus,
.ginput_container textarea:focus {
  border-color: #143b66 !important;
  box-shadow: 0 0 0 3px rgba(20,59,102,.08) !important;
  outline: none !important;
}

/* Select chevron */
.gfield select,
.ginput_container_select select,
.ginput_container select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6776' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* ================================================================
   ADDRESS FIELD
   ================================================================ */
.ginput_container_address {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.ginput_full,
.ginput_container_address .ginput_full {
  grid-column: 1 / -1 !important;
}

.ginput_container_address span {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* ================================================================
   VALIDATION STATES
   ================================================================ */
.gfield_error input,
.gfield_error select,
.gfield_error textarea {
  border-color: #c0392b !important;
  background: #fff8f7 !important;
}

.gfield_error .gfield_label {
  color: #c0392b !important;
}

.validation_message,
.gfield_validation_message {
  font-size: 12px !important;
  color: #c0392b !important;
  margin-top: 5px !important;
  font-weight: 600 !important;
  display: block !important;
}

.ginput_container_fileupload .gfield_validation_message {
  background: none !important;
  border: none !important;
}

.gform_validation_errors,
.validation_error {
  background: #fdecea !important;
  border: 1px solid #f0b0a8 !important;
  border-left: 4px solid #c0392b !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: #c0392b !important;
  margin-bottom: 22px !important;
}

.gform_validation_errors h2,
.validation_error h2 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #c0392b !important;
  margin: 0 !important;
}

/* ================================================================
   CHECKBOXES & RADIOS
   ================================================================ */
.gfield_checkbox,
.gfield_radio {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.gfield_checkbox .gchoice,
.gfield_radio .gchoice {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid #e4e8ec !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color .12s, background .12s !important;
  list-style: none !important;
}

.gfield_checkbox .gchoice:hover,
.gfield_radio .gchoice:hover {
  background: #f7f9fb !important;
  border-color: #b8ccec !important;
}

.gfield_checkbox .gchoice input[type=checkbox],
.gfield_radio .gchoice input[type=radio] {
  width: 17px !important;
  height: 17px !important;
  accent-color: #143b66 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.gfield_checkbox .gchoice label,
.gfield_radio .gchoice label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3f4a57 !important;
  cursor: pointer !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Inline checkboxes (for role checkboxes in group form) */
.gfield_checkbox.gfield_contains_required {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.gfield_checkbox.gfield_contains_required .gchoice {
  flex: none !important;
  padding: 8px 14px !important;
}

/* ================================================================
   COUPON FIELD
   ================================================================ */
.ginput_container_coupon,
.gfield--type-coupon .ginput_container {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.gfield--type-coupon input[type=text] {
  flex: 1 !important;
  height: 42px !important;
}

.gfield--type-coupon input[type=button],
.gfield--type-coupon .gform_button_apply_coupon {
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1.5px solid #143b66 !important;
  background: transparent !important;
  color: #143b66 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: 'Mulish', sans-serif !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .12s, color .12s !important;
}

.gfield--type-coupon input[type=button]:hover,
.gfield--type-coupon .gform_button_apply_coupon:hover {
  background: #143b66 !important;
  color: #fff !important;
}

/* ================================================================
   CART / PRODUCT TABLE
   ================================================================ */
.gfield--type-product,
.gfield--type-total,
.gfield--type-shipping,
.gfield--type-coupon,
.gfield--type-list {
  grid-column: 1 / -1 !important;
}

.gform_wrapper table,
.gfield_list table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  border: 1px solid #e4e8ec !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.gform_wrapper table thead,
.gfield_list table thead {
  background: #f3f7fb !important;
}

.gform_wrapper table thead th,
.gfield_list table thead th {
  padding: 10px 14px !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #143b66 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: 1px solid #e4e8ec !important;
}

.gform_wrapper table tbody td,
.gfield_list table tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #eceff2 !important;
  color: #3f4a57 !important;
}

.gform_wrapper table tbody tr:last-child td {
  border-bottom: none !important;
}

.gform_wrapper table tfoot td,
.gform_wrapper table tfoot th {
  padding: 12px 14px !important;
  font-weight: 800 !important;
  color: #143b66 !important;
  background: #f7f9fb !important;
  border-top: 2px solid #143b66 !important;
}

/* ================================================================
   CREDIT CARD
   ================================================================ */
.gfield--type-creditcard {
  grid-column: 1 / -1 !important;
}

.gfield--type-creditcard .gfield_label {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #143b66 !important;
  padding-top: 16px !important;
  border-top: 1px solid #e4e8ec !important;
  margin-bottom: 14px !important;
}

.ginput_complex.ginput_container_creditcard {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.ginput_full.ginput_cardnumber_wrap,
.ginput_cardinfo_left.ginput_cardnumber_wrap {
  grid-column: 1 / -1 !important;
}

.ginput_container_creditcard span {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.ginput_container_creditcard label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #82909c !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.ginput_creditcard_cardtype_wrap {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.ginput_creditcard_cardtype_wrap img {
  height: 22px !important;
  width: auto !important;
  opacity: .7 !important;
}

/* Stripe element iframe container */
.gfield--type-creditcard .ginput_container {
  background: #f7f9fb !important;
  border: 1px solid #cdd6de !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}

/* ================================================================
   ADDITIONAL CONTACT SECTION BOX (Group form)
   ================================================================ */
.gfield--type-section.gsection {
  grid-column: 1 / -1 !important;
}

/* Wrap additional contact fields in a visual box */
#gform_7 .gfield--type-list,
#gform_7 .gfield--type-html,
#gform_7 .gfield_repeater_wrapper {
  background: #f7f9fb !important;
  border: 1px solid #e4e8ec !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* ================================================================
   + ADD MEMBER BUTTON (HTML field)
   ================================================================ */
.gfield--type-html input[type=button],
.gfield--type-html button,
.gfield_html input[type=button],
.gfield_html button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 22px !important;
  border-radius: 999px !important;
  border: 1.5px solid #1499a6 !important;
  background: transparent !important;
  color: #1499a6 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: 'Mulish', sans-serif !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
}

.gfield--type-html input[type=button]:hover,
.gfield--type-html button:hover,
.gfield_html input[type=button]:hover,
.gfield_html button:hover {
  background: #1499a6 !important;
  color: #fff !important;
}

/* ================================================================
   FORM FOOTER & NAVIGATION BUTTONS
   ================================================================ */
.gform_footer,
.gform_page_footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e4e8ec !important;
  margin-top: 8px !important;
}

/* Next / Submit */
.gform_button,
.gform_next_button,
input[type=submit].gform_button,
input.gform_button[type=submit],
button.gform_button,
input[type=button].gform_next_button,
button.gform_next_button {
  height: 46px !important;
  padding: 0 38px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #143b66 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: 'Mulish', sans-serif !important;
  cursor: pointer !important;
  transition: background .12s !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}

.gform_button:hover,
.gform_next_button:hover,
input[type=submit].gform_button:hover,
button.gform_next_button:hover {
  background: #0f2d50 !important;
}

/* Previous */
.gform_previous_button,
input[type=button].gform_previous_button,
button.gform_previous_button {
  height: 46px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  border: 1.5px solid #cdd6de !important;
  background: transparent !important;
  color: #143b66 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: 'Mulish', sans-serif !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
}

.gform_previous_button:hover {
  background: #f3f7fb !important;
  border-color: #143b66 !important;
}

/* ================================================================
   CONFIRMATION MESSAGE
   ================================================================ */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  background: #e9f8f1 !important;
  border: 1px solid #7fd6b3 !important;
  border-left: 4px solid #0f7a5e !important;
  border-radius: 12px !important;
  padding: 28px 32px !important;
  text-align: center !important;
  font-size: 15px !important;
  color: #0f5e3e !important;
  line-height: 1.6 !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* ================================================================
   AJAX SPINNER
   ================================================================ */
.gform_ajax_spinner {
  margin-left: 12px !important;
  vertical-align: middle !important;
}

/* ================================================================
   FORM-SPECIFIC: INDIVIDUAL (#23) & GROUP (#7)
   ================================================================ */

/* Donation checkbox: inline */
#gform_12 .gfield--type-checkbox .gfield_checkbox,
#gform_23 .gfield--type-checkbox .gfield_checkbox {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 680px) {

  .gform_wrapper .gform_body,
  .gform_wrapper form {
    padding: 24px 18px !important;
    border-radius: 10px !important;
  }

  .gform_fields {
    grid-template-columns: 1fr !important;
  }

  .gfield--type-name .ginput_complex,
  .ginput_container_address,
  .ginput_complex.ginput_container_creditcard {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  li.gf_left_half,
  li.gf_right_half {
    grid-column: 1 / -1 !important;
  }

  .gf_step_wrapper {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  .gf_step:not(:last-child)::after {
    display: none !important;
  }

  .gform_footer,
  .gform_page_footer {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .gform_button,
  .gform_next_button,
  .gform_previous_button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}