/* ============================================================
   Gravity Forms — APOH Theme Styles
   Matches _design-reference/redesign/admissions.html
   ============================================================ */

/* Placeholder contrast — meets WCAG AA on white input backgrounds */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--fg-3);
  opacity: 1;
}

/* ── Form container card ── */
.callback-form__body .gform_wrapper,
.admissions-form__body .gform_wrapper {
  background: #fff !important;
  border: 1px solid #EAEAE7 !important;
  border-radius: 18px !important;
  padding: 36px !important;
}

/* ── Form fields grid layout ── */
.gform_wrapper .gform_body .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 14px !important;
}

/* Full-width fields (default — spans both columns) */
.gform_wrapper .gform_body .gform_fields > .gfield {
  grid-column: 1 / -1 !important;
}

/* Half-width fields — sit side by side */
.gform_wrapper .gform_body .gform_fields > .gfield.gf-half {
  grid-column: span 1 !important;
}

/* Third-width fields — 3 across (override grid to 3-col for that row) */
.gform_wrapper .gform_body .gform_fields > .gfield.gf-third {
  grid-column: span 1 !important;
}

/* When gf-third fields are present, temporarily switch to 3-col via subgrid fallback */
.gform_wrapper .gform_body .gform_fields:has(.gf-third) {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* Full-width override for fields that must still span all columns */
.gform_wrapper .gform_body .gform_fields:has(.gf-third) > .gfield:not(.gf-third):not(.gf-half) {
  grid-column: 1 / -1 !important;
}

/* Half-width in 3-col grid spans 1.5 cols — approximate with span 1 + gap, or use 2-col spans */
.gform_wrapper .gform_body .gform_fields:has(.gf-third) > .gfield.gf-half {
  grid-column: span 1 !important;
}

.gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Collapse hidden fields so they don't create grid gaps ── */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden {
  display: none !important;
}

/* ── Hide form description ── */
.gform_wrapper .gform_description,
.gform_wrapper .gform_heading {
  display: none !important;
}

/* ── Hide honeypot spam field ── */
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ── Labels — uppercase, small, bold ── */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper legend.gfield_label {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1F2A3D !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.gform_wrapper .gfield_required {
  color: #E55934 !important;
}

/* Show * instead of "(Required)" */
.gform_wrapper .gfield_required .gfield_required_text {
  font-size: 0 !important;
  visibility: hidden !important;
}

.gform_wrapper .gfield_required .gfield_required_text::before {
  content: '*' !important;
  font-size: 16px !important;
  visibility: visible !important;
  color: #E55934 !important;
  font-weight: 700 !important;
}

/* Sub-labels (First, Last) */
.gform_wrapper .ginput_complex label,
.gform_wrapper .name_first label,
.gform_wrapper .name_last label {
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #9A9CA3 !important;
  font-weight: 500 !important;
}

/* ── Text inputs, selects, textareas ── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  border: 1.5px solid #EAEAE7 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1F2A3D !important;
  transition: border-color 0.15s !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--apoh-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apoh-blue) 10%, transparent) !important;
}

.gform_wrapper textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

/* Phone field — pad left for country flag dropdown */
.gform_wrapper .ginput_container_phone input[type="tel"] {
  padding-left: 52px !important;
}

.gform_wrapper select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236E7079' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

/* ── Name fields — 2 column ── */
.gform_wrapper .ginput_complex,
.gform_wrapper .ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

/* ── 2-column field pairs (Email+Phone, State+Insurance) ── */
.gform_wrapper .gfield--type-email,
.gform_wrapper .gfield--type-phone {
  display: inline-block;
}

/* ── Radio buttons — pill/card style, full width row ── */
.gform_wrapper .gfield_radio,
.gform_wrapper .ginput_container_radio .gfield_radio {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gform_wrapper .gfield_radio > .gchoice,
.gform_wrapper .gfield_radio > div {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Hide the native radio circle */
.gform_wrapper .gfield_radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Radio label as pill button */
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_radio label.gform-field-label--type-inline {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid #EAEAE7 !important;
  background: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #585961 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.15s !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.gform_wrapper .gfield_radio .gchoice label:hover {
  border-color: var(--apoh-blue) !important;
  color: var(--apoh-blue) !important;
}

/* Selected radio — solid blue */
.gform_wrapper .gfield_radio input[type="radio"]:checked + label,
.gform_wrapper .gfield_radio input.gfield-choice-input:checked + label {
  border-color: var(--apoh-blue) !important;
  background: var(--apoh-blue) !important;
  color: #fff !important;
}

/* Responsive — stack on mobile */
@media (max-width: 640px) {
  .gform_wrapper .gform_body .gform_fields {
    grid-template-columns: 1fr !important;
  }
  .gform_wrapper .gf-half {
    grid-column: 1 / -1 !important;
  }
}

/* ── Fieldset reset ── */
.gform_wrapper fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.gform_wrapper fieldset legend {
  float: none !important;
  width: 100% !important;
}

/* ── Collapse default GF body margin so footer sits close to last field ── */
.gform_wrapper .gform_body {
  margin-bottom: 0 !important;
}

/* ── Submit button — blue pill ── */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 28px !important;
  padding: 0 !important;
  border: none !important;
  clear: both !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 16px 36px !important;
  background: var(--apoh-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  width: auto !important;
  -webkit-appearance: none !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  background: #1B5A9A !important;
}

/* ── Validation ── */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: #E55934 !important;
}

.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_error legend {
  color: #E55934 !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  font-size: 12px !important;
  color: #E55934 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.gform_wrapper .gform_validation_errors {
  border-radius: 12px !important;
  border-color: #E55934 !important;
  background: #FFF5F3 !important;
}

/* ── Confirmation ── */
.gform_confirmation_message {
  padding: 28px 32px !important;
  background: color-mix(in srgb, var(--apoh-green) 8%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--apoh-green) 25%, transparent) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #1F2A3D !important;
}

/* ── Payment form field layout ── */
/* ACH form: Email + Phone on same row */
.payment-forms__panel[data-panel="ach"] .gfield--type-email,
.payment-forms__panel[data-panel="ach"] .gfield--type-phone {
  grid-column: span 1 !important;
}

/* ACH form: Amount + Account Number + Routing Number on same row (3-col) */
.payment-forms__panel[data-panel="ach"] .gfield--type-number,
.payment-forms__panel[data-panel="ach"] .gfield--id--5,
.payment-forms__panel[data-panel="ach"] .gfield--id--6 {
  grid-column: span 1 !important;
}

/* ACH form: force 3-col row for amount/account/routing */
.payment-forms__panel[data-panel="ach"] .gform_fields {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* Reset full-width for fields that should span all 3 cols */
.payment-forms__panel[data-panel="ach"] .gfield--type-name,
.payment-forms__panel[data-panel="ach"] .gfield--type-address,
.payment-forms__panel[data-panel="ach"] .gfield--type-textarea,
.payment-forms__panel[data-panel="ach"] .gfield--type-html,
.payment-forms__panel[data-panel="ach"] .gfield--type-text:last-of-type {
  grid-column: 1 / -1 !important;
}

/* ACH: Account Type + Account Holder Name on same row */
.payment-forms__panel[data-panel="ach"] .gfield--type-select,
.payment-forms__panel[data-panel="ach"] .gfield--type-text {
  grid-column: span 1 !important;
}

/* But address and paying-on-behalf stay full width */
.payment-forms__panel[data-panel="ach"] .gfield--type-address {
  grid-column: 1 / -1 !important;
}

/* ── CC form (form 7) layout — match live site stacked layout ── */

/* CC field spans full width */
.payment-forms__panel[data-panel="cc"] .gf-cc-field {
  grid-column: 1 / -1 !important;
}

/* Other CC form fields — full width */
.payment-forms__panel[data-panel="cc"] .gfield--type-address,
.payment-forms__panel[data-panel="cc"] .gfield--type-text,
.payment-forms__panel[data-panel="cc"] .gfield--type-html {
  grid-column: 1 / -1 !important;
}

/* Stack ALL credit card sub-fields vertically */
#gform_7 .ginput_container_creditcard {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#gform_7 .ginput_container_creditcard .gform-grid-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#gform_7 .ginput_container_creditcard .gform-grid-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Card Number — full width */
#gform_7 .ginput_cardinfo_left {
  width: 100% !important;
  margin-bottom: 14px !important;
}

/* Expiry + Security Code container — stack vertically, override ALL GF grid classes */
#gform_7 .ginput_cardextras,
#gform_7 .ginput_cardextras.gform-grid-row,
#gform_7 .ginput_cardextras.gform-grid-col,
#gform_7 span.ginput_full.ginput_cardextras {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  flex: none !important;
}

/* Expiry fieldset — full width block */
#gform_7 .ginput_cardextras .ginput_cardinfo_left,
#gform_7 .ginput_cardextras fieldset.ginput_cardinfo_left,
#gform_7 .ginput_cardextras .ginput_cardinfo_left.gform-grid-col {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  flex: none !important;
}

/* Month + Year MUST be side by side */
#gform_7 .ginput_card_expiration_container,
#gform_7 span.ginput_card_expiration_container,
#gform_7 span.ginput_card_expiration_container.gform-grid-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

#gform_7 .ginput_card_expiration_container select {
  width: 100% !important;
}

/* Security Code — full width block below expiry */
#gform_7 .ginput_cardextras .ginput_cardinfo_right,
#gform_7 .ginput_cardextras .ginput_cardinfo_right.gform-grid-col {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: none !important;
}

#gform_7 .ginput_cardextras .ginput_cardinfo_right {
  position: relative !important;
}

#gform_7 input.ginput_card_security_code {
  width: 100% !important;
  padding-right: 48px !important;
}

/* Security code icon — from GF sprite, positioned inside input on the right */
#gform_7 .ginput_card_security_code_icon {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  width: 36px !important;
  height: 28px !important;
  background-image: url('../images/gf-creditcards.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 439px 33px !important;
  background-position: -383px -3px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Cardholder Name — full width */
#gform_7 .ginput_full {
  width: 100% !important;
  margin: 0 !important;
}

/* Payment form container styling */
.payment-forms .gform_wrapper {
  background: #fff !important;
  border: 1px solid #EAEAE7 !important;
  border-radius: 18px !important;
  padding: 36px !important;
}

@media (max-width: 640px) {
  .payment-forms__panel[data-panel="ach"] .gform_fields {
    grid-template-columns: 1fr !important;
  }
  .payment-forms__panel .gfield {
    grid-column: 1 / -1 !important;
  }
}

/* ── Trust badges ── */
.admissions-form__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 12px;
  color: #9A9CA3;
  font-weight: 600;
}

.admissions-form__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--apoh-green);
  margin-right: 4px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .callback-form__body .gform_wrapper,
  .admissions-form__body .gform_wrapper {
    padding: 24px 20px !important;
  }

  .gform_wrapper .gfield_radio,
  .gform_wrapper .ginput_container_radio .gfield_radio {
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gform_wrapper .gfield_radio .gchoice label,
  .gform_wrapper .gfield_radio label.gform-field-label--type-inline {
    white-space: normal !important;
    font-size: 12px !important;
  }

  .gform_wrapper .ginput_complex,
  .gform_wrapper .ginput_container_name {
    grid-template-columns: 1fr !important;
  }

  .gform_wrapper .gform_button,
  .gform_wrapper input[type="submit"] {
    width: 100% !important;
  }
}

/* ── File Upload — Drop Zone ── */
.gform_wrapper .gform_drop_area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 40px 24px !important;
  border: 2px dashed #D4D5D9 !important;
  border-radius: 14px !important;
  background: #FAFAF9 !important;
  text-align: center !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}

.gform_wrapper .gform_drop_area:hover,
.gform_wrapper .gform_drop_area.gform_drop_area--active {
  border-color: var(--apoh-blue) !important;
  background: color-mix(in srgb, var(--apoh-blue) 4%, #fff) !important;
}

.gform_wrapper .gform_drop_area .gform_drop_instructions {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: #9A9CA3 !important;
  font-weight: 500 !important;
}

.gform_wrapper .gform_drop_area .gform_button_select_files {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  background: var(--apoh-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.gform_wrapper .gform_drop_area .gform_button_select_files:hover {
  background: #1B5A9A !important;
}

/* Upload icon */
.gform_wrapper .gform_drop_area::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23246AB4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Uploaded file list */
.gform_wrapper .ginput_preview {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  margin-top: 8px !important;
  background: #F5F5F4 !important;
  border-radius: 10px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: #1F2A3D !important;
  font-weight: 500 !important;
}

.gform_wrapper .ginput_preview .gform_delete {
  cursor: pointer !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s !important;
}

.gform_wrapper .ginput_preview .gform_delete:hover {
  opacity: 1 !important;
}

/* Upload progress bar */
.gform_wrapper .ginput_preview .gform_upload_progress {
  flex: 1 !important;
  height: 4px !important;
  background: #EAEAE7 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.gform_wrapper .ginput_preview .gform_upload_progress .gform_upload_progress_bar {
  height: 100% !important;
  background: var(--apoh-blue) !important;
  border-radius: 2px !important;
  transition: width 0.2s !important;
}

/* Drag active state — added by GF JS when dragging over */
.gform_wrapper .gform_drop_area.gform_drop_area_active,
.gform_wrapper .gform_drop_area.hover {
  border-color: var(--apoh-green) !important;
  background: color-mix(in srgb, var(--apoh-green) 6%, #fff) !important;
}

/* ── Payment Forms (Online Payment page) ── */
.payment-forms__check-image {
  display: block;
  max-width: 100%;
  margin: 0 auto 24px;
  border-radius: 8px;
}

/* Stack credit card sub-fields vertically */
.payment-forms .ginput_container_creditcard .gform-grid-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.payment-forms .ginput_container_creditcard .gform-grid-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Expiration row: month + year side by side */
.payment-forms .ginput_container_creditcard .ginput_cardextras {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.payment-forms .ginput_container_creditcard .ginput_card_expiration_container {
  flex: 1 !important;
}

.payment-forms .ginput_container_creditcard .ginput_card_security_code_container {
  flex: 0 0 100% !important;
}

/* Credit card icons — use GF sprite bundled in theme */
.gform_card_icon_container {
  display: flex !important;
  gap: 6px;
  margin-bottom: 10px;
}

.gform_card_icon {
  display: inline-block !important;
  width: 40px !important;
  height: 28px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background-image: url('../images/gf-creditcards.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 439px 33px !important;
  border: none !important;
}

.gform_card_icon_mastercard { background-position: -6px -3px !important; }
.gform_card_icon_visa       { background-position: -60px -3px !important; }
.gform_card_icon_discover   { background-position: -114px -3px !important; }
.gform_card_icon_amex       { background-position: -168px -3px !important; }
.gform_card_icon_jcb        { background-position: -222px -3px !important; }
.gform_card_icon_maestro    { background-position: -276px -3px !important; }