/* ================================================================
   Hindustani WhatsApp — Estilos públicos
   ================================================================ */

/* ── Botón en producto ──────────────────────────────────────────── */

.hindustani-wa-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background-color: #25D366;
    color:           #fff;
    padding:         11px 22px;
    border-radius:   4px;
    text-decoration: none;
    font-weight:     600;
    font-size:       14px;
    line-height:     1.4;
    margin-top:      12px;
    border:          none;
    cursor:          pointer;
    transition:      background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow:      0 2px 6px rgba(0, 0, 0, 0.15);
}

.hindustani-wa-btn:hover,
.hindustani-wa-btn:focus {
    background-color: #128C7E;
    color:            #fff;
    text-decoration:  none;
    box-shadow:       0 4px 10px rgba(0, 0, 0, 0.2);
}

.hindustani-wa-btn svg {
    fill:        currentColor;
    flex-shrink: 0;
}

/* ── Botón flotante ─────────────────────────────────────────────── */

.hindustani-wa-floating {
    position:  fixed;
    bottom:    24px;
    z-index:   99999;
    opacity:   0;
    transform: scale(0.7);
    animation: hindustani-wa-appear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 2s forwards;
}

.hindustani-wa-floating-left  { left:  24px; }
.hindustani-wa-floating-right { right: 24px; }

.hindustani-wa-floating a {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            58px;
    height:           58px;
    background-color: #25D366;
    border-radius:    50%;
    box-shadow:       0 4px 14px rgba(0, 0, 0, 0.28);
    text-decoration:  none;
    color:            #fff;
    transition:       background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hindustani-wa-floating a:hover,
.hindustani-wa-floating a:focus {
    background-color: #128C7E;
    box-shadow:       0 6px 18px rgba(0, 0, 0, 0.32);
    transform:        scale(1.1);
}

.hindustani-wa-floating svg {
    fill:   currentColor;
    width:  28px;
    height: 28px;
}

@keyframes hindustani-wa-appear {
    to {
        opacity:   1;
        transform: scale(1);
    }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .hindustani-wa-floating {
        bottom: 16px;
    }
    .hindustani-wa-floating-left  { left:  16px; }
    .hindustani-wa-floating-right { right: 16px; }
}