/* ══════════════════════════════════════════════════════════════
   УСЛУГИ v2 — карточка «Аналитика госзакупок»
   Файл: assets/css/services-v2-gz.css
   Подключается ПОСЛЕ services-v2.css (это делает services-v2.php).
   Токены темы: navy #151D3F, green #10CC97, blue #5586E7,
   подложки #F3F6FF / #ECF0FF — как в самом блоке госзакупок.
   Откат: удалить файл + карточку .sv2-gz из services-v2.php.
   ══════════════════════════════════════════════════════════════ */

/* переменные — и на карточке, и на самом превью: превью «Краткого вывода»
   стоит ещё и в шапке страницы /goszakupki/, вне карточки */
.sv2-gz,.gzb-demo{--gzb-blue:#5586E7;--gzb-blue-2:#3C6BCB;--gzb-bg:#F3F6FF;--gzb-bg-2:#ECF0FF;
  --gzb-stroke:#DCE2FF}
.sv2-gz{
  grid-column:1/-1;display:grid;grid-template-columns:1fr 1.1fr;gap:0;
  position:relative;background:#fff;border:1px solid var(--gzb-stroke);
  border-radius:32px;overflow:hidden;margin-top:6px;
  box-shadow:0 24px 48px -36px rgba(60,107,203,.45)}
.sv2-gz::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 0% 0%,rgba(85,134,231,.10),transparent 70%)}
@media(max-width:960px){.sv2-gz{grid-template-columns:1fr}}

/* ── левая часть ── */
.gzb-info{position:relative;padding:42px 46px;display:flex;flex-direction:column}
.gzb-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:10px;
  letter-spacing:.06em;color:var(--gzb-blue-2);background:var(--gzb-bg-2);
  border:1px solid var(--gzb-stroke);padding:7px 14px;border-radius:99px;margin-bottom:18px}
.gzb-badge i{width:6px;height:6px;border-radius:50%;background:var(--sv2-green);
  animation:gzbPulse 2.4s ease-in-out infinite}
@keyframes gzbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.gzb-title{font-family:'Unbounded','Inter',sans-serif;font-weight:500;
  font-size:clamp(18px,1.8vw,23px);line-height:1.3;margin:0 0 14px;text-align:left}
.gzb-desc{font-size:13.5px;line-height:1.55;color:var(--sv2-muted);margin:0 0 18px}
.gzb-desc b{color:var(--sv2-navy);font-weight:600}

.gzb-metrics{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:9px 20px;margin:0 0 26px;padding:0}
@media(max-width:560px){.gzb-metrics{grid-template-columns:1fr}}
.gzb-metrics li{position:relative;padding-left:24px;font-size:12.5px;line-height:1.4;color:#3A4462}
.gzb-metrics li::before{content:'';position:absolute;left:0;top:2px;width:15px;height:15px;
  border-radius:50%;background:var(--gzb-blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 10.6 3.9 8l-1 1 3.6 3.6 7-7-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 10.6 3.9 8l-1 1 3.6 3.6 7-7-1-1z'/%3E%3C/svg%3E") center/contain no-repeat}

.gzb-foot{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;margin-top:auto}
.gzb-price{font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:26px;
  color:var(--sv2-navy);white-space:nowrap}
.gzb-price small{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  color:var(--sv2-muted);margin-top:3px}

/* срок — без «молнии»: результат не мгновенный, честно показываем часы */
.sv2-instant.gzb-time{color:var(--gzb-blue-2)}
.sv2-instant.gzb-time::before{content:'';width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── правая часть: превью «Краткого вывода» ── */
.gzb-demo{position:relative;background:var(--gzb-bg);border-left:1px solid var(--gzb-stroke);
  padding:34px 38px;display:flex;align-items:center;justify-content:center}
@media(max-width:960px){.gzb-demo{border-left:0;border-top:1px solid var(--gzb-stroke)}}
/* лист бумаги за превью — «стопка» документов */
.gzb-demo::before{content:'';position:absolute;width:min(78%,420px);height:72%;top:13%;
  left:50%;transform:translateX(-46%) rotate(4deg);background:#fff;border:1px solid var(--gzb-stroke);
  border-radius:18px;opacity:.7}

.gzb-doc{position:relative;width:100%;max-width:470px;background:#fff;border:1px solid var(--gzb-stroke);
  border-radius:18px;padding:18px 20px 20px;box-shadow:0 26px 48px -26px rgba(21,29,63,.35);
  transform:translateY(8px);opacity:0;transition:transform .7s ease,opacity .7s ease}
.in-view .gzb-doc{transform:none;opacity:1}

.gzb-doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #EEF1FA}
.gzb-doc-brand{display:flex;align-items:center;gap:6px;font-family:'Unbounded','Inter',sans-serif;
  font-weight:500;font-size:7.5px;letter-spacing:.06em;color:var(--sv2-muted);margin-bottom:5px}
.gzb-doc-brand i{width:12px;height:12px;border-radius:4px;background:var(--gzb-blue)}
.gzb-doc-t{font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:15px;color:var(--sv2-navy)}
.gzb-doc-tag{flex:none;font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.05em;color:#fff;background:var(--gzb-blue);padding:5px 10px;border-radius:99px}

.gzb-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.gzb-kpi{background:var(--gzb-bg);border:1px solid #E6ECFF;border-radius:11px;padding:8px 10px;min-width:0}
.gzb-kpi label{display:block;font-size:8px;color:var(--sv2-muted);font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gzb-kpi b{font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:13px;
  color:var(--sv2-navy);white-space:nowrap;letter-spacing:-.02em}

.gzb-chart{border:1px solid #EEF1FA;border-radius:12px;padding:10px 12px 8px;margin-bottom:12px}
.gzb-chart-ttl{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:9px;font-weight:600;color:var(--sv2-navy);margin-bottom:8px}
.gzb-leg{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:500;color:var(--sv2-muted)}
.gzb-leg i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-left:7px}
.gzb-leg i.l44{background:var(--sv2-navy)}
.gzb-leg i.l223{background:var(--gzb-blue)}
.gzb-bars{display:flex;align-items:flex-end;gap:12px;height:84px}
.gzb-y{flex:1;position:relative;height:100%;display:flex;flex-direction:column-reverse;
  align-items:center;padding-bottom:13px}
.gzb-y span{width:58%;max-width:30px;height:0;transition:height .9s cubic-bezier(.22,1,.36,1)}
.gzb-y span.a{background:var(--sv2-navy);border-radius:0 0 3px 3px}
.gzb-y span.b{background:var(--gzb-blue);border-radius:4px 4px 0 0}
.in-view .gzb-y span{height:var(--h)}
.in-view .gzb-y:nth-child(2) span{transition-delay:.08s}
.in-view .gzb-y:nth-child(3) span{transition-delay:.16s}
.in-view .gzb-y:nth-child(4) span{transition-delay:.24s}
.in-view .gzb-y:nth-child(5) span{transition-delay:.32s}
.gzb-y em{position:absolute;bottom:0;font-style:normal;font-size:7.5px;color:var(--sv2-muted)}

.gzb-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gzb-sub{font-size:8.5px;font-weight:600;color:var(--sv2-navy);margin-bottom:7px}
.gzb-tr,.gzb-pill{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.gzb-tr i{flex:none;width:15px;height:15px;border-radius:5px;background:var(--gzb-bg-2);
  color:var(--gzb-blue-2);font:600 8px 'Inter',sans-serif;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.gzb-tr b{flex:none;font-size:8.5px;font-weight:600;color:var(--sv2-navy)}
/* «скелет» названия: в отчёте здесь реальные заказчики */
.gzb-tr .sk,.gzb-pill .sk{flex:1;position:relative;height:6px;border-radius:99px;background:#EEF1FA;overflow:hidden}
.gzb-tr .sk::after,.gzb-pill .sk::after{content:'';position:absolute;inset:0 auto 0 0;width:0;
  border-radius:99px;background:#C9D5F5;transition:width .9s ease .5s}
.in-view .gzb-tr .sk::after,.in-view .gzb-pill .sk::after{width:var(--w)}
.gzb-pill i{flex:none;width:15px;height:15px;border-radius:50%;font:700 10px/15px 'Inter',sans-serif;
  font-style:normal;text-align:center;color:#fff}
.gzb-pill.is-up i{background:var(--sv2-green)}
.gzb-pill.is-dn i{background:var(--sv2-red)}
.gzb-pill.is-up .sk::after{background:rgba(16,204,151,.38)}
.gzb-pill.is-dn .sk::after{background:rgba(240,111,91,.38)}

/* ── мобильная адаптация ── */
@media(max-width:720px){
  .gzb-info{padding:30px 22px}
  .gzb-demo{padding:22px 14px 24px}
  .gzb-demo::before{display:none}
  .gzb-doc{padding:14px 14px 16px}
  .gzb-price{font-size:22px}
  .gzb-kpi{padding:7px 8px}
  .gzb-kpi b{font-size:11.5px}
  .gzb-bars{gap:8px;height:72px}
}
@media(max-width:380px){
  .gzb-row2{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .gzb-badge i{animation:none}
  .gzb-doc{opacity:1;transform:none;transition:none}
  .gzb-y span{height:var(--h);transition:none}
  .gzb-tr .sk::after,.gzb-pill .sk::after{width:var(--w);transition:none}
}