/**
 * WA Chat for WooCommerce - Public CSS
 * Styling untuk semua elemen frontend yang tampil ke pengunjung.
 *
 * Struktur:
 * 1. CSS Variables
 * 2. Widget Chat (Floating Button)
 * 3. Panel Multi-Agent
 * 4. Tombol Produk
 * 5. Tombol Checkout
 * 6. Tombol Thank You Page
 * 7. Elementor Widget Styles
 * 8. Responsive / Mobile
 */

/* ══════════════════════════════════════════════
   1. CSS VARIABLES
══════════════════════════════════════════════ */
:root {
    --wachat-brand:        #25D366;
    --wachat-brand-dark:   #1ebe5d;
    --wachat-white:        #ffffff;
    --wachat-text:         #333333;
    --wachat-shadow:       0 4px 16px rgba(0, 0, 0, 0.18);
    --wachat-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.26);
    --wachat-radius:       50px;
    --wachat-radius-panel: 12px;
    --wachat-transition:   all 0.25s ease;
    --wachat-z-index:      9999;
    --wachat-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ══════════════════════════════════════════════
   2. WIDGET CHAT — FLOATING BUTTON
══════════════════════════════════════════════ */
#wachat-widget {
    position: fixed;
    z-index: var(--wachat-z-index);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: var(--wachat-font);
}

/* Posisi */
#wachat-widget.wachat-bottom-right {
    bottom: 24px;
    right:  24px;
}
#wachat-widget.wachat-bottom-left {
    bottom: 24px;
    left:   24px;
    align-items: flex-start;
}

/* Visibilitas device */
@media (max-width: 767px) {
    #wachat-widget.wachat-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
    #wachat-widget.wachat-mobile-only  { display: none !important; }
}

/* ── Tombol Trigger ── */
#wachat-trigger.wachat-trigger {
    display:         flex;
    align-items:     center;
    gap:             10px;
    background:      var(--wachat-brand);
    color:           var(--wachat-white);
    border:          none;
    border-radius:   var(--wachat-radius);
    padding:         14px 20px;
    cursor:          pointer;
    box-shadow:      var(--wachat-shadow);
    transition:      var(--wachat-transition);
    font-size:       15px;
    font-weight:     600;
    font-family:     var(--wachat-font);
    white-space:     nowrap;
    outline:         none;
    -webkit-tap-highlight-color: transparent;
}

#wachat-trigger.wachat-trigger:hover {
    background:  var(--wachat-brand-dark);
    box-shadow:  var(--wachat-shadow-hover);
    transform:   translateY(-2px);
}

#wachat-trigger.wachat-trigger:active {
    transform: translateY(0);
}

.wachat-trigger-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.wachat-trigger-label {
    font-size: 14px;
}

/* Animasi pulse saat pertama load */
@keyframes wachat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

#wachat-trigger.wachat-pulse {
    animation: wachat-pulse 2s ease-in-out 3;
}

/* ══════════════════════════════════════════════
   3. PANEL MULTI-AGENT
══════════════════════════════════════════════ */
.wachat-panel {
    width:            320px;
    background:       var(--wachat-white);
    border-radius:    var(--wachat-radius-panel);
    box-shadow:       var(--wachat-shadow);
    overflow:         hidden;
    transform-origin: bottom right;
    transform:        scale(0.8) translateY(20px);
    opacity:          0;
    pointer-events:   none;
    transition:       transform 0.2s ease, opacity 0.2s ease;
}

.wachat-bottom-left .wachat-panel {
    transform-origin: bottom left;
}

.wachat-panel.wachat-panel-open {
    transform:    scale(1) translateY(0);
    opacity:      1;
    pointer-events: auto;
}

/* Header panel */
.wachat-panel-header {
    padding:      18px 20px;
    background:   var(--wachat-brand);
    color:        var(--wachat-white);
}

.wachat-panel-header-text strong {
    display:     block;
    font-size:   15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.wachat-panel-header-text span {
    display:   block;
    font-size: 13px;
    opacity:   0.9;
    line-height: 1.4;
}

/* Body panel */
.wachat-panel-body {
    padding: 8px 0;
    max-height: 320px;
    overflow-y: auto;
}

/* Item agen */
.wachat-agent-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         12px 20px;
    text-decoration: none;
    color:           var(--wachat-text);
    transition:      background 0.15s ease;
    border-left:     3px solid transparent;
}

.wachat-agent-item:hover {
    background:  #f5fdf8;
    border-color: var(--wachat-brand);
    color:       var(--wachat-text);
    text-decoration: none;
}

.wachat-agent-item.wachat-agent-recommended {
    border-color: var(--wachat-brand);
    background:   #f0fbf4;
}

/* Avatar */
.wachat-agent-avatar-wrap {
    position:    relative;
    flex-shrink: 0;
}

.wachat-agent-avatar {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}

.wachat-agent-initials {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--wachat-brand);
    color:           var(--wachat-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    font-weight:     700;
}

/* Status dot (online) */
.wachat-agent-status-dot {
    position:      absolute;
    bottom:        1px;
    right:         1px;
    width:         11px;
    height:        11px;
    background:    #44c767;
    border:        2px solid #fff;
    border-radius: 50%;
}

/* Info teks */
.wachat-agent-info {
    flex: 1;
    min-width: 0;
}

.wachat-agent-info strong {
    display:       block;
    font-size:     14px;
    font-weight:   600;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.wachat-agent-info span {
    display:   block;
    font-size: 12px;
    color:     #888;
    margin-top: 2px;
}

/* Arrow WA icon */
.wachat-agent-arrow {
    flex-shrink: 0;
    opacity:     0.7;
    display:     flex;
    align-items: center;
}

/* ══════════════════════════════════════════════
   4. TOMBOL BELI VIA WA — HALAMAN PRODUK
══════════════════════════════════════════════ */
.wachat-product-btn-wrap {
    margin-top: 12px;
}

a.wachat-product-btn,
a.wachat-product-btn:link,
a.wachat-product-btn:visited {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      var(--wachat-brand);
    color:           var(--wachat-white) !important;
    border:          2px solid var(--wachat-brand);
    border-radius:   4px;
    padding:         12px 24px;
    font-size:       15px;
    font-weight:     600;
    font-family:     var(--wachat-font);
    text-decoration: none;
    cursor:          pointer;
    transition:      var(--wachat-transition);
    width:           100%;
    box-sizing:      border-box;
}

a.wachat-product-btn:hover,
a.wachat-product-btn:focus {
    background:      var(--wachat-brand-dark);
    border-color:    var(--wachat-brand-dark);
    color:           var(--wachat-white) !important;
    text-decoration: none;
    transform:       translateY(-1px);
    box-shadow:      var(--wachat-shadow);
}

a.wachat-product-btn svg {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   5. TOMBOL CHECKOUT VIA WA
══════════════════════════════════════════════ */
.wachat-checkout-wrap {
    margin-top: 16px;
    text-align: center;
}

.wachat-checkout-divider {
    display:      flex;
    align-items:  center;
    margin-bottom: 12px;
    color:         #aaa;
    font-size:     13px;
}

.wachat-checkout-divider::before,
.wachat-checkout-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #ddd;
}

.wachat-checkout-divider span {
    padding: 0 12px;
}

button.wachat-checkout-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      var(--wachat-brand);
    color:           var(--wachat-white);
    border:          2px solid var(--wachat-brand);
    border-radius:   4px;
    padding:         13px 28px;
    font-size:       15px;
    font-weight:     600;
    font-family:     var(--wachat-font);
    cursor:          pointer;
    transition:      var(--wachat-transition);
    width:           100%;
    box-sizing:      border-box;
}

button.wachat-checkout-btn:hover {
    background:   var(--wachat-brand-dark);
    border-color: var(--wachat-brand-dark);
    transform:    translateY(-1px);
    box-shadow:   var(--wachat-shadow);
}

button.wachat-checkout-btn:disabled,
button.wachat-checkout-btn.wachat-loading {
    opacity: 0.7;
    cursor:  not-allowed;
    transform: none;
}

.wachat-checkout-note {
    margin-top: 8px;
    font-size:  12px;
    color:      #888;
}

/* ══════════════════════════════════════════════
   6. TOMBOL THANK YOU PAGE
══════════════════════════════════════════════ */
.wachat-thankyou-wrap {
    margin:        24px 0;
    padding:       20px;
    background:    #f0fbf4;
    border:        1px solid #c3e6cd;
    border-radius: 8px;
    text-align:    center;
}

.wachat-thankyou-info {
    margin-bottom: 12px;
    font-size:     14px;
    color:         #555;
}

a.wachat-thankyou-btn,
a.wachat-thankyou-btn:link,
a.wachat-thankyou-btn:visited {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      var(--wachat-brand);
    color:           var(--wachat-white) !important;
    border:          2px solid var(--wachat-brand);
    border-radius:   4px;
    padding:         12px 28px;
    font-size:       15px;
    font-weight:     600;
    font-family:     var(--wachat-font);
    text-decoration: none;
    transition:      var(--wachat-transition);
}

a.wachat-thankyou-btn:hover {
    background:      var(--wachat-brand-dark);
    border-color:    var(--wachat-brand-dark);
    color:           var(--wachat-white) !important;
    text-decoration: none;
    box-shadow:      var(--wachat-shadow);
}

/* ══════════════════════════════════════════════
   7. ELEMENTOR WIDGET STYLES
══════════════════════════════════════════════ */

/* Mode tombol */
a.wachat-el-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      #25D366;
    color:           #fff;
    border:          none;
    border-radius:   6px;
    padding:         12px 24px;
    font-size:       15px;
    font-weight:     600;
    font-family:     var(--wachat-font);
    text-decoration: none;
    cursor:          pointer;
    transition:      var(--wachat-transition);
    line-height:     1;
}

a.wachat-el-btn:hover {
    opacity:         0.9;
    text-decoration: none;
    color:           #fff;
    transform:       translateY(-1px);
    box-shadow:      var(--wachat-shadow);
}

a.wachat-el-btn svg {
    flex-shrink: 0;
    fill:        currentColor;
}

/* Mode ikon */
a.wachat-el-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    cursor:          pointer;
    transition:      var(--wachat-transition);
    line-height:     1;
}

a.wachat-el-icon:hover {
    opacity:     0.8;
    transform:   scale(1.1);
}

a.wachat-el-icon svg {
    fill:        currentColor;
    display:     block;
}

/* Notice di editor Elementor */
.wachat-el-notice {
    padding:       12px 16px;
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 6px;
    font-size:     13px;
    color:         #664d03;
}

/* ══════════════════════════════════════════════
   8. RESPONSIVE / MOBILE
══════════════════════════════════════════════ */
@media (max-width: 480px) {
    .wachat-panel {
        width:  calc(100vw - 32px);
        right:  0;
    }

    #wachat-widget.wachat-bottom-right {
        bottom: 16px;
        right:  16px;
    }

    #wachat-widget.wachat-bottom-left {
        bottom: 16px;
        left:   16px;
    }

    #wachat-trigger.wachat-trigger {
        padding: 12px 16px;
    }
}