/* ============================================================================
   gp-popup.css — всплывающая форма помощи geekprom.ru
   Путь на сервере: /wa-data/public/site/gp-popup.css

   Показывается через минуту активного времени на сайте: если человек столько
   ищет и не нашёл — предлагаем подобрать за него.

   Два режима подачи (класс на корне #gpPopup):
     .gpp--modal   — модальное окно по центру с затемнением (заметнее)
     .gpp--corner  — карточка в правом нижнем углу, страница не блокируется

   Всё, что рисует эта форма, живёт в классах gpp-* и в fixed-слое вне .page,
   поэтому селекторы темы (.page ul li:before и т. п.) её не задевают.
   ============================================================================ */

/* Базовый слой пишем на классе .gpp, а не на #gpPopup: id (1,0,0) перебил бы
   собственные классы компонентов (0,1,0) — кнопка осталась бы без фона, а
   заголовок чёрным. Там, где нужно перекрыть стили темы или gp-forms.js,
   селектор с id используется намеренно (см. поля формы и .gpf-agree ниже). */
.gpp{
  --p-blue:#4e7df1; --p-blue-d:#3a63c9; --p-blue-l:#eaf0ff;
  --p-navy:#232b46; --p-navy-2:#2b3556;
  --p-accent:#ff6635;
  --p-green:#43c16d; --p-green-l:#e7f7ee;
  --p-ink:#232b46; --p-text:#3d4560; --p-muted:#767b8b;
  --p-line:#e5e9f2; --p-soft:#f3f5fb;
  --p-r:16px; --p-r-ctl:12px;
  --p-font:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  position:fixed; inset:0; z-index:100000;
  font-family:var(--p-font); color:var(--p-ink); line-height:1.55; font-size:15px;
}
.gpp[hidden]{display:none}
.gpp *,.gpp *::before,.gpp *::after{box-sizing:border-box}
.gpp :where(p){margin:0}
.gpp :where(h3){margin:0;font-weight:700;line-height:1.25;color:var(--p-ink)}
.gpp :where(ul,li){margin:0;padding:0;list-style:none}
.gpp :where(li)::before{content:none}
.gpp :where(i){display:inline;min-width:0;font-style:normal}
.gpp :where(button){font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  -webkit-appearance:none;appearance:none}
.gpp :where(a){color:var(--p-blue);text-decoration:none}
.gpp :where(a:hover){color:var(--p-blue-d)}
.gpp :where(svg){fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ подложка */
.gpp__ov{position:absolute;inset:0;background:rgba(24,30,50,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s ease}
.gpp--corner .gpp__ov{display:none}
.gpp.is-open .gpp__ov{opacity:1}

/* Уголковый режим не должен мешать читать страницу: слой прозрачен для мыши,
   кликабельна только сама карточка. */
.gpp--corner{pointer-events:none}
.gpp--corner .gpp__win{pointer-events:auto}

/* -------------------------------------------------------------------- окно */
.gpp__win{position:absolute;background:#fff;border-radius:var(--p-r);
  box-shadow:0 1px 2px rgba(35,43,70,.06), 0 30px 60px -20px rgba(35,43,70,.45);
  overflow:hidden;max-height:calc(100vh - 32px);overflow-y:auto;
  -webkit-overflow-scrolling:touch}

.gpp--modal .gpp__win{left:50%;top:50%;width:min(480px,calc(100vw - 32px));
  transform:translate(-50%,-46%) scale(.97);opacity:0;
  transition:opacity .28s ease-out, transform .28s cubic-bezier(.2,.8,.3,1)}
.gpp--modal.is-open .gpp__win{opacity:1;transform:translate(-50%,-50%) scale(1)}

.gpp--corner .gpp__win{right:20px;bottom:20px;width:min(370px,calc(100vw - 32px));
  transform:translateY(18px);opacity:0;
  transition:opacity .28s ease-out, transform .28s cubic-bezier(.2,.8,.3,1)}
.gpp--corner.is-open .gpp__win{opacity:1;transform:translateY(0)}

/* Уход мягче прихода: короче и без масштабирования — закрытие не должно
   привлекать к себе внимание. */
.gpp:not(.is-open) .gpp__win{transition-duration:.16s}

/* Тело догоняет окно: сначала появляется карточка, через 90 мс — содержимое.
   Показ редкий (раз в неделю на посетителя), поэтому ступенька уместна.
   Только прозрачность: сдвиг по Y растил высоту содержимого и на кадр
   зажигал полосу прокрутки внутри окна. */
.gpp__body,.gpp__ok{opacity:0;transition:opacity .24s ease-out .09s}
.gpp.is-open .gpp__body,.gpp.is-open .gpp__ok{opacity:1}
/* при закрытии ступенька не нужна: содержимое уходит вместе с окном */
.gpp:not(.is-open) .gpp__body,.gpp:not(.is-open) .gpp__ok{transition-delay:0s;transition-duration:.12s}

/* Крестик живёт на тёмной шапке — светлая подложка выглядела бы наклейкой.
   На экране «отправлено» шапки нет, там он серый на светлом. */
.gpp__x{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.12);
  transition:background .15s, color .15s, scale .12s ease-out;z-index:2}
/* холст крестика 16×16 рисуется один к одному — штрих ровно 1,5 px */
.gpp__x svg{width:16px;height:16px;stroke-width:1.5}
.gpp__x:hover{background:rgba(255,255,255,.22);color:#fff}
.gpp__x:active{scale:.96}
.gpp__x:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px}
.gpp.is-done .gpp__x{color:#8b91a5;background:var(--p-soft)}
.gpp.is-done .gpp__x:hover{background:#e9edf7;color:var(--p-ink)}
.gpp.is-done .gpp__x:focus-visible{outline-color:var(--p-blue)}

/* ------------------------------------------------------------------- шапка */
.gpp__head{background:linear-gradient(135deg,var(--p-navy) 0%,var(--p-navy-2) 100%);
  color:#fff;padding:22px 24px 20px;position:relative;overflow:hidden}
.gpp__head::after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(78,125,241,.5),transparent 62%);
  pointer-events:none}
.gpp__head > *{position:relative;z-index:1}
.gpp__chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  letter-spacing:.02em;padding:5px 11px 5px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#e4eaff}
/* Тонкий штрих под вес 500 и мелкий кегль; у звёздочки заливка, а не контур —
   контурная искра на 13 px читается как мусор. */
.gpp__chip svg{width:13px;height:13px;stroke-width:1.75;fill:currentColor;opacity:.9}
.gpp__title{margin-top:12px;font-size:21px;color:#fff;text-wrap:balance}
.gpp__sub{margin-top:7px;font-size:14px;color:#c8d0e8;text-wrap:pretty}
.gpp--corner .gpp__head{padding:18px 20px 16px}
.gpp--corner .gpp__title{font-size:18px;margin-top:10px}
.gpp--corner .gpp__sub{font-size:13px}

/* -------------------------------------------------------------------- тело */
.gpp__body{padding:20px 24px 22px}
.gpp--corner .gpp__body{padding:16px 20px 18px}

/* Столбцом, а не «пилюлями»: пункты разной длины при переносе давали рваный
   правый край и лишнюю строку. Ровная колонка читается быстрее. */
.gpp__pts{display:grid;gap:7px;margin-bottom:16px}
.gpp__pts li{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;
  gap:8px;font-size:13px;line-height:1.4;color:var(--p-text)}
.gpp__pts svg{width:16px;height:16px;color:var(--p-green);stroke-width:2;flex:none;
  margin-top:1px}   /* оптическая посадка галки на первую строку текста */
.gpp--corner .gpp__pts{display:none}

.gpp__form{display:grid;gap:10px}
.gpp__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gpp--corner .gpp__row{grid-template-columns:1fr}

#gpPopup .gpp__form input,
#gpPopup .gpp__form textarea{width:100%;font:inherit;color:var(--p-ink);background:#fff;
  border:1px solid var(--p-line);border-radius:var(--p-r-ctl);padding:11px 13px;
  transition:border-color .15s, box-shadow .15s;-webkit-appearance:none;appearance:none}
#gpPopup .gpp__form textarea{min-height:74px;resize:vertical;line-height:1.5}
.gpp--corner .gpp__form textarea{min-height:58px}
/* Плейсхолдер держим на контрасте 3:1 — #a2a8ba давал 2,7 и на ноутбучных
   матрицах читался как выключенное поле. */
#gpPopup .gpp__form input::placeholder,
#gpPopup .gpp__form textarea::placeholder{color:#8d94a8;opacity:1}
#gpPopup .gpp__form input:focus,
#gpPopup .gpp__form textarea:focus{outline:0;border-color:var(--p-blue);
  box-shadow:0 0 0 4px rgba(78,125,241,.16)}
#gpPopup .gpp__form .gpf-err{border-color:#e35d5d;box-shadow:0 0 0 4px rgba(227,93,93,.14)}

/* Согласие 152-ФЗ. Разметка совпадает с остальными формами сайта (.gpf-agree),
   поэтому gp-forms.js видит галку как свою и блокирует кнопку до отметки. */
/* Текст согласия юридически значим — держим его на контрасте 4,5+, а не
   в «служебном» сером (--p-muted давал 4,2 на 12,5 px). */
#gpPopup .gpf-agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
  line-height:1.45;color:#61687b;cursor:pointer;margin:2px 0}

/* Своя галка вместо системной: круг с синей точкой внутри. Размеры и отступы
   gp-forms.js задаёт через !important, поэтому перебиваем тем же способом. */
#gpPopup .gpf-agree input{flex:none;-webkit-appearance:none;appearance:none;
  width:20px!important;height:20px!important;margin:0!important;padding:0!important;
  position:relative;border:1.5px solid #c6cddf;border-radius:50%;background:#fff;
  cursor:pointer;transition:border-color .15s, background .15s, box-shadow .15s}
#gpPopup .gpf-agree:hover input{border-color:var(--p-blue)}
#gpPopup .gpf-agree input:active{box-shadow:0 0 0 5px rgba(78,125,241,.14)}
#gpPopup .gpf-agree input:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(78,125,241,.2)}
#gpPopup .gpf-agree input:checked{border-color:var(--p-blue);background:var(--p-blue-l)}
#gpPopup .gpf-agree input:checked::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:10px;border-radius:50%;background:var(--p-blue);
  transform:translate(-50%,-50%) scale(1);animation:gpp-dot .18s ease-out}
@keyframes gpp-dot{from{transform:translate(-50%,-50%) scale(.4);opacity:.4}}
/* отмеченная галка — сигнал, что кнопка разблокирована: текст перестаёт быть блёклым */
#gpPopup .gpf-agree:has(input:checked){color:var(--p-text)}
#gpPopup .gpf-agree a{text-decoration:underline;text-underline-offset:2px}
#gpPopup .gpf-agree.gpf-need{animation:gpp-shake .32s}
@keyframes gpp-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#gpPopup .gpf-msg{margin:0;font-size:13px;color:#c8402f;background:#fdeeec;
  border-radius:10px;padding:9px 12px}
/* подсказка про раскладку — не ошибка, поэтому не красная */
#gpPopup .gpf-msg--hint{color:#8a6100;background:#fff6e3}

.gpp__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 18px;border-radius:var(--p-r-ctl);font-size:15px;font-weight:500;color:#fff;
  background:var(--p-blue);box-shadow:0 1px 2px rgba(35,43,70,.08), 0 10px 20px -12px rgba(58,99,201,.85);
  transition:background .15s, box-shadow .15s, color .15s, scale .12s ease-out}
.gpp__btn:hover{background:var(--p-blue-d);box-shadow:0 1px 2px rgba(35,43,70,.08), 0 12px 22px -12px rgba(58,99,201,.95)}
.gpp__btn:active{scale:.96}
.gpp__btn:focus-visible{outline:2px solid var(--p-navy);outline-offset:2px}
/* Заблокирована — не «выцветшая»: полупрозрачность съедала контраст подписи.
   Явная пара цветов оставляет её читаемой и явно неактивной. */
.gpp__btn[disabled]{background:#e3eafe;color:#5c70a4;box-shadow:none;cursor:not-allowed}
.gpp__btn[disabled]:active{scale:1}
.gpp__btn svg{width:16px;height:16px;stroke-width:2;
  transform:translateY(-.5px)}   /* бумажный самолётик тяжелее сверху — сажаем на строку */

/* Запасной путь для тех, кому проще позвонить или посмотреть каталог: три
   небольшие кнопки — заметны, но не спорят с основной. */
.gpp__alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--p-line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gpp__alt a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  color:var(--p-text);background:var(--p-soft);border:1px solid var(--p-line);
  border-radius:10px;padding:7px 11px;white-space:nowrap;flex:none;
  transition:border-color .15s, background .15s, color .15s, scale .12s ease-out}
.gpp__alt a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gpp__alt a:active{scale:.96}

/* Три кнопки держим в одну строку. Длинные адреса (metrolog@geekprom.ru) иначе
   выталкивают «Каталог» на второй ряд — сжиматься разрешаем только почте. */
@media (min-width:561px){
  .gpp--modal .gpp__alt{flex-wrap:nowrap;gap:7px}
  .gpp--modal .gpp__alt a{padding:7px 10px}
  .gpp--modal .gpp__alt a[href^="mailto:"]{flex:0 1 auto;min-width:0}
}
.gpp__alt a:hover{color:var(--p-blue);border-color:var(--p-blue);background:var(--p-blue-l)}
.gpp__alt a:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
/* 1,75 под подпись весом 500: штрих 2 рядом с 12,5 px выглядел вырубленным */
.gpp__alt svg{width:14px;height:14px;flex:none;color:var(--p-muted);stroke-width:1.75}
.gpp__alt a:hover svg{color:var(--p-blue)}
.gpp__alt a.gpp__tel{color:var(--p-ink)}
.gpp--corner .gpp__alt{margin-top:12px;padding-top:11px;gap:6px}
.gpp--corner .gpp__alt a{font-size:12px;padding:6px 10px}

/* ------------------------------------------------------------------- успех
   После отправки вопрос в шапке («Не нашли нужный прибор?») уже неуместен —
   убираем её, остаётся только подтверждение. */
.gpp.is-done .gpp__head{display:none}
.gpp__ok{padding:34px 26px 30px;text-align:center}
/* Кольцо вокруг кружка вместо жирной заливки — мягче и не спорит с текстом */
.gpp__ok .ci{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:var(--p-green-l);color:var(--p-green-d);display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 6px rgba(67,193,109,.1)}
.gpp__ok .ci svg{width:24px;height:24px;stroke-width:2.4;
  transform:translateY(-1px)}   /* галка сидит ниже геометрического центра круга */
.gpp__ok h3{font-size:19px}
.gpp__ok p{margin-top:8px;font-size:14px;color:var(--p-text)}
.gpp__ok .gpp__alt{justify-content:center;margin-top:18px}

/* -------------------------------------------------------------------- блики
   Идея взята у Originkit (Shiny Pill): блик ведётся градиентной маской, без
   canvas и WebGL. Отличия сознательные: там сияние крутится в бесконечном
   цикле — здесь оно проходит ОДИН раз. Форма показывается человеку, который
   что-то ищет; вечное движение рядом с полями ввода мешает читать.
   Включается настройкой sheen:true (класс .gpp--sheen на корне). */
.gpp--sheen .gpp__chip{position:relative;overflow:hidden}
.gpp--sheen .gpp__chip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%)}
.gpp--sheen.is-open .gpp__chip::after{animation:gpp-sheen 1.05s cubic-bezier(.3,0,.2,1) .5s 1 forwards}

/* Проблеск по кнопке в момент, когда её разблокировала галка согласия. */
.gpp--sheen .gpp__btn{position:relative;overflow:hidden}
.gpp--sheen .gpp__btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-130%)}
.gpp--sheen .gpp__btn.is-lit::after{animation:gpp-sheen .8s cubic-bezier(.3,0,.2,1) 1 forwards}
@keyframes gpp-sheen{to{transform:translateX(130%)}}

/* ------------------------------------------------------------------ мобилка
   На узких экранах оба режима становятся шторкой снизу: она ближе к большому
   пальцу и не перекрывает контент целиком. */
@media (max-width:560px){
  .gpp--modal .gpp__win,
  .gpp--corner .gpp__win{left:0;right:0;bottom:0;top:auto;width:100%;
    max-height:88vh;border-radius:18px 18px 0 0;transform:translateY(100%)}
  .gpp--modal.is-open .gpp__win,
  .gpp--corner.is-open .gpp__win{transform:translateY(0)}
  .gpp__win::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.35);position:absolute;left:50%;top:8px;
    transform:translateX(-50%);z-index:2}
  /* на белом экране «отправлено» светлая ручка шторки была не видна */
  .gpp.is-done .gpp__win::before{background:rgba(35,43,70,.16)}
  .gpp__head{padding:24px 18px 18px}
  .gpp__title{font-size:19px}
  /* нижняя кромка iPhone: кнопки не должны уезжать под системный индикатор */
  .gpp__body{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .gpp__ok{padding:30px 20px calc(26px + env(safe-area-inset-bottom,0px))}
  .gpp__row{grid-template-columns:1fr}
  .gpp__pts{display:none}
}

@media (prefers-reduced-motion:reduce){
  #gpPopup .gpp__ov,#gpPopup .gpp__win,
  #gpPopup .gpp__body,#gpPopup .gpp__ok{transition:none}
  #gpPopup .gpp__body,#gpPopup .gpp__ok{opacity:1}
  #gpPopup .gpf-agree.gpf-need{animation:none}
  #gpPopup .gpf-agree input:checked::after{animation:none}
  #gpPopup.gpp--sheen .gpp__chip::after,
  #gpPopup.gpp--sheen .gpp__btn::after{animation:none;display:none}
  #gpPopup .gpp__btn:active,#gpPopup .gpp__alt a:active,#gpPopup .gpp__x:active{scale:1}
}