/* Mevolution v0.5.118 — fixed envelope-style backdrop for the public card maker.
   Uses the same approved artwork as the Card Tracker, but deliberately quieter
   so the builder, preview and conversion CTA remain the visual priority. */

html.mv-card-maker-envelope-page,
html.mv-hero-theme-v1.mv-card-maker-envelope-page {
  min-height: 100%;
  background: #02091d !important;
}

html.mv-hero-theme-v1 body.mv-card-maker-envelope-bg,
body.mv-card-maker-envelope-bg {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* v0.5.118: legacy Hero Theme may paint a full-page navy veil with
   html/body pseudo-elements. The dedicated fixed artwork replaces it on /maken. */
html.mv-card-maker-envelope-page::before,
html.mv-card-maker-envelope-page::after,
body.mv-card-maker-envelope-bg::before,
body.mv-card-maker-envelope-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #02091d;
  background-image:
    linear-gradient(90deg,
      rgba(2, 9, 29, .16) 0%,
      rgba(2, 9, 29, .34) 22%,
      rgba(2, 9, 29, .82) 39%,
      rgba(2, 9, 29, .91) 50%,
      rgba(2, 9, 29, .82) 61%,
      rgba(2, 9, 29, .34) 78%,
      rgba(2, 9, 29, .16) 100%),
    linear-gradient(180deg, rgba(1, 6, 22, .14), rgba(1, 6, 22, .38)),
    url('/static/assets/card_registry/card_tracker_envelope_landscape_v1.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: saturate(.86) brightness(.82);
  transform: translateZ(0);
}

/* A very soft centre veil prevents decorative highlights from fighting the form. */
body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(4, 13, 39, .35) 0%, rgba(4, 13, 39, .18) 30%, transparent 58%),
    linear-gradient(180deg, rgba(0, 5, 20, .04), rgba(0, 5, 20, .18));
}

/* Keep the existing maker UI above the fixed art.  v0.5.117 intentionally
   clears only the large OUTER builder shell; individual form/preview panels
   retain their existing Mevolution surfaces for readability. */
body.mv-card-maker-envelope-bg > *:not(.mv-maker-fixed-backdrop) {
  position: relative;
  z-index: 1;
}

/* Common semantic outer shells. :has() keeps this scoped to the actual /maken form. */
body.mv-card-maker-envelope-bg main:has(input[name="cart_json"]),
body.mv-card-maker-envelope-bg main:has(form[action*="/maken"]),
body.mv-card-maker-envelope-bg > .container:has(input[name="cart_json"]),
body.mv-card-maker-envelope-bg > .wrapper:has(input[name="cart_json"]),
body.mv-card-maker-envelope-bg > .page:has(input[name="cart_json"]),
body.mv-card-maker-envelope-bg > .content:has(input[name="cart_json"]),
body.mv-card-maker-envelope-bg .mv-maker-transparent-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Do not let a pseudo-element on the old outer shell recreate the blue slab. */
body.mv-card-maker-envelope-bg .mv-maker-transparent-shell::before,
body.mv-card-maker-envelope-bg .mv-maker-transparent-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (min-width: 1180px) {
  body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop {
    /* The side artwork may remain visible on large screens; the centre stays subdued. */
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 900px) {
  body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop {
    background-image:
      linear-gradient(90deg, rgba(2, 9, 29, .54), rgba(2, 9, 29, .78) 35%, rgba(2, 9, 29, .78) 65%, rgba(2, 9, 29, .54)),
      linear-gradient(180deg, rgba(1, 6, 22, .22), rgba(1, 6, 22, .48)),
      url('/static/assets/card_registry/card_tracker_envelope_landscape_v1.png');
    filter: saturate(.78) brightness(.72);
  }
}

@media (max-width: 640px) {
  body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop {
    /* On phones the artwork is intentionally atmospheric rather than dominant. */
    background-image:
      linear-gradient(rgba(2, 8, 27, .70), rgba(2, 8, 27, .79)),
      url('/static/assets/card_registry/card_tracker_envelope_landscape_v1.png');
    background-position: center top;
    background-size: auto 100%;
    filter: saturate(.72) brightness(.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mv-card-maker-envelope-bg .mv-maker-fixed-backdrop { transform: none; }
}

/* v0.5.119 — keep the card-maker sticky product-total bar above the site footer.
   The fixed artwork remains at z=0; normal maker content stays at z=1.  The
   footer is deliberately lowered inside that page stack, while the actual
   sticky total/checkout surface and its host are promoted. */
body.mv-card-maker-envelope-bg .mv-maker-footer-layer {
  position: relative !important;
  z-index: 0 !important;
}

body.mv-card-maker-envelope-bg .mv-maker-footer-host {
  position: relative !important;
  z-index: 0 !important;
}

body.mv-card-maker-envelope-bg .mv-maker-sticky-host {
  position: relative !important;
  z-index: 4 !important;
}

body.mv-card-maker-envelope-bg .mv-maker-sticky-total-bar {
  z-index: 120 !important;
  isolation: isolate;
}

/* Semantic fallback for installations where the runtime marker has not yet
   fired.  Scoping this to /maken prevents any change to the rest of Mevolution. */
body.mv-card-maker-envelope-bg footer,
body.mv-card-maker-envelope-bg [role="contentinfo"] {
  position: relative !important;
  z-index: 0 !important;
}