/* ================================
   RAP Split Form Section (HubSpot)
   Full-bleed + 50/50 split
   ================================ */

/* Full-bleed breakout (escape theme container) */
#rap-contact-split.rap-form-split{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  min-height: 34rem;
}

/* Panels */
#rap-contact-split .rap-form-left,
#rap-contact-split .rap-form-right{
  flex: 0 0 50%;
  width: 50%;
  min-height: 34rem;
}

/* LEFT panel */
#rap-contact-split .rap-form-left{
  background: #003764;
  color: #fff;
  display: flex;
}

#rap-contact-split .rap-form-inner{
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  padding: 4rem;
}

#rap-contact-split .rap-form-inner h2{
  margin: 0 0 2.5rem 0;
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

/* RIGHT image panel base */
#rap-contact-split .rap-form-right{
  position: relative;
  overflow: hidden;
}

/* Overlay (image set in require_css) */
#rap-contact-split .rap-form-right::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* -------------------------------
   HubSpot form styling (minimal)
   ------------------------------- */

/* Kill any default card/wrapper background */
#rap-contact-split .rap-hs-form,
#rap-contact-split .rap-form-left .hs_cos_wrapper_type_form,
#rap-contact-split .rap-form-left .hs-form,
#rap-contact-split .rap-form-left .hs-form fieldset,
#rap-contact-split .rap-form-left .hs-form .hs-form-field,
#rap-contact-split .rap-form-left .hs-form .form-columns-1,
#rap-contact-split .rap-form-left .hs-form .form-columns-2{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Remove padding/margins some themes inject */
#rap-contact-split .rap-form-left .hs-form,
#rap-contact-split .rap-form-left .hs-form fieldset{
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure white text */
#rap-contact-split .rap-form-left .hs-form,
#rap-contact-split .rap-form-left .hs-form label,
#rap-contact-split .rap-form-left .hs-form legend,
#rap-contact-split .rap-form-left .hs-form .hs-error-msg,
#rap-contact-split .rap-form-left .hs-form .hs-richtext,
#rap-contact-split .rap-form-left .hs_cos_wrapper.form-title{
  color: #fff !important;
  background: transparent !important;
}

/* Two-column layout (works for most HS forms) */
 /* #rap-contact-split .rap-form-left .hs-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2rem;
} */

/* Full-width blocks */
#rap-contact-split .rap-form-left .hs-form .legal-consent-container,
#rap-contact-split .rap-form-left .hs-form .hs_submit{
  grid-column: 1 / -1;
}

/* Labels */
#rap-contact-split .rap-form-left .hs-form label{
  display: block;
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  opacity: 0.95;
}

/* Inputs */
#rap-contact-split .rap-form-left .hs-form .hs-input,
#rap-contact-split .rap-form-left .hs-form input[type="text"],
#rap-contact-split .rap-form-left .hs-form input[type="email"],
#rap-contact-split .rap-form-left .hs-form input[type="tel"],
#rap-contact-split .rap-form-left .hs-form input[type="number"],
#rap-contact-split .rap-form-left .hs-form select,
#rap-contact-split .rap-form-left .hs-form textarea{
  width: 100% !important;
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#rap-contact-split .rap-form-left .hs-form input:focus,
#rap-contact-split .rap-form-left .hs-form select:focus,
#rap-contact-split .rap-form-left .hs-form textarea:focus{
  border-bottom-color: #67B9E7 !important;
}

#rap-contact-split .rap-form-left .hs-form textarea{
  resize: vertical;
  min-height: 6rem;
}

/* Checkbox */
#rap-contact-split .rap-form-left .hs-form input[type="checkbox"]{
  accent-color: #67B9E7;
}

/* Error text */
#rap-contact-split .rap-form-left .hs-form .hs-error-msg{
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

/* Submit aligned right */
#rap-contact-split .rap-form-left .hs-form .hs_submit{
  display: flex;
  margin-top: 0.5rem;
      background: #48c1e1;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: all .2s ease-in-out;
}

#rap-contact-split .rap-form-left .hs-form input[type="submit"],
#rap-contact-split .rap-form-left .hs-form button{
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0.5rem 0 !important;
}

#rap-contact-split .rap-form-left .hs-form input[type="submit"]:hover,
#rap-contact-split .rap-form-left .hs-form button:hover{
  color: #fff !important;
}

/* Responsive: stack */
@media (max-width: 60rem){
  #rap-contact-split.rap-form-split{
    flex-direction: column;
  }
  #rap-contact-split .rap-form-left,
  #rap-contact-split .rap-form-right{
    width: 100%;
    flex-basis: auto;
  }
  #rap-contact-split .rap-form-inner{
    padding: 3rem 1.5rem;
    max-width: 40rem;
  }
  #rap-contact-split .rap-form-inner h2{
    font-size: 2.25rem;
  }
}

/* Mobile: 1 column form */
@media (max-width: 40rem){
  #rap-contact-split .rap-form-left .hs-form{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Checkbox / consent cleanup
   ========================= */

/* Make legal consent area full width and clean spacing */
#rap-contact-split .rap-form-left .legal-consent-container{
  grid-column: 1 / -1;
  margin: 0.25rem 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Kill default margins HubSpot adds */
#rap-contact-split .rap-form-left .legal-consent-container p,
#rap-contact-split .rap-form-left .legal-consent-container label,
#rap-contact-split .rap-form-left .legal-consent-container .hs-richtext{
  margin: 0 !important;
  padding: 0 !important;
}

/* Layout the checkbox row */
#rap-contact-split .rap-form-left .legal-consent-container .hs-form-booleancheckbox,
#rap-contact-split .rap-form-left .legal-consent-container .hs-fieldtype-booleancheckbox,
#rap-contact-split .rap-form-left .legal-consent-container .hs-dependent-field{
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Checkbox itself */
#rap-contact-split .rap-form-left .legal-consent-container input[type="checkbox"]{
  margin: 0.2rem 0 0 0 !important;  /* aligns with first text line */
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  accent-color: #67B9E7;
}

/* Consent text */
#rap-contact-split .rap-form-left .legal-consent-container span,
#rap-contact-split .rap-form-left .legal-consent-container label,
#rap-contact-split .rap-form-left .legal-consent-container .hs-form-booleancheckbox-display{
  color: #fff !important;
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.95;
}

/* Links inside consent (privacy policy etc.) */
#rap-contact-split .rap-form-left .legal-consent-container a{
  color: #67B9E7 !important;
  text-decoration: underline;
}

/* Error message under checkbox */
#rap-contact-split .rap-form-left .legal-consent-container .hs-error-msg{
  display: block;
  margin-top: 0.5rem !important;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Sometimes HS wraps consent in a list */
#rap-contact-split .rap-form-left .legal-consent-container ul,
#rap-contact-split .rap-form-left .legal-consent-container li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   Minimal consent checkbox fix
   (do NOT change layout structure)
   ========================= */

#rap-contact-split .rap-form-left .legal-consent-container{
  grid-column: 1 / -1;
  background: transparent !important;
}

/* Remove extra spacing HubSpot injects */
#rap-contact-split .rap-form-left .legal-consent-container p,
#rap-contact-split .rap-form-left .legal-consent-container .hs-richtext,
#rap-contact-split .rap-form-left .legal-consent-container .hs-form-booleancheckbox{
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep default flow, just align checkbox nicely */
#rap-contact-split .rap-form-left .legal-consent-container input[type="checkbox"]{
  margin-right: 0.6rem !important;
  margin-top: 0.15rem !important; /* aligns with first text line */
  vertical-align: top;
  accent-color: #67B9E7;
}

/* Make the label text readable and consistent */
#rap-contact-split .rap-form-left .legal-consent-container label,
#rap-contact-split .rap-form-left .legal-consent-container span{
  color: #fff !important;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Links in consent */
#rap-contact-split .rap-form-left .legal-consent-container a{
  color: #67B9E7 !important;
  text-decoration: underline;
}

/* =========================
   GDPR / Legal consent block
   (fix alignment + spacing)
   ========================= */

#rap-contact-split .rap-form-left .legal-consent-container,
#rap-contact-split .rap-form-left .legal-consent-container *{
  text-align: left !important;          /* kills centered checkbox */
}

/* Make consent text smaller + readable */
#rap-contact-split .rap-form-left .legal-consent-container{
  grid-column: 1 / -1;
  margin-top: 0.75rem !important;
  font-size: 0.95rem;
  line-height: 1.45;
  background: transparent !important;
}

/* Tighten the long paragraphs */
#rap-contact-split .rap-form-left .legal-consent-container p{
  margin: 0 0 0.75rem 0 !important;
}

/* If HubSpot wraps the paragraphs inside .hs-richtext */
#rap-contact-split .rap-form-left .legal-consent-container .hs-richtext{
  margin: 0 0 0.75rem 0 !important;
}

/* Make the checkbox + label sit nicely on one line */
#rap-contact-split .rap-form-left .legal-consent-container .hs-form-booleancheckbox label{
  display: flex !important;
  align-items: flex-start;
  margin: 0.5rem 0 0.75rem 0 !important;
}

/* Checkbox sizing + alignment */
#rap-contact-split .rap-form-left .legal-consent-container input[type="checkbox"]{
  margin: 0.2rem 0 0 0 !important;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  accent-color: #67B9E7;
}

/* Consent label text */
#rap-contact-split .rap-form-left .legal-consent-container .hs-form-booleancheckbox-display,
#rap-contact-split .rap-form-left .legal-consent-container label span{
  color: #fff !important;
  font-size: 1rem;
  line-height: 1.35;
}

/* Links in consent */
#rap-contact-split .rap-form-left .legal-consent-container a{
  color: #67B9E7 !important;
  text-decoration: underline;
}

/* Often HubSpot outputs this list wrapper */
#rap-contact-split .rap-form-left .legal-consent-container ul,
#rap-contact-split .rap-form-left .legal-consent-container li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* =========================================
   FIX: horizontal overflow / side scroll
   ========================================= */

/* Prevent 100vw scrollbar overflow */
html,
body{
  overflow-x: hidden;
}

/* Ensure the split section never exceeds viewport */
#rap-contact-split.rap-form-split{
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent grid/flex children from forcing overflow */
#rap-contact-split .rap-form-left,
#rap-contact-split .rap-form-right,
#rap-contact-split .rap-form-left *,
#rap-contact-split .rap-form-right *{
  min-width: 0;
}

/* HubSpot inputs sometimes exceed container width */
#rap-contact-split input,
#rap-contact-split textarea,
#rap-contact-split select{
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   Decorative bottom-right SVG (<img>) overlay for right panel
   ========================================================= */

/* Make sure the right side can position children */
#rap-contact-split .rap-form-right{
  position: relative;
  overflow: hidden;
}

/* Keep your dark overlay, but ensure correct stacking */
#rap-contact-split .rap-form-right::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* Wrapper for the <img> (recommended) */
#rap-contact-split .rap-form-right .rap-bottom-element{
  position: absolute;
  right: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.25rem, 3vw, 3rem);
  width: clamp(80px, 14vw, 180px);
  height: auto;
  z-index: 2;              /* above the overlay */
  pointer-events: none;    /* decorative */
}

/* The SVG <img> itself */
#rap-contact-split .rap-form-right .rap-bottom-element img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* OPTIONAL: “cropped off the corner” look (uncomment to use) */
/*
#rap-contact-split .rap-form-right .rap-bottom-element{
  right: -40px;
  bottom: -40px;
  width: clamp(110px, 18vw, 240px);
}
*/

/* OPTIONAL: hide on small screens (uncomment to use) */
/*
@media (max-width: 40rem){
  #rap-contact-split .rap-form-right .rap-bottom-element{
    display: none;
  }
}
*/

/* =========================
   FIX: Select dropdown colors
   ========================= */

/* Keep the CLOSED select readable on the navy background */
#rap-contact-split .rap-form-left .hs-form select,
#rap-contact-split .rap-form-left .hs-form select.hs-input {
  color: #fff !important;
  background: transparent !important;
  -webkit-text-fill-color: #fff; /* helps Safari */
  color-scheme: light; /* prevents some browsers from forcing dark dropdown UI */
}

/* Make the OPEN dropdown list readable (options) */
#rap-contact-split .rap-form-left .hs-form select option {
  background: #fff !important;
  color: #003764 !important;
}

/* Placeholder/disabled option */
#rap-contact-split .rap-form-left .hs-form select option[disabled],
#rap-contact-split .rap-form-left .hs-form select option[value=""] {
  color: rgba(0, 55, 100, 0.65) !important;
}

/* Selected/highlighted option (works in many browsers; not all fully support option styling) */
#rap-contact-split .rap-form-left .hs-form select option:checked {
  background: #003764 !important;
  color: #fff !important;
}

/* If HubSpot wraps selects with a custom class, cover it too */
#rap-contact-split .rap-form-left .hs-form .hs-fieldtype-select select option {
  background: #fff !important;
  color: #003764 !important;
}

form, .form-title, .submitted-message {
  background-color: transparent !important; 
}

@media (max-width: 768px) {
  .rap-form-right {
    display: none !important; 
  }
}

.form__subtitle {
      color: rgba(255,255,255,.9);
    font-size: clamp(1.125rem, 1.8vw, 1.45rem);
    line-height: 1.45;
  }
}