/* ═══════════════════════════════════════════════
   WC WhatsApp Button – Frontend Styles
   ═══════════════════════════════════════════════ */

:root {
    --wcwab-green:        #25D366;
    --wcwab-green-hover:  #1ebe59;
    --wcwab-green-dark:   #128C7E;
    --wcwab-white:        #ffffff;
    --wcwab-radius:       6px;
    --wcwab-font:         inherit;
    --wcwab-font-size:    1em;
    --wcwab-padding:      0.75em 1.4em;
    --wcwab-gap:          0.5em;
    --wcwab-transition:   0.2s ease;
    --wcwab-icon-size:    1.15em;
}

/* ── Base button ────────────────────────────── */
.wcwab-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--wcwab-gap);
    padding:         var(--wcwab-padding);
    background:      var(--wcwab-green);
    color:           var(--wcwab-white) !important;
    font-family:     var(--wcwab-font);
    font-size:       var(--wcwab-font-size);
    font-weight:     600;
    line-height:     1.2;
    text-decoration: none !important;
    border:          none;
    border-radius:   var(--wcwab-radius);
    cursor:          pointer;
    transition:      background var(--wcwab-transition),
                     transform  var(--wcwab-transition),
                     box-shadow var(--wcwab-transition);
    box-shadow:      0 2px 8px rgba(37, 211, 102, 0.35);
    width:           100%;
    box-sizing:      border-box;
    text-align:      center;
}

.wcwab-btn:hover,
.wcwab-btn:focus {
    background:  var(--wcwab-green-hover);
    box-shadow:  0 4px 14px rgba(37, 211, 102, 0.5);
    transform:   translateY(-1px);
    color:       var(--wcwab-white) !important;
    text-decoration: none !important;
    outline:     none;
}

.wcwab-btn:active {
    transform:  translateY(0);
    box-shadow: 0 1px 4px rgba(37, 211, 102, 0.3);
}

/* ── Icon ───────────────────────────────────── */
.wcwab-icon {
    width:          var(--wcwab-icon-size);
    height:         var(--wcwab-icon-size);
    fill:           var(--wcwab-white);
    flex-shrink:    0;
    display:        inline-block;
    vertical-align: middle;
}

/* ── Label ──────────────────────────────────── */
.wcwab-label {
    white-space: nowrap;
}

/* ── Single product page ────────────────────── */
.single-product .wcwab-btn--single {
    margin-top: 0.75em;
}

/* ── Archive / shop / grid ──────────────────── */
.wcwab-btn--archive {
    margin-top:  0.5em;
    font-size:   0.9em;
    --wcwab-padding: 0.6em 1.1em;
}

/* ── Pulse animation on hover ───────────────── */
@keyframes wcwab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.wcwab-btn:hover .wcwab-icon {
    animation: wcwab-pulse 1s infinite;
}

/* ── Responsive tweaks ──────────────────────── */
@media (max-width: 480px) {
    .wcwab-btn {
        font-size: 0.92em;
        --wcwab-padding: 0.65em 1em;
    }
}

/* ── Compatibility with common themes ───────── */

/* Storefront / WooCommerce default */
.woocommerce .wcwab-btn,
.woocommerce-page .wcwab-btn {
    display: inline-flex !important;
}

/* Flatsome */
.wcwab-btn.button { background: var(--wcwab-green) !important; }

/* Divi */
#page-container .wcwab-btn { background: var(--wcwab-green) !important; }

/* Astra */
.ast-separate-container .wcwab-btn { background: var(--wcwab-green) !important; }

/* GeneratePress */
.generate-columns-container .wcwab-btn { background: var(--wcwab-green) !important; }

/* OceanWP */
.wcwab-btn.button.alt { background: var(--wcwab-green) !important; }

/* Elementor product widgets */
.elementor-widget-woocommerce-product-images ~ * .wcwab-btn { margin-top: 0.5em; }