/* =============================================================================
   xImmersion · lead-form.css
   Self-contained styles for the floating lead-capture widget (bubble + form).

   This file embeds the CSS custom-property subset the widget needs so it works
   on pages that do NOT load global.css (showcase pages, demo pages, etc.).
   On pages that DO load global.css the variables are simply re-declared with
   the same values — no conflict.

   Font dependency (must be loaded on any page that uses this widget):
     <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1
       &family=Manrope:wght@200;300;400;500;600;700
       &family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
   ============================================================================= */

/* ── Variables the widget reads ────────────────────────────────────────────── */
:root {
  --brand-blue: #2196F3;
  --brand-blue-bright: #90CAF9;
  --bg-1: #02060E;
  --paper: #0B121F;
  --ink: #F0F4F8;
  --ink-soft: #94A3B8;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #FFD600;
  --accent-deep: #F9A825;
  --status-green: #10B981;
  --c-solutions: #FF834D;
  --chat-grad-1: #1565C0;
  --chat-grad-2: #7B5EA7;
}

/* ── Homepage integration: dim bubble when a panel is open ─────────────────
   (Harmless no-op on pages that never set these body classes.)            */
body.panel-open .chatbot,
body.detail-open .chatbot {
  opacity: 0.45;
}
body.panel-open .chatbot:hover,
body.detail-open .chatbot:hover {
  opacity: 1;
}

/* ── Floating chat bubble ──────────────────────────────────────────────────── */
.chatbot {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  background: linear-gradient(135deg, var(--chat-grad-1), var(--chat-grad-2));
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 8px 28px rgba(13, 71, 161, 0.45);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}
.chatbot:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(94, 63, 166, 0.6);
}
.chatbot.lead-open { transform: scale(0.95); }
.chatbot svg { 
  width: 24px; height: 24px; color: white; 
  position: absolute; 
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; 
}
.chatbot .icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.chatbot.lead-open .icon-chat { opacity: 0; transform: rotate(90deg) scale(0.5); }
.chatbot.lead-open .icon-close { opacity: 1; transform: rotate(0) scale(1); }
.chatbot.lead-open svg { transform: rotate(90deg); }
.chatbot-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 50%;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-1);
}
.chatbot-badge.show { display: flex; }

/* ── Lead capture window ───────────────────────────────────────────────────── */
.lead-window {
  position: fixed;
  bottom: 100px; right: 28px;
  width: 400px;
  max-width: calc(100vw - 40px);
  height: 620px;
  max-height: calc(100vh - 140px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
  z-index: 19;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-window.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Header */
.lead-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--chat-grad-1), var(--chat-grad-2));
  color: white;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  flex-shrink: 0;
}
.lead-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}
.lead-header-info { flex: 1; min-width: 0; }
.lead-header-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.lead-header-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.lead-header-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: white;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.lead-header-close:hover { background: rgba(255, 255, 255, 0.22); }
.lead-header-close svg { width: 14px; height: 14px; }

/* Progress dots */
.lead-progress {
  display: flex;
  gap: 6px;
  padding: 14px 20px 8px;
  background: var(--paper);
  flex-shrink: 0;
}
.lead-progress-dot {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  transition: background 0.4s ease;
}
.lead-progress-dot.done { background: var(--brand-blue); }
.lead-progress-dot.current {
  background: linear-gradient(to right, var(--brand-blue), var(--brand-blue-bright));
}

/* Body — holds the steps, each step is a "screen" */
.lead-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  position: relative;
  background: var(--paper);
}
.lead-body::-webkit-scrollbar { width: 6px; }
.lead-body::-webkit-scrollbar-track { background: transparent; }
.lead-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.lead-step {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 20px;
  animation: leadStepIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-step.active { display: flex; }
@keyframes leadStepIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lead-intro {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 8px 0 4px;
}
.lead-intro em { color: var(--brand-blue-bright); font-style: normal; }
.lead-lead {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lead-field label .req {
  color: var(--c-solutions);
  font-size: 9px;
}
.lead-field input,
.lead-field textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.lead-field textarea { resize: vertical; min-height: 90px; font-family: 'Manrope', sans-serif; }
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: rgba(33, 150, 243, 0.08);
}
.lead-field input.error,
.lead-field textarea.error {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
}
.lead-field .hint-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--ink-soft);
  opacity: 0.7;
  letter-spacing: 0.05em;
}
.lead-field .err-text {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: #F87171;
  display: none;
}
.lead-field.has-error .err-text { display: block; }

/* Pill selector (budget, timeline, stage) */
.lead-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lead-pill {
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.lead-pill:hover {
  border-color: var(--brand-blue);
  background: rgba(33, 150, 243, 0.08);
}
.lead-pill.selected {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
  font-weight: 500;
}

/* Action row */
.lead-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.lead-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lead-btn.primary {
  background: var(--accent);
  color: #02060E;
}
.lead-btn.primary:hover:not(:disabled) {
  background: var(--accent-deep);
  transform: translateY(-1px);
}
.lead-btn.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lead-btn.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  flex: 0 0 auto;
  padding: 12px 16px;
}
.lead-btn.secondary:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

/* WhatsApp shortcut link in header of first step */
.lead-whatsapp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: 20px;
  color: #25D366;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.lead-whatsapp-pill:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.5);
}
.lead-whatsapp-pill svg { width: 14px; height: 14px; }

/* Success screen */
.lead-success {
  text-align: center;
  padding: 40px 20px 30px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: leadStepIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-success.active { display: flex; }
.lead-success-check {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--status-green), #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  animation: leadCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes leadCheckPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.lead-success-check svg { width: 32px; height: 32px; }
.lead-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lead-success-msg {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 280px;
}
.lead-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}
.lead-success-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
  cursor: pointer;
}
.lead-success-btn svg { width: 18px; height: 18px; }

.lead-success-btn.tg { background: #2CA5E0; color: white; border: none; }
.lead-success-btn.tg:hover { background: #229ED9; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(44, 165, 224, 0.3); }

.lead-success-btn.wa { background: #25D366; color: white; border: none; }
.lead-success-btn.wa:hover { background: #20BA5A; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); }

.lead-success-btn.em { background: rgba(255, 255, 255, 0.05); color: var(--ink); border: 1px solid var(--line); }
.lead-success-btn.em:hover { background: rgba(33, 150, 243, 0.08); border-color: var(--brand-blue); transform: translateY(-1px); }

.lead-success-or {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
  margin: 4px 0 0;
}

/* Restart link — tiny button on success screen */
.lead-restart {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  margin-top: 6px;
  transition: color 0.2s ease;
}
.lead-restart:hover { color: var(--ink); }

/* Error banner (shown on submission failure) */
.lead-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #F87171;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  margin-bottom: 10px;
  display: none;
}
.lead-error.show { display: block; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .lead-window {
    bottom: 96px; right: 16px; left: 16px;
    width: auto;
    max-width: none;
    height: calc(100vh - 120px);
  }
}