/* 🟠 Base neutral styling for all inputs, selects, and textareas */
form.hs-form input,
form.hs-form select,
form.hs-form textarea {
  border: 1px solid #ccc;
  background-color: white;
}

/* 🔴 Highlight invalid required fields */
form.hs-form input:required:invalid,
form.hs-form select:required:invalid,
form.hs-form textarea:required:invalid {
  border: 2px solid red;
  background-color: #ffe5e5;
}

/* ✅ Neutral styling for only valid + required fields */
form.hs-form input:required:valid,
form.hs-form select:required:valid,
form.hs-form textarea:required:valid {
  border: 1px solid #ccc;
  background-color: white;
}

/* ✨ Focus styling (applies to all field types when tabbed or clicked) */
form.hs-form input:focus,
form.hs-form select:focus,
form.hs-form textarea:focus {
  border-color: var(--bz-color-2);
  outline: none;
  background-color: #f9f9f9;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* focus ring for accessibility */
}

/* ❗ Error message styling */
form.hs-form .hs-error-msgs,
form.hs-form .hs-error-msg {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

/* Optional: Red placeholder in invalid required fields */
form.hs-form input:required:invalid::placeholder {
  color: red;
  opacity: 0.7;
}

/* 🟦 Section header styling */
form.reg-form h5 {
  color: var(--bz-color-2);
}

/* 🔒 Hide reg format field */
fieldset:has(select[name="reg_preferred_format"]) {
  display: none;
}

/* 💳 Checkout form styling */
.checkout-form-container {
  display: none;
}
.checkout-form-container .table.program-table th,
.checkout-form-container .table.program-table td {
  padding: 15px !important;
}
.checkout-form-container .balance-due .discount-total {
  display: none;
}
.checkout-form-container .balance-due.discounted .original-total {
  text-decoration: line-through;
}
.checkout-form-container .balance-due.discounted .discount-total {
  display: unset;
  color: var(--bz-color-2);
  font-weight: bold;
}
.checkout-form-container .checkout-actions.discount-error {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--bz-color-2);
  background-color: rgba(var(--bz-color-2-rgb), 0.2);
  color: var(--bz-color-2);
  padding: 10px;
  font-size: 14px;
}

/* 🐣 Early bird messaging */
.early-bird-text {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1rem;
}
.early-bird-text span {
  color: var(--bz-color-2);
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

/* ✅ Remove green border and background from valid optional fields */
form.hs-form input:not([required]):valid,
form.hs-form select:not([required]):valid,
form.hs-form textarea:not([required]):valid {
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: none;
}

/* 🔵 Force blue styling for HubSpot form submit buttons */
form.hs-form input[type="submit"],
form.hs-form input[type="button"],
.hs-form input[type="submit"],
.hs-form input[type="button"],
input[type="submit"].hs-button,
input[type="button"].hs-button {
  background-color: #004a99 !important; /* Replace with your blue if needed */
  color: white !important;
  border: none !important;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none !important;
}

/* Hover state */
form.hs-form input[type="submit"]:hover,
form.hs-form input[type="button"]:hover,
.hs-form input[type="submit"]:hover,
.hs-form input[type="button"]:hover,
input[type="submit"].hs-button:hover,
input[type="button"].hs-button:hover {
  background-color: #0056cc !important; /* darker blue */
}

/* Focus state */
form.hs-form input[type="submit"]:focus,
form.hs-form input[type="button"]:focus,
.hs-form input[type="submit"]:focus,
.hs-form input[type="button"]:focus,
input[type="submit"].hs-button:focus,
input[type="button"].hs-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5) !important;
}





/* 📐 Refined grid spacing for the ADDRESS section */
form.hs-form .hs-address fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr; /* Left side wider */
  column-gap: 1rem;                /* Moderate spacing between columns */
  row-gap: 0.75rem;                /* Consistent vertical spacing */
}

/* 🧩 Ensure left-column address inputs expand fully */
form.hs-form .hs-address .hs-form-field:nth-child(odd) input,
form.hs-form .hs-address .hs-form-field:nth-child(odd) select,
form.hs-form .hs-address .hs-form-field:nth-child(odd) textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 🧩 Right column inputs also fully expand in their space */
form.hs-form .hs-address .hs-form-field:nth-child(even) input,
form.hs-form .hs-address .hs-form-field:nth-child(even) select,
form.hs-form .hs-address .hs-form-field:nth-child(even) textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}





/* 🛠️ Add space below each field for error messages */
form.hs-form .hs-form-field {
  margin-bottom: 1.75rem; /* Increased spacing to prevent overlap */
}

/* 🧱 Optional: reduce spacing slightly for compact layout, but keep room for errors */
form.hs-form .hs-form-field input,
form.hs-form .hs-form-field select,
form.hs-form .hs-form-field textarea {
  margin-bottom: 0.25rem;
}

/* Ensure error messages don't overlap or collapse */
form.hs-form .hs-error-msgs {
  position: static;
  display: block;
  
}








/* Ensure error messages don't overlap or collapse */
form.hs-form .hs-error-msgs {
  position: static;
  display: block;
  margin-top: 0.25rem;
}

/* --- FINAL: Extra space for signature + sticky Next button --- */

/* 1) Add space under the Electronic Signature field wrapper */
.hs-form .hs-form-field.hs_signature,
.hs-form .hs-form-field.hs-electronic_signature,
.hs-form .hs-form-field.hs-signature {
  margin-bottom: 3rem !important;
  overflow: visible !important;
}

/* Fallback: also add spacing directly on the input */
.hs-form input[name="signature"],
.hs-form input[id^="signature-"] {
  display: block;
  width: 100%;
  position: static !important;
  margin-bottom: 3rem !important;
  z-index: 1 !important;
}

/* 2) Make the Next button row sticky at the bottom of the viewport */
.hs-form .hs_submit.hs-submit {
  position: sticky !important;
  bottom: 0;
  background: #fff;
  padding: 0.75rem 0;
  margin-top: 2rem;
  z-index: 10 !important;
  border-top: 1px solid #ddd;
}

/* 3) Align the button nicely inside the sticky row */
.hs-form .hs_submit.hs-submit .actions {
  display: flex;
  justify-content: flex-end;
}

/* 4) On mobile: full-width button for easy tap */
@media (max-width: 640px) {
  .hs-form .hs_submit.hs-submit .actions {
    justify-content: center;
  }
  .hs-form .hs_submit.hs-submit .actions .hs-button {
    width: 100%;
    max-width: 400px;
  }
}




  margin-top: 0.25rem;
}