/* ============================================
   HUBSPOT FORM — SHARED STYLING
   Colt Optics — Contact Us + Product Registration
   v2.0 — 2026-04-27

   HubSpot developer embed uses hsfc-* component
   classes — NOT the traditional hs-form/hs-input
   class surface. Scoped to .co-hs-form-container.
   White background, navy tokens.
   ============================================ */

/* --- Labels --- */
.co-hs-form-container .hsfc-FieldLabel {
  display: block !important;
  font-family: "Oxanium", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #00124B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 8px !important;
}

.co-hs-form-container .hsfc-FieldLabel__RequiredIndicator {
  color: #CC3366 !important;
}

/* --- Text Inputs & Textareas --- */
.co-hs-form-container .hsfc-TextInput,
.co-hs-form-container .hsfc-TextareaInput {
  background: #fff !important;
  border: 1px solid rgba(0, 18, 75, 0.25) !important;
  border-radius: 5px !important;
  font-family: "Oxanium", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  text-transform: none !important;
}
.co-hs-form-container .hsfc-TextInput:focus,
.co-hs-form-container .hsfc-TextareaInput:focus {
  border-color: #263D83 !important;
  box-shadow: 0 0 0 3px rgba(38, 61, 131, 0.1) !important;
  outline: none !important;
}
.co-hs-form-container .hsfc-TextareaInput {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Error state on inputs */
.co-hs-form-container .hsfc-TextInput[aria-invalid="true"],
.co-hs-form-container .hsfc-TextareaInput[aria-invalid="true"] {
  border-color: #CC3366 !important;
  background: rgba(204, 51, 102, 0.04) !important;
}

/* --- Phone Input --- */
.co-hs-form-container .hsfc-PhoneInput {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border: 1px solid rgba(0, 18, 75, 0.25) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}
.co-hs-form-container .hsfc-PhoneInput:focus-within {
  border-color: #263D83 !important;
  box-shadow: 0 0 0 3px rgba(38, 61, 131, 0.1) !important;
}
/* Country code flag/caret trigger */
.co-hs-form-container .hsfc-PhoneInput__FlagAndCaret {
  background: #f8f9fc !important;
  border-right: 1px solid rgba(0, 18, 75, 0.15) !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}
.co-hs-form-container .hsfc-PhoneInput__FlagAndCaret__Caret {
  border-top-color: #00124B !important;
}
/* Phone number text input (inside .hsfc-PhoneInput) */
.co-hs-form-container .hsfc-PhoneInput input[type="tel"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Oxanium", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  padding: 14px 16px !important;
  width: 100% !important;
}
.co-hs-form-container .hsfc-PhoneInput input[type="tel"]:focus {
  outline: none !important;
}

/* --- Checkboxes --- */
/* The label wraps both the input and text — restore flex so they align */
.co-hs-form-container .hsfc-CheckboxFieldGroup .hsfc-FieldLabel,
.co-hs-form-container .hsfc-CheckboxField .hsfc-FieldLabel,
.co-hs-form-container .hsfc-DataPrivacyField .hsfc-FieldLabel {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 2px !important;
}

.co-hs-form-container .hsfc-CheckboxInput {
  accent-color: #263D83 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* --- Field Spacing --- */
.co-hs-form-container .hsfc-Row {
  margin-bottom: 16px !important;
}

/* --- Submit Button --- */
.co-hs-form-container .hsfc-Button {
  font-family: "Oxanium", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 5px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  height: auto !important;
  background: #263D83 !important;
  color: #fff !important;
  border: 1px solid #263D83 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
.co-hs-form-container .hsfc-Button:hover,
.co-hs-form-container .hsfc-Button:focus {
  background: #00124B !important;
  border-color: #00124B !important;
  box-shadow: 0 4px 16px rgba(0, 18, 75, 0.3) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* Submit row spacing */
.co-hs-form-container .hsfc-NavigationRow {
  margin-top: 24px !important;
}

/* --- Validation Error Alerts --- */
.co-hs-form-container .hsfc-NavigationRow__Alerts {
  color: #CC3366 !important;
  font-size: 12px !important;
  font-family: "Oxanium", sans-serif !important;
  margin-bottom: 8px !important;
}

/* --- GDPR / Privacy --- */
.co-hs-form-container .hsfc-DataPrivacyField,
.co-hs-form-container .hsfc-DataPrivacyField .hsfc-RichText {
  font-size: 12px !important;
  color: #5a6270 !important;
  margin-top: 16px !important;
  line-height: 1.5 !important;
  font-family: "Oxanium", sans-serif !important;
}
.co-hs-form-container .hsfc-DataPrivacyField a {
  color: #263D83 !important;
}

/* --- Form bottom padding --- */
.co-hs-form-container .hsfc-Form {
  padding-bottom: 8px !important;
}

/* === Mobile === */
@media (max-width: 767px) {
  .co-hs-form-container .hsfc-Button {
    width: 100% !important;
    text-align: center !important;
  }
}