/**
 * Widget Styles - Simple WhatsApp Icon
 *
 * @package WAppChat
 * @since 1.0.0
 */

/* CSS Variables */
#wappchat-widget {
    --wappchat-icon-size: 60px;
    --wappchat-icon-radius: 50%;
    --wappchat-icon-bg: #25D366;
    --wappchat-icon-offset: 20px;
    --wappchat-base-transform: none;
}

/* ============================================
   FLOATING WHATSAPP ICON
   ============================================ */
#wappchat-widget {
    position: fixed;
    z-index: 999999;
    width: var(--wappchat-icon-size);
    height: var(--wappchat-icon-size);
    background: var(--wappchat-icon-bg);
    border-radius: var(--wappchat-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: var(--wappchat-base-transform);
    color: #ffffff;
    text-decoration: none;
    border: none;
    outline: none;
}

#wappchat-widget:hover {
    transform: var(--wappchat-base-transform) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

#wappchat-widget:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#wappchat-widget svg {
    width: 60%;
    height: 60%;
    fill: currentColor;
    display: block;
}

/* Position Variants */
#wappchat-widget.wappchat-position-bottom-right {
    bottom: var(--wappchat-icon-offset);
    right: var(--wappchat-icon-offset);
}

#wappchat-widget.wappchat-position-bottom-left {
    bottom: var(--wappchat-icon-offset);
    left: var(--wappchat-icon-offset);
}

#wappchat-widget.wappchat-position-top-right {
    top: var(--wappchat-icon-offset);
    right: var(--wappchat-icon-offset);
}

#wappchat-widget.wappchat-position-top-left {
    top: var(--wappchat-icon-offset);
    left: var(--wappchat-icon-offset);
}

#wappchat-widget.wappchat-position-right-center {
    top: 50%;
    right: var(--wappchat-icon-offset);
    --wappchat-base-transform: translateY(-50%);
}

#wappchat-widget.wappchat-position-left-center {
    top: 50%;
    left: var(--wappchat-icon-offset);
    --wappchat-base-transform: translateY(-50%);
}

#wappchat-widget.wappchat-position-top-center {
    top: var(--wappchat-icon-offset);
    left: 50%;
    --wappchat-base-transform: translateX(-50%);
}

#wappchat-widget.wappchat-position-bottom-center {
    bottom: var(--wappchat-icon-offset);
    left: 50%;
    --wappchat-base-transform: translateX(-50%);
}

/* Icon Shape Variants */
#wappchat-widget.wappchat-style-rounded {
    border-radius: 12px;
}

/* ============================================
   PULSE ANIMATION
   ============================================ */
@keyframes wappchat-pulse {

    0%,
    100% {
        transform: var(--wappchat-base-transform) scale(1);
    }

    50% {
        transform: var(--wappchat-base-transform) scale(1.08);
    }
}

#wappchat-widget.wappchat-pulse {
    animation: wappchat-pulse 2s ease-in-out infinite;
}

#wappchat-widget.wappchat-pulse:hover {
    animation: none;
    transform: var(--wappchat-base-transform) scale(1.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 480px) {
    #wappchat-widget {
        width: 55px;
        height: 55px;
    }
}

/* ============================================
   PRINT / REDUCED MOTION
   ============================================ */
@media print {
    #wappchat-widget {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wappchat-widget {
        transition: none;
        animation: none;
    }
}