/* checksheet-sticky-nav.css — sticky action bar (Apply now + Request info) for
   checksheet.jsp, revealed once #major_header scrolls out of view. Laid out with
   explicit CSS because border.jsp (BS2/3) lacks the BS4/5 flex utilities.
   Rationale: docs/DECISIONS.md (2026-10-20). */

.checksheet-sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background-color: #fff;
  border-bottom: 1px solid #d0d0d0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.checksheet-sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.checksheet-sticky-bar__inner .col-md-12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.checksheet-sticky-bar__inner::before,
.checksheet-sticky-bar__inner::after,
.checksheet-sticky-bar__inner .row::before,
.checksheet-sticky-bar__inner .row::after,
.checksheet-sticky-bar__inner .col-md-12::before,
.checksheet-sticky-bar__inner .col-md-12::after {
  content: none;
  display: none;
}

.checksheet-sticky-bar__title {
  font-size: 24px;
  font-weight: 700;
  color: #191919;
  min-width: 0;
}

.checksheet-sticky-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Buttons are self-contained so the page's small BS3 .btn does not shrink them. */
.checksheet-sticky-bar .csb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 400rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Apply now -- solid maroon. */
.checksheet-sticky-bar .csb-btn--apply {
  background-color: #8c1d40;
  border-color: #8c1d40;
  color: #fff;
}

.checksheet-sticky-bar .csb-btn--apply:hover,
.checksheet-sticky-bar .csb-btn--apply:focus {
  background-color: rgba(113, 11, 43, 1);
  border-color: rgba(113, 11, 43, 1);
  color: #fff;
}

/* Request info -- black outline that fills near-black on hover. */
.checksheet-sticky-bar .csb-btn--rfi {
  background-color: #fff;
  border-color: #191919;
  color: #191919;
}

.checksheet-sticky-bar .csb-btn--rfi:hover,
.checksheet-sticky-bar .csb-btn--rfi:focus {
  background-color: rgba(25, 25, 25, 1);
  border-color: rgba(25, 25, 25, 1);
  color: #fff;
}

.checksheet-sticky-bar .csb-btn:focus-visible {
  outline: 2px solid #191919;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .checksheet-sticky-bar__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Drop the title on small screens so the action buttons get the full width. */
  .checksheet-sticky-bar__title {
    display: none;
  }

  .checksheet-sticky-bar__actions {
    flex: 1 1 auto;
    justify-content: center;
  }

  .checksheet-sticky-bar .csb-btn {
    flex: 1 1 auto;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checksheet-sticky-bar {
    transition: none;
  }
}