/* ================================
   GLASS MODALS — premium thin glass
   Targets your existing classes:
   .gmodal, .gmodal__backdrop, .gmodal__dialog, etc.
================================ */

/* 0) Optional: tune these once */
:root {
  --gmodal-ink: #0b1b1a;
  --gmodal-ink-2: rgba(11, 27, 26, 0.82);
  --gmodal-ink-3: rgba(11, 27, 26, 0.62);

  --gmodal-border: rgba(27, 92, 89, 0.18);
  --gmodal-border-soft: rgba(27, 92, 89, 0.12);

  --gmodal-glass: rgba(255, 255, 255, 0.62);
  --gmodal-glass-strong: rgba(255, 255, 255, 0.72);

  --gmodal-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);

  --gmodal-blur: 10px; /* main dialog blur */
  --gmodal-blur-bg: 6px; /* backdrop blur */
}

/* 1) Backdrop (фон под модалкой) — меньше "бирюзового мыла" */
.gmodal__backdrop {
  background: linear-gradient(
    to bottom,
    rgba(27, 92, 89, 0.12),
    rgba(27, 92, 89, 0.05)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 2) Dialog — тонкое стекло, чёткая граница, аккуратная тень */
.gmodal__dialog {
  background: var(--gmodal-glass);
  border: 1px solid var(--gmodal-border);
  box-shadow: var(--gmodal-shadow);
  backdrop-filter: blur(var(--gmodal-blur)) saturate(1.06);
  -webkit-backdrop-filter: blur(var(--gmodal-blur)) saturate(1.06);

  /* чтобы стекло не выглядело "пластиком" */
  position: relative;
  overflow: hidden;
}

/* subtle inner highlight line */
.gmodal__dialog::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  opacity: 0.9;
}

/* 3) Header — делает модалку "готовым компонентом" */
.gmodal__head {
  padding-bottom: 12px;
  /* margin-bottom: 14px;*/
  border-bottom: 1px solid var(--gmodal-border-soft);
}

/* kicker / title / sub — контрастнее, чтобы не было ощущения черновика */
.gmodal__kicker {
  color: rgba(15, 47, 45, 0.65);
  letter-spacing: 0.14em;
  font-weight: 600;
}

.gmodal__title {
  color: var(--gmodal-ink);
}

.gmodal__sub {
  color: var(--gmodal-ink-3);
}

/* 4) Body text inside cards */
.gmodal__p,
.gmodal__note,
.gmodal__label,
.gmodal__list,
.gmodal__contacts {
  color: var(--gmodal-ink-2);
}

/* 5) Cards inside modal — слегка плотнее, чем фон модалки */
.gmodal__card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--gmodal-ink-3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px) saturate(1.04);
  -webkit-backdrop-filter: blur(6px) saturate(1.04);
}

/* headings inside cards */
.gmodal__h {
  color: var(--gmodal-ink);
}

/* lists */
.gmodal__list li {
  color: var(--gmodal-ink-2);
}

/* 6) Close button — сделать более "стеклянной" и аккуратной */
.gmodal__x {
  /* background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(27, 92, 89, 0.14);*/
  color: rgba(11, 27, 26, 0.75);
  font-size: 2rem;
  font-weight: lighter;
  /* backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);*/
}

.gmodal__x:hover {
  color: var(--amber-cta);
}

/* 7) Inputs — чтобы не выглядели "плоскими" на стекле */
.gmodal__input,
.gmodal__textarea {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 92, 89, 0.5);
  color: var(--gmodal-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.gmodal__input:focus,
.gmodal__textarea:focus {
  outline: none;
  border-color: rgba(27, 92, 89, 0.32);
  box-shadow: 0 0 0 3px rgba(27, 92, 89, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* placeholders */
.gmodal__input::placeholder,
.gmodal__textarea::placeholder {
  color: rgba(11, 27, 26, 0.38);
}

.gmodal__btn {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(27, 92, 89, 0.18);
  color: rgba(11, 27, 26, 0.88);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.gmodal__btn:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(27, 92, 89, 0.26);
  transform: translateY(-1px);
}

.gmodal__btn:active {
  transform: translateY(0);
}

/* ghost button — более "ссылка-кнопка" */
.gmodal__btn--ghost {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(27, 92, 89, 0.14);
  box-shadow: none;
}

.gmodal__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(27, 92, 89, 0.22);
}

/* primary inside modal (у тебя: .btn-primary + .gmodal__btn--primary) */
.gmodal__btn--primary {
  /* если твой .btn-primary уже хороший — можно не трогать.
       но чтобы он "садился" в стекло, добавим лёгкий ободок */
  border: 1px solid rgba(15, 47, 45, 0.18);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);

  /* янтарь под стеклом */
  background: radial-gradient(
      120% 140% at 30% 20%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(180deg, #f9e6a6 0%, #ebca6a 55%, #d9b752 100%);
  /* текст — якорный, не белый */
  color: rgba(11, 43, 45, 0.92);
  padding: 12px;
}
.gmodal__btn--primary:hover {
  background: var(--amber-cta);
}

/* 9) Links inside contacts */
.gmodal__contacts a {
  color: rgba(11, 27, 26, 0.86);
  text-decoration-color: rgba(27, 92, 89, 0.35);
}

.gmodal__contacts a:hover {
  text-decoration-color: rgba(27, 92, 89, 0.6);
}

/* 10) Reduce "slippery" feeling on very large screens */
@media (min-width: 1100px) {
  .gmodal__dialog {
    backdrop-filter: blur(9px) saturate(1.05);
    -webkit-backdrop-filter: blur(9px) saturate(1.05);
  }
}

/* ================================
   FIX: scroll for long modals
   Keep header sticky, scroll body
================================ */

/* чтобы диалог не вылезал за экран */
.gmodal__dialog {
  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* важно: скролл будет в body */
}

/* хедер не скроллится */
.gmodal__head {
  flex: 0 0 auto;
}

/* скроллится только контент */
.gmodal__body {
  flex: 1 1 auto;
  overflow: auto;

  /* приятный скролл на iOS */
  -webkit-overflow-scrolling: touch;

  /* чтобы скролл не "протягивал" фон страницы */
  overscroll-behavior: contain;
}

/* если внутри body у тебя ещё есть большие отступы - можно чуть ужать на мобилке */
@media (max-width: 520px) {
  .gmodal__dialog {
    max-height: 90vh;
  }
}

/* --- Audit details accordion --- */

.gmodal__details {
  margin: 0 0 14px;
  border-radius: 18px;
}

/* убираем стандартный маркер */
.gmodal__details > summary {
  list-style: none;
}
.gmodal__details > summary::-webkit-details-marker {
  display: none;
}

.gmodal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  border-radius: 18px;

  cursor: pointer;
  user-select: none;

  border: 1px solid var(--gmodal-ink-3);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px) saturate(1.06);
}

.gmodal__summaryTitle {
  font-weight: 700;
}

.gmodal__summaryHint {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  position: relative;
  padding-right: 18px;
}

/* стрелочка справа */
.gmodal__summaryHint::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0.8;
  transition: transform 0.18s ease;
}

/* в открытом состоянии стрелка вверх */
.gmodal__details[open] .gmodal__summaryHint::after {
  transform: translateY(-30%) rotate(-135deg);
}

.gmodal__summary:hover {
  border-color: rgba(27, 92, 89, 0.2);
}

/* чтобы внутренний card не “дублировал” слишком много рамок */
.gmodal__card--inDetails {
  margin-top: 10px;
}

.gmodal__success {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(46, 160, 67, 0.25);
  background: rgba(46, 160, 67, 0.08);
  backdrop-filter: blur(8px);
}

.gmodal__success::before {
  content: "✓ ";
  font-weight: 800;
}