/* ==========
   General iT — Глобальная проверка доступности
   Версия: 2025-09-28-41
   ========== */

:root{
  --gm-bg: #ffffff;
  --gm-fg: #0f172a;
  --gm-muted: #64748b;
  --gm-soft: #94a3b8;
  --gm-border: #e2e8f0;
  --gm-border-2: #f1f5f9;
  --gm-accent: #1D7990;
  --gm-accent-2: #2aa1bd;
  --gm-good: #16a34a;
  --gm-warn: #d97706;
  --gm-bad:  #dc2626;
  --gm-shadow: 0 10px 25px rgba(2, 6, 23, .08);
}

/* Ограничение ширины секций на десктопе */
.gm-page{
  width: 100%;
}
@media (min-width: 1024px){
  .gm-page{
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

.gm-container{
  background: var(--gm-bg);
  color: var(--gm-fg);
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: var(--gm-shadow);
  overflow: hidden;
}

/* Верхний блок (единый стиль) */
.gm-header{ margin-bottom: 18px; }
.gm-title{
  font-size: 28px; line-height: 1.2; margin: 0 0 8px;
}
.gm-subttl{
  margin: 0; color: var(--gm-muted); max-width: 72ch;
}

/* Форма */
.gm-form{ margin: 18px 0 14px; }
.gm-label{ display:block; font-size:14px; color: var(--gm-muted); margin-bottom:6px; }
.gm-input-row{ display:flex; gap:10px; align-items:stretch; }
.gm-input-row input{
  flex:1;
  border:1px solid var(--gm-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  transition: box-shadow .2s, border-color .2s, background .2s;
  background:#fff; color:#0f172a;
}
.gm-input-row input:focus{
  border-color: var(--gm-accent);
  box-shadow: 0 0 0 4px rgba(29,121,144,.12);
}
.gm-btn{
  position: relative;
  border: none;
  background: var(--gm-accent);
  color: #fff;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 16px;
  cursor: pointer;
  min-width: 136px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .1s, opacity .2s;
}
.gm-btn:hover{ background: var(--gm-accent-2); }
.gm-btn:active{ transform: translateY(1px); }
.gm-btn.loading{ pointer-events:none; opacity:.9; }
.gm-btn.loading:after{
  content:"";
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  animation: gm-spin .8s linear infinite;
  position:absolute; right:12px;
}
.gm-btn .gm-btn-text{ pointer-events:none; }
@keyframes gm-spin{ to{ transform:rotate(360deg);} }

.gm-error{
  margin-top:10px;
  color: var(--gm-bad);
  font-size: 14px;
}

/* Карта */
.gm-map{
  position: relative;
  height: 480px;
  min-height: 480px;
  border:1px solid var(--gm-border);
  border-radius: 16px;
  overflow: hidden;
  background: #f4f7f9;
  margin-bottom: 16px;
}

/* Ч/б до запуска проверки (оверлей поверх карты, не ломает тайлы) */
.gm-idle .gm-map::after{
  content:"";
  position:absolute; inset:0;
  backdrop-filter: grayscale(1) saturate(0) brightness(.98);
  pointer-events:none;
  z-index: 5;
}

/* Прелоадер карты + «подсказки» (работают поверх ч/б) */
.gm-map-preloader{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  backdrop-filter: blur(2px);
  z-index: 10;
}
.gm-map-preloader.active{ display:flex; }
.gm-map-preloader .spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(29,121,144,.25);
  border-top-color: var(--gm-accent);
  animation: gm-spin 1s linear infinite;
}
.gm-map-tips{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  z-index: 11; display:none;
}
.gm-map-tips.active{ display:block; }
.gm-map-tips .tip-badge{
  background: #0b1f27; color:#e6fbff;
  border:1px solid #0e2b35;
  padding:8px 12px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(2,6,23,.25);
  font-size: 14px;
  max-width: calc(100vw - 40px);
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}

/* Подписи пинга и домена на карте (восстановлены стили) */
.gm-ping{
  background: #0b1f27; color:#e6fbff;
  font-weight: 600; font-size: 12px;
  padding: 4px 8px; border-radius: 999px;
  border:1px solid #0e2b35; box-shadow: 0 8px 24px rgba(2,6,23,.25);
  transform: translateY(-4px);
}
.gm-pop{ animation: gm-pop .18s ease-out; }
@keyframes gm-pop{ from{ transform: translateY(6px) scale(.96); opacity:0; } to{ transform: translateY(-4px) scale(1); opacity:1; } }

/* Кастомная подпись домена — над меткой */
.gm-sitepin .ttl{
  position:absolute; left:50%; transform: translateX(-50%);
  bottom: 20px; background:#082028; color:#e6fbff;
  padding:4px 8px; border-radius:8px; border:1px solid #0e2b35;
  font-size:12px; white-space: nowrap; box-shadow: 0 8px 24px rgba(2,6,23,.25);
}
.gm-fade-in{ animation: gm-fade .2s ease-out; }
@keyframes gm-fade{ from{opacity:0} to{opacity:1} }

/* Таблица результатов */
.gm-table-wrap{
  position: relative;
  border:1px solid var(--gm-border);
  border-radius: 16px;
  overflow:auto;
  background:#fff;
}
.gm-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  min-width: 880px;
  font-size: 14px;
  color:#0f172a;
}
.gm-table thead th{
  position: sticky; top:0;
  background: #fbfdff;
  border-bottom: 1px solid var(--gm-border);
  text-align:left;
  padding: 12px 12px;
  font-size: 13px;
  color: var(--gm-muted);
  white-space: nowrap;
  z-index: 2;
}
.gm-table tbody td{
  padding: 12px;
  border-bottom:1px solid var(--gm-border-2);
  vertical-align: middle;
}
.gm-table tbody tr:last-child td{ border-bottom: none; }
.gm-table small{ color: var(--gm-muted); }
.gm-nowrap{ white-space: nowrap; }

/* Статусы */
.status-ok{ color: var(--gm-good); font-weight:600; }
.status-warn{ color: var(--gm-warn); font-weight:600; }
.status-bad{ color: var(--gm-bad); font-weight:600; }

/* Пинг + гистограмма */
.gm-pingcell{
  display:flex; align-items:center; gap:10px;
  min-width: 260px;
}
.gm-pingval{
  display:inline-block; min-width: 64px;
  background:#0b1f27; color:#e6fbff;
  text-align:center; padding:4px 8px; border-radius: 999px;
  border:1px solid #0e2b35; font-weight:600; font-size:12px;
}
.gm-spark{ display:block; width:100%; height:48px; min-width:160px; background:#fff; }

/* Анимация появления строки */
.gm-row-appear{ animation: gm-row .25s ease-out; }
@keyframes gm-row{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

/* Тултипы шапки таблицы */
.gm-tooltips{
  position: sticky; top:0; left:0; right:0; pointer-events: none; z-index: 3;
}
.gm-tooltip{
  position:absolute; max-width: 320px; background:#06141a; color:#d8f6fb;
  padding:8px 10px; font-size:12px; border:1px solid #0e2b35;
  border-radius:8px; box-shadow: 0 10px 26px rgba(2,6,23,.35);
}
.gm-tooltip.tip-left{ transform-origin:left top; }
.gm-tooltip.tip-right{ transform-origin:right top; }

/* SEO-блок */
.gm-seo{
  margin-top: 22px;
  padding: 16px 14px;
  border:1px dashed var(--gm-border);
  border-radius: 14px;
  background: #f9fcfe;
}
.gm-seo h2{ margin: 0 0 10px; font-size: 22px; }
.gm-seo p{ margin: 10px 0; color: var(--gm-fg); }
.gm-seo .gm-seo-list{ margin:12px 0 0 0; padding:0 0 0 18px; }
.gm-seo .gm-seo-list li{ margin:6px 0; }

/* FAQ с анимацией раскрытия */
.gm-faq{
  margin-top: 22px;
  padding: 16px 14px;
  border:1px solid var(--gm-border);
  border-radius: 14px;
  background:#fff;
}
.gm-faq h2{ margin: 0 0 12px; font-size: 22px; }

.gm-qa{
  border-top:1px solid var(--gm-border-2);
  padding: 0;
}
.gm-qa:first-of-type{ border-top:none; }
.gm-qa .gm-q{
  list-style: none;
  cursor: pointer;
  position: relative;
  font-size: 17px;
  padding: 14px 36px 14px 6px;
  margin: 0;
  transition: color .2s ease, background .2s ease;
}
.gm-qa .gm-q::marker{ display:none; content:""; }
.gm-qa .gm-q:focus{ outline: none; }
.gm-qa .gm-q::after{
  content:"";
  position:absolute; right:8px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--gm-muted);
  border-bottom:2px solid var(--gm-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .22s ease, border-color .22s ease;
}
.gm-qa[open] .gm-q{
  color: var(--gm-accent);
  background: #f7fcff;
}
.gm-qa[open] .gm-q::after{
  transform: translateY(-50%) rotate(-135deg);
  border-color: var(--gm-accent);
}
.gm-qa .gm-a{
  overflow: hidden;
  padding: 0 6px 10px 6px;
  color: var(--gm-fg);
  animation: gm-ans .22s ease;
}
@keyframes gm-ans{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Мобильные */
@media (max-width: 1024px){
  .gm-map{ height: 400px; min-height:400px; }
}
@media (max-width: 768px){
  .gm-title{ font-size: 22px; }
  .gm-map{ height: 340px; min-height:340px; }
  .gm-input-row{ flex-direction: column; }
  .gm-btn{ height: 44px; }
  .gm-pingcell{ flex-direction: column; align-items:flex-start; gap:6px; }
  .gm-spark{ height: 52px; }
}