/* ---------- ROFSS "this site is built for desktop" popup (phones only) ---------- */

#rofssMobileBannerOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 59, 0, 0.55);
  z-index: 3000;
}
#rofssMobileBannerOverlay.is-open {
  display: block;
}
#rofssMobileBannerPopup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3001;
  width: 90vw;
  max-width: 480px;
  background: #f5f8f3;
  border: 5px outset #8aaf7d;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
#rofssMobileBannerPopup.is-open {
  display: block;
}
#rofssMobileBannerPopup .rofss-mobile-banner-head {
  background: #0f3b00;
  color: #f5f8f3;
  font-weight: bold;
  font-size: 26px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#rofssMobileBannerPopup .rofss-mobile-banner-close {
  background: transparent;
  border: none;
  color: #f5f8f3;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
#rofssMobileBannerPopup .rofss-mobile-banner-body {
  padding: 30px;
}
#rofssMobileBannerPopup .rofss-mobile-banner-body p {
  margin: 0 0 26px 0;
  font-size: 24px;
  line-height: 1.5;
  color: #103c00;
}
#rofssMobileBannerPopup .rofss-mobile-banner-ok {
  display: block;
  width: 100%;
  padding: 20px 0;
  background: #1f7200;
  border: 3px outset #8aaf7d;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #f5f8f3;
  cursor: pointer;
}
#rofssMobileBannerPopup .rofss-mobile-banner-ok:active {
  border-style: inset;
}

/* Only ever show this popup on phone-width screens; on desktop it stays
   hidden even if JS decides to inject/open it for any reason.
   NOTE: this site has no <meta name="viewport">, so phones render the page
   at a desktop-scale layout viewport (~980px) and a min-width media query
   against that viewport would hide this popup even on a real phone. We
   gate on the physical device width instead so it matches what
   mobile-banner.js actually detects. device-width is a legacy but still
   universally supported media feature for exactly this case. */
@media (min-device-width: 601px) {
  #rofssMobileBannerOverlay,
  #rofssMobileBannerPopup {
    display: none !important;
  }
}