/* ==========================================================================
   Contact Page Specific Styles
   ========================================================================== */
.contact-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 26.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  @media (max-width: 768px) {
    height: 22.75rem;
  }
}
.contact-hero-title {
  text-align: center;
  font-size: 4.375rem;
  font-weight: 700;
  color: var(--bs-white);
  @media (max-width: 1024px) {
    font-size: 3.125rem;
  }
  @media (max-width: 768px) {
    font-size: 2.25rem;
  }
}

.contact-page-container {
  padding: 4.375rem 0;
  background-image: url("../../_img/contact-corner.png"),
    url("../../_img/contact-bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: 38.125rem 40.125rem, cover;

  @media (max-width: 1024px) {
    background-size: 35.125rem 42.5rem, cover;
  }
  @media (max-width: 768px) {
    background-image: url("../../_img/contact-bg.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    padding: 1.875rem 0;
  }
}

.contact-left-title {
  font-size: 3.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  max-width: 38.125rem;
  @media (max-width: 1024px) {
    font-size: 2.75rem;
  }
  @media (max-width: 768px) {
    font-size: 1.5rem;
    margin-bottom: 1.875rem;
    text-align: center;
  }
}
.contact-left-description {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.67;
  @media (max-width: 1024px) {
    font-size: 1.375rem;
  }
  @media (max-width: 768px) {
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 2rem;
  }
}

/* Gravity Forms Styling
   ========================================================================== */

/* Form Wrapper & Field Setup
   -------------------------------------------------------------------------- */
.gform_wrapper.gravity-theme {
  max-width: 100% !important;
}
.gform_heading {
  display: none !important;
}
.gform_wrapper .gfield {
  margin-bottom: 0 !important;
  position: relative !important;
}

/* Floating Labels System
   -------------------------------------------------------------------------- */

/* Focus ring for better UX */
.gform_wrapper .gfield::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  border: 0.125rem solid transparent !important;
  border-radius: 0.3125rem !important;
  transition: border-color 0.15s ease-in-out !important;
}

/* Input field styling with Bootstrap integration */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield textarea {
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  border: 0.0625rem solid var(--bs-body-color) !important;
  border-radius: 0.3125rem !important;
  background: var(--bs-white) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  color: var(--bs-body-color) !important;
  min-height: 3.5rem !important;
}

/* Focus states for inputs */
.gform_wrapper .gfield input[type="text"]:focus,
.gform_wrapper .gfield input[type="email"]:focus,
.gform_wrapper .gfield textarea:focus {
  border-color: var(--bs-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.1875rem rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* Label Positioning & Animation System
   -------------------------------------------------------------------------- */

/* Label positioning and styling for floating effect */
.gform_wrapper .gfield label.gfield_label {
  position: absolute !important;
  top: 0.875rem !important;
  left: 0.75rem !important;
  font-size: 1rem !important;
  background: var(--bs-white) !important;
  padding: 0 0.25rem !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: all 0.15s ease-in-out !important;
  z-index: 10 !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  color: rgba(var(--bs-body-color-rgb), 0.5) !important;
  border-radius: 0.25rem !important;

  /* Mobile label adjustments */
  @media (max-width: 768px) {
    font-size: 0.75rem;
  }
}

/* Animated label states for focused/filled fields */
.gform_wrapper .gfield:has(.ginput_container input:focus) label.gfield_label,
.gform_wrapper .gfield:has(.ginput_container textarea:focus) label.gfield_label,
.gform_wrapper
  .gfield:has(.ginput_container input:not(:placeholder-shown))
  label.gfield_label,
.gform_wrapper
  .gfield:has(.ginput_container textarea:not(:placeholder-shown))
  label.gfield_label {
  top: -0.5rem !important;
  left: 0.5rem !important;
  font-size: 0.875rem !important;
  color: var(--bs-primary) !important;
  transform: scale(0.9) !important;
  background: var(--bs-white) !important;
  padding: 0 0.375rem !important;
}

/* JavaScript-enhanced floating labels for older browsers */
.gform_wrapper .gfield.js-float-focused label.gfield_label,
.gform_wrapper .gfield.js-float-filled label.gfield_label {
  top: -0.5rem !important;
  left: 0.5rem !important;
  font-size: 0.875rem !important;
  color: var(--bs-primary) !important;
  transform: scale(0.9) !important;
  background: var(--bs-white) !important;
  padding: 0 0.375rem !important;
}

/* Hide placeholder text for clean floating label design */
.gform_wrapper .gfield input[type="text"]::placeholder,
.gform_wrapper .gfield input[type="email"]::placeholder,
.gform_wrapper .gfield textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* Button Styling
   -------------------------------------------------------------------------- */

/* Submit button with Bootstrap styling */
.gform_wrapper .gform_button {
  padding: 0.75rem 2.75rem !important;
  background: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: none !important;
  border-radius: 0.625rem !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  width: auto !important;
  min-width: 7.5rem !important;
  margin-top: 0 !important;
  min-height: auto !important;
  position: relative !important;
  transition: var(--bs-transition-slow) !important;
  overflow: hidden !important;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../_img/btn-overlay.png);
    transform: translateX(-100%);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    transform-origin: right;
    transition: var(--bs-transition-slow);
    border-radius: inherit;
  }
  &:hover {
    transform: translateY(-0.25rem);
    &:before {
      transform: translateX(100%);
      transform-origin: left;
    }
  }
}

/* Form Validation & Elements
   -------------------------------------------------------------------------- */

/* Required field styling */
.gform_wrapper .gfield_required {
  color: var(--bs-danger) !important;
  font-size: 1em !important;
}

/* Checkbox group layout */
.gform_wrapper.gravity-theme .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Checkbox input styling with theme integration */
.gform_wrapper .gfield_checkbox input[type="checkbox"] {
  margin-top: 0.125rem !important;
  margin-right: 0rem !important;
  height: 1.25rem !important;
  width: 1.25rem !important;
  accent-color: var(--bs-primary) !important;
}

/* Checkbox checked state fallback */
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Checkbox label styling */
.gform_wrapper .gfield_checkbox label {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  color: var(--bs-body-color) !important;
  cursor: pointer !important;

  /* Mobile checkbox label */
  @media (max-width: 768px) {
    font-size: 0.75rem;
  }
}

/* Security & Cleanup
   -------------------------------------------------------------------------- */

/* Hide honeypot spam protection field */
.gform_wrapper .gfield--type-honeypot {
  display: none !important;
}

/* Remove default Gravity Forms styling */
.gform_wrapper.gravity-theme .gform-body {
  background: transparent !important;
}

/* Form fields layout */
.gform_wrapper.gravity-theme .gform_fields {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

/* Form footer styling */
.gform_wrapper.gravity-theme .gform_footer {
  margin: 0 !important;
}

/* Mobile-specific button adjustments */
@media only screen and (max-width: 40.0625rem) {
  .gform_wrapper .gform_button {
    line-height: 1 !important;
    min-height: auto !important;
  }
}