/* WhatsApp Chat Button Styles */

:root {
    --wa-primary-color: #097e64; /* Theme green matching the screenshot */
    --wa-button-color: #25d366; /* Classic WhatsApp brand green for the floating button */
    --wa-text-dark: #111b21;
    --wa-text-light: #ffffff;
    --wa-bg-chat: #efeae2; /* Authentic WhatsApp light chat background */
    --wa-bubble-bg: #ffffff;
    --wa-bubble-text: #111b21;
    --wa-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --wa-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
    --wa-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.25);
    --wa-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Floating WhatsApp Button */
.wa-chat-container .wa-float-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background-color: var(--wa-button-color) !important;
    color: var(--wa-text-light) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--wa-shadow-lg) !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    border: none !important;
    padding: 0 !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s, box-shadow 0.3s !important;
}

.wa-chat-container .wa-float-btn:hover {
    transform: scale(1.1) !important;
    background-color: #20ba5a !important;
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.4) !important;
}

.wa-chat-container .wa-float-btn svg {
    width: 32px !important;
    height: 32px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Chat Widget Container */
.wa-chat-widget {
    position: fixed;
    bottom: 95px;
    right: 20px;
    width: 380px;
    max-width: 90vw;
    height: auto;
    background-color: var(--wa-bg-chat);
    border-radius: 28px;
    box-shadow: var(--wa-shadow-lg);
    z-index: 999998;
    overflow: hidden;
    font-family: var(--wa-font-family);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.wa-chat-widget.wa-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Chat Header */
.wa-chat-header {
    background-color: var(--wa-primary-color);
    color: var(--wa-text-light);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.wa-chat-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-chat-brand svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.wa-chat-brand span {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.wa-chat-widget .wa-chat-close {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    color: var(--wa-text-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background 0.2s, transform 0.2s !important;
}

.wa-chat-widget .wa-chat-close:hover {
    background: rgba(0, 0, 0, 0.35) !important;
    transform: scale(1.05) !important;
}

.wa-chat-widget .wa-chat-close svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Chat Body (with background doodle pattern) */
.wa-chat-body {
    padding: 28px 24px 80px 24px;
    position: relative;
    background-color: var(--wa-bg-chat);
    /* SVG repeating pattern simulating WhatsApp background doodles */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%239C9C9C' fill-opacity='0.06'><path d='M10 20c0-2.8 2.2-5 5-5s5 2.2 5 5-2.2 5-5 5-5-2.2-5-5zm25 30c0-1.7 1.3-3 3-3s3 1.3 3 3-1.3 3-3 3-3-1.3-3-3zm20-25c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4zM20 60c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm45 10c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/><path d='M12 40h4v4h-4zm30 15h2v2h-2zm15-40h3v3h-3zm10 50h4v4h-4z'/></g></svg>");
    background-repeat: repeat;
    flex-grow: 1;
    min-height: 120px;
}

/* Message Bubble */
.wa-chat-bubble {
    background-color: var(--wa-bubble-bg);
    color: var(--wa-bubble-text);
    padding: 16px 20px;
    border-radius: 0 24px 24px 24px;
    box-shadow: var(--wa-shadow-sm);
    position: relative;
    max-width: 90%;
    font-size: 15px;
    line-height: 1.5;
    animation: wa-bounce-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

/* Speech Bubble Tail */
.wa-chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 14px 0;
    border-color: transparent var(--wa-bubble-bg) transparent transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.03));
}

/* Chat Footer / Action area */
.wa-chat-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    pointer-events: none; /* Let clicks pass to button underneath if any */
}

/* Powered by branding */
.wa-brand-link {
    font-size: 12px;
    color: rgba(9, 126, 100, 0.6);
    text-decoration: none;
    pointer-events: auto;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.wa-brand-link:hover {
    color: var(--wa-primary-color);
}

.wa-brand-link span {
    font-weight: 700;
}

/* Open Chat Pill Button */
.wa-chat-widget .wa-btn-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background-color: var(--wa-primary-color) !important;
    background: var(--wa-primary-color) !important;
    color: var(--wa-text-light) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: var(--wa-shadow-md) !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}

.wa-chat-widget .wa-btn-open:hover {
    background-color: #075e54 !important;
    background: #075e54 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(9, 126, 100, 0.35) !important;
}

.wa-chat-widget .wa-btn-open:active {
    transform: translateY(0) !important;
}

.wa-chat-widget .wa-btn-open svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
    display: inline-block !important;
    transition: transform 0.2s !important;
}

.wa-chat-widget .wa-btn-open:hover svg {
    transform: translate(2px, -2px) !important;
}

/* Animation keyframes */
@keyframes wa-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive adjustment */
@media (max-width: 480px) {
    .wa-chat-widget {
        bottom: 85px;
        right: 15px;
        left: 15px;
        width: auto;
        max-width: calc(100% - 30px);
        border-radius: 20px;
    }
    .wa-float-btn {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
    }
    .wa-chat-body {
        padding-bottom: 75px;
    }
}


/* Admin Settings Page Styles */
.wa-settings-wrap {
    max-width: 800px;
    margin: 30px 0 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wa-settings-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 24px 32px;
    margin-bottom: 24px;
}

.wa-settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f0f0f1;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.wa-settings-header svg {
    width: 32px;
    height: 32px;
    fill: #25d366;
}

.wa-settings-header h1 {
    margin: 0;
    font-size: 22px;
    color: #1d2327;
}

.wa-form-group {
    margin-bottom: 20px;
}

.wa-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d2327;
}

.wa-form-group input[type="text"],
.wa-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wa-form-group input[type="text"]:focus,
.wa-form-group textarea:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 1px #25d366;
    outline: 2px solid transparent;
}

.wa-form-group p.description {
    margin-top: 6px;
    font-size: 13px;
    color: #646970;
    font-style: italic;
}

.wa-submit-btn {
    background: var(--wa-primary-color) !important;
    border-color: var(--wa-primary-color) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 6px 18px !important;
    font-size: 14px !important;
    height: auto !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background 0.2s !important;
}

.wa-submit-btn:hover {
    background: #075e54 !important;
    border-color: #075e54 !important;
}