/* * Shailesh LeadCapture Pro - UI v30.0
 * Merged & Optimized for Chatbot 1 & 2
 */

/* --- Floating Launcher --- */
.walp-launcher { 
    position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    cursor: pointer; z-index: 999999; box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    background: #000; /* Black launcher as per new UI */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.walp-launcher:hover { transform: scale(1.1); }
.walp-launcher img { width: 30px; height: 30px; filter: brightness(0) invert(1); }

/* --- Widget Window --- */
#walp-chat-window {
    display: none; /* Default hidden */
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    width: 350px;
    z-index: 9999999 !important; /* Sabse upar dikhne ke liye */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* --- Header Section (Strict Screenshot Match) --- */
.walp-header { background: #000 !important; color: #fff; padding: 20px 15px; display: flex; align-items: center; gap: 12px; position: relative; }
.walp-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #333; }
.walp-agent-name { font-weight: bold; font-size: 16px; display: block; }
.walp-status { font-size: 12px; display: flex; align-items: center; margin-top: 4px; color: #bbb; }
.walp-dot.online { height: 10px; width: 10px; border-radius: 50%; background: #25d366; display: inline-block; margin-right: 6px; box-shadow: 0 0 5px #25d366; }
.walp-dot.offline { height: 10px; width: 10px; border-radius: 50%; background: #ff4d4d; display: inline-block; margin-right: 6px; }
.walp-close { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 24px; color: #fff; opacity: 0.7; transition: 0.3s; }
.walp-close:hover { opacity: 1; transform: rotate(90deg); }

/* --- Body Section --- */
.walp-body { padding: 20px; background: #fdfdfd; max-height: 480px; overflow-y: auto; }

/* --- Step 1: Flow Buttons (Hover Fix) --- */
.walp-msg-bubble { background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 15px; color: #444; border-left: 4px solid #000; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

.walp-flow-btn {
    display: block; width: 100%; padding: 15px; margin-bottom: 12px; 
    border: 1px solid #eee; border-radius: 6px; background: #fff; 
    text-align: left; font-size: 14px; font-weight: 500; cursor: pointer; 
    transition: all 0.3s ease; color: #333; text-transform: uppercase; letter-spacing: 0.5px;
}
/* Fixed Hover: Background black, text white as per screenshot */
.walp-flow-btn:hover { background: #000 !important; color: #fff !important; transform: translateX(5px); border-color: #000; }

/* --- Step 2: Form Fields (Hover Fix) --- */
.walp-input {
    width: 100%; padding: 12px; margin-bottom: 12px;
    border: 1px solid #ddd; border-radius: 4px;
    font-size: 14px; background: #fff; box-sizing: border-box;
    transition: 0.3s; color: #333;
}
.walp-input:focus { border-color: #000; outline: none; }

/* Captcha & Consent */
.walp-captcha-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 15px; font-weight: bold; font-size: 18px; color: #444;
}
.walp-input-small {
    width: 70px; padding: 10px; border: 1px solid #ddd;
    border-radius: 4px; text-align: center; font-size: 16px;
}

/* --- Consent Checkbox --- */
.walp-consent-area {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px; font-size: 13px; color: #666;
}

/* --- Submit Button (Strict Black Style) --- */
.walp-submit {
    background: #000 !important; color: #fff !important;
    width: 100%; padding: 15px; border: none; border-radius: 4px;
    font-weight: bold; cursor: pointer; font-size: 15px;
    text-transform: uppercase; transition: 0.3s;
}
.walp-submit:hover { background: #333 !important; }

/* --- Animations & Responsive --- */
@keyframes walpSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { #walp-chat-window { width: 90%; right: 5%; bottom: 85px; } .walp-launcher { bottom: 15px; right: 15px; } }