/* new-ds-checksheet.css — RFI-module styling for checksheet.jsp, which runs on
   border.jsp (Bootstrap 2/3) and so lacks the new-ds-major.css/unity.css rules
   the module gets on the major page. Rationale: docs/DECISIONS.md (2026-10-20). */

/* Prevent the small horizontal scroll/gap on the right (an injected header/footer
   component overflows slightly). This stylesheet loads only on the checksheet page,
   so scoping to html/body here does not affect other pages. Mirrors the fix on
   majorinfoNew (new-ds-major.css). */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

#rfi-section {
  display: flow-root;
  padding-top: 3rem;
}

/* Bootstrap-3 compatibility layer: the RFI bundle emits BS5/UDS markup that
   border.jsp's BS2/3 either styles differently or leaves unstyled. Every rule is
   scoped under #rfi-section so it does not restyle the checksheet's own tables. */

/* Bold headings (e.g. .h3 "Start your future", .h4 "Step 2 of 2") to match UDS;
   BS3 renders headings at font-weight:500. */
#rfi-section h1,
#rfi-section h2,
#rfi-section h3,
#rfi-section h4,
#rfi-section h5,
#rfi-section h6,
#rfi-section .h1,
#rfi-section .h2,
#rfi-section .h3,
#rfi-section .h4,
#rfi-section .h5,
#rfi-section .h6 {
  font-weight: 700;
}

/* width:max-content and font-weight:700 match unity.css's later .btn block
   (:17549), which overrides its canonical .btn; both look arbitrary otherwise. */
#rfi-section .btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
  border-radius: 400rem;
  width: max-content;
}

#rfi-section .btn-primary {
  color: #fff;
  background: #8c1d40;
  border-color: #8c1d40;
}

/* Contact information section (ported from majorinfoNew). Gradient fades from the
   page background (white) down to light gray. border.jsp doesn't load unity.css,
   so .py-6 and .fs-4 are undefined here; supply the padding and heading size. */
#contact-info {
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
}

#contact-info > .new-container {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

#contact-info h2 {
  font-size: 1.5rem;
}

/* !important is required here: it beats degreeShopping.css:40
   label{font-weight:200 !important}, which an id-scoped rule alone cannot. */
#rfi-section form.uds-form label,
#rfi-section form.uds-form legend {
  font-weight: 700 !important;
}

#rfi-section form.uds-form legend {
  border-bottom: 0;
}

/* border-radius:0 and height:auto neutralise BS3's .form-control defaults
   (border-radius:4px, fixed height:31px). */
#rfi-section form.uds-form .form-control:not(.rfi-phone-input),
#rfi-section form.uds-form .form-select {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0;
}

#rfi-section form.uds-form .form-select {
  padding-right: 1.5rem;
}

/* Match the react-tel-input phone field to the other inputs (its bundled CSS
   forces Roboto/15px); left padding is left to the widget to clear the flag. */
#rfi-section form.uds-form .react-tel-input,
#rfi-section form.uds-form .form-control.rfi-phone-input {
  font-family: inherit;
}

#rfi-section form.uds-form .form-control.rfi-phone-input {
  height: auto;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0;
}

#rfi-section form.uds-form .rfi-consent .form-check {
  padding-left: 8px;
}

/* Main-content action row: side-by-side with a right divider on desktop; stacks
   on mobile, so the divider/paddings switch from horizontal to vertical. */
.checksheet-action-row {
  display: flex;
  align-items: flex-start;
}

.checksheet-action-col--first {
  padding-right: 1.5rem;
  border-right: 1px solid #d0d0d0;
}

.checksheet-action-col--second {
  padding-left: 1.5rem;
  /* Apply now + Request info side by side on desktop with 1rem between them. */
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Apply now (solid maroon): darken on hover. */
.checksheet-action-col--second .btn-maroon:hover,
.checksheet-action-col--second .btn-maroon:focus {
  background-color: rgba(113, 11, 43, 1);
  border-color: rgba(113, 11, 43, 1);
  color: #fff;
}

/* Request info (outline): black text + outline (overrides btn-outline-maroon). */
.checksheet-action-col--second a.gtm_rfi {
  color: #191919;
  border-color: #191919;
}

/* Request info (outline): fill near-black on hover. */
.checksheet-action-col--second a.gtm_rfi:hover,
.checksheet-action-col--second a.gtm_rfi:focus {
  background-color: rgba(25, 25, 25, 1);
  border-color: rgba(25, 25, 25, 1);
  color: #fff;
}

.checksheet-action-col--first .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.checksheet-action-col--first .btn:hover,
.checksheet-action-col--first .btn:focus {
  background-color: transparent;
  color: #8c1d40;
  border-width: 2px;
}

@media (max-width: 767px) {
  .checksheet-action-row {
    flex-direction: column;
  }

  .checksheet-action-col--first {
    border-right: 0;
    border-bottom: 1px solid #d0d0d0;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }

  .checksheet-action-col--second {
    padding-left: 0;
    padding-top: 1.5rem;
    /* Stack Apply now + Request info; the 1rem gap becomes vertical. */
    flex-direction: column;
    align-items: stretch;
  }

  /* Full-width buttons on mobile. Wrapping the buttons in .checksheet-action-col
     divs removed the old btn-block stretch, so re-apply it to the columns, the
     visible span/div wrappers, and the buttons/anchors themselves. (.mobile-no-display
     is intentionally excluded so the desktop-only apply button stays hidden.) */
  .checksheet-action-col {
    width: 100%;
  }

  .checksheet-action-col .section,
  .checksheet-action-col .mobile-display-block,
  .checksheet-action-col .mobile-display-block > a {
    display: block;
    width: 100%;
  }

  .checksheet-action-col .btn {
    display: block;
    width: 100%;
  }
}

/* Flex/grid utilities: BS3 defines none of .row(flex), .col, .col-12, .d-flex
   or .justify-content-between, so the module's layout is supplied here. */

#rfi-section .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

#rfi-section .row > [class*="col"] {
  padding-right: 12px;
  padding-left: 12px;
}

#rfi-section .col {
  flex: 1 0 0%;
}

#rfi-section .col-12 {
  flex: 0 0 auto;
  width: 100%;
}

#rfi-section .d-flex {
  display: flex;
}

#rfi-section .justify-content-between {
  justify-content: space-between;
}