#chat-form {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #746db1; border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#chat-form svg {
fill: white;
} #chatbot-widget {
position: fixed;
bottom: 70px;
right: 75px;
width: 450px;
background-color: #f5f0fc; border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
z-index: 9999;
}
#chat-header {
background-color: #746db1; color: #fff;
padding: 15px;
border-radius: 10px 10px 0 0;
text-align: left;
}
#chat-header h2 {
margin: 0;
font-size: 30px;
font-weight: 700;
}
#chat-header p {
margin: 5px 0 0;
font-size: 14px;
} #chat-content {
padding: 15px;
background-color: #fff;
} #close-chat {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #746db1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
cursor: pointer;
z-index: 1001;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#close-chat:hover {
background-color: #5c4cb2; } .retailsphere-chat .wpcf7-form {
font-family: Arial, sans-serif;
}
.retailsphere-chat .wpcf7-form input,
.retailsphere-chat .wpcf7-form textarea {
width: 400px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.retailsphere-chat .wpcf7-form input[type="submit"] {
background-color: #746db1;
color: white;
border: none;
cursor: pointer;
padding: 10px 20px;
border-radius: 5px;
width: 100%;
font-size: 20px;
text-transform: uppercase;
}
.retailsphere-chat .wpcf7-form input[type="submit"]:hover {
background-color: #5c4cb2;
}
.retailsphere-chat .wpcf7-form textarea {
height: 50px;
}
.wpcf7 form.sent .wpcf7-response-output {
color: #46b450 !important;
border: none !important;
}
.wpcf7 form:not(.sent) .wpcf7-response-output {
color: red;
border: none !important;
}