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

/*
 * ÖNEMLİ: Buton HTML olarak her zaman sayfada bulunur.
 * Masaüstünde display:none ile gizlenir, sadece 768px ve altında
 * görünür hale gelir. Bu yaklaşım sunucu taraflı önbellek
 * sistemleriyle (LiteSpeed, WP Super Cache vb.) tam uyumludur.
 */

/* --- Varsayılan: Gizle (masaüstü) --- */
.wmwo-whatsapp-btn {
    display: none !important;
}

/* --- 768px ve altı: Göster (mobil) --- */
@media screen and (max-width: 768px) {
    .wmwo-whatsapp-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;

        /* WhatsApp yeşili */
        background-color: #25D366 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px;

        /* Boyut & boşluk */
        width: 100%;
        max-width: 100%;
        margin-top: 12px;
        padding: 14px 24px;
        box-sizing: border-box;

        /* Tipografi */
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none !important;
        text-align: center;
        letter-spacing: 0.2px;

        /* Geçiş efekti */
        transition: background-color 0.25s ease,
                    transform 0.15s ease,
                    box-shadow 0.25s ease;

        /* Gölge */
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);

        cursor: pointer;
    }

    /* Hover */
    .wmwo-whatsapp-btn:hover {
        background-color: #1ebe5c !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
        color: #ffffff !important;
    }

    /* Active / Tap */
    .wmwo-whatsapp-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    }

    /* Focus */
    .wmwo-whatsapp-btn:focus {
        outline: 2px solid #128C7E;
        outline-offset: 2px;
    }

    /* İkon */
    .wmwo-whatsapp-btn .wmwo-icon {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
    }

    /* Metin */
    .wmwo-whatsapp-btn span {
        white-space: nowrap;
    }

    /* Pulse animasyonu – dikkat çekmek için */
    @keyframes wmwo-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
        70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
        100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    .wmwo-whatsapp-btn {
        animation: wmwo-pulse 2.5s infinite;
    }

    .wmwo-whatsapp-btn:hover {
        animation: none;
    }
}