/* Phase 5S - Restore background, footer contrast, and pre-5R slider copy
   Scope: visual regression fix only. Does not touch checkout/API/runtime ownership. */

:root {
  --footer-fg-strong: #ffffff;
}

html,
body {
  background-color: #1f0734 !important;
  min-height: 100% !important;
}

/* Restore myteria_bg as the persistent storefront backdrop. */
html::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(24, 5, 42, .42), rgba(24, 5, 42, .74)),
    url('/assets/images/brand/myteria-bg.webp') center top / cover no-repeat !important;
  filter: saturate(.98) brightness(.86) !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
}

html::after {
  z-index: -2 !important;
  pointer-events: none !important;
}

body,
#root,
.page,
.legal-shell,
.cart-page,
.payment-history-page {
  background: transparent !important;
}

/* Footer contrast should be consistent across the storefront and legal pages. */
.main-footer,
.main-footer .footer-title,
.main-footer .footer-copy,
.main-footer .footer-nav,
.main-footer .footer-nav-item,
.main-footer a {
  color: var(--footer-fg-strong) !important;
  text-shadow: 0 2px 14px rgba(17, 3, 32, .48) !important;
}

.main-footer .footer-nav-item:hover,
.main-footer .footer-nav-item:focus-visible {
  color: #ffffff !important;
  text-decoration-color: rgba(255,255,255,.9) !important;
}

/* Keep the background visible on iOS/Safari where fixed pseudo layers can be finicky. */
@supports (-webkit-touch-callout: none) {
  body {
    background:
      linear-gradient(180deg, rgba(24, 5, 42, .48), rgba(24, 5, 42, .82)),
      url('/assets/images/brand/myteria-bg.webp') center top / cover no-repeat fixed !important;
  }
}