/**
 * GTI v2 Landing Pages
 *
 * Built from the Figma "Landing Pages" frames. Loaded only on the v2 landing
 * pages (see includes/gti-landing-v2.php), so none of this reaches the live
 * Login / Register / Contact / Program Waitlist pages.
 *
 * The Divi Theme Builder body layout is switched off for these pages, so this
 * markup is not wrapped in a Divi module — no !important, no specificity
 * battles with generated builder CSS.
 *
 * Font note: the frames set headings in PP Neue Corp (which the theme ships)
 * and body copy in Archivo. The theme only carries Archivo Expanded Bold, a
 * much wider face, so body text uses Mozilla Text at the design's sizes and
 * weights — the same substitution assets/css/account-v2.css makes.
 */

.gti-landing-v2 {
  --navy: #121c32;
  --blue: #0085eb;
  --blue-ink: #0068bc;
  --line: #c0c7d5;
  --ink-2: #404753;
  --on-dark: #e7e9ec;
  --grey: #707784;
  --gti-booking-blue-north: #1F90AC;
}

/**
 * With the Theme Builder body layout off these pages render through Divi's
 * stock page template, which caps content at the theme's 1080px container and
 * prints the post title above it. The frames are 1440 with their own 160px
 * gutters and supply their own heading, so both are undone — scoped to these
 * pages, so every other Divi page keeps the theme container.
 */
.gti-landing-v2 #main-content .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.gti-landing-v2 #left-area {
  width: 100%;
  padding: 0;
}

/* display:none also drops it from the accessibility tree, so this does not
   leave a second <h1> competing with the card title. */
.gti-landing-v2 .entry-title.main_title {
  display: none;
}

.gti-landing-v2 .gti-lp {
  font-family: "Mozilla Text", sans-serif;
  color: var(--navy);
}

/* ---------------------------------------------------------------------
 * Hero
 *
 * Full-bleed band carrying the action shot. Flat navy until that asset is
 * uploaded — gti_landing_v2_hero_image_style() layers the photo in behind a
 * navy scrim when the `gti_landing_v2_hero_image` filter supplies one.
 *
 * The sitewide header floats transparently over this band (custom.css), so
 * the top padding keeps the card clear of the nav.
 * ------------------------------------------------------------------- */

.gti-landing-v2 .gti-lp__hero {
  background-size: cover;
  background-position: center;
  padding: 200px 160px 120px;
}

.gti-landing-v2 .gti-lp__hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Login card
 * ------------------------------------------------------------------- */

.gti-landing-v2 .gti-lp__card {
  flex: 0 0 504px;
  max-width: 504px;
  background: #fff;
  border-radius: 2px;
  padding: 48px 40px 40px;
}

.gti-landing-v2 .gti-lp__card-title {
  margin: 0 0 28px;
  padding: 0;
  font-family: "PP Neue Corp", sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--navy);
}

p.login-register-lost-password a {
  font-style: normal;
}

/* ---------------------------------------------------------------------
 * Profile Builder login form
 *
 * [wppb-login] owns the markup, so these rules dress its output rather than
 * replacing it — authentication, validation and redirects stay with the
 * plugin.
 * ------------------------------------------------------------------- */

/**
 * The frames put "Remember Me" and "Lost your password?" on one row above the
 * button, but Profile Builder prints the lost-password link as a sibling
 * *after* the form. `display: contents` on the form promotes its rows to grid
 * items alongside that link, so the two can share a row without altering the
 * plugin's markup. The form element itself still submits and stays in the
 * accessibility tree in current browsers.
 */
.gti-landing-v2 .gti-lp__card .wppb-user-forms {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
}

.gti-landing-v2 .gti-lp__card #wppb-loginform {
  display: contents;
}

.gti-landing-v2 .gti-lp__card #wppb-loginform p {
  grid-column: 1 / -1;
  margin: 0 0 20px;
  padding: 0;
}

/* Password input sits inside a span, which has to stretch for the 100% to
   have anything to fill. */
.gti-landing-v2 .gti-lp__card .wppb-password-field-container {
  display: block;
  float: none;
  width: 100%;
}

/* woo.css floats these labels into a fixed 127px column, which pushes the
   password input (wrapped in its own span) out to the right. The frames stack
   label over full-width field, so the float is undone here. */
.gti-landing-v2 .gti-lp__card #wppb-loginform label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}

.gti-landing-v2 .gti-lp__card #wppb-loginform input[type="text"],
.gti-landing-v2 .gti-lp__card #wppb-loginform input[type="email"],
.gti-landing-v2 .gti-lp__card #wppb-loginform input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  font-size: 15px;
  color: var(--grey);
}

.gti-landing-v2 .gti-lp__card #wppb-loginform input:focus {
  border-color: var(--blue);
  outline: none;
}

/* "Remember Me" and "Lost your password?" share one row in the frames. */
.gti-landing-v2 .gti-lp__card #wppb-loginform p.login-remember {
  grid-column: 1;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--ink-2);
}

.gti-landing-v2 .gti-lp__card #wppb-loginform p.login-remember label {
  margin: 0;
  font-weight: 400;
  color: var(--ink-2);
}

.gti-landing-v2 .gti-lp__card #wppb-loginform input#rememberme {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.gti-landing-v2 .gti-lp__card .login-register-lost-password {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: end;
  margin: 0 0 24px;
  font-size: 15px;
  font-style: normal;
}

.gti-landing-v2 .gti-lp__card .login-register-lost-password a {
  color: var(--blue);
  text-decoration: none;
}

.gti-landing-v2 .gti-lp__card .login-register-lost-password a:hover {
  text-decoration: underline;
}

.gti-landing-v2 .gti-lp__card #wppb-loginform p.login-submit {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 0;
}

.gti-landing-v2 .gti-lp__card #wppb-loginform input#wppb-submit {
  display: block;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  font-family: "Mozilla Text", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gti-landing-v2 .gti-lp__card #wppb-loginform input#wppb-submit:hover {
  background: var(--blue-ink);
}

.gti-landing-v2 .login-north .gti-lp__card #wppb-loginform input#wppb-submit {
  background: var(--gti-booking-blue-north);
}

/* ---------------------------------------------------------------------
 * "Need an account?" — white type straight onto the hero photo.
 * ------------------------------------------------------------------- */

.gti-landing-v2 .gti-lp__aside {
  flex: 1 1 auto;
  max-width: 460px;
  align-self: end;
  margin-bottom: 50px;
}

.gti-landing-v2 .gti-lp__aside-title {
  margin: 0 0 16px;
  padding: 0;
  font-family: "PP Neue Corp", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.gti-landing-v2 .gti-lp__aside-copy {
  margin: 0 0 18px;
  padding-bottom: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-dark);
}

.gti-landing-v2 .gti-lp__btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.gti-landing-v2 .login-north .gti-lp__btn {
  background: var(--gti-booking-blue-north);
}

.gti-landing-v2 .gti-lp__btn:hover {
  background: var(--blue-ink);
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Program Waitlist V2 — single navy hero section with a floating white
 * card (Divi Contact Form), matching the Figma "Contact/Waitlist" frame.
 *
 * The theme's Customizer "Header Font" typography setting applies a
 * Teko-italic, blue, !important h1 style site-wide (see the .et_pb_text_0
 * h1 rule Divi prints inline) — the same reason the login card title above
 * needs its own font/color rule. This overrides it for the hero heading;
 * `!important` is required to win against the Customizer's own
 * `!important`, not for specificity.
 * ------------------------------------------------------------------- */

.gti-landing-v2 .gti-v2-hero__title,
.gti-landing-v2 .gti-v2-hero__subhead {
  margin: 0;
}

/* Frame: 919px block, 22px between the heading and each paragraph. */
.gti-landing-v2 .gti-v2-hero__title h1 {
  margin: 0;
  padding: 0;
  font-family: "PP Neue Corp", sans-serif;
  font-style: normal;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 72px;
  line-height: 0.93;
  color: #fff !important;
}

.gti-landing-v2 .gti-v2-hero__subhead {
  margin-top: 22px;
}

.gti-landing-v2 .gti-v2-hero__subhead p {
  margin: 0 auto;
  padding: 0;
  max-width: 689px;
  font-family: "Mozilla Text", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Waitlist card
 *
 * Divi renders the contact form's row as a flush, full-width strip, so
 * the card chrome is applied here: 768px wide, 49px padding, hairline
 * border, 2px radius and the 4px accent bar the frame puts across the
 * top. The Divi row is the card, so the accent is a ::before rather than
 * a border-top — a border would sit outside the 49px padding box and
 * round with the corners.
 * ------------------------------------------------------------------- */

.gti-landing-v2 .gti-v2-card {
  position: relative;
  overflow: hidden;
  padding: 49px;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gti-landing-v2 .gti-v2-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--blue);
}

.gti-landing-v2 .gti-v2-card .et_pb_column {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Waitlist form
 *
 * Divi floats its half-width fields and hides the <label> it already
 * prints, using the field title as a placeholder instead. The frame puts
 * a bold label above every field, so the label is shown, the duplicate
 * placeholder is hidden, and the floats are replaced with a two-column
 * grid — the fields keep Divi's own markup, validation and submit
 * handling untouched.
 * ------------------------------------------------------------------- */

/* Divi pulls the form 3% to the left to compensate for the per-field
   gutter padding it normally adds; the grid supplies its own gap, so both
   are undone. */
.gti-landing-v2 .gti-v2-form .et_pb_contact_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-left: 0;
}

.gti-landing-v2 .gti-v2-form .et_pb_contact_field {
  float: none;
  grid-column: span 2;
  margin: 0;
  padding: 0;
  width: auto;
}

.gti-landing-v2 .gti-v2-form .et_pb_contact_field_half {
  grid-column: span 1;
}

.gti-landing-v2 .gti-v2-form .et_pb_contact_form_label {
  display: block;
  margin-bottom: 8px;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: var(--navy);
}

.gti-landing-v2 .gti-v2-form .input,
.gti-landing-v2 .gti-v2-form .input[type="text"],
.gti-landing-v2 .gti-v2-form select.et_pb_contact_select {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 13px 17px;
  border: 1px solid #707784;
  border-radius: 2px;
  background-color: #ecf0f3;
  font-family: "Mozilla Text", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}

/* Draws its own chevron instead of the browser's native select arrow,
   matching the select treatment used on the account pages
   (account-v2.css). appearance:none drops the native arrow; the
   replacement is an inline SVG rather than a saved asset file, to stay
   CSS-only. */
.gti-landing-v2 .gti-v2-form select.et_pb_contact_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23707784' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 8px;
}

/* Divi's own field wrapper draws a second, CSS-triangle arrow via
   `.et_pb_contact_field[data-type="select"]:after` (style.css), stacking
   a solid grey triangle on top of the chevron above. Register never
   shows this because it's built from Profile Builder fields, not Divi
   contact-form fields, so this pseudo-element never applies there. */
.gti-landing-v2 .gti-v2-form .et_pb_contact_field[data-type="select"]::after {
  content: none;
}

/* The label above carries the field name, so Divi's placeholder copy of
   it is hidden rather than removed — it stays available to screen
   readers through the label's `for` attribute. */
.gti-landing-v2 .gti-v2-form .input::placeholder {
  color: transparent;
}

/* Divi clamps the textarea with its own `min-height: 150px`, so the
   frame's 146px has to be set on both properties. */
.gti-landing-v2 .gti-v2-form textarea.et_pb_contact_message {
  height: 146px;
  min-height: 146px;
  padding: 13px 17px;
  resize: vertical;
}

/* The frame leaves 48px between the message field and the button — 24px
   of grid gap plus this. */
.gti-landing-v2 .gti-v2-form .et_pb_contact_field[data-type="text"] {
  margin-bottom: 24px;
}

.gti-landing-v2 .gti-v2-form .et_contact_bottom_container {
  float: none;
  grid-column: span 2;
  margin: 0;
  text-align: left;
}

/* The theme runs with button icons off, which makes Divi apply
   `padding: 0.3em 1em !important` to every .et_pb_button — the frame's
   16px/18px can only beat that with `!important` of its own. */
.gti-landing-v2 .gti-v2-form .et_pb_contact_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  padding: 16px 18px !important;
  border: 0;
  border-radius: 3px;
  background: var(--blue);
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s ease;
}

.gti-landing-v2 .gti-v2-form .et_pb_contact_submit:hover {
  padding: 16px 18px !important;
  background: var(--blue-ink);
}

/* Divi appends an arrow glyph to its buttons on hover, which the frame
   does not have. */
.gti-landing-v2 .gti-v2-form .et_pb_contact_submit::after {
  display: none;
}

.wppb-rpf-remove {
  box-shadow: none ;
}

@media screen and (max-width: 767px) {
  .gti-landing-v2 .gti-v2-hero__title h1 {
    font-size: 44px;
  }

  .gti-landing-v2 .gti-v2-card {
    padding: 28px;
  }

  .gti-landing-v2 .gti-v2-form .et_pb_contact_form {
    grid-template-columns: 1fr;
  }

  .gti-landing-v2 .gti-v2-form .et_pb_contact_field,
  .gti-landing-v2 .gti-v2-form .et_pb_contact_field_half,
  .gti-landing-v2 .gti-v2-form .et_contact_bottom_container {
    grid-column: span 1;
  }

  .gti-landing-v2 .gti-v2-form .et_pb_contact_submit {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
 * Responsive — the mobile frame stacks the card above the CTA, both full
 * width, with the CTA sitting on the navy band.
 * ------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
  .gti-landing-v2 .gti-lp__hero {
    padding: 180px 60px 100px;
  }

  .gti-landing-v2 .gti-lp__hero-inner {
    gap: 48px;
  }

  .gti-landing-v2 .gti-lp__card {
    flex-basis: 440px;
  }
}

@media screen and (max-width: 900px) {
  .gti-landing-v2 .gti-lp__hero {
    padding: 150px 24px 80px;
  }

  .gti-landing-v2 .gti-lp__hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .gti-landing-v2 .gti-lp__card {
    flex-basis: auto;
    max-width: none;
    padding: 36px 28px 32px;
  }

  .gti-landing-v2 .gti-lp__card-title {
    font-size: 44px;
  }

  .gti-landing-v2 .gti-lp__aside {
    max-width: none;
  }

  .gti-landing-v2 .gti-lp__aside-title {
    font-size: 34px;
  }

  .gti-landing-v2 .gti-lp__btn {
    display: block;
    text-align: center;
  }
}

/* Narrow phones cannot fit "Remember Me" and the lost-password link side by
   side, so they stack rather than wrapping into each other. */
@media screen and (max-width: 600px) {
  .gti-landing-v2 .gti-lp__card .wppb-user-forms {
    grid-template-columns: 1fr;
  }

  .gti-landing-v2 .gti-lp__card #wppb-loginform p.login-remember {
    grid-row: 3;
    margin-bottom: 0;
  }

  .gti-landing-v2 .gti-lp__card #wppb-loginform p.login-remember label {
    white-space: nowrap;
  }

  .gti-landing-v2 .gti-lp__card .login-register-lost-password {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-bottom: 24px;
  }

  .gti-landing-v2 .gti-lp__card #wppb-loginform p.login-submit {
    grid-row: 5;
  }
}

/* ---------------------------------------------------------------------
 * Multi-Step registration chrome (Register v2)
 *
 * The Profile Builder add-on enqueues frontend-multi-step-forms.css on
 * wp_footer, i.e. after this file, and targets input[type="button"].
 * Scoping through .wppb-user-forms adds a class so these rules win on
 * specificity instead of needing !important.
 * ------------------------------------------------------------------- */

.wppb-user-forms div#wppb-msf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.wppb-user-forms input[type="button"].wppb-msf-tabs {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 12px 18px;
  border: 1px solid #c0c7d5;
  border-radius: 2px;
  background-color: #f4f6f9;
  color: #242d40;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.wppb-user-forms input[type="button"].wppb-msf-tabs:hover:not(:disabled) {
  background-color: #f4f6f9;
  border-color: #0085eb;
  color: #0085eb;
}

.wppb-user-forms input[type="button"].wppb-msf-tabs:focus-visible {
  outline: 2px solid #0085eb;
  outline-offset: 2px;
}

.wppb-user-forms input[type="button"].wppb-msf-tabs.wppb-msf-active {
  background-color: #121c32;
  border-color: #121c32;
  color: #ffffff;
}

/* Steps ahead of the current one stay disabled until validation passes. */
.wppb-user-forms input[type="button"].wppb-msf-tabs:disabled,
.wppb-user-forms input[type="button"].wppb-msf-tabs:hover:disabled {
  background-color: #f4f6f9;
  border-color: #c0c7d5;
  color: #242d40;
  opacity: 0.55;
  cursor: not-allowed;
}

/* The add-on floats Previous/Next, so this contains them. */
.wppb-user-forms li.wppb-msf-step-commands {
  display: flow-root;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #c0c7d5;
}

.wppb-user-forms input[type="button"].wppb-msf-button {
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-next {
  background-color: #0085eb;
  border-color: #0085eb;
  color: #ffffff;
}

.wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-next:hover {
  background-color: #0068bc;
  border-color: #0068bc;
}

.gti-v2-card--register-north .wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-next {
  background-color: var(--gti-booking-blue-north);
  border-color: var(--gti-booking-blue-north);
  color: #ffffff;
}

.gti-v2-card--register-north .wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-next:hover {
  background-color: var(--gti-booking-blue-north);
  border-color: var(--gti-booking-blue-north);
}

.wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-prev {
  background-color: #ffffff;
  border-color: #c0c7d5;
  color: #242d40;
}

.wppb-user-forms input[type="button"].wppb-msf-button.wppb-msf-prev:hover {
  border-color: #0085eb;
  color: #0085eb;
}

.wppb-user-forms input[type="button"].wppb-msf-button:focus-visible {
  outline: 2px solid #121c32;
  outline-offset: 2px;
}

@media screen and (max-width: 768px) {
  .wppb-user-forms input[type="button"].wppb-msf-tabs {
    flex-basis: 100%;
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* ---------------------------------------------------------------------
 * Register V2 — pulled directly from Figma via get_design_context on
 * node 2243:4617 ("Register — Concept B (3-Step)", desktop) and node
 * 2679:16384 ("Register Mobile"). Values below are the frames' literal
 * colors/sizes/spacing, not approximations — see each rule's frame
 * measurement in the comment beside it.
 *
 * `<input type="button">` cannot render ::before/::after — browsers
 * compute pseudo-element styles for it but never paint them — so
 * gti-landing-v2-register-steps.js wraps each tab in a `.gti-step` span
 * carrying a `.gti-step__num` badge, and injects the "Step N of 3" label
 * plus the "Next: {step}" button copy the frame shows (Profile Builder's
 * multi-step add-on always prints plain "Next"/"Previous"). The tab
 * input itself is only ever moved, never cloned or replaced, so Profile
 * Builder's own click handlers (bound to that exact node) keep working.
 * The plain flex-wrap tab rules above stay as the no-JS fallback.
 * ------------------------------------------------------------------- */

/* Card: Form node — 768w, pt-53/px-49/pb-49, border #c0c7d5, radius 2px,
   shadow 0px 1px 2px rgba(0,0,0,0.05), gap-32 between direct children. */
.gti-v2-card--register.gti-v2-card {
  padding: 53px 49px 49px;
}

.gti-v2-card--register .wppb-user-forms {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Stepper — the frame's Stepper node (2244:4870): 670w, horizontal,
   gap-16, items centered, with a full-width Divider node (2244:4885,
   #c0c7d5, 1px) below it separated by the Form's own 32px flex gap.
   #wppb-msf-tabs (the stepper) and the fields <ul> are siblings under
   .wppb-user-forms with no node in between, so the divider is drawn as
   this row's bottom border rather than a standalone element.

   Wrapping is explicitly off. The frame lays all three steps and both
   connectors on one line, and the base flex-wrap further up this file
   (the no-JS fallback) otherwise drops "GOALIES & TEAMS" onto a second
   row as soon as the card narrows.

   The selector repeats the `div` of the fallback's own
   `.wppb-user-forms div#wppb-msf-tabs`: that rule carries an id plus a
   type, so a class-and-id selector here ties on id and class count and
   then loses on the type, leaving its gap and flex-wrap in force.
   Matching its shape and relying on source order instead is what makes
   these declarations apply. */
.gti-v2-card--register div#wppb-msf-tabs {
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid #c0c7d5;
}

.gti-v2-card--register .gti-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

/* Connector — the frame's "Connector" nodes (2244:4875 / 2244:4880):
   1px #c0c7d5 with layoutGrow 1, i.e. the two of them share whatever
   the three fixed-width step groups leave over, which is what makes the
   row span the full content width. gti-landing-v2-register-steps.js
   inserts these as real siblings of .gti-step; see the note there for
   why a ::before on .gti-step cannot stretch. */
.gti-v2-card--register .gti-step-line {
  flex: 1 1 0;
  min-width: 16px;
  height: 1px;
  background-color: #c0c7d5;
}

/* Step Circle — 32px, rounded-16 (circle). Not-yet-reached is the default
   state: white fill, #c0c7d5 hairline, #707784 numeral. */
.gti-v2-card--register .gti-step__num {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #c0c7d5;
  border-radius: 16px;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #707784;
}

/* Current step — circle filled #0085eb with a white numeral. */
.gti-v2-card--register .gti-step--active .gti-step__num {
  border-color: #0085eb;
  background-color: #0085eb;
  color: #ffffff;
}

.gti-v2-card--register-north .gti-step--active .gti-step__num {
  border-color: var(--gti-booking-blue-north);
  background-color: var(--gti-booking-blue-north);
  color: #ffffff;
}

/* Completed step — the per-step frames (Form — Step 2, node 2245:4875,
   and Form — Step 3, nodes 2246:4875/2246:4881) fill the circle #121c32
   and swap the numeral for a tick. The numeral is kept in the DOM and
   made transparent rather than removed, so the badge still reads as part
   of the step for anything walking the text, and the tick is drawn from
   two borders instead of shipping an asset for a 11x6 mark. */
.gti-v2-card--register .gti-step--done .gti-step__num {
  border-color: #121c32;
  background-color: #121c32;
  color: transparent;
}

.gti-v2-card--register .gti-step--done .gti-step__num::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 11px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

/* A connector is dark once the step it leads out of is complete — the
   step-3 frame has both connectors #121c32, the step-2 frame only the
   first. The JS inserts each line immediately after the step it follows,
   so the adjacent-sibling combinator expresses exactly that. */
.gti-v2-card--register .gti-step--done + .gti-step-line {
  background-color: #121c32;
}

/* Step label — the frame's step TEXT nodes: Mozilla Text Bold 14px/20.3,
   uppercase, #707784 for steps not yet reached, #121c32 for the current
   one. `<input type="button">` can't wrap its value, so the label is
   always one line and the step group hugs it, matching the frame's HUG
   sizing. */
.gti-v2-card--register input[type="button"].wppb-msf-tabs {
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  text-transform: uppercase;
  color: #707784;
}

.gti-v2-card--register input[type="button"].wppb-msf-tabs.wppb-msf-active {
  background: none;
  color: #121c32;
}

.gti-v2-card--register input[type="button"].wppb-msf-tabs:hover:not(:disabled) {
  background: none;
  border-color: transparent;
}

/* Steps ahead of the current one are disabled until validation passes.
   The add-on's own stylesheet re-states `padding: 8px 10px` on its
   :disabled tabs at the same specificity as the rule above and is
   enqueued on wp_footer, i.e. after this file, so it wins on order and
   the not-yet-reached steps render 20px wider and 16px taller than the
   current one — visibly misaligning the row. Restating padding here,
   where the extra :disabled pseudo-class raises specificity above the
   plugin's, is what keeps all three step groups the same size. */
.gti-v2-card--register input[type="button"].wppb-msf-tabs:disabled,
.gti-v2-card--register input[type="button"].wppb-msf-tabs:hover:disabled {
  margin: 0;
  padding: 0;
  background: none;
  border-color: transparent;
  color: #707784;
  opacity: 1;
}

/* A completed step's label is #121c32, the same as the current step's —
   only steps still ahead stay grey. Declared after the :disabled rule so
   it wins at equal specificity whether or not the plugin has re-enabled
   that tab for going back. */
.gti-v2-card--register .gti-step--done input[type="button"].wppb-msf-tabs,
.gti-v2-card--register .gti-step--done input[type="button"].wppb-msf-tabs:disabled {
  color: #121c32;
}

/* Step headings — H5: PP Neue Corp, 34px/0.98, uppercase, #121c32.
   "PERSONAL INFO" on Step 1, "BILLING INFO" on Step 2, "GOALIE INFO" on
   Step 3. Profile Builder prints these as plain <li class="wppb-heading">
   with inner heading tags. gti-landing-v2-register-steps.js moves each
   step's trailing heading to the top of the following step to match the
   Figma layout (node 2245:4891 heads Step 2, node 2246:4892 heads Step 3). */
.gti-v2-card--register .wppb-heading {
  padding: 0 !important;
  list-style: none;
}

.gti-v2-card--register .wppb-heading h1,
.gti-v2-card--register .wppb-heading h2,
.gti-v2-card--register .wppb-heading h3,
.gti-v2-card--register .wppb-heading h4,
.gti-v2-card--register .wppb_billing_heading h4,
.gti-v2-card--register .wppb-heading h5 {
  margin: 0;
  padding: 0;
  font-family: "PP Neue Corp", sans-serif;
  font-weight: 800 !important;
  font-style: normal;
  font-size: 34px;
  line-height: 0.98;
  text-transform: uppercase;
  color: #121c32 !important;
}

/* "Custom HTML" fields (Profile Builder's field type for the plain
   description under a step heading, e.g. "Goalie Description") print their
   own field label above the actual copy — that label is the field's admin
   name, not visitor-facing copy, and no frame shows it: the design goes
   straight from the step heading to the description text itself.
   `!important` because the generic field-label rule below (needed to beat
   the plugin's own ID-boosted label rule) sets `display: block !important`
   and, being a normal declaration otherwise, this one would lose to it
   regardless of its higher selector specificity — !important beats
   specificity, so both sides need it and specificity decides between them. */
.gti-v2-card--register .wppb-user-forms li.wppb-html > label {
  display: none !important;
}

/* ---------------------------------------------------------------------
 * Register V2 — Profile Builder field styling
 *
 * Field label — Body S Bold: Mozilla Text Bold, 16px/1.45, #121c32,
 * 8px gap to the input (the frame's per-field flex-col gap-[8px]).
 * Field input/select — bg #ecf0f3, border 1px solid #707784, radius 2px,
 * height 50px, ~17px left padding.
 *
 * The plugin's own float/width rule on <label> carries a
 * `:not(#select_user_to_edit_form …)` clause — an ID inside :not() counts
 * toward specificity even though it never matches this page, which
 * outweighs any realistic class-based selector here. `!important` is the
 * only practical way to win, same justification as the button padding
 * override further down this file.
 * ------------------------------------------------------------------- */

.gti-v2-card--register .wppb-form-field {
  list-style: none;
}

.gti-v2-card--register .wppb-form-field label {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 8px;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: #121c32;
}

.gti-v2-card--register .wppb-form-field input[type="text"],
.gti-v2-card--register .wppb-form-field input[type="email"],
.gti-v2-card--register .wppb-form-field input[type="password"],
.gti-v2-card--register .wppb-form-field input[type="tel"],
.gti-v2-card--register .wppb-form-field input[type="number"],
.gti-v2-card--register .wppb-form-field textarea,
.gti-v2-card--register .wppb-form-field select {
  display: block !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 50px;
  padding: 0 17px;
  border: 1px solid #707784;
  border-radius: 2px;
  background: #ecf0f3;
  font-family: "Mozilla Text", sans-serif;
  font-size: 16px;
  color: #707784;
}

/* Textareas take the same chrome as the inputs but keep an auto height.
   They also carry a `cols` attribute, which is an intrinsic width that
   beats a plain `width: 100%` — hence the shared `!important` above —
   and `rows="5"`, which the min-height replaces so the box matches the
   105px the Goalies & Teams step renders at. */
.gti-v2-card--register .wppb-form-field textarea {
  height: auto;
  min-height: 105px;
  padding: 13px 17px;
  line-height: 1.45;
  resize: vertical;
}

/* Draws its own chevron instead of the browser's native select arrow,
   matching the treatment used on /contact and /program-waitlist (and
   the account pages). appearance:none is vendor-prefixed — Safari
   ignores the unprefixed property on <select> and keeps drawing its
   own triangle on top of the background-image otherwise. Register's
   selects are Profile Builder fields rather than Divi contact-form
   fields, so there's no second wrapper-drawn triangle to suppress
   here, unlike .et_pb_contact_field[data-type="select"] on /contact. */
.gti-v2-card--register .wppb-form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23707784' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 8px;
}

.gti-v2-card--register .wppb-form-field input:focus,
.gti-v2-card--register .wppb-form-field textarea:focus,
.gti-v2-card--register .wppb-form-field select:focus {
  border-color: #0085eb;
  outline: none;
}

/* Password inputs sit inside an inline <span> (the plugin's visibility-
   toggle wrapper), which has to stretch for the input's 100% to have
   anything to fill — otherwise they render narrower than their column. */
.gti-v2-card--register .wppb-password-field-container {
  display: block;
  float: none;
  width: 100%;
}

/* ---------------------------------------------------------------------
 * Register V2 — list reset
 *
 * Profile Builder nests its markup several lists deep: the multi-step
 * add-on wraps the whole form in a <ul>, gives each step its own
 * <li class="wppb-msf-step"> > <ul>, and the WooCommerce billing group
 * (ul.wppb-woo-billing-fields) and every repeater set
 * (ul.wppb-rpf-group) add one more level again. Divi styles
 * post-content lists with a left indent and gives each <li> an
 * intrinsic width, and those indents compound per level — measured 40px
 * on Account, 60px on Billing and 81px on Goalies & Teams, against a
 * stepper that sits outside the outer <ul> and so wasn't indented at
 * all. That is what made each step start at a different x and render a
 * different field width.
 *
 * Resetting every list in the form once, here, puts all three steps in
 * the same content box as the stepper above them; the grids below then
 * only have to describe columns.
 * ------------------------------------------------------------------- */

.gti-v2-card--register .wppb-user-forms ul,
.gti-v2-card--register .wppb-user-forms li {
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------
 * Register V2 — field grid
 *
 * The frame builds each step as a flex column of "Row" nodes, 24px
 * apart, and each Row holds one or two fields 24px apart — Account Type
 * and E-mail full width, First/Last Name and Password/Repeat Password
 * paired (node 2244:4886). Profile Builder emits no Row wrapper, just a
 * flat list of <li id="wppb-form-element-{id}"> in field-config order,
 * so the step list becomes a 2-column grid and adjacent fields pair
 * themselves through normal auto-flow.
 *
 * Everything defaults to full width and pairs opt in, rather than the
 * reverse: only Account is in the reference frame, so a field this file
 * hasn't been told about renders full width — which is always safe —
 * instead of silently landing in half a row.
 * ------------------------------------------------------------------- */

/* Every list of fields in the form gets the same two columns: the step's
   own list, the WooCommerce billing group and each repeater set. Matched
   by content (`:has(> li.wppb-form-field)`) rather than by position,
   because the multi-step add-on's JS re-parents each step's <ul> into a
   <fieldset> it injects on load — so the server markup is
   `li.wppb-msf-step > ul` but the DOM this CSS actually styles is
   `li.wppb-msf-step > fieldset > ul`. Keying off the fields themselves
   holds either way, and picks up the nested billing and repeater lists
   without naming them.

   The :not() is load-bearing. Each repeater ships a hidden prototype set
   that the add-on clones when you add a goalie or team, and it is hidden
   by a bare `[data-wppb-rpf-set="template"] { display: none }` — one
   attribute selector, which any `display` declared here outweighs.
   Without the exclusion this rule un-hides the prototype and the step
   renders an extra, permanently empty set. */
.gti-v2-card--register .wppb-user-forms ul:has(> li.wppb-form-field):not([data-wppb-rpf-set="template"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
}

.gti-v2-card--register .wppb-user-forms ul:has(> li.wppb-form-field) > li {
  grid-column: 1 / -1;
}

/* Account — the frame's two paired Rows. */
.gti-v2-card--register #wppb-form-element-3,
.gti-v2-card--register #wppb-form-element-4,
.gti-v2-card--register #wppb-form-element-15,
.gti-v2-card--register #wppb-form-element-16 {
  grid-column: auto;
}

/* Billing — City/Country and Province/Postcode. Not in the reference
   frame; paired because they are the short fields and are already
   adjacent in the order WooCommerce prints them, so the pairing needs no
   reordering (which would desync the visual and tab order). The two
   address lines and Phone stay full width. */
.gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_city,
.gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_country,
.gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_state,
.gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_postcode,
/* Goalies — Name/Birthday, Level/Team, Shirt/Hoodie size. Every field in
   this repeater is a short input or select, so the whole set pairs. The
   Teams repeater is deliberately left full width: over half of its
   fields are textareas, and pairing a textarea against a 50px input
   leaves ragged rows. */
.gti-v2-card--register .wppb-user-forms ul.wppb-rpf-name-wppb_repeater_field_goalie > li.wppb-form-field {
  grid-column: auto;
}

/* The repeater's own add/remove controls span the row above its set. */
.gti-v2-card--register .wppb-user-forms ul.wppb-rpf-group > li.wppb-rpf-action-wrap {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------
 * Register V2 — repeater sets
 *
 * Each goalie or team is one <ul class="wppb-rpf-group">, which the
 * repeater add-on draws as a bordered group so several entries stay
 * distinguishable. No frame covers the Goalies & Teams step, so that
 * grouping is kept — it carries real meaning — but restated in this
 * card's own tokens. The add-on's defaults are a #ddd border, a
 * `margin-bottom: 24px` that doubled up against the grid's row gap, and
 * `padding: 30px 20px !important`: a different grey from every other
 * line in the card, and a 21px horizontal inset that was the remaining
 * reason this step's fields did not line up with the other two. The
 * !important is matched because the add-on's own rule carries one.
 * ------------------------------------------------------------------- */

.gti-v2-card--register .wppb-user-forms li.wppb-repeater {
  margin-bottom: 0;
  border: 1px solid #c0c7d5;
  border-radius: 2px;
}

.gti-v2-card--register .wppb-user-forms li.wppb-repeater > ul {
  padding: 24px 24px 79px !important;
  border-bottom-color: #c0c7d5;
}

.gti_registration_form .wppb-rpf-action.wppb-rpf-remove {
  margin-left: 0 !important;
}

/* Add/remove set controls. The frame's "Add Another Goalie" (node
   2246:4926) is a blue text action beside a plus glyph, not a filled or
   outlined button — the add-on ships both controls as #ddd chips with
   dark text, the only two controls in the card outside the system's
   palette. Remove keeps the same shape in a destructive colour; the
   frame has no remove state, since it only shows a single set. */
.gti-v2-card--register .wppb-user-forms .wppb-rpf-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: #0085eb;
  cursor: pointer;
}

.gti-v2-card--register .wppb-user-forms .wppb-rpf-action:hover {
  color: #0068bc;
  text-decoration: underline;
}

.gti-v2-card--register .wppb-user-forms .wppb-rpf-action.wppb-rpf-remove {
  color: #c0392b;
}

.gti-v2-card--register .wppb-user-forms .wppb-rpf-action.wppb-rpf-remove:hover {
  color: #96281b;
}

/* The repeater add-on already hides Remove on a lone set via
   .wppb-rpf-singular-set (wppb-rpf-front-end.js updateCounter), but the
   unconditional display:inline-flex above ties its specificity and loads
   later, so it wins and shows Remove even for a single goalie. Re-hide it
   here with the extra class for higher specificity. */
.gti-v2-card--register .wppb-user-forms .wppb-rpf-singular-set .wppb-rpf-action.wppb-rpf-remove {
  display: none;
}

/* account.css's `.gti_registration_form .wppb-rpf-add::after { content: "
   Add another" }` (shared with the live /register/ page, where the add
   button is icon-only) generates a redundant second label here, since
   gti-landing-v2-register-steps.js already writes a complete real one
   ("Add Another Goalie") into this button's text — together they render
   as "Add Another Goalie Add another". The remove button has no such
   collision: its text stays the raw "×" from the server markup, so
   account.css's " Remove" is the only label it has and must stay. */
.gti-v2-card--register .wppb-user-forms .wppb-rpf-action.wppb-rpf-add::after {
  content: none;
}

/* Repeater set label (e.g. "GOALIE 1", "TEAM 1"). Injected by JS at the
   top of each set. Styled as Archivo Expanded, blue, matching the frame's
   node 2246:4925.
   `grid-column: 1 / -1` is load-bearing, not decorative: the set's own
   <ul> is the grid (line ~1091) and this label is a <div>, not an <li>, so
   the "every <li> spans full width by default" rule (line ~1098) never
   reaches it — it was landing as a normal 1-column auto-placed item, which
   ate the first cell of row 1 and pushed every field pairing after it over
   by one column. That is what put Name alone in the right-hand column with
   Birthday, Current Level, Current Team, Shirt Size and Hoodie Size each
   shifted into the wrong slot, instead of the frame's three clean pairs
   (Name+Birthday, Current Level+Current Team, Shirt+Hoodie — node
   2246:4894). Spanning the label the same way the Remove/Add row already
   does removes it from the pairing math entirely. */
.gti-v2-card--register .wppb-user-forms .gti-repeater-label {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  font-family: "Archivo Expanded Bold", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0085eb;
}

/* ---------------------------------------------------------------------
 * Register V2 — submit button
 *
 * The form is submitted once, from the last tab, so
 * gti-landing-v2-register-steps.js moves Profile Builder's own submit
 * paragraph into the nav row there and hides it on the other two. It takes
 * the same button treatment as Next (the design system's instance:
 * #0085eb, 3px radius, 55px, Mozilla Text Bold 16px uppercase) so the last
 * tab reads like the two before it.
 *
 * The paragraph is moved rather than the input, so Profile Builder's own
 * submit handling — which is bound to the form and disables this input on
 * submit — is left intact.
 * ------------------------------------------------------------------- */

.gti-v2-card--register .wppb-user-forms p.form-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 24px 0 0;
}

/* In the nav row the paragraph is a flex item beside Back, so it drops the
   standalone margin and pushes itself to the right edge instead. */
.gti-v2-card--register li.wppb-msf-step-commands p.form-submit {
  flex: 1 1 auto;
  margin: 0;
}

/* `width: auto !important` beats frontend-multi-step-forms.css's own
   `.form-submit[data-wppb-msf="yes"] #register { width: 100% }` — an ID
   selector, which no class selector can outrank without !important. Left
   unbeaten, that rule stretches this button to fill the paragraph's full
   flex-grown width (335px in the nav row instead of the ~210px every
   other button in the card uses), which is the "distorted" oversized grey
   button. min-width keeps the floor Next/Back share; width:auto lets
   normal content+padding sizing decide the rest. */
.gti-v2-card--register .wppb-user-forms p.form-submit input[type="submit"] {
  box-sizing: border-box;
  width: auto !important;
  min-width: 210px;
  height: 55px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: #0085eb;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gti-v2-card--register .wppb-user-forms p.form-submit input[type="submit"]:hover {
  background: #0068bc;
}

.gti-v2-card--register .wppb-user-forms p.form-submit input[type="submit"]:focus-visible {
  outline: 2px solid #121c32;
  outline-offset: 2px;
}

/* "Send these credentials via email" — the frame's Checkbox row (node
   2246:4931): a 20px box (#ecf0f3, #707784 hairline, 2px radius) 12px
   from body copy, under its own divider. The label wraps the checkbox, so
   without this the shared field-label rule sets the whole row in the 16px
   bold used for field labels.
   The divider is the frame's own node 2246:4930; this list is a flex
   child of the form, so the 32px above the rule is the form's gap and the
   padding supplies the 32px below it. */
.gti-v2-card--register .wppb-user-forms ul:has(> li.wppb-send-credentials-checkbox) {
  padding-top: 32px;
  border-top: 1px solid #c0c7d5;
}

.gti-v2-card--register .wppb-user-forms li.wppb-send-credentials-checkbox label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: #121c32;
}

.gti-v2-card--register .wppb-user-forms li.wppb-send-credentials-checkbox input[type="checkbox"] {
  flex: none;
  width: 20px !important;
  height: 20px;
  margin: 0;
  border: 1px solid #707784;
  border-radius: 2px;
  accent-color: #0085eb;
}

/* The WooCommerce billing group prints its own "Billing Address" heading
   inside its list. Once the stranded "Billing Info" heading is moved to
   the top of this step — which is what the Step 2 frame (node 2245:4891)
   shows — that group heading is a second title for the same fields, so it
   is hidden rather than left as a duplicate. */
.gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_heading {
  display: none;
}

/* Profile Builder splits steps *after* the heading that introduces the
   next one, so every step but the last ends with a stray heading for the
   step that follows — Billing Info trailing Account, Goalie Info
   trailing Billing. Each is the real, visible heading one step later, so
   only the trailing copy is hidden. The billing group's own heading is
   the first child of its list, not the last, so it is unaffected. */
.gti-v2-card--register .wppb-user-forms ul:has(> li.wppb-form-field) > li.wppb-heading:last-child {
  display: none;
}

/* ---------------------------------------------------------------------
 * Register V2 — Step Nav ("Step N of 3" + Next button)
 *
 * gti-landing-v2-register-steps.js injects a `.gti-step-indicator` before
 * Profile Builder's own Previous/Next row and copies the frame's button
 * text onto the existing Next input rather than replacing it, so the
 * plugin's click handler and validation stay attached.
 * ------------------------------------------------------------------- */

/* Step Nav row — the frame's Step Nav node (2244:4913): 55px tall,
   space-between, items centered. The add-on renders this row once, as a
   sibling of the three steps rather than inside the visible one, so the
   32px that separates it from the step above is the Form node's flex gap
   restated as a margin — the list reset above cleared the plugin's own
   spacing, and this row is not a child of the flex container that
   supplies the other 32px gaps.

   The plugin inline-styles the buttons with `float`, which flex ignores,
   so no float reset is needed here.

   Spacing between the three children is done with margins, not `gap`.
   The add-on prints the Previous/Next inputs on their own source lines,
   so the row ends with a whitespace text node that Chrome lays out as a
   zero-size flex item — with `gap` that phantom item takes a full gap of
   its own after the last button, which left Next 16px short of the right
   edge instead of flush with it as the frame has it. Margins only apply
   between the elements that actually carry them, so the stray node
   cannot contribute spacing. `margin-right: auto` on the indicator is
   what pushes the buttons to the end, replacing space-between for the
   same reason. */
.gti-v2-card--register li.wppb-msf-step-commands {
  display: flex;
  align-items: center;
  min-height: 55px;
  border-top: none;
  margin-top: 32px;
  padding-top: 0;
}

/* "Step N of 3" — Mozilla Text Regular 16px/23.2 #707784. Regular, not
   bold: the frame's Step Nav label is the one piece of copy in this card
   that is not set in the bold weight. Only shown on Step 1 (Step 1 of 3
   frame, node 2244:4913); Steps 2 and 3 frames (2245:4913 / 2246:4913) have
   no such label. gti-landing-v2-register-steps.js removes this element
   when activeIndex is not 0. */
.gti-v2-card--register .gti-step-indicator {
  margin-right: auto;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: #707784;
}

/* ---------------------------------------------------------------------
 * Register V2 — whole-form submit gating
 *
 * The tabs are presentational, so the form is submitted once from the last
 * one. gti-landing-v2-register-steps.js disables that button until every
 * required field on every tab is filled and, while it is disabled, prints
 * the hint below beside it and flags the tabs still missing something.
 * None of these states appear in the frames, so each is expressed in
 * tokens already used elsewhere in this card rather than introducing new
 * ones: the hint takes the muted grey of the "Step N of 3" label, and the
 * incomplete-tab marker takes the same red as the field-level errors
 * Profile Builder prints.
 * ------------------------------------------------------------------- */

.gti-v2-card--register .gti-submit-hint {
  margin-right: 16px;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: #707784;
}

.gti-v2-card--register p.form-submit input[type="submit"]:disabled,
.gti-v2-card--register p.form-submit input[type="submit"].gti-submit--blocked {
  background: #c0c7d5;
  cursor: not-allowed;
}

.gti-v2-card--register p.form-submit input[type="submit"]:disabled:hover,
.gti-v2-card--register p.form-submit input[type="submit"].gti-submit--blocked:hover {
  background: #c0c7d5;
}

/* A tab with required fields still empty keeps the grey "not reached"
   circle rather than the completed tick, and takes a red hairline so the
   stepper says which tab to go back to. */
.gti-v2-card--register .gti-step--incomplete:not(.gti-step--active) .gti-step__num {
  border-color: #c0392b;
  background-color: #ffffff;
  color: #c0392b;
}

.gti-v2-card--register
  .gti-step--incomplete:not(.gti-step--active)
  .gti-step__num::after {
  content: none;
}

/* Next — the frame's button instance (2248:4874): 210x55, 3px radius,
   Mozilla Text Bold 16px uppercase. The height is set outright rather
   than left to 16px padding + line-height, because the shared
   .wppb-msf-button rule adds a 1px transparent border that would push
   the box to 57px; an explicit border-box height pins it at the frame's
   55px and keeps Previous exactly the same height beside it. The plugin
   also sets `padding: 8px 15px` inline on both inputs, hence !important
   on the padding. Inputs centre their own value vertically, so no
   line-height juggling is needed. */
.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-next,
.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev {
  box-sizing: border-box;
  display: block;
  height: 55px;
  margin: 0;
  padding: 0 18px !important;
  border-radius: 3px;
  font-family: "Mozilla Text", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}

/* The 16px between Back and Next sits on Next, not on Back. On the final
   step Next is taken out of flow, and a trailing margin on Back would
   otherwise keep a 16px gap where it used to be, leaving Back short of
   the right edge instead of flush with it. */
.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-next {
  margin-left: 16px;
}

/* Back — the frames' secondary button (nodes 2567:9415 / 2567:9417):
   white fill, #0085eb hairline and label, and sentence case, unlike every
   other button in the card. gti-landing-v2-register-steps.js supplies the
   "Back" wording.
   `margin-right: auto` mirrors the trick the Step 1 indicator uses (line
   ~1349) to push Next to the row's end — on Steps 2-3 there is no
   indicator, and Back is the only element before Next/Create Account, so
   without its own auto margin the two buttons packed together at the
   row's start instead of sitting at opposite ends. */
.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev {
  margin-right: auto;
  border: 1px solid #0085eb;
  background: #ffffff;
  text-transform: none;
  color: #0085eb;
}

.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev:hover {
  border-color: #0068bc;
  background: #ecf0f3;
  color: #0068bc;
}

/* Previous is disabled on the first step, where the frame's Step Nav has
   no back button at all — only the indicator and Next. Hiding the
   disabled state matches that and, on mobile where the nav stacks, stops
   a dead full-width button sitting between the two. */
.gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev:disabled {
  display: none;
}

/* Set by gti-landing-v2-register-steps.js on the final step's Next
   button, which the add-on only makes invisible rather than removing. */
.gti-v2-card--register input[type="button"].wppb-msf-button.gti-msf-button--out-of-flow {
  display: none;
}

/* ---------------------------------------------------------------------
 * Register V2 — stepper at tablet and below
 *
 * Taken from the mobile frame's Stepper node (2679:16491): each step
 * stacks its circle above its label and centres both (flex-col, gap-7),
 * both connectors are dropped, and the three groups are spread with
 * space-between at gap-10.
 *
 * Applied from Divi's 980px tablet breakpoint rather than only at phone
 * widths. The horizontal row needs roughly 476px of content box — three
 * 32px circles, their three 12px label gaps, ~248px of uppercase labels,
 * four 16px row gaps and two connectors at their 16px minimum — and the
 * card is narrower than that across much of the tablet range, so the row
 * would otherwise have to wrap. There is no tablet register frame, so
 * tablet follows the mobile stepper; it is the layout that is defined for
 * a narrow card, and it degrades to phone widths continuously.
 *
 * The field grid and type scale stay on desktop values until 767px —
 * only the stepper changes here, because only the stepper runs out of
 * room this early.
 * ------------------------------------------------------------------- */

@media screen and (max-width: 980px) {
  .gti-v2-card--register div#wppb-msf-tabs {
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 18px;
  }

  .gti-v2-card--register .gti-step {
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }

  .gti-v2-card--register .gti-step-line {
    display: none;
  }

  .gti-v2-card--register .gti-step__num {
    font-size: 14px;
  }

  /* 12px/17.4 in the mobile frame, and centred under its circle. */
  .gti-v2-card--register input[type="button"].wppb-msf-tabs {
    font-size: 12px;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
 * Register V2 — mobile (Figma "Register Mobile", 390w frame)
 * ------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Form node 2679:16489: 28px/9px padding, 4px radius, 18px gap. */
  .gti-v2-card--register.gti-v2-card {
    padding: 28px 9px;
    border-radius: 4px;
  }

  .gti-v2-card--register .wppb-user-forms {
    gap: 18px;
  }

  .gti-v2-card--register .wppb-heading h1,
  .gti-v2-card--register .wppb-heading h2,
  .gti-v2-card--register .wppb-heading h3,
  .gti-v2-card--register .wppb-heading h4,
  .gti-v2-card--register .wppb_billing_heading h4,
  .gti-v2-card--register .wppb-heading h5 {
    font-size: 26px;
    line-height: 28px;
  }

  .gti-v2-card--register .wppb-form-field label {
    font-size: 14px;
  }

  .gti-v2-card--register .wppb-form-field input[type="text"],
  .gti-v2-card--register .wppb-form-field input[type="email"],
  .gti-v2-card--register .wppb-form-field input[type="password"],
  .gti-v2-card--register .wppb-form-field input[type="tel"],
  .gti-v2-card--register .wppb-form-field input[type="number"],
  .gti-v2-card--register .wppb-form-field textarea,
  .gti-v2-card--register .wppb-form-field select {
    font-size: 14px;
  }

  /* The mobile frame stacks every field full width, 18px apart. */
  .gti-v2-card--register .wppb-user-forms ul:has(> li.wppb-form-field) {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .gti-v2-card--register #wppb-form-element-3,
  .gti-v2-card--register #wppb-form-element-4,
  .gti-v2-card--register #wppb-form-element-15,
  .gti-v2-card--register #wppb-form-element-16,
  .gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_city,
  .gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_country,
  .gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_state,
  .gti-v2-card--register .wppb-user-forms ul.wppb-woo-billing-fields > li.wppb_billing_postcode,
  .gti-v2-card--register .wppb-user-forms ul.wppb-rpf-name-wppb_repeater_field_goalie > li.wppb-form-field {
    grid-column: 1 / -1;
  }

  /* Step Nav node 2679:16527: indicator above a full-width button,
     stacked 10px apart, rather than the desktop row — which squeezes
     "Step 1 of 3" onto three lines at 375px. Margins again rather than
     `gap`, for the trailing-whitespace reason noted on the desktop rule;
     with `gap` the phantom item added a 10px tail below the button. */
  .gti-v2-card--register li.wppb-msf-step-commands {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin-top: 18px;
  }

  .gti-v2-card--register .gti-step-indicator {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev {
    margin-bottom: 10px;
  }

  /* Button instance 2679:16529: full width, 52px tall, 14px label. */
  .gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-next,
  .gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-prev {
    height: 52px;
    font-size: 14px;
  }

  /* Stacked, so the 16px that separates the two buttons on desktop goes. */
  .gti-v2-card--register input[type="button"].wppb-msf-button.wppb-msf-next {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------
 * Landing V2 hero — tablet and mobile gutters
 *
 * The hero section's 160px left/right padding is a Divi Builder setting
 * (custom_padding on the section), so Divi prints it as a single
 * `.et_pb_section_0.et_pb_section` rule with no responsive variant — it
 * therefore applies at every breakpoint. At 375px that leaves a 55px
 * content box (375 - 320), which is what collapses the hero title into
 * one-letter-per-line and squeezes the card; it is not a width bug on
 * the rows themselves.
 *
 * The mobile frame uses 15px gutters, so the padding is overridden here
 * rather than changing the section setting, which would lose the
 * desktop frame's 160px. `!important` is needed because Divi's own rule
 * is an equal-specificity ID-free selector printed after this file.
 *
 * Targets the shared .gti-v2-hero class, so program-waitlist-v2 — which
 * has the identical section setting and the identical symptom — gets
 * the same fix without either page's markup being special-cased.
 *
 * Applied from Divi's 980px tablet breakpoint, not 767px. The 160px
 * padding is unconditional, so at 768px it leaves a 448px content box —
 * the card is then 320px narrower than the 768px it is designed at,
 * which is what crushed the register form and forced its stepper to wrap
 * across three lines. Between 768px and 980px the row's own 768px
 * max-width still caps the card, so widening the gutters here only ever
 * lets it reach its designed width; it never overshoots.
 * ------------------------------------------------------------------- */

@media screen and (max-width: 980px) {
  .gti-landing-v2 .gti-v2-hero.et_pb_section {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}