/* St. Lucia WhatsApp Widget Pro */
.wa-widget-wrapper, .wa-widget-wrapper * {
    box-sizing: border-box;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent !important;
}
.wa-widget-wrapper button,
.wa-widget-wrapper a,
.wa-widget-wrapper input {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.wa-widget-wrapper {
    position: fixed;
    bottom: 24px;
    z-index: 999999;
}
.wa-widget-wrapper.wa-pos-bottom-right { right: 24px; }
.wa-widget-wrapper.wa-pos-bottom-left  { left: 24px; }

.wa-trigger-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-color: var(--wa-trigger-bg);
    color: var(--wa-trigger-icon);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    transition: transform .25s ease;
    position: relative;
}
.wa-trigger-btn:hover { transform: scale(1.06); }
.wa-trigger-btn:active {
    transform: scale(.96);
}
.wa-trigger-btn .wa-trigger-icon-close { display: none; }
.wa-widget-wrapper.wa-open .wa-trigger-btn .wa-trigger-icon-open { display: none; }
.wa-widget-wrapper.wa-open .wa-trigger-btn .wa-trigger-icon-close { display: inline-flex; }

.wa-trigger-btn.wa-pulse::before,
.wa-trigger-btn.wa-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--wa-trigger-bg);
    opacity: .5;
    animation: waPulse 2s infinite;
    z-index: -1;
}
.wa-trigger-btn.wa-pulse::after { animation-delay: 1s; }
@keyframes waPulse {
    0%   { transform: scale(1);    opacity: .5; }
    100% { transform: scale(1.8);  opacity: 0;  }
}

.wa-box {
    position: absolute;
    bottom: 78px;
    width: min(340px, calc(100vw - 32px));
    background-color: var(--wa-body-bg);
    border-radius: var(--wa-border-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: hidden;
    transform: translateY(20px) scale(.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
	will-change: transform, opacity;
	backface-visibility: hidden;

}
.wa-widget-wrapper.wa-pos-bottom-right .wa-box { right: 0; }
.wa-widget-wrapper.wa-pos-bottom-left  .wa-box { left: 0;  }
.wa-widget-wrapper.wa-open .wa-box {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.wa-box-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background-color: var(--wa-header-bg);
    color: var(--wa-header-txt);
}
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background:#fff; }
.wa-agent { flex: 1; min-width: 0; }
.wa-agent-name { font-weight: 600; font-size: 14px; }
.wa-agent-status { font-size: 12px; opacity: .85; }
.wa-close-btn {
    background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px;
}

.wa-box-body {
    padding: 16px;
    max-height: min(380px, 60vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.wa-msg-bubble {
    background-color: var(--wa-bubble-bg);
    color: var(--wa-bubble-txt);
    padding: 12px 14px;
    border-radius: var(--wa-border-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 14px;
}
.wa-msg-time { font-size: 11px; opacity: .6; margin-top: 6px; text-align: right; }

.wa-actions { display: flex; flex-direction: column; gap: 8px; }
.wa-action-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background-color: var(--wa-btn-bg);
    color: var(--wa-btn-txt);
    text-decoration: none;
    border-radius: calc(var(--wa-border-radius) / 2);
    font-size: 14px; font-weight: 500;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.wa-action-btn:hover {
    background-color: var(--wa-btn-hover-bg);
    color: var(--wa-btn-hover-txt);
    transform: translateY(-1px);
}
.wa-action-icon { display: inline-flex; width: 20px; height: 20px; }
.wa-action-icon img,
.wa-action-icon svg{
    width:100%;
    height:100%;
    display:block;
    flex-shrink:0;
}
.wa-box-footer { padding: 10px 14px 14px; border-top: 1px solid rgba(0,0,0,.06); }
.wa-gdpr { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: #555; margin-bottom: 8px; }
.wa-input-row{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    overflow:hidden;
}
.wa-chat-input{

    flex:1 1 auto;

    width:100%;
    min-width:0;

    border:1px solid rgba(0,0,0,.08);
    background-color:var(--wa-input-bg);

    padding:10px 12px;

    font-size:16px;

    border-radius:calc(var(--wa-border-radius) / 2);
}
.wa-send-btn{

    flex:0 0 40px;

    width:40px !important;
    height:40px !important;

    min-width:40px;
    min-height:40px;

    padding:0 !important;

    border-radius:50% !important;

    aspect-ratio:1 / 1;

    background-color:var(--wa-send-bg);
    color:var(--wa-send-icon);

    border:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    transition:opacity .2s ease;

    touch-action:manipulation;
}
.wa-send-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 420px) {

    .wa-widget-wrapper{
        right:16px !important;
        left:auto !important;
        bottom:16px;
    }

    .wa-box{
        width: calc(100vw - 32px);
        max-height: calc(100vh - 100px);

        display:flex;
        flex-direction:column;
    }

    .wa-box-body{
        flex:1;
        overflow-y:auto;
        max-height:none;
    }

    .wa-box-footer{
        flex-shrink:0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wa-box,
    .wa-trigger-btn,
    .wa-trigger-btn::before,
    .wa-trigger-btn::after{
        animation:none !important;
        transition:none !important;
    }
}


.wa-send-btn svg{
    width:20px !important;
    height:20px !important;

    min-width:20px;
    min-height:20px;

    display:block;
    flex-shrink:0;

    fill:currentColor !important;
}
.wa-widget-wrapper svg{
    overflow:visible;
    vertical-align:middle;
    display:block;
}

.wa-widget-wrapper img,
.wa-widget-wrapper svg{
    max-width:none;
}