/* =============================================================================
   "{FirstName} has not been background checked." bottom sheet.

   Loaded by search-components/no-background-check-notice.php itself rather than
   from a header's is_page() whitelist, so the sheet's styles always travel with
   its markup - it renders on /search and on the business-link page /{slug},
   which run different headers.

   Values from the "2026 Wild West Update" Sketch document, page "Search
   Results", frame "No Background Check - Notice".
   ========================================================================== */

.ht-bgc-notice {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.ht-bgc-notice[hidden] { display: none; }

.ht-bgc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .22s ease;
  cursor: pointer;
}
.ht-bgc-notice.is-open .ht-bgc-backdrop { opacity: 1; }

.ht-bgc-sheet {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: 39px 28px calc(29px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 28px rgba(0, 0, 0, .18);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .26s cubic-bezier(.22, .7, .3, 1), opacity .2s ease;
}
.ht-bgc-notice.is-open .ht-bgc-sheet {
  transform: translateY(0);
  opacity: 1;
}

.ht-bgc-title {
  margin: 0 0 61px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  letter-spacing: -0.2px;
}

.ht-bgc-lead {
  margin: 0 0 11px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #2C2C2C;
}

.ht-bgc-list {
  margin: 0 0 100px;
  padding: 0;
  list-style: none;
}
.ht-bgc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 0 0 9px;
  font-size: 16px;
  line-height: 1.25;
  color: #2C2C2C;
}
.ht-bgc-list li:last-child { margin-bottom: 0; }

.ht-bgc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E5F8E7;
}
.ht-bgc-check-icon {
  width: 20px;
  height: 20px;
  color: #007F1D;
}

/* The one action. Orange because it IS the primary action here. */
.ht-bgc-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 65px;
  padding: 0 24px;
  background: #F7880C;
  border: 0;
  border-radius: 16px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease;
}
.ht-bgc-continue:hover { background: #E07A08; }
.ht-bgc-continue:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.ht-bgc-continue-label { line-height: 1; }
.ht-bgc-continue-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: #FFFFFF;
}

/* Every piece of text in this sheet sets its own colour, explicitly and with
   !important, and none of it inherits.
 *
 * This sheet renders over three surfaces whose global CSS this file does not
 * control - the /search results panel, the /search Hire Now flow and the
 * business-link page - and the business-link page carries a blanket grey on
 * <span>. That turned the provider's name in the headline grey, turned all
 * three checklist labels grey, and turned the Continue label grey ON the orange
 * button (the button itself was white; only its inner span was not).
 *
 * It is also the HAPPY-132 rule: a button label that inherits rather than
 * declaring its colour resolves to the host UA's default inside the app's
 * WKWebView, which is how a white label becomes grey or blue on a real device.
 * Do not remove these and rely on inheritance. */
.ht-bgc-title,
.ht-bgc-title [data-ht-bgc-name] { color: #000000 !important; }

.ht-bgc-lead { color: #2C2C2C !important; }

.ht-bgc-list li,
.ht-bgc-list li > span:last-child,
.ht-bgc-list li [data-ht-bgc-name] { color: #2C2C2C !important; }

/* The check keeps its own green: it is a mask/currentColor icon, so it must be
   re-asserted after the row colour above rather than inheriting it. */
.ht-bgc-check-icon { color: #007F1D !important; }

.ht-bgc-continue,
.ht-bgc-continue-label,
.ht-bgc-continue-arrow { color: #FFFFFF !important; }

body.ht-bgc-notice-open { overflow: hidden; }

/* Short viewports: the design's generous gaps are the first thing to give, so
   the Continue button stays reachable without the sheet scrolling. */
@media (max-height: 700px) {
  .ht-bgc-title { margin-bottom: 30px; }
  .ht-bgc-list { margin-bottom: 40px; }
  .ht-bgc-sheet { padding-top: 28px; }
}

@media (min-width: 992px) {
  .ht-bgc-notice { align-items: center; }
  .ht-bgc-sheet {
    border-radius: 20px;
    padding-bottom: 29px;
    transform: translateY(12px) scale(.99);
  }
  .ht-bgc-notice.is-open .ht-bgc-sheet { transform: translateY(0) scale(1); }
  .ht-bgc-title { margin-bottom: 34px; }
  .ht-bgc-list { margin-bottom: 44px; }
}