/* =================== contact-map-shell.css =================== */
/* contact-map-shell - container for the map on /contacts. When the Yandex
 * iframe hasn't loaded (or as a permanent backdrop), show a branded
 * topographic placeholder so the area never reads as "empty gray box".
 * Strictly .contact-map-shell. */

.contact-map-shell {
  position: relative;
  width: 100%;
  min-height: 360px;
  margin-top: clamp(16px, 2vw, 28px);
  background:
    /* Marker pin (CSS-painted) */
    radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.92) 0, rgba(201, 67, 58, 0.92) 9px, transparent 10px),
    radial-gradient(circle at 50% 38%, rgba(201, 67, 58, 0.18) 0, rgba(201, 67, 58, 0.18) 22px, transparent 23px),
    /* Faux topographic contour lines */
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0,
      transparent 38px,
      rgba(122, 101, 72, 0.10) 39px,
      transparent 40px
    ),
    /* Faux road network grid */
    linear-gradient(35deg, transparent 49%, rgba(122, 101, 72, 0.14) 49.5%, rgba(122, 101, 72, 0.14) 50.5%, transparent 51%),
    linear-gradient(125deg, transparent 49%, rgba(122, 101, 72, 0.10) 49.5%, rgba(122, 101, 72, 0.10) 50.5%, transparent 51%),
    /* Base */
    radial-gradient(circle at 20% 30%, rgba(255, 252, 247, 0.7), transparent 50%),
    linear-gradient(160deg, #f7f3ea 0%, #efe8da 60%, #e3d9c4 100%);
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 22px 50px -28px rgba(40, 30, 15, 0.22);
}
.contact-map-shell::before {
  content: "Долгопрудный, Лихачёвский пр-д, 33с1";
  position: absolute;
  left: 50%;
  top: calc(38% + 32px);
  transform: translateX(-50%);
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(28, 24, 20, 0.96), rgba(17, 14, 12, 0.99));
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(40, 30, 15, 0.4);
  pointer-events: none;
  z-index: 1;
}
.contact-map-shell::after {
  content: "Самовывоз и склад · Пн–Сб 09:00–19:00";
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(255, 252, 247, 0.94);
  border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
  color: var(--hc-accent-dark, #5d4d3a);
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}
/* If iframe or div with real map renders inside, it covers the placeholder */
.contact-map-shell iframe,
.contact-map-shell [class*="map"]:not(.contact-map-shell) {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  border-radius: inherit;
}

/* When real map is present, turn placeholder labels off so they never
 * overlap with live map controls / tiles. */
.contact-map-shell:has(iframe)::before,
.contact-map-shell:has(iframe)::after {
  opacity: 0;
}