/* =====================================================
   WhatsApp CTA Button — Frontend Styles
   ===================================================== */

:root {
    --wcta-bg:      #25D366;
    --wcta-color:   #ffffff;
    --wcta-radius:  6px;
    --wcta-hover:   color-mix(in srgb, var(--wcta-bg) 85%, #000);
}

/* Base */
.wcta-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      var(--wcta-bg);
    color:           var(--wcta-color) !important;
    border-radius:   var(--wcta-radius);
    text-decoration: none !important;
    font-weight:     600;
    letter-spacing:  0.02em;
    border:          none;
    cursor:          pointer;
    transition:      background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow:      0 2px 8px rgba(37, 211, 102, 0.30);
    white-space:     nowrap;
}

/* Tamaños */
.wcta-size-small  { padding: 8px 16px;  font-size: 13px; }
.wcta-size-medium { padding: 11px 22px; font-size: 15px; }
.wcta-size-large  { padding: 14px 28px; font-size: 17px; }

/* Hover / Focus */
.wcta-button:hover,
.wcta-button:focus {
    background:  var(--wcta-hover);
    color:       var(--wcta-color) !important;
    transform:   translateY(-1px);
    box-shadow:  0 4px 14px rgba(37, 211, 102, 0.45);
    outline:     none;
}

.wcta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
}

/* Ícono */
.wcta-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

/* Contexto: loop de productos */
.wcta-ctx-loop {
    width: 100%;
    justify-content: center;
}

/* Contexto: producto individual */
.wcta-ctx-single {
    min-width: 220px;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .wcta-button { transition: none; }
}