/* New Jersey REALTORS® subcatalog v18 LIVE — student stay-on-catalog.
   Paste on the LIVE NEW JERSEY catalog Branding only, not root.
   Beta passed 2026-10-27. Same as v17, plus a hard hide for Indiana category links. */
:root {
  --njr-navy: #0C2D5A;
  --njr-slate: #3E5F7A;
  --njr-blue: #189FFF;
  --njr-stripe: #189FFF; /* HERE: thin line under the navy bar */
  --njr-link: #1863DC;
  --njr-ink: #212121;
  --njr-muted: #5B6B73;
  --njr-paper: #F4F7FA;
  --njr-card: #ffffff;
  --njr-accent: #E87722;
}
html,
body,
.catalog-application,
#main,
.main,
.listings-region,
.content,
.page-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--njr-ink);
}
/* Home: the two lines are the #feature strip directly under the header. Same place as before. */
body.njr-home #feature,
body.njr-home #feature.feature-region,
body.njr-home .feature-region {
  /* HERE: 6px navy then 3px stripe */
  background: linear-gradient(to bottom, #0C2D5A 0 6px, var(--njr-stripe) 6px 9px) !important;
  background-image: linear-gradient(to bottom, #0C2D5A 0 6px, var(--njr-stripe) 6px 9px) !important;
  background-color: #0C2D5A !important;
  border: 0 !important;
  min-height: 9px !important;
  height: 9px !important;
  max-height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
/* Listing hero. This does not wait for body.njr-product.
   Root RECP CSS is #feature { purple !important }. That paints on the first frame
   of a course page because the body class is added later by JS.
   #product-page > #feature is more specific, so it wins immediately. */
html body #product-page > #feature,
html body header#feature:has(.product-bg),
html body #feature:has(.jumbotron) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#njr-stripe,
.njr-home-cards,
#njr-home-cards {
  display: none !important;
}
body.njr-product .product-bg {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
body.njr-product .hero-region.jumbotron.container,
body.njr-product .jumbotron.container {
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
body.njr-product .product-description,
body.njr-product .description,
body.njr-product .listing-description {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
/* Listing description. Catalog paints #main white, so the text sits in a white box.
   Same fix as RECP: clear that box. Word paste highlights go too. */
#product-page,
#product-page #main,
#product-page .product-details,
#product-page #description,
#product-page #description *,
#product-page .product-description,
#product-page .product-description * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#product-page {
  background: #f4f7fa !important;
  background-color: #f4f7fa !important;
}
body.njr-product .product-description h1,
body.njr-product .product-description h2,
body.njr-product .product-description h3,
body.njr-product .description h1,
body.njr-product .description h2,
body.njr-product .description h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
/* Enroll buttons: NJ navy, not RECP purple, even before JS runs */
.product-enroll-button a,
a.product-enroll-button,
a[href*="/enrollment"] {
  background: var(--njr-navy) !important;
  background-color: var(--njr-navy) !important;
  border-color: var(--njr-navy) !important;
  color: #ffffff !important;
}
a { color: var(--njr-link); }
header.header,
.header:not(#feature),
.header-container,
.header-inner,
.catalog-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
header#feature {
  display: block !important;
}
.header-branding {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  min-width: 0;
}
/* HERE: NJ header seal size — change width/height together */
.header-branding .logo-customized {
  width: 160px !important;
  min-width: 72px !important;
  height: 110px !important;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/eb/Logo_of_the_New_Jersey_Department_of_Banking_and_Insurance.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  position: relative;
  overflow: hidden;
}
.header-branding .logo-customized img,
.logo-customized img,
img[src*="RECP-Logo"],
img[src*="recp-logo"],
img[alt*="RECP"],
.product-account-logo {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}
a.njr-home-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background: transparent;
  text-decoration: none;
}
#njr-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* HERE: push the NJ title farther from the logo — raise this number */
  margin-left: 75px;
  padding-left: 8px;
}
#njr-banner .njr-title {
  font-family: Tahoma, Arial, sans-serif;
  /* HERE: NJ title size */
  font-size: 36px;
  line-height: 1.15;
  color: var(--njr-navy);
  font-weight: 700;
  white-space: nowrap;
}
#njr-banner .njr-tag {
  margin-top: 4px;
  font-size: 15px;
  color: var(--njr-muted);
  font-weight: 600;
  font-style: italic;
}
#header-menu-container a,
#header-menu-container button,
.header-menu a,
.header-menu button,
header [class*="cart"] button,
header [class*="cart"] a,
header [aria-label*="cart" i] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--njr-navy) !important;
  border-color: #d5dce0 !important;
  box-shadow: none !important;
}
#header-menu-container a.njr-dashboard {
  color: var(--njr-navy) !important;
  text-decoration: underline;
}
/* Search row.
   The field and button live in form.search-box-wrapper.
   .recp-cat-nav sits next to that form and was shoving the row left.
   Hide the nav, then center the form. */
div.search-form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
}
.recp-cat-nav {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  flex: 0 0 0 !important;
}
form.search-box-wrapper,
#search-form .search-box-wrapper,
.search-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  gap: 8px !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  /* HERE: do not put auto margins here. They fight the hidden nav and shift the row. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  float: none !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}
.search-box-wrapper input,
#search-form input[type="search"],
#search-form input[type="text"],
.search-form input,
#search {
  /* HERE: search field width and height */
  order: 1 !important;
  display: inline-block !important;
  height: 34px !important;
  min-height: 34px !important;
  width: 280px !important;
  max-width: 280px !important;
  border: 1px solid #c5d0d6 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--njr-ink) !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 !important;
}
#search-submit,
.search-box-wrapper button,
.search-box-wrapper [type="submit"],
button.search-submit {
  /* HERE: Search button size — sits to the right of the field */
  order: 2 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  height: 34px !important;
  width: auto !important;
  min-width: 78px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  background: var(--njr-navy) !important;
  background-image: none !important;
  border: 1px solid var(--njr-navy) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#search-submit svg,
#search-submit i,
#search-submit span,
.search-box-wrapper button svg,
.search-box-wrapper button i,
.search-box-wrapper button span {
  display: none !important;
}
#search-submit::before,
.search-box-wrapper button::before {
  content: none !important;
  display: none !important;
}
#search-submit::after,
.search-box-wrapper button::after {
  content: "Search";
  color: #ffffff;
}
.search-form input[type="submit"] {
  background-color: var(--njr-navy) !important;
  background-image: none !important;
  border-color: var(--njr-navy) !important;
  color: #ffffff !important;
}
#search-refine-button--refine,
button[id*="refine"],
.search-form__actions,
.search-form__actions button {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  flex: 0 0 0 !important;
  pointer-events: none !important;
}
.recp-category-btn,
#recpHelpfulTipsLink,
#recpinsert,
#recp-banner {
  display: none !important;
}
/* HERE: chat icon. The button lives on #fab-root. */
#fab-root,
.bpChatContainer,
#bp-web-widget,
#bp-widget-web,
iframe[src*="botpress"],
iframe[src*="bpcontent"],
.bpFab,
.bpFabButton,
[class*="bpFab"],
[id*="botpress"],
[class*="botpress"],
iframe[title*="chat" i],
.woot-widget-bubble,
[class*="webchat"],
button[aria-label*="chat" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.hero-head, h1, h2, h3 { color: var(--njr-navy); }
.njr-home-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 40px auto 30px;
  justify-content: center;
  max-width: 1100px;
  padding: 0 16px;
}
.njr-card {
  flex: 1;
  min-width: 320px;
  background: var(--njr-card);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(12, 45, 90, 0.08);
  padding: 30px;
  border: 1px solid #dbe4ee;
}
.njr-card h2 {
  margin: 0 0 16px;
  color: var(--njr-navy);
  font-size: 2em;
}
.njr-card .njr-placeholder {
  color: var(--njr-muted);
  font-style: italic;
  line-height: 1.5;
  font-size: 1.3em;
}
.njr-footer {
  margin: 24px 16px 48px;
  padding: 24px 16px;
  background: #fff;
  border-top: 4px solid var(--njr-blue);
}
.njr-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.njr-footer-col { flex: 1; min-width: 180px; }
.njr-footer-col h4 { margin: 0 0 8px; color: var(--njr-navy); }
.njr-footer-col .njr-placeholder { color: var(--njr-muted); font-style: italic; }
/* Admin pages. Root CSS paints a purple line on #app-header. */
body.njr-admin,
body.njr-admin #main,
body.njr-admin #content {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
body.njr-admin #app-header {
  background: #ffffff !important;
  border-bottom: 4px solid var(--njr-navy) !important;
  color: var(--njr-navy) !important;
  box-shadow: none !important;
}
body.njr-admin #app-header a,
body.njr-admin [data-customizationid="admin-navigation"] a {
  color: var(--njr-navy) !important;
}
body.njr-admin .logo-customized,
body.njr-admin .catalog-logo {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/eb/Logo_of_the_New_Jersey_Department_of_Banking_and_Insurance.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}
@media (max-width: 800px) {
  header, .header, .header-container {
    flex-wrap: wrap !important;
  }
  #njr-banner .njr-title {
    font-size: 24px;
    white-space: normal;
  }
}
/* HERE: Create Account has no logo. The image in the page is the RECP file, so showing it always flashes. */
.registration-logo {
  display: none !important;
  background-image: none !important;
}


/* v18 BETA: Indiana category links. JS also hides these by href and label. */
a[href="/browse/prelicensing"],
a[href="/browse/post-licensing"],
a[href="/browse/continuing-education"],
a[href="/browse/managing-broker"],
a[href="/browse/broker-transition"],
a[href="/browse/designation-courses"],
a[href="/browse/all"],
a[href^="/browse/prelicensing?"],
a[href^="/browse/all?"] {
  display: none !important;
}