/* ==========================================================================
   WooCommerce WhatsApp Order – Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared button base
   -------------------------------------------------------------------------- */
.wwo-product-btn,
.wwo-cart-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5em;
    width:           100%;
    margin-top:      0.75em;
    padding:         0.85em 1.4em;
    border-radius:   6px;
    font-size:       1rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    color:           #ffffff !important;
    text-decoration: none !important;
    cursor:          pointer;
    transition:      filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow:      0 4px 14px rgba(37, 211, 102, 0.35);
}

/* --------------------------------------------------------------------------
   Hover / focus / active states
   -------------------------------------------------------------------------- */
.wwo-product-btn:hover,
.wwo-cart-btn:hover {
    filter:     brightness(1.08);
    transform:  translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
    color:      #ffffff !important;
}

.wwo-product-btn:active,
.wwo-cart-btn:active {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.wwo-product-btn:focus,
.wwo-cart-btn:focus {
    outline:        3px solid rgba(37, 211, 102, 0.5);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   WhatsApp SVG icon (embedded as a pseudo-element via data-URI)
   -------------------------------------------------------------------------- */
.wwo-product-btn::before,
.wwo-cart-btn::before {
    content:            '';
    display:            inline-block;
    width:              1.25em;
    height:             1.25em;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16 0C7.163 0 0 7.163 0 16c0 2.84.742 5.5 2.036 7.82L0 32l8.393-2.002A15.942 15.942 0 0016 32c8.837 0 16-7.163 16-16S24.837 0 16 0zm7.89 22.333c-.332.934-1.946 1.785-2.674 1.898-.694.108-1.573.153-2.537-.16a23.18 23.18 0 01-2.298-.85C12.617 21.57 9.59 17.87 9.355 17.57c-.236-.3-1.927-2.561-1.927-4.89s1.22-3.472 1.653-3.946c.432-.474.944-.593 1.258-.593.315 0 .63.003.906.016.29.014.68-.11.067 1.058l-1.041 2.68c-.157.403-.026.898.315 1.295l.43.5c.152.175.318.364.49.545.693.725 1.44 1.396 1.44 1.396.393.316.788.262 1.067.063l.748-.524c.258-.18.645-.225.948-.07l3.012 1.634c.315.17.507.455.507.76v.118c0 .305-.174.718-.507 1.183z'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-size:    contain;
    flex-shrink:        0;
    vertical-align:     middle;
}

/* --------------------------------------------------------------------------
   Product page – slight top spacing so it sits nicely below "Add to Cart"
   -------------------------------------------------------------------------- */
.wwo-product-btn {
    margin-top: 1em;
}

/* --------------------------------------------------------------------------
   Cart page – full width to match WooCommerce checkout button
   -------------------------------------------------------------------------- */
.wwo-cart-btn {
    margin-top:    0.6em;
    margin-bottom: 0.4em;
}

/* --------------------------------------------------------------------------
   Pulse animation on first render (attention-grabbing)
   -------------------------------------------------------------------------- */
@keyframes wwoPulse {
    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);     }
}

.wwo-product-btn,
.wwo-cart-btn {
    animation: wwoPulse 2s 1s ease-out 1;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
    .wwo-product-btn,
    .wwo-cart-btn {
        font-size: 0.92rem;
        padding:   0.8em 1em;
    }
}