/**
 * A/B test variant B: hero form dark overlay styling
 * Matches "Claim Your BODYBAR Pilates Offer" design – dark card, white text, white borders
 */

/* Dark semi-transparent card – flex column so title stays at top */
.microsite-header .page-header__form.bodybar-ab-hero-form.page-header__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 8px;
  padding: 3rem 2rem;
}

.microsite-header .bodybar-ab-hero-form .bodybar-ab-hero-form__title {
  order: -1; /* force title first */
  flex-shrink: 0;
}

.microsite-header .bodybar-ab-hero-form .gform_wrapper {
  order: 0;
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .microsite-header .page-header__form.bodybar-ab-hero-form.page-header__card {
    padding: 4rem 5rem 5rem;
  }
}

/* Hero form title at top */
.microsite-header .bodybar-ab-hero-form .bodybar-ab-hero-form__title {
  color: #fff;
  font-weight: 700;
  font-size: 2.4rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 768px) {
  .microsite-header .bodybar-ab-hero-form .bodybar-ab-hero-form__title {
    font-size: 2.8rem;
    margin-bottom: 2rem;
  }
}

/* Gravity Form title (if shown) */
.microsite-header .bodybar-ab-hero-form .gform_title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Form description */
.microsite-header .bodybar-ab-hero-form .gform_description {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

/* Labels (override theme floating-label white background) */
.microsite-header .bodybar-ab-hero-form .gfield_label,
.microsite-header .bodybar-ab-hero-form .gfield label {
  color: #fff;
  background-color: transparent !important;
  transition: color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
}

/* Focused field: label white with background for a cool look */
.microsite-header .bodybar-ab-hero-form .gform_fields .gfield.focused > label,
.microsite-header .bodybar-ab-hero-form .gform_fields .gfield.focused .gfield_label,
.microsite-header .bodybar-ab-hero-form .gform_fields .gfield span.focused > label {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Form wrapper and fields container: full width so fields can be 100% */
.microsite-header .bodybar-ab-hero-form .gform_wrapper,
.microsite-header .bodybar-ab-hero-form .gform_fields {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.microsite-header .bodybar-ab-hero-form .ginput_container,
.microsite-header .bodybar-ab-hero-form .gform_footer {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
 .microsite-header .bodybar-ab-hero-form .gform_footer{
  margin-top:0
}

/* All fields 100% width */
.microsite-header .bodybar-ab-hero-form .gform_fields .gfield {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  box-sizing: border-box;
}
.microsite-header .bodybar-ab-hero-form .gfield.hidden_label{
  display: block;
}
.microsite-header .bodybar-ab-hero-form .gform_fields .ginput_complex {
  display: block;
}

.microsite-header .bodybar-ab-hero-form .ginput_complex span {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Inputs: white border, dark bg, white text, full width */
.microsite-header .bodybar-ab-hero-form input[type="text"],
.microsite-header .bodybar-ab-hero-form input[type="email"],
.microsite-header .bodybar-ab-hero-form input[type="tel"],
.microsite-header .bodybar-ab-hero-form input[type="number"],
.microsite-header .bodybar-ab-hero-form textarea,
.microsite-header .bodybar-ab-hero-form select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.microsite-header .bodybar-ab-hero-form input::placeholder,
.microsite-header .bodybar-ab-hero-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.microsite-header .bodybar-ab-hero-form input:focus,
.microsite-header .bodybar-ab-hero-form textarea:focus,
.microsite-header .bodybar-ab-hero-form select:focus {
  border-color: #fff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Checkboxes and consent text – left-aligned, checkbox on left */
.microsite-header .bodybar-ab-hero-form .gfield--type-consent,
.microsite-header .bodybar-ab-hero-form .gfield--type-checkbox {
  color: rgba(255, 255, 255, 0.95);
  text-align: left;
}

.microsite-header .bodybar-ab-hero-form .gfield--type-checkbox .ginput_container,
.microsite-header .bodybar-ab-hero-form .gfield--type-consent .ginput_container {
  text-align: left;
}

.microsite-header .bodybar-ab-hero-form .gchoice {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 0.75rem;
  margin-bottom: 5px;
}

.microsite-header .bodybar-ab-hero-form .gchoice input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0.2rem 0 0 0;
  order: -1; /* checkbox first (left) */
}

.microsite-header .bodybar-ab-hero-form .gchoice label {
  flex: 1;
  text-align: left;
  margin: 0;
}

.microsite-header .bodybar-ab-hero-form input[type="checkbox"] {
  accent-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.microsite-header .bodybar-ab-hero-form a {
  color: #fff;
  text-decoration: underline;
}

.microsite-header .bodybar-ab-hero-form a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Submit button: white border, white text, dark background, all caps */
.microsite-header .bodybar-ab-hero-form .gform_footer input[type="submit"],
.microsite-header .bodybar-ab-hero-form .gform_footer button[type="submit"] {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.microsite-header .bodybar-ab-hero-form .gform_footer input[type="submit"]:hover,
.microsite-header .bodybar-ab-hero-form .gform_footer button[type="submit"]:hover {
  background-color: #fff;
  color: #000;
}

/* Validation messages */
.microsite-header .bodybar-ab-hero-form .gfield_description,
.microsite-header .bodybar-ab-hero-form .gfield_validation_message {
  color: rgba(255, 255, 255, 0.9);
}

.microsite-header .bodybar-ab-hero-form .gfield_error input,
.microsite-header .bodybar-ab-hero-form .gfield_error textarea {
  border-color: #f87171;
}

/* Confirmation message (after submit) */
.microsite-header .bodybar-ab-hero-form .gform_confirmation_message {
  color: #fff;
}

/* Select2 / dropdown (if used) - full width */
.microsite-header .bodybar-ab-hero-form .select2-container {
  width: 100% !important;
}

.microsite-header .bodybar-ab-hero-form .select2-container--default .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

.microsite-header .bodybar-ab-hero-form .select2-container--default .select2-selection__rendered {
  color: #fff;
}

/* ========== Form 8 specific layout & fields (scoped to hero form) ========== */
.microsite-header .bodybar-ab-hero-form #gform_fields_8.gform_fields .gfield--width-half {
  margin-bottom: 10px;
  grid-column: span 6;
}

.microsite-header .bodybar-ab-hero-form div#field_8_6,
.microsite-header .bodybar-ab-hero-form div#field_8_7 {
  display: none;
}

.microsite-header .bodybar-ab-hero-form fieldset#field_8_8 {
  display: block;
  text-align: left;
}

.microsite-header .bodybar-ab-hero-form fieldset#field_8_8 .ginput_container {
  text-align: left;
}

.microsite-header .bodybar-ab-hero-form .gchoice {
  position: relative;
}

.microsite-header .bodybar-ab-hero-form fieldset#field_8_8 label {
  position: relative;
  left: 0;
  top: 0;
  font-size: 1.2rem;
  line-height: 1.5rem;
  display: inline;
  color: rgba(255, 255, 255, 0.95);
  margin-left: 0;
}

.microsite-header .bodybar-ab-hero-form fieldset#field_8_8 input {
  margin: 0;
  vertical-align: middle;
}

.microsite-header .bodybar-ab-hero-form .gfield_visibility_hidden {
  display: none;
}

.microsite-header .bodybar-ab-hero-form #gform_8 .gfield.hidden_label {
  display: block;
}

.microsite-header .bodybar-ab-hero-form #gform_8 button.gform_show_password {
  position: absolute;
  top: 12px;
  right: 10px;
  background: transparent;
  border: none;
  color: #fff;
}

.microsite-header .bodybar-ab-hero-form div#input_8_18_strength_indicator {
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.9);
}

.microsite-header .bodybar-ab-hero-form label#label_8_17_1 {
  position: relative;
  left: 0;
  top: 0;
  font-size: 1.2rem;
  line-height: 1.5rem;
  display: inline;
  pointer-events: auto;
  color: rgba(255, 255, 255, 0.95);
  margin-left: 0;
}

.microsite-header .bodybar-ab-hero-form label#label_8_17_1 a {
  text-decoration: underline;
  color: #fff;
}

.microsite-header .bodybar-ab-hero-form input#choice_8_17_1 {
  margin: 0;
}

.microsite-header .bodybar-ab-hero-form div#gform_confirmation_wrapper_8 {
  background: #53c9c6;
  color: #fff;
  padding: 20px;
  border-radius: 4px;
}
.microsite-header .bodybar-ab-hero-form .gform_submission_error{
  display: none;
}
.microsite-header .bodybar-ab-hero-form .gchoice.gchoice_8_8_1 input {
  display: none;
}

.microsite-header .bodybar-ab-hero-form fieldset#field_8_17 {
  position: relative;
  top: -2.5rem;
}

.microsite-header .bodybar-ab-hero-form #label_8_8_1 {
  left: 0 !important;
  top: 0 !important;
}