/*
  WP iframe layout only.
  Visual design stays in embed/compatibility.html.
*/

.dm-compatibility {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: var(--compat-text, #f7f0ec);
  font-family: "Outfit", system-ui, sans-serif;
  color-scheme: normal;
}

html,
body.dm-compatibility {
  background: transparent !important;
  background-color: transparent !important;
}

.dm-compatibility.compatibility-plugin,
.dm-compatibility .dm-compatibility__inner,
.dm-compatibility #root {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  background: transparent !important;
  height: auto;
  min-height: 0;
}

.dm-compatibility .fixed.inset-0.-z-10,
.dm-compatibility [class*="bg-[#010103]"] {
  display: none !important;
}

.dm-compatibility canvas {
  display: none !important;
}

.dm-compatibility .min-h-screen,
.dm-compatibility [class*="min-h-screen"] {
  min-height: 0 !important;
  height: auto !important;
}

.dm-compatibility #compat-brand,
.dm-compatibility .dm-compatibility__hero,
.dm-compatibility .dm-compatibility__hero-host,
.dm-compatibility .dm-compatibility__pre-results {
  display: none !important;
}

.dm-compatibility form {
  width: min(720px, 100%) !important;
  max-width: min(720px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dm-compatibility #compat-inline-results,
.dm-compatibility #compatibility-mandala-visual {
  width: 100%;
  max-width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
  height: auto;
  min-height: 0;
}

.dm-compatibility [role="tabpanel"][data-state="inactive"],
.dm-compatibility [role="tabpanel"][hidden] {
  display: none !important;
  height: 0 !important;
}

@media (max-width: 767px) {
  .dm-compatibility main {
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dm-compatibility form {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .dm-compatibility #compat-inline-results {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .dm-compatibility #compatibility-mandala-visual {
    max-width: 100%;
    transform: none !important;
  }
}