/* ProActive Geolocation Message Styles */

/* Base message styling */
.free-ship-msg {
    border: 1px solid;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 10px 0;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

.free-ship-msg .smiley {
    margin-left: 5px;
    font-size: 1.1em;
}

/* Success message styling (green) */
.free-ship-msg.success,
.free-ship-msg[data-type="success"] {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

/* Error message styling (red) */
.free-ship-msg.error,
.free-ship-msg[data-type="error"] {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Notice message styling (blue) */
.free-ship-msg.notice,
.free-ship-msg[data-type="notice"] {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* WooCommerce checkout notice styling (for checkout page) */
.woocommerce-message .free-ship-msg {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.woocommerce-error .free-ship-msg {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.woocommerce-info .free-ship-msg {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* Attention-grabbing animation for cart page success messages */
@keyframes attentionPulse {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(1.15);
    }

    75% {
        transform: scale(1.08);
    }
}

/* Only apply animation to cart page messages */
.woocommerce-cart .free-ship-msg.success.attention-pulse {
    animation: attentionPulse 250ms ease-in-out;
    animation-iteration-count: 4;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-cart .free-ship-msg.success.attention-pulse {
        animation: none;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .free-ship-msg {
        font-size: 14px;
        padding: 10px 12px;
    }
}