/* Approved showroom concept. All rules remain local to the standalone landing page. */
html:has(.md-standalone-page),
html:has(.md-standalone-page) body.md-standalone-page {
  min-height: 100%;
  background: transparent !important;
}

body.md-standalone-page {
  position: relative !important;
  isolation: isolate !important;
  margin: 0;
}

.md-showroom-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-image: url("showroom-background.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.md-page,
.md-followup {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.md-page { isolation: isolate; }
.md-page .md-hero { background: transparent !important; }
.md-page .md-hero::before { display: none !important; }
.md-page .md-canvas,
.md-page.md-intro-booting .md-canvas,
.md-page.md-intro-running .md-canvas,
body.md-map-intro-active { background: transparent !important; }
.md-page .md-canvas::before,
.md-page .md-canvas::after { display: none !important; }
.md-page .md-map-surface { z-index: 1; background: transparent !important; }
.md-page .md-map-stage { filter: none !important; }
.md-page .md-map-stage .md-map-extrusion { display: none !important; }
.md-page .md-map-stage .iranmap { filter: none !important; }
.md-page .iranmap .province { fill-opacity: .58 !important; }

.md-page.md-intro-booting .md-site-nav,
.md-page.md-intro-booting .md-hero,
.md-page.md-intro-booting .md-map-heading,
.md-page.md-intro-booting .md-map-prompt,
.md-page.md-intro-booting .md-control-rail,
.md-page.md-intro-booting .md-map-scroll-cue,
.md-page.md-intro-booting .md-compact-services,
.md-page.md-intro-booting ~ .md-followup {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.md-page.md-intro-running .md-site-nav,
.md-page.md-intro-running .md-map-heading,
.md-page.md-intro-running .md-map-prompt,
.md-page.md-intro-running .md-map-scroll-cue,
.md-page.md-intro-running .md-compact-services,
.md-page.md-intro-running ~ .md-followup {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.md-page.md-intro-running .md-hero {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.md-page.md-intro-running.md-map-animation-done .md-hero {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .6s ease, visibility .6s ease;
}

.md-page.md-intro-running .md-control-rail {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.md-page.md-intro-running .md-control-rail > .md-entry-tiles {
  opacity: 1 !important;
  visibility: visible !important;
}

.md-page.md-intro-running .md-control-rail > :not(.md-entry-tiles) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.md-page.md-intro-running .md-entry-tiles > .md-perimeter-tile {
  opacity: 0;
  visibility: hidden;
  animation: md-showroom-tile-reveal 5s cubic-bezier(.2, .75, .25, 1) both !important;
  will-change: opacity;
}

.md-page.md-intro-done .md-site-nav,
.md-page.md-intro-done .md-hero,
.md-page.md-intro-done .md-map-heading,
.md-page.md-intro-done .md-map-prompt,
.md-page.md-intro-done .md-control-rail,
.md-page.md-intro-done .md-map-scroll-cue,
.md-page.md-intro-done .md-compact-services,
.md-page.md-intro-done ~ .md-followup {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .6s ease, visibility .6s ease;
}

.md-page .md-canvas-skip { display: none !important; }

@keyframes md-showroom-tile-reveal {
  0% { opacity: 0; visibility: hidden; }
  1% { visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

@media (min-width: 1250px) {
  .md-landing.md-page .md-canvas {
    height: clamp(600px, calc(min(76svh, 100vw, 850px) * 1.111 + 65px), 820px) !important;
    min-height: 600px !important;
  }

  .md-page .md-map-stage {
    top: calc(-23px + 1cm) !important;
    width: min(70vw, 850px) !important;
    height: min(76svh, 740px) !important;
  }

  .md-page .md-map-stage .iranmap {
    width: auto !important;
    height: min(76svh, 740px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .md-page .md-map-prompt {
    top: clamp(64px, 8svh, 86px) !important;
    left: 50% !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(220px, calc(100% - 40px)) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 9px !important;
    font-size: clamp(9px, .68vw, 10px) !important;
    line-height: 1.25 !important;
  }
}

.md-page .md-map-heading {
  color: #fff !important;
  background: rgba(17, 39, 31, .7) !important;
  border: 1px solid rgba(240, 218, 168, .5);
  border-radius: 12px;
  padding: 8px 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(7, 20, 15, .18);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

@media (min-width: 701px) and (max-width: 1249px) {
  .md-page .md-map-prompt { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .md-page.md-intro-running .md-entry-tiles > .md-perimeter-tile {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: auto !important;
  }
}