/**
 * 1800 Doorbell - WooCommerce Global Styles
 * 
 * WooCommerce-specific styles that load on all WooCommerce pages
 * Contains: Backorder notices, general WooCommerce tweaks
 * 
 * @package 1800doorbell
 * @version 2.0.9
 */

/* ========================================
   BACKORDER NOTICE STYLES
   Global WooCommerce backorder styling
   ======================================== */

.stock.available-on-backorder {
    display: inline-block !important;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 15px 0 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
    border: 2px solid #ff5252 !important;
    position: relative !important;
    animation: backorderPulse 2s ease-in-out infinite !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: auto !important;
    max-width: 100% !important;
}

.stock.available-on-backorder:before {
    content: "\26A0\FE0F" !important;
    font-size: 20px !important;
    margin-right: 8px !important;
    display: inline-block !important;
    animation: iconShake 3s ease-in-out infinite !important;
}

.stock.available-on-backorder:after {
    content: " \23F1\FE0F" !important;
    font-size: 18px !important;
    margin-left: 8px !important;
    display: inline-block !important;
}

@keyframes backorderPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
    }
}

@keyframes iconShake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.woocommerce-variation-availability .stock.available-on-backorder,
.woocommerce-product-details__short-description + .stock.available-on-backorder {
    display: block !important;
    text-align: center !important;
    margin: 20px auto !important;
}

@media (max-width: 768px) {
    .stock.available-on-backorder {
        font-size: 14px !important;
        padding: 10px 15px !important;
        margin: 12px 0 !important;
    }
    
    .stock.available-on-backorder:before {
        font-size: 18px !important;
    }
    
    .stock.available-on-backorder:after {
        font-size: 16px !important;
    }
}

@media (prefers-color-scheme: dark) {
    .stock.available-on-backorder {
        background: linear-gradient(135deg, #ff8787 0%, #ffa5a5 100%) !important;
        box-shadow: 0 4px 20px rgba(255, 135, 135, 0.5) !important;
    }
}