/* ============================================================================
   capture.css — флагман плана 75, Фаза 1: «наличие в салоне -> бронь -> код (OTP)»
   на карточке товара. Бренд GT (тот же визуальный язык, что quiz.css: чёрно-золотой
   люкс), но собственный неймспейс .gtc-* / #gt-capture — НЕ делим классы с живым
   квизом (правка квиза не должна ломать капчу, и наоборот).
   Ванильный CSS, mobile-first, системный шрифт-стек, без импортов. Только дефис.
   Ноль-CLS: до первого тапа блок = плейсхолдер фиксированной высоты (affordance).
   Радиус-шкала: 12px интерактив / 20px короб / 100px пилюли.
   ========================================================================== */

#gt-capture{
  --gtc-bg:#fffcf5;
  --gtc-ink:#1a1a1a; --gtc-ink-soft:#5a564e; --gtc-muted:#6f6a5f;
  --gtc-gold:#c9a24b; --gtc-gold-deep:#8a6a26; --gtc-gold-soft:#faf6ee; --gtc-gold-hair:#e8c86f;
  --gtc-gold-btn:#f0dca6; --gtc-gold-btn-2:#f4e1af;
  --gtc-silver:#9aa3ad; --gtc-silver-deep:#5b6b78;
  --gtc-border:#ece4d3; --gtc-border-2:#e7e2d8; --gtc-err:#a32d2d;
  --gtc-r-ui:12px; --gtc-r-box:20px;
  --gtc-ease:cubic-bezier(.22,.61,.36,1);

  display:block; max-width:560px; margin:18px 0 20px;
  background:#fff; border:1px solid var(--gtc-border); border-radius:var(--gtc-r-box);
  padding:22px 20px; color:var(--gtc-ink); position:relative;
  box-shadow:0 1px 2px rgba(60,44,12,.04);
  -webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
}
/* «в цвет страницы, но заметно» (реш. Вадима): короб сливается с белой страницей,
   а выделяют предложение тёмная eyebrow-печать + крупный заголовок + чёрно-золотая кнопка.
   Тонкая золотая полоска сверху = ненавязчивый акцент бренда. */
#gt-capture::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gtc-gold-hair),var(--gtc-gold));
  border-radius:var(--gtc-r-box) var(--gtc-r-box) 0 0}
#gt-capture, #gt-capture *,#gt-capture *::before,#gt-capture *::after{box-sizing:border-box}
@media(max-width:560px){#gt-capture{padding:20px 16px;margin:20px 0}}

/* ноль-CLS: плейсхолдер держит высоту до готовности JS (affordance по высоте ~= этому) */
#gt-capture.gtc-boot{min-height:196px}
@media(max-width:560px){#gt-capture.gtc-boot{min-height:214px}}

/* прогресс: золотая волосяная нить */
#gt-capture .gtc-bar-wrap{height:2px;background:#efe6d3;border-radius:100px;overflow:hidden;margin:0 0 18px}
#gt-capture .gtc-bar{height:2px;background:linear-gradient(90deg,var(--gtc-gold-hair),var(--gtc-gold));
  width:8%;border-radius:100px;transition:width .5s var(--gtc-ease)}
#gt-capture.gtc-at-start .gtc-bar-wrap{display:none}

.gtc-step{animation:gtc-fade .3s var(--gtc-ease)}
@keyframes gtc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* eyebrow-«печать доверия» */
.gtc-eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--gtc-ink);color:var(--gtc-gold-btn-2);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;margin:0 0 15px}
.gtc-eyebrow svg{width:13px;height:13px;stroke:var(--gtc-gold-btn-2);fill:none}

.gtc-lead{font-size:21px;font-weight:600;line-height:1.24;letter-spacing:-.02em;margin:0;color:var(--gtc-ink)}
@media(max-width:560px){.gtc-lead{font-size:20px}}
.gtc-note{font-size:14px;color:var(--gtc-ink-soft);line-height:1.6;margin:12px 0 0}
.gtc-fine{font-size:11.5px;color:var(--gtc-muted);line-height:1.5;margin:14px 0 0}

/* кнопки */
.gtc-btn{display:block;width:100%;background:var(--gtc-ink);color:var(--gtc-gold-btn);
  font-weight:600;border-radius:var(--gtc-r-ui);padding:15px 22px;font-size:15.5px;letter-spacing:.01em;
  cursor:pointer;border:none;font-family:inherit;text-align:center;margin-top:18px;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.35), 0 2px 10px -4px rgba(26,26,6,.25);
  transition:box-shadow .2s,transform .1s,color .2s}
.gtc-btn:hover{color:#f6e6bd;transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.5), 0 8px 22px -8px rgba(26,26,6,.4)}
.gtc-btn:active{transform:translateY(0) scale(.99)}
.gtc-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(201,162,75,.5),0 0 0 3px rgba(201,162,75,.42)}
.gtc-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:inset 0 0 0 1px rgba(201,162,75,.2)}
.gtc-btn.sm{margin-top:14px;padding:13px 20px;font-size:15px}
.gtc-ghost{display:inline-flex;align-items:center;gap:6px;width:auto;background:none;
  border:1px solid var(--gtc-border-2);color:var(--gtc-gold-deep);font-weight:500;border-radius:var(--gtc-r-ui);
  padding:10px 16px;font-size:13.5px;cursor:pointer;font-family:inherit;text-decoration:none;
  transition:border-color .16s,background .16s}
.gtc-ghost:hover{border-color:var(--gtc-gold);background:var(--gtc-gold-soft)}
.gtc-ghost svg{width:15px;height:15px}
.gtc-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0 0 12px;
  margin:0;color:var(--gtc-gold-deep);font-size:13px;cursor:pointer;font-family:inherit}
.gtc-back:hover{text-decoration:underline}

.gtc-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gtc-muted);margin:0 0 9px}
.gtc-h{font-size:18px;font-weight:600;line-height:1.34;letter-spacing:-.015em;margin:0 0 4px;color:var(--gtc-ink)}
.gtc-sub{font-size:13.5px;color:var(--gtc-ink-soft);line-height:1.55;margin:8px 0 0}

/* селектор салонов */
.gtc-prompt{font-size:13px;color:var(--gtc-muted);margin:0 0 12px}
.gtc-salons{display:grid;gap:10px}
.gtc-srow{display:flex;align-items:center;gap:12px;border:1px solid var(--gtc-border);
  border-radius:var(--gtc-r-ui);padding:13px 14px;cursor:pointer;background:#fff;text-align:left;width:100%;
  font-family:inherit;transition:border-color .16s,background .16s,box-shadow .16s,transform .09s}
@media(hover:hover){.gtc-srow:hover{border-color:var(--gtc-gold);background:var(--gtc-gold-soft);
  transform:translateY(-1px);box-shadow:0 3px 10px rgba(160,120,40,.09)}}
.gtc-srow.gtc-sel{border-color:var(--gtc-gold);border-width:1.5px;background:var(--gtc-gold-soft)}
.gtc-srow:focus-visible{outline:none;border-color:var(--gtc-gold-deep);box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.gtc-sdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gtc-gold);margin-top:5px}
.gtc-sbody{flex:1;min-width:0}
.gtc-sname{font-size:14.5px;font-weight:600;color:var(--gtc-ink);line-height:1.25}
.gtc-saddr{font-size:12px;color:var(--gtc-muted);line-height:1.35;margin-top:3px}
.gtc-sqty{flex:none;font-size:12px;font-weight:600;color:var(--gtc-gold-deep);background:#fff;
  border:1px solid var(--gtc-gold-hair);border-radius:100px;padding:4px 10px;font-variant-numeric:tabular-nums;
  white-space:nowrap;align-self:center}
.gtc-srow.gtc-sel .gtc-sqty{background:var(--gtc-gold);color:#3a2c07;border-color:var(--gtc-gold)}
/* бейджи наличия: «N шт.» = золото (можно забрать); «привезём» = тихий (доставим из другого) */
.gtc-sqty.gtc-bring{color:var(--gtc-muted);border-color:var(--gtc-border-2);font-weight:500;background:#fbfaf6}
.gtc-sdot.gtc-dim{background:var(--gtc-silver)}
/* строка-подтверждение над телефоном (есть/привезём) */
.gtc-teaser-line{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--gtc-ink-soft);
  line-height:1.5;margin:2px 0 4px;padding:11px 13px;background:var(--gtc-gold-soft);
  border:1px solid var(--gtc-border);border-radius:var(--gtc-r-ui)}
.gtc-teaser-line svg{width:16px;height:16px;color:var(--gtc-gold-deep);flex:none;margin-top:1px}
.gtc-teaser-line b{color:var(--gtc-ink);font-weight:600}

.gtc-teaser{margin-top:16px;border-top:1px dashed var(--gtc-border-2);padding-top:16px}
.gtc-hair{height:1px;width:38px;background:var(--gtc-gold);margin:0 0 12px}
.gtc-teaser b{color:var(--gtc-ink);font-weight:600}
.gtc-teaser .gtc-num{font-variant-numeric:tabular-nums}

/* поля */
.gtc-field{width:100%;border:1px solid var(--gtc-border-2);border-radius:var(--gtc-r-ui);
  padding:14px 15px;font-size:16px;margin:12px 0 0;font-family:inherit;color:var(--gtc-ink);background:#fff;
  letter-spacing:.01em;transition:border-color .16s,box-shadow .16s}
.gtc-field:focus{outline:none;border-color:var(--gtc-gold-deep);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.gtc-field-code{text-align:center;letter-spacing:.5em;font-size:23px;font-weight:600;padding-left:.5em;
  font-variant-numeric:tabular-nums}
.gtc-shield{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--gtc-muted);
  margin:12px 0 0;line-height:1.45}
.gtc-shield svg{width:15px;height:15px;color:var(--gtc-gold-deep);flex:none;margin-top:1px}
.gtc-captcha{margin:12px 0 0}
.gtc-captcha:empty{margin:0}
.gtc-cons{display:flex;align-items:flex-start;font-size:12.5px;color:var(--gtc-ink-soft);
  line-height:1.45;margin:14px 0 0;cursor:pointer}
.gtc-cons input{margin:2px 9px 0 0;flex:none;width:16px;height:16px;accent-color:var(--gtc-gold)}
.gtc-pol{color:var(--gtc-gold-deep);text-decoration:underline}
.gtc-err{display:none;color:var(--gtc-err);font-size:13px;margin:10px 0 0;line-height:1.45}
.gtc-err.gtc-show{display:block}
.gtc-resend{background:none;border:none;color:var(--gtc-gold-deep);font-size:13.5px;cursor:pointer;
  font-family:inherit;padding:12px 0 0;text-align:center;width:100%}
.gtc-resend[disabled]{color:var(--gtc-muted);cursor:default}
.gtc-resend:not([disabled]):hover{text-decoration:underline}

/* спиннер в кнопке */
.gtc-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(240,220,166,.35);
  border-top-color:var(--gtc-gold-btn);border-radius:50%;animation:gtc-rot .7s linear infinite;
  vertical-align:-2px;margin-right:6px}
@keyframes gtc-rot{to{transform:rotate(360deg)}}

/* результат */
.gtc-doneic{width:52px;height:52px;border-radius:50%;background:#faf1de;color:var(--gtc-gold-deep);
  display:inline-flex;align-items:center;justify-content:center;margin:0 0 14px}
.gtc-doneic.gtc-cold{background:#eef1f3;color:var(--gtc-silver-deep)}
.gtc-doneic svg{width:26px;height:26px}
.gtc-marker{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gtc-gold-deep);margin:0 0 12px}
.gtc-marker .gtc-ln{height:1px;width:24px;background:var(--gtc-border);flex:none}
.gtc-marker.gtc-cold{color:var(--gtc-silver-deep)}
.gtc-rh{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.015em;margin:0 0 6px;color:var(--gtc-ink)}
@media(max-width:560px){.gtc-rh{font-size:19px}}
.gtc-rline{font-size:14px;color:var(--gtc-ink-soft);line-height:1.55;margin:0 0 16px}

/* тёмная салон-карточка = печать бренда */
.gtc-salon{background:var(--gtc-ink);color:#fff;border-radius:var(--gtc-r-ui);padding:16px 18px;margin:0}
.gtc-salon-name{font-size:15px;font-weight:600;color:var(--gtc-gold-btn);margin:0 0 5px}
.gtc-salon-qty{font-size:13.5px;color:#efe6d2;line-height:1.5}
.gtc-salon-qty b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.gtc-salon-addr{font-size:12.5px;color:#b7b0a2;line-height:1.45;margin-top:8px}
.gtc-salon-cta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.gtc-salon-cta a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gtc-gold-btn-2);
  text-decoration:none;border:1px solid rgba(240,220,166,.3);border-radius:9px;padding:7px 11px;
  transition:background .16s}
.gtc-salon-cta a:hover{background:rgba(240,220,166,.1)}
.gtc-salon-cta svg{width:13px;height:13px}
.gtc-salon-mark{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1);
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(240,220,166,.55)}

.gtc-hold{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#5a4a1e;
  background:var(--gtc-gold-soft);border:1px solid var(--gtc-gold-hair);border-radius:100px;
  padding:6px 12px;margin-top:12px;font-weight:600}
.gtc-hold svg{width:14px;height:14px;color:var(--gtc-gold-deep)}

.gtc-others{margin-top:12px}
.gtc-others-lbl{font-size:11.5px;color:var(--gtc-muted);margin:0 0 8px}
.gtc-pills{display:flex;flex-wrap:wrap;gap:7px}
.gtc-pill{font-size:12px;color:var(--gtc-ink-soft);background:#fff;border:1px solid var(--gtc-border);
  border-radius:100px;padding:5px 11px;font-variant-numeric:tabular-nums}
.gtc-pill b{color:var(--gtc-gold-deep);font-weight:600}

.gtc-lastfew{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#9a5b1c;
  background:#fbf1e2;border:1px solid #f0d9b4;border-radius:100px;padding:5px 11px;margin-top:12px}
.gtc-lastfew svg{width:13px;height:13px}
.gtc-resultnote{font-size:12px;color:var(--gtc-muted);line-height:1.5;margin:16px 0 0}

/* подборка */
.gtc-pick-block{margin-top:22px;border-top:1px solid var(--gtc-border);padding-top:20px}
.gtc-pick-h{font-size:14px;font-weight:600;margin:0 0 3px;color:var(--gtc-ink)}
.gtc-pick-cap{font-size:12px;color:var(--gtc-muted);line-height:1.5;margin:0 0 12px}
.gtc-picks{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(min-width:480px){.gtc-picks{grid-template-columns:repeat(4,1fr)}}
.gtc-pick{border:1px solid var(--gtc-border-2);border-radius:var(--gtc-r-ui);overflow:hidden;background:#fff;
  text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s,transform .1s}
@media(hover:hover){.gtc-pick:hover{border-color:var(--gtc-gold);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(60,44,12,.09)}}
.gtc-pick-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f5f1e8}
@supports not (aspect-ratio:1/1){.gtc-pick-img{height:150px}}
.gtc-pick-b{padding:8px 10px 10px}
.gtc-pick-n{font-size:12px;color:var(--gtc-ink-soft);line-height:1.32;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gtc-pick-p{font-size:13px;font-weight:600;color:var(--gtc-ink);font-variant-numeric:tabular-nums}
.gtc-picks-loading{font-size:13px;color:var(--gtc-muted);padding:12px 0;text-align:center}
.gtc-picks-fallback{font-size:13px;color:var(--gtc-muted);line-height:1.5;margin:0}

/* липкий мобильный CTA */
.gtc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990;
  background:rgba(255,252,245,.96);border-top:1px solid var(--gtc-border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .28s var(--gtc-ease);
  box-shadow:0 -6px 20px -10px rgba(60,44,12,.25)}
.gtc-sticky.gtc-show{transform:none}
.gtc-sticky .gtc-btn{margin:0;max-width:560px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.gtc-sticky{display:none}}

@media (prefers-reduced-motion:reduce){
  #gt-capture .gtc-step{animation:none}
  #gt-capture .gtc-bar{transition:none}
  #gt-capture .gtc-srow,#gt-capture .gtc-btn,#gt-capture .gtc-pick{transition:opacity .12s,color .12s}
  .gtc-sticky{transition:none}
}