/*
  ╔══════════════════════════════════════════════════════╗
  ║          LIQUID GLASS — Tilda Custom CSS  v4         ║
  ║  Параметры: Light 51° · Opacity 16% · Frost 7       ║
  ║             Depth 50  · Dispersion 76 · Refract 52  ║
  ╚══════════════════════════════════════════════════════╝

  Как подключить:
  Сайт → Настройки → CSS → вставить этот код
  На элементе → CSS-класс → вписать  glass

  Модификаторы:
  · glass--dark         — темнее
  · glass--light        — светлее
  · glass--interactive  — hover-анимация
*/

/*
  ВАЖНО: Tilda ставит border-radius на .tn-atom (дочерний элемент),
  а не на сам шейп. Поэтому все стили применяем к .glass .tn-atom —
  тогда overflow: hidden обрезает blur точно по скруглению Tilda.
*/

.glass .tn-atom {
  overflow: hidden;

  backdrop-filter:
    blur(7px)
    brightness(1.06)
    saturate(1.4)
    contrast(1.02);
  -webkit-backdrop-filter:
    blur(7px)
    brightness(1.06)
    saturate(1.4)
    contrast(1.02);

  background: rgba(255, 255, 255, 0.16) !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0  1px 0    rgba(255, 255, 255, 0.55),
    inset 1px  0 0    rgba(255, 255, 255, 0.18),
    inset -1px 0 0    rgba(255, 255, 255, 0.08),
    inset 0 -1px 0    rgba(255, 255, 255, 0.06),
    inset 0  0  50px  rgba(0, 0, 0, 0.22),
    inset 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ── Тёмная версия ─────────────────────────────────── */
.glass--dark .tn-atom {
  background: rgba(0, 0, 0, 0.20) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.30),
    inset 0  1px 0    rgba(255, 255, 255, 0.35),
    inset 0  0  60px  rgba(0, 0, 0, 0.35),
    inset 0 24px 50px rgba(0, 0, 0, 0.20) !important;
}

/* ── Светлая версия ────────────────────────────────── */
.glass--light .tn-atom {
  background: rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0  1px 0   rgba(255, 255, 255, 0.80),
    inset 0  0  30px rgba(0, 0, 0, 0.06) !important;
}

/* ── Hover (опционально) ───────────────────────────── */
.glass--interactive .tn-atom {
  transition:
    box-shadow      0.35s ease,
    background      0.35s ease,
    backdrop-filter 0.35s ease;
  cursor: pointer;
}

.glass--interactive:hover .tn-atom {
  backdrop-filter:
    blur(10px)
    brightness(1.10)
    saturate(1.5)
    contrast(1.03);
  -webkit-backdrop-filter:
    blur(10px)
    brightness(1.10)
    saturate(1.5)
    contrast(1.03);
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.30),
    0 12px 48px rgba(0, 0, 0, 0.18),
    inset 0  1px 0    rgba(255, 255, 255, 0.65),
    inset 0  0  50px  rgba(0, 0, 0, 0.18),
    inset 0 20px 40px rgba(0, 0, 0, 0.10) !important;
}


.no-top-radius .tn-atom {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.map-frame-radius {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
}

.map-frame-radius iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .map-frame-radius {
    border-radius: 20px;
  }
}

/* @media (max-width: 767px) {
/* .tn-elem.green-chem-text .tn-atom {
/*   color: #f6d3c3 !important;
/* }
/* }