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

/* ── 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;
}

/* ── Hide form description ── */
.gform_wrapper .gform_description,
.gform_wrapper .gform_heading {
  display: none !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: var(--apoh-blue) !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;
}

.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;
}

/* ── Submit button — blue pill ── */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 12px !important;
  padding: 0 !important;
  border: none !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 ── */

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

/* Card brands — hide text, show as visual row if icons load */
#gform_7 .gform_card_icon_container {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* ── Card Number: full width ── */
#gform_7 .ginput_cardinfo_left {
  margin-bottom: 0 !important;
}

/* ── Expiry + Security Code row ── */
/* ginput_cardextras wraps ginput_cardinfo_left (expiry) + ginput_cardinfo_right (security) */
#gform_7 .ginput_cardextras {
  display: grid !important;
  grid-template-columns: 3fr 2fr !important;
  gap: 14px !important;
  align-items: end !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* Expiry: month + year side by side, full width of left cell */
#gform_7 .ginput_cardextras .ginput_cardinfo_left {
  display: block !important;
  margin: 0 !important;
}

#gform_7 .ginput_card_expiration_container,
#gform_7 span.ginput_card_expiration_container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* Month/year containers (when using fieldset markup) */
#gform_7 .ginput_card_expiration_month_container,
#gform_7 .ginput_card_expiration_year_container {
  display: block !important;
}

/* Ensure selects fill their cells and show full text */
#gform_7 select.ginput_card_expiration,
#gform_7 select.ginput_card_expiration_month,
#gform_7 select.ginput_card_expiration_year {
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px 36px 14px 16px !important;
}

/* Security code: full width of right cell */
#gform_7 .ginput_cardextras .ginput_cardinfo_right {
  display: block !important;
  margin: 0 !important;
}

#gform_7 input.ginput_card_security_code {
  width: 100% !important;
}

/* Hide the card lock icon spacer */
#gform_7 .ginput_card_security_code_icon {
  display: none !important;
}

/* ── Cardholder Name: full width ── */
#gform_7 .ginput_full:not(.ginput_cardextras) {
  margin: 0 !important;
}

/* ── Other 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;
}

@media (max-width: 640px) {
  #gform_7 .ginput_cardextras {
    grid-template-columns: 1fr !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 {
    flex-direction: row !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;
  }
}