/* WhatsApp Lead Pro - Frontend Styles v1.1
 * © DigitalCubeDesigns | digitalcubedesigns.com
 */
#wlp-wrapper,
#wlp-wrapper * {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: normal !important;
}

#wlp-wrapper {
  position: fixed !important;
  z-index: 999999 !important;
}
#wlp-wrapper.wlp-pos-bottom-right { bottom: 24px !important; right: 24px !important; }
#wlp-wrapper.wlp-pos-bottom-left  { bottom: 24px !important; left:  24px !important; }

/* ── Floating Button ── */
.wlp-toggle-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--wlp-color, #25D366) !important;
  border: none !important;
  border-radius: var(--wlp-btn-radius, 50px) !important;
  padding: 14px 20px 14px 16px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.22) !important;
  color: white !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  overflow: visible !important;
  text-decoration: none !important;
  outline: none !important;
}
.wlp-toggle-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.28) !important;
  background: var(--wlp-color, #25D366) !important;
  color: white !important;
}
.wlp-toggle-btn:focus { outline: none !important; }
.wlp-btn-label { white-space: nowrap !important; }

/* Button shape variants */
.wlp-btn-shape-circle .wlp-toggle-btn {
  border-radius: 50% !important;
  padding: 16px !important;
  width: 60px !important; height: 60px !important;
  justify-content: center !important;
}
.wlp-btn-shape-circle .wlp-btn-label { display: none !important; }
.wlp-btn-shape-square .wlp-toggle-btn { border-radius: 12px !important; }

/* Pulse ring */
.wlp-pulse {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: inherit !important;
  background: var(--wlp-color, #25D366) !important;
  opacity: .4 !important;
  animation: wlp-pulse 2.2s infinite !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
@keyframes wlp-pulse {
  0%   { transform: scale(1);    opacity: .4; }
  70%  { transform: scale(1.18); opacity: 0;  }
  100% { transform: scale(1.18); opacity: 0;  }
}
.wlp-pulse-none { animation: none !important; opacity: 0 !important; }
@keyframes wlp-shake {
  0%,100%{transform:rotate(0)} 15%{transform:rotate(-15deg)} 30%{transform:rotate(13deg)} 45%{transform:rotate(-10deg)} 60%{transform:rotate(7deg)} 75%{transform:rotate(-4deg)}
}
.wlp-anim-shake .wlp-toggle-btn svg { animation: wlp-shake 1.8s ease infinite 2s !important; }
@keyframes wlp-bounce {
  0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 60%{transform:translateY(-4px)}
}
.wlp-anim-bounce .wlp-toggle-btn { animation: wlp-bounce 2s ease infinite !important; }

/* ── Popup Box ── */
.wlp-popup {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  width: 340px !important;
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
  display: none !important;
  animation: wlp-slideUp .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.wlp-pos-bottom-right .wlp-popup { right: 0 !important; }
.wlp-pos-bottom-left  .wlp-popup { left:  0 !important; }
.wlp-popup.wlp-open { display: block !important; }

@keyframes wlp-slideUp {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.wlp-popup-header {
  background: var(--wlp-color, #25D366) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  color: white !important;
}
.wlp-popup-header-icon {
  background: rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.wlp-popup-header-text { flex: 1 !important; }
.wlp-popup-header-text strong { display: block !important; font-size: 15px !important; color: white !important; font-weight: 700 !important; }
.wlp-popup-header-text span   { font-size: 12px !important; opacity: .88 !important; color: white !important; display: block !important; }

/* Close button — hidden */
.wlp-close-btn {
  background: rgba(255,255,255,.18) !important;
  border: none !important;
  border-radius: 50% !important;
  color: white !important;
  font-size: 18px !important;
  cursor: pointer !important;
  width: 30px !important; height: 30px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background .15s !important;
  flex-shrink: 0 !important;
}
.wlp-close-btn:hover { background: rgba(255,255,255,.35) !important; }
.wlp-close-btn { display: none !important; }

/* ── Lead Form ── */
.wlp-lead-form { padding: 16px !important; background: white !important; }
.wlp-form-intro { font-size: 13px !important; color: #555 !important; margin: 0 0 12px !important; line-height: 1.5 !important; }
.wlp-field { margin-bottom: 10px !important; }
.wlp-field label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 4px !important;
  text-transform: none !important;
}
.wlp-field input[type=text],
.wlp-field input[type=tel],
.wlp-field input[type=email],
.wlp-field textarea,
.wlp-field select {
  width: 100% !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
  color: #333 !important;
  outline: none !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
  background: #fafafa !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.wlp-field input:focus,
.wlp-field textarea:focus,
.wlp-field select:focus {
  border-color: var(--wlp-color, #25D366) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(37,211,102,.1) !important;
}
.wlp-field textarea { resize: none !important; height: 72px !important; }

/* ── Submit Button — FIXED ── */
.wlp-submit-btn {
  width: 100% !important;
  background: var(--wlp-color, #25D366) !important;
  color: white !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 13px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  transition: background .2s, transform .15s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 14px rgba(37,211,102,.35) !important;
  text-decoration: none !important;
  outline: none !important;
}
.wlp-submit-btn:hover {
  background: #1ea855 !important;
  transform: translateY(-1px) !important;
  color: white !important;
}
.wlp-submit-btn:focus { outline: none !important; }

/* ── Agent List ── */
.wlp-agents-list { padding: 6px 0 !important; background: white !important; }
.wlp-agent-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background .15s !important;
}
.wlp-agent-item:last-child { border-bottom: none !important; }
.wlp-agent-item:hover { background: #f9fffe !important; text-decoration: none !important; }
.wlp-agent-avatar {
  position: relative !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: var(--wlp-color, #25D366) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: white !important; font-size: 18px !important; font-weight: 700 !important;
  flex-shrink: 0 !important; overflow: hidden !important;
}
.wlp-agent-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.wlp-online-dot {
  position: absolute !important; bottom: 1px !important; right: 1px !important;
  width: 12px !important; height: 12px !important;
  background: #44b700 !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
}
.wlp-agent-info { flex: 1 !important; }
.wlp-agent-info strong { display: block !important; font-size: 14px !important; color: #111 !important; }
.wlp-agent-info span  { font-size: 12px !important; color: #888 !important; }
.wlp-agent-arrow { color: #ccc !important; font-size: 22px !important; line-height: 1 !important; }

/* Offline */
.wlp-offline-notice {
  background: #fff8e1 !important; border-radius: 8px !important;
  padding: 10px 14px !important; margin: 10px 16px 14px !important;
  font-size: 12px !important; color: #795548 !important;
  display: flex !important; gap: 6px !important; align-items: center !important;
  border: 1px solid #ffe082 !important;
}

/* Error / powered by */
.wlp-error { color: #e53935 !important; font-size: 12px !important; margin-top: 6px !important; }
.wlp-powered {
  text-align: center !important;
  padding: 8px !important;
  font-size: 10px !important;
  color: #bbb !important;
  background: white !important;
  border-top: 1px solid #f5f5f5 !important;
}
.wlp-powered a { color: #bbb !important; text-decoration: none !important; }

@media (max-width: 420px) {
  .wlp-popup { width: calc(100vw - 32px) !important; }
  .wlp-pos-bottom-right { right: 10px !important; bottom: 14px !important; }
  .wlp-pos-bottom-left  { left:  10px !important; bottom: 14px !important; }
}

/* ── Hover to open popup ── */
#wlp-wrapper:hover .wlp-popup {
  display: block !important;
  animation: wlp-slideUp .22s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── Business Hours Bar ── */
.wlp-biz-hours-bar {
  font-size: 12px !important;
  padding: 7px 14px !important;
  text-align: center !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.wlp-biz-open   { background: #e8f5e9 !important; color: #2e7d32 !important; }
.wlp-biz-closed { background: #fff3e0 !important; color: #e65100 !important; }

/* ── Button Size Variants ── */
.wlp-size-small  .wlp-toggle-btn { padding: 10px 16px 10px 12px !important; font-size: 13px !important; }
.wlp-size-medium .wlp-toggle-btn { padding: 14px 20px 14px 16px !important; font-size: 15px !important; }
.wlp-size-large  .wlp-toggle-btn { padding: 18px 26px 18px 20px !important; font-size: 17px !important; }
.wlp-size-small  .wlp-toggle-btn svg { width: 20px !important; height: 20px !important; }
.wlp-size-medium .wlp-toggle-btn svg { width: 26px !important; height: 26px !important; }
.wlp-size-large  .wlp-toggle-btn svg { width: 32px !important; height: 32px !important; }

/* Circle shape size variants */
.wlp-btn-shape-circle.wlp-size-small  .wlp-toggle-btn { width: 48px !important; height: 48px !important; padding: 0 !important; }
.wlp-btn-shape-circle.wlp-size-medium .wlp-toggle-btn { width: 60px !important; height: 60px !important; padding: 0 !important; }
.wlp-btn-shape-circle.wlp-size-large  .wlp-toggle-btn { width: 72px !important; height: 72px !important; padding: 0 !important; }

/* ── Mobile Button Style ── */
/* auto-circle: automatically circle on mobile */
@media (max-width: 768px) {
  #wlp-wrapper.wlp-mobile-circle .wlp-toggle-btn {
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  #wlp-wrapper.wlp-mobile-circle .wlp-btn-label {
    display: none !important;
  }
  #wlp-wrapper.wlp-mobile-circle .wlp-toggle-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* mobile-icon-text: keep pill on mobile too (default) */
@media (max-width: 480px) {
  #wlp-wrapper:not(.wlp-mobile-circle) .wlp-btn-label {
    display: none !important;
  }
  #wlp-wrapper:not(.wlp-mobile-circle) .wlp-toggle-btn {
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}