/* Phase 5M - Production Frontend Polish
   Final high-priority overrides for header/footer/legal/mobile consistency.
   This file is intentionally loaded last. */

:root {
  --myteria-bg: #12071f;
  --myteria-panel: rgba(16, 10, 35, .72);
  --myteria-panel-strong: rgba(14, 9, 31, .88);
  --myteria-border: rgba(190, 122, 255, .24);
  --myteria-border-strong: rgba(211, 158, 255, .42);
  --myteria-purple: #8e48ff;
  --myteria-purple-2: #c96dff;
  --myteria-text: #fcfbff;
  --myteria-muted: rgba(245, 235, 255, .76);
  --footer-ink: #160722;
}

html {
  min-width: 320px;
  overflow-x: clip;
  background: var(--myteria-bg);
}

body {
  overflow-x: clip !important;
  background:
    radial-gradient(circle at 72% 18%, rgba(157, 53, 193, .22), transparent 34rem),
    radial-gradient(circle at 16% 38%, rgba(85, 42, 180, .18), transparent 30rem),
    #12071f !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -8;
  background: rgba(10, 4, 24, .32);
}

/* Shared production header */
.main-header {
  width: min(1480px, calc(100% - clamp(24px, 5vw, 96px))) !important;
  margin: clamp(14px, 2vw, 30px) auto 0 !important;
  padding: clamp(10px, 1.15vw, 16px) clamp(14px, 1.9vw, 28px) !important;
  border: 1px solid rgba(197, 138, 251, .18) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(23, 12, 48, .78), rgba(15, 8, 33, .58)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: var(--myteria-text) !important;
  position: relative !important;
  z-index: 20 !important;
}

.main-header .header-lhs,
.main-header .header-rhs {
  display: flex !important;
  align-items: center !important;
  gap: clamp(10px, 1.4vw, 20px) !important;
  min-width: 0 !important;
}

.main-title {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 0 !important;
  flex: 0 1 auto !important;
}

.main-title a,
.legal-logo,
.platform-logo a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

.main-title img,
.legal-logo img,
.platform-logo img {
  display: block !important;
  width: clamp(148px, 14vw, 238px) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(58px, 5.8vw, 96px) !important;
  object-fit: contain !important;
  aspect-ratio: 267 / 110 !important;
  image-rendering: auto !important;
}

.main-header .header-nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(10px, 1.4vw, 22px) !important;
  margin: 0 !important;
}

.main-header .header-nav-item {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  color: rgba(255, 250, 255, .78) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(11px, .72vw, 13px) !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.main-header .header-nav-item:hover,
.main-header .header-nav-item.-selected,
.main-header .header-nav-item[aria-current="page"] {
  color: #fff !important;
  background: rgba(143, 77, 255, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(211, 158, 255, .18) !important;
}

.main-header .header-nav-item::after { display: none !important; }

.main-header .header-buttons {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.main-header .header-buttons .button,
.legal-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(151, 78, 255, .92), rgba(107, 54, 220, .92)) !important;
  color: #fff !important;
  border: 1px solid rgba(234, 204, 255, .28) !important;
  box-shadow: 0 12px 28px rgba(112, 45, 224, .28) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.main-header .action.-menu,
.main-header .action.-cart {
  color: #fff !important;
}

/* Background blobs that survive zoom/resolution changes. */
.bg.-desktop,
.bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -7 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.bg.-desktop .blobs,
.bg .blobs {
  position: absolute !important;
  inset: 0 !important;
}

.bg.-desktop .steve,
.bg .steve {
  position: fixed !important;
  top: clamp(90px, 13vh, 190px) !important;
  right: clamp(4vw, 8vw, 150px) !important;
  width: clamp(360px, 34vw, 640px) !important;
  height: auto !important;
  opacity: .28 !important;
  filter: blur(.2px) saturate(.95) !important;
}

.bg.-desktop .blob-1,
.bg .blob-1 {
  position: fixed !important;
  top: clamp(-190px, -8vw, -70px) !important;
  right: clamp(-220px, -9vw, -80px) !important;
  width: clamp(440px, 46vw, 940px) !important;
  min-width: 360px !important;
  height: auto !important;
  opacity: .5 !important;
  transform: none !important;
}

.bg.-desktop .blob-2,
.bg .blob-2 {
  position: fixed !important;
  left: clamp(-190px, -7vw, -70px) !important;
  top: clamp(340px, 48vh, 640px) !important;
  width: clamp(260px, 26vw, 540px) !important;
  height: auto !important;
  opacity: .25 !important;
}

.bg.-desktop .blob-3,
.bg .blob-3 {
  display: none !important;
}

/* Footer: compact Myteria composition on Blob3, not a card and not a wall. */
.main-footer {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  min-height: clamp(320px, 30vw, 430px) !important;
  margin: clamp(48px, 7vw, 110px) 0 0 !important;
  padding: 0 !important;
  color: var(--footer-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: clip !important;
  text-align: left !important;
  contain: layout paint !important;
}

.main-footer::before,
.main-footer::after {
  content: none !important;
}

.main-footer .footer-blob3,
.main-footer.legal-footer .footer-blob3,
.footer-blob3 {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: clamp(620px, 49vw, 860px) !important;
  max-width: none !important;
  height: auto !important;
  right: clamp(-130px, -5vw, -50px) !important;
  bottom: clamp(-108px, -5.3vw, -58px) !important;
  opacity: .98 !important;
  filter: drop-shadow(0 -18px 44px rgba(201, 109, 255, .12)) !important;
  transform: none !important;
}

.footer-content {
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(28px, 5.1vw, 92px) !important;
  bottom: clamp(60px, 6.2vw, 104px) !important;
  width: min(520px, 42vw) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  color: var(--footer-ink) !important;
}

.main-footer .footer-title {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  color: var(--footer-ink) !important;
  font-family: Montserrat, Inter, system-ui, sans-serif !important;
  font-size: clamp(26px, 2.1vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .18) !important;
}

.main-footer .footer-tagline {
  position: static !important;
  margin: 0 !important;
  color: rgba(22, 7, 34, .86) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

.main-footer .footer-nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(8px, .8vw, 14px) !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

.main-footer .footer-nav-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: clamp(36px, 2.6vw, 44px) !important;
  padding: 0 clamp(12px, 1.15vw, 18px) !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(70, 20, 105, .42) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #3a1160 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 20px rgba(93, 28, 139, .12) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(11px, .8vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

.main-footer .footer-nav-item::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #64229b !important;
}

.main-footer .footer-nav-item[data-footer-icon="privacy"]::before { content: "◆" !important; }
.main-footer .footer-nav-item[data-footer-icon="refund"]::before { content: "↺" !important; }
.main-footer .footer-nav-item[data-footer-icon="website"]::before { content: "↗" !important; }

.main-footer .footer-nav-item:hover,
.main-footer .footer-nav-item:focus-visible {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(70, 20, 105, .64) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.main-footer .footer-copy {
  position: static !important;
  margin: 14px 0 0 !important;
  color: rgba(22, 7, 34, .84) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(12px, .84vw, 15px) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

/* Legal page production theme */
.legal-page {
  min-height: 100vh !important;
  color: var(--myteria-text) !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(194, 97, 255, .22), transparent 34rem),
    radial-gradient(circle at 12% 32%, rgba(123, 58, 240, .18), transparent 30rem),
    linear-gradient(180deg, #150824, #0d0619 64%, #12071f) !important;
}

.legal-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -6 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.legal-bg .steve {
  position: absolute !important;
  top: clamp(120px, 20vh, 260px) !important;
  right: clamp(4vw, 8vw, 160px) !important;
  width: clamp(360px, 38vw, 720px) !important;
  opacity: .2 !important;
  filter: blur(.4px) !important;
}

.legal-bg .blob-1 {
  position: absolute !important;
  top: clamp(-180px, -7vw, -70px) !important;
  right: clamp(-190px, -8vw, -80px) !important;
  width: clamp(420px, 43vw, 850px) !important;
  opacity: .48 !important;
}

.legal-bg .blob-2 {
  position: absolute !important;
  left: clamp(-160px, -7vw, -70px) !important;
  top: clamp(420px, 50vh, 700px) !important;
  width: clamp(260px, 27vw, 540px) !important;
  opacity: .22 !important;
}

.legal-shell {
  position: relative !important;
  z-index: 1 !important;
  min-height: 100vh !important;
}

.legal-hero,
.legal-card {
  width: min(1120px, calc(100% - clamp(28px, 6vw, 112px))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.legal-hero {
  margin-top: clamp(44px, 6vw, 94px) !important;
  margin-bottom: 22px !important;
  padding: clamp(34px, 5vw, 76px) !important;
  border-radius: clamp(28px, 4vw, 48px) !important;
  border: 1px solid var(--myteria-border) !important;
  background:
    linear-gradient(135deg, rgba(38, 18, 75, .82), rgba(17, 9, 36, .7)),
    radial-gradient(circle at 88% 8%, rgba(202, 109, 255, .24), transparent 24rem) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}

.legal-kicker,
.legal-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(143, 72, 255, .22) !important;
  color: #e8d2ff !important;
  border: 1px solid rgba(211, 158, 255, .24) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

.legal-hero h1,
.legal-card h1 {
  margin: 0 !important;
  color: #fff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: clamp(42px, 6vw, 82px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  text-transform: none !important;
}

.legal-hero p,
.legal-card > p:first-of-type {
  max-width: 780px !important;
  color: rgba(255, 248, 255, .78) !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.65 !important;
  margin-top: 18px !important;
}

.legal-updated {
  margin-top: 18px !important;
  color: #d9b7ff !important;
  font-weight: 800 !important;
}

.legal-card {
  margin-top: 22px !important;
  margin-bottom: clamp(24px, 4vw, 52px) !important;
  padding: clamp(28px, 4vw, 56px) !important;
  border-radius: clamp(24px, 3vw, 36px) !important;
  border: 1px solid var(--myteria-border) !important;
  background: rgba(15, 9, 33, .72) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}

.legal-card h2 {
  margin: clamp(28px, 3vw, 44px) 0 10px !important;
  color: #fff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: clamp(22px, 2.1vw, 32px) !important;
  letter-spacing: -.025em !important;
}

.legal-card p,
.legal-card li {
  color: rgba(252, 248, 255, .78) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.75 !important;
}

.legal-card ul {
  padding-left: 1.35rem !important;
}

.legal-note {
  margin-top: 28px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: rgba(143, 72, 255, .14) !important;
  border: 1px solid rgba(211, 158, 255, .2) !important;
  color: rgba(255, 250, 255, .86) !important;
}

/* Policy/footer links should never point to external Myteria policy URLs visually. */
a[href*="privacy-policy"],
a[href*="refund-policy"] {
  text-underline-offset: 3px;
}

/* Checkout/cart consistency touches */
.support-refund a[href*="refund"] {
  color: #e8d2ff !important;
}

/* Mobile / Safari */
@supports (-webkit-touch-callout: none) {
  .main-header,
  .legal-hero,
  .legal-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@media screen and (max-width: 980px) {
  .main-header {
    width: min(100% - 24px, 760px) !important;
    border-radius: 26px !important;
    padding: 10px 12px !important;
  }

  .main-title img,
  .legal-logo img,
  .platform-logo img {
    width: clamp(132px, 38vw, 190px) !important;
    max-height: 72px !important;
  }

  .main-header .header-nav.-desktop,
  .main-header .header-buttons.-desktop {
    display: none !important;
  }

  .main-header .action.-menu,
  .main-header .action.-cart.-mobile,
  .main-header .action.-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    flex: 0 0 auto !important;
  }

  .bg.-desktop .blob-1,
  .bg .blob-1 {
    top: -110px !important;
    right: -170px !important;
    width: 430px !important;
    opacity: .42 !important;
  }

  .bg.-desktop .steve,
  .bg .steve {
    top: 92px !important;
    right: -110px !important;
    width: 470px !important;
    opacity: .16 !important;
  }

  .main-footer {
    min-height: 390px !important;
    margin-top: 52px !important;
  }

  .main-footer .footer-blob3,
  .footer-blob3 {
    width: 720px !important;
    right: -270px !important;
    bottom: -94px !important;
  }

  .footer-content {
    width: min(88vw, 420px) !important;
    right: 16px !important;
    bottom: 70px !important;
    gap: 10px !important;
  }

  .main-footer .footer-title {
    font-size: 28px !important;
  }

  .main-footer .footer-tagline {
    font-size: 13px !important;
  }

  .main-footer .footer-nav {
    gap: 7px !important;
  }

  .main-footer .footer-nav-item {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  .legal-hero,
  .legal-card {
    width: min(100% - 24px, 760px) !important;
  }
}

@media screen and (max-width: 560px) {
  body {
    background: linear-gradient(180deg, #150824, #0e071c 60%, #12071f) !important;
  }

  .main-header {
    width: calc(100% - 18px) !important;
    margin-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    border-radius: 22px !important;
  }

  .main-title img {
    width: clamp(126px, 44vw, 168px) !important;
  }

  .main-header .header-lhs { gap: 8px !important; }
  .main-header .header-rhs { gap: 8px !important; }

  .main-footer {
    min-height: 360px !important;
    margin-top: 42px !important;
  }

  .main-footer .footer-blob3,
  .footer-blob3 {
    width: 680px !important;
    right: -370px !important;
    bottom: -88px !important;
  }

  .footer-content {
    right: 10px !important;
    bottom: 60px !important;
    width: min(320px, 86vw) !important;
    align-items: center !important;
  }

  .main-footer .footer-title {
    font-size: 24px !important;
  }

  .main-footer .footer-nav-item {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .main-footer .footer-copy {
    font-size: 11px !important;
  }

  .legal-hero {
    padding: 30px 22px !important;
    border-radius: 28px !important;
  }

  .legal-hero h1,
  .legal-card h1 {
    font-size: clamp(36px, 13vw, 54px) !important;
  }

  .legal-card {
    padding: 24px 20px !important;
    border-radius: 24px !important;
  }
}