/* ================================================================
 * Lead-Capture Widget styles — "Deadline in hours?" sitewide bubble.
 *
 * Loaded by shared/lead-capture-widget.php (which renders the markup
 * and loads ../js/lead-capture-widget.js).
 *
 * Self-contained: every CSS custom property is declared on
 * .pew-lead-widget-root, so this works on every page regardless of
 * which other stylesheets are loaded.
 * ================================================================ */

/* ---------- Scoped palette: every var lives under .pew-lead-widget-root
     so this works regardless of which other CSS is loaded. ---------- */
.pew-lead-widget-root {
  --plw-bg-card: #1A1A26;
  --plw-bg-soft: #13131C;
  --plw-bg-input: #0F0F18;
  --plw-text: #FFFFFF;
  --plw-text-muted: #E2E2EE;
  --plw-text-faint: #9898A8;
  --plw-purple: #A855F7;
  --plw-purple-dark: #9333EA;
  --plw-purple-light: #C77DFF;
  --plw-purple-soft: rgba(168, 85, 247, 0.10);
  --plw-purple-border: rgba(168, 85, 247, 0.30);
  --plw-yellow: #FACC15;
  --plw-yellow-dark: #EAB308;
  --plw-yellow-text: #1A1A26;
  --plw-green: #4ADE80;
  --plw-green-soft: rgba(74, 222, 128, 0.12);
  --plw-red: #F87171;
  --plw-border: rgba(255, 255, 255, 0.08);
}

/* ---------- BUBBLE (closed state) ---------- */
#pew-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  background: var(--plw-bg-card);
  border: 1px solid var(--plw-purple-border);
  border-radius: 100px;
  padding: 9px 18px 9px 9px;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.50),
    0 0 24px rgba(168, 85, 247, 0.18);
  animation: pewRiseIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', system-ui, sans-serif;
}
#pew-bubble:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.25),
    0 14px 40px rgba(0, 0, 0, 0.60),
    0 0 40px rgba(168, 85, 247, 0.18);
}
#pew-bubble:active { transform: scale(0.97); }
#pew-bubble.gone { display: none; }

.pew-bav {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--plw-purple-dark), var(--plw-purple-light));
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.40);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; position: relative;
}
.pew-bav::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: var(--plw-green); border-radius: 50%;
  border: 2px solid var(--plw-bg-card);
  animation: pewBreathe 2s infinite;
}
.pew-btxt { display: flex; flex-direction: column; gap: 1px; }
.pew-btxt-top {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--plw-text);
  letter-spacing: -0.01em;
}
.pew-btxt-bot { font-size: 11.5px; color: var(--plw-text-faint); }

/* ---------- PANEL (open state) ---------- */
#pew-panel {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  width: 330px;
  background: var(--plw-bg-soft);
  border: 1px solid var(--plw-border);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.10),
    0 24px 64px rgba(0, 0, 0, 0.70),
    0 0 40px rgba(168, 85, 247, 0.08);
  display: none; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
  font-family: 'Inter', system-ui, sans-serif;
}
#pew-panel.open {
  display: flex;
  animation: pewPanelRise 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pew-ph {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(168, 85, 247, 0.04) 100%);
  border-bottom: 1px solid var(--plw-purple-border);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 11px;
}
.pew-ph-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--plw-purple-dark), var(--plw-purple-light));
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; position: relative;
}
.pew-ph-av::after {
  content: ''; position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: var(--plw-green); border-radius: 50%;
  border: 2px solid var(--plw-bg-soft);
}
.pew-ph-info { flex: 1; min-width: 0; }
.pew-ph-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--plw-text);
  letter-spacing: -0.01em; line-height: 1.3;
}
.pew-ph-status {
  font-size: 11px; color: var(--plw-green);
  margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}
.pew-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--plw-green); flex-shrink: 0;
  animation: pewBreathe 2s infinite;
}
.pew-x {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--plw-border);
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  color: var(--plw-text-faint);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.pew-x:hover { background: rgba(255, 255, 255, 0.1); color: var(--plw-text); }

.pew-pb { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.pew-field-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--plw-text-faint);
  margin-bottom: 6px; display: block;
}

#pew-msg {
  width: 100%; box-sizing: border-box;
  background: var(--plw-bg-input);
  border: 1px solid var(--plw-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--plw-text-muted);
  resize: none; outline: none;
  height: 76px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#pew-msg:focus {
  border-color: var(--plw-purple-border);
  box-shadow: 0 0 0 3px var(--plw-purple-soft);
}
#pew-msg::placeholder { color: rgba(255, 255, 255, 0.18); }

.pew-method-row { display: flex; gap: 6px; }
.pew-method-opt {
  flex: 1; text-align: center;
  padding: 9px 0;
  background: var(--plw-bg-input);
  border: 1px solid var(--plw-border);
  border-radius: 8px;
  cursor: pointer; font-size: 12.5px;
  color: var(--plw-text-faint);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.15s; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* :has() is widely supported in evergreen browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+). Older browsers fall back to the
   JS-driven .pew-method-opt.checked class set in the script. */
.pew-method-opt:has(input:checked),
.pew-method-opt.checked {
  background: var(--plw-purple-soft);
  border-color: var(--plw-purple-border);
  color: var(--plw-purple-light);
}
.pew-method-opt input { display: none; }

.pew-input-wrap { position: relative; }
#pew-contact {
  width: 100%; box-sizing: border-box;
  background: var(--plw-bg-input);
  border: 1px solid var(--plw-border);
  border-radius: 10px;
  padding: 11px 44px 11px 13px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--plw-text);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#pew-contact::placeholder { color: rgba(255, 255, 255, 0.2); }
#pew-contact:focus {
  border-color: var(--plw-purple-border);
  box-shadow: 0 0 0 3px var(--plw-purple-soft);
}
#pew-contact.pew-error {
  border-color: var(--plw-red);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}
#pew-send-btn {
  position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: var(--plw-yellow); border: none;
  border-radius: 7px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  color: var(--plw-yellow-text);
  font-weight: 700;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
#pew-send-btn:hover {
  background: var(--plw-yellow-dark);
  box-shadow: 0 4px 16px rgba(250, 204, 21, 0.2);
}
#pew-send-btn:active { transform: translateY(-50%) scale(0.93); }
#pew-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: translateY(-50%); }

.pew-err-msg {
  font-size: 11px; color: var(--plw-red);
  display: none;
  align-items: center; gap: 4px;
  position: relative;
  margin-top: 10px;
}
.pew-err-msg.show { display: flex; }

.pew-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(26, 26, 38, 0.3);
  border-top-color: var(--plw-yellow-text);
  border-radius: 50%;
  animation: pewSpin 0.7s linear infinite;
}

.pew-foot {
  font-size: 11px; color: var(--plw-text-faint);
  text-align: center; line-height: 1.4;
}

/* ---------- THANK YOU state ---------- */
#pew-ty {
  padding: 30px 20px; display: none;
  flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
}
#pew-ty.show { display: flex; }
.pew-ty-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--plw-green-soft);
  border: 1px solid rgba(74, 222, 128, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  animation: pewPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--plw-green);
}
.pew-ty-h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--plw-text);
  letter-spacing: -0.01em;
}
.pew-ty-p {
  font-size: 13px; color: var(--plw-text-faint);
  line-height: 1.55; max-width: 220px;
}
.pew-ty-p strong { color: var(--plw-yellow); }
.pew-ty-time {
  font-size: 11.5px; color: var(--plw-green);
  display: flex; align-items: center; gap: 5px;
  font-weight: 500;
}

@keyframes pewRiseIn {
  from { opacity: 0; transform: translateY(20px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pewPanelRise {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pewPopIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes pewBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
@keyframes pewSpin { to { transform: rotate(360deg); } }
@keyframes pewShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ---------- Mobile: slide up from bottom, full width ---------- */
@media (max-width: 480px) {
  #pew-panel {
    right: 0; bottom: 0; width: 100%;
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform-origin: bottom center;
    max-height: 92vh; overflow-y: auto;
  }
  #pew-panel.open { animation: pewSlideUpMobile 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
  #pew-panel::before {
    content: ''; display: block;
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    margin: 10px auto 0;
  }
  #pew-bubble { right: 12px; bottom: 16px; padding: 8px 14px 8px 8px; }
}
@keyframes pewSlideUpMobile {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  #pew-bubble, #pew-panel.open, .pew-ty-ring,
  .pew-bav::after, .pew-status-dot {
    animation: none !important;
  }
}