/* ============================================================
   КЛИМАТ ПРО — стили лидогенерации (QuickLead, LeadStrip).
   Tech-палитра, плотность «просторно». Телефон — герой.
   ============================================================ */

/* ---- базовые поля захвата ---- */
.qlead { display: flex; flex-direction: column; gap: 14px; }
.qlead-head { display: flex; gap: 13px; align-items: flex-start; }
.qlead-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; }
.qlead-title { display: block; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.qlead-sub { display: block; margin-top: 3px; line-height: 1.5; }
.qlead-fields { display: flex; flex-direction: column; gap: 10px; }
.qlead-fields .qlead-input { width: 100%; }
.qlead-fields .qlead-btn { width: 100%; }
.qlead-input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.qlead-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.qlead-input::placeholder { color: var(--muted-2); }
.qlead-phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; font-weight: 600; }
.qlead-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 0; border-radius: var(--r-md); background: var(--warm); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; transition: filter .14s, transform .12s, opacity .15s; }
.qlead-btn:hover { filter: brightness(.94); }
.qlead-btn:active { transform: translateY(1px); }
.qlead-btn.is-off { opacity: .55; }
.qlead-fine { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.4; }
.qlead-fine svg { flex-shrink: 0; color: var(--eco); }

/* ---- состояние «принято» ---- */
.qlead-done { flex-direction: row; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-md); background: var(--eco-soft); border: 1px solid color-mix(in oklab, var(--eco) 20%, transparent); animation: popIn .26s cubic-bezier(.2,.9,.3,1.1) both; }
.qlead-okic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--eco); color: #fff; display: grid; place-items: center; }
.qlead-okic svg { stroke-width: 2.4; }
.qlead-oktext { display: flex; flex-direction: column; gap: 2px; }
.qlead-oktext strong { color: var(--ink); font-size: 16px; }

/* ---- variant: card (секция-карточка) ---- */
.qlead-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }

/* ---- variant: inline (узкий, для карточки товара) ---- */
.qlead-inline { gap: 10px; }
.qlead-inline .qlead-btn { width: 100%; }
.qlead-inline.qlead-done { padding: 14px; }
.qlead-inline .qlead-okic { width: 36px; height: 36px; }

/* ---- variant: hero (крупный, для модалок и полосы) ---- */
.qlead-hero .qlead-input { padding: 16px 18px; font-size: 17px; }
.qlead-hero .qlead-btn { padding: 16px 28px; font-size: 16px; }
.qlead-hero .qlead-title { font-size: 19px; }

/* ===================== ПОЛОСА-ПРИЗЫВ ===================== */
.leadstrip { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: var(--r-xl); background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in oklab, var(--accent) 90%, #000) 0%, var(--accent) 55%, var(--accent-strong) 100%); color: var(--on-accent); }
.leadstrip::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.leadstrip-copy { position: relative; z-index: 1; }
.leadstrip-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 6px 0 12px; text-wrap: balance; }
.leadstrip-sub { color: rgba(255,255,255,.82); max-width: 460px; line-height: 1.55; margin: 0 0 18px; }
.leadstrip-trust { display: flex; flex-wrap: wrap; gap: 16px; }
.leadstrip-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.92); }
.leadstrip-trust svg { color: #fff; opacity: .85; }
.leadstrip-form { position: relative; z-index: 1; background: var(--surface); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-lg); }
.leadstrip-form .qlead-fine { color: var(--muted); }

@media (max-width: 880px) {
  .leadstrip { grid-template-columns: 1fr; gap: 24px; padding: 30px; }
  .qlead-fields { flex-direction: column; }
  .qlead-btn { width: 100%; }
}

/* ===================== BOOKING — упрощённая (phone-first) ===================== */
.booking-lite { width: min(520px, 100%); }
.bk-express { display: flex; flex-direction: column; gap: 16px; }
.bk-lead { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.bk-fields { display: flex; flex-direction: column; gap: 10px; }
.bk-fields .qlead-input { width: 100%; }
.bk-schedtoggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); border: 1.5px dashed var(--line); background: var(--surface); color: var(--accent); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: .14s; }
.bk-schedtoggle:hover { border-color: var(--accent); background: var(--accent-tint); }
.bk-schedwrap { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); animation: popIn .2s ease both; }
.bk-schedlbl { font-weight: 600; }
.bk-days-row { grid-template-columns: repeat(7, 1fr); }
.bk-submit.is-off { opacity: .55; }
.bk-submit { background: var(--warm); box-shadow: none; }
.bk-submit:hover { background: var(--warm); filter: brightness(.94); }
.bk-assure { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bk-assure span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.bk-assure svg { color: var(--eco); }
.bk-assure a { color: var(--accent); font-weight: 600; }
.bk-okscreen { text-align: center; padding: 18px 8px 8px; animation: popIn .26s cubic-bezier(.2,.9,.3,1.1) both; }
.bk-okic { width: 72px; height: 72px; border-radius: 50%; background: var(--eco-soft); color: var(--eco); display: grid; place-items: center; margin: 0 auto 16px; }
.bk-okic svg { stroke-width: 2.4; }
.bk-okscreen p { max-width: 380px; margin: 8px auto 0; line-height: 1.55; }

@media (max-width: 560px) {
  .bk-days-row { grid-template-columns: repeat(4, 1fr); }
}

/* ===================== КВИЗ — результат (заявка + превью) ===================== */
.quiz-results { display: flex; flex-direction: column; gap: 22px; }
.quiz-lead { padding: 22px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-tint), var(--surface)); border: 1.5px solid var(--accent-soft); }
.quiz-lead-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--eco-soft); color: var(--eco); font-size: 13px; font-weight: 700; }
.quiz-preview { display: flex; flex-direction: column; gap: 10px; }
.quiz-preview-list { display: flex; flex-direction: column; gap: 8px; }
.quiz-pcard { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font: inherit; transition: .14s; }
.quiz-pcard:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.quiz-pcard-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--r-sm); overflow: hidden; }
.quiz-pcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ===================== КАРТОЧКА ТОВАРА — блок консультации ===================== */
.pg-consult { margin-bottom: 18px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-tint), var(--surface)); border: 1.5px solid var(--accent-soft); }
.pg-consult-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; }
.pg-consult-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.pg-consult-head strong { display: block; font-size: 16px; color: var(--ink); }
.pg-consult-head .muted { display: block; margin-top: 3px; line-height: 1.5; }

.deliverycheck { margin: 12px 0; gap: 12px; }
.deliverycheck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deliverycheck .field { gap: 6px; min-width: 0; }
.deliverycheck .field > span { color: var(--ink-2); font-weight: 600; }
.deliverycheck .input { min-height: 46px; padding: 11px 13px; font-size: 14.5px; border-radius: var(--r-sm); background-color: var(--surface); }
.deliverycheck-seg { margin-top: 2px; }
.deliverycheck-seg .seg-btn { min-height: 42px; white-space: normal; }
.deliverycheck-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.deliverycheck-phone { width: 100%; padding: 12px 14px; font-size: 15px; border-radius: var(--r-sm); }
.deliverycheck-btn { min-width: 170px; padding: 12px 16px; border-radius: var(--r-sm); }
.deliverycheck-done { background: var(--eco-soft); border-color: color-mix(in oklab, var(--eco) 22%, var(--line)); }

@media (max-width: 620px) {
  .deliverycheck-grid,
  .deliverycheck-actions { grid-template-columns: 1fr; }
  .deliverycheck-btn { width: 100%; min-width: 0; }
}

/* ===================== ПОПАП-ПОДАРОК (exit-intent) ===================== */
.giftpop { position: relative; width: min(420px, 100%); background: var(--surface); border-radius: var(--r-xl); padding: 32px 28px 24px; text-align: center; box-shadow: var(--sh-lg); animation: popIn .26s cubic-bezier(.2,.9,.3,1.1) both; }
.giftpop-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--warm-soft); color: var(--warm); display: grid; place-items: center; margin: 0 auto 16px; }
.giftpop-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 8px 0 10px; }
.giftpop-sub { max-width: 340px; margin: 0 auto 18px; line-height: 1.55; font-size: 14.5px; }
.giftpop .qlead { text-align: left; }
.giftpop-perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.giftpop-perks span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.giftpop-perks svg { color: var(--eco); }