/* v2.2.0-beta.20: Force Opera/Chromium to use the real JPG rock texture as the body/page background.
   This intentionally overrides older PNG/logo/tablet background rules and cache-stale theme imports. */
:root {
  --bc-rock-texture-jpg: url('/img/rock-texture.jpg?v=2.2.0-beta.20');
  --body-bg: var(--bc-rock-texture-jpg) !important;
  --rock-texture: var(--bc-rock-texture-jpg) !important;
  --sidebar-bg: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--bc-rock-texture-jpg) !important;
  --navbar-bg: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), var(--bc-rock-texture-jpg) !important;
  --card-bg: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.38)), var(--bc-rock-texture-jpg) !important;
  --button-rock-texture: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), var(--bc-rock-texture-jpg) !important;
  --button-rock-texture-hover: linear-gradient(rgba(28,255,96,.18), rgba(30,207,255,.10)), var(--bc-rock-texture-jpg) !important;
}

html,
body {
  min-height: 100% !important;
  background-color: #050708 !important;
  background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.12)), var(--bc-rock-texture-jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body::before,
body::after {
  background-image: none !important;
}

/* Stop later wrapper/hero rules from repainting the giant logo or tablet image over the body background. */
.app-main,
.main-container,
.content-wrapper,
.page-wrapper,
.page-shell,
.site-shell,
.home-page,
.home-hero,
.hero,
.hero-section,
.unified-login-page,
.auth-page,
.login-page {
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep the Bootstrap 5 cyber-rock theme on UI surfaces, but use the JPG rock texture file everywhere. */
.navbar,
.sidebar,
.app-sidebar-col,
.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.list-group-item,
.table,
.table > :not(caption) > * > *,
.alert,
.mega-menu-section,
.mega-link,
.module-card,
.service-card,
.dashboard-card,
.addon-action-card,
.addon-metric-card,
.btn,
.btn-sidebar,
.btn-account,
.btn-email,
.btn-ambassador,
.btn-sales-marketing,
.form-control,
.form-select,
.input-group-text {
  background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), var(--bc-rock-texture-jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.card,
.dropdown-menu,
.modal-content,
.offcanvas,
.module-card,
.service-card,
.dashboard-card,
.addon-action-card,
.addon-metric-card {
  background-color: rgba(2, 8, 12, .58) !important;
}

.btn:hover,
.btn:focus,
.btn-sidebar:hover,
.btn-sidebar:focus,
.mega-link:hover,
.mega-link:focus {
  background-image: linear-gradient(rgba(28,255,96,.20), rgba(30,207,255,.12)), var(--bc-rock-texture-jpg) !important;
}

/* The logo remains an image element only. It is not used as a page background. */
.logo-nav,
.hero-logo,
.login-profile-image,
img[src*='logo'],
img[src*='Badgers_Claw-Pit'],
img[src*='Claw-Pit_logo0'] {
  background-image: none !important;
}

@media (max-width: 767.98px) {
  html,
  body {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}