/**
 * WooCommerce Multi-Location Inventory - Frontend Styles
 * Product Status Visual Indicators
 *
 * @package WC_Multi_Location_Inventory
 * @author 3DWare Maroc
 * Coded by: Mohamed Zeouine using Claude Code
 */

/* ==========================================================================
   Product Status Ribbon (45-degree diagonal ribbon - TOP LEFT)
   ========================================================================== */

.wc-product-status-ribbon {
    position: absolute;
    top: 15px;
    left: -40px;
    width: 150px;
    padding: 8px 0;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-45deg);
    z-index: 100;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* Ribbon shadow stripes for depth */
.wc-product-status-ribbon::before,
.wc-product-status-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
}

.wc-product-status-ribbon::before {
    left: 0;
    border-width: 4px 7px 4px 0;
    border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
}

.wc-product-status-ribbon::after {
    right: 0;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
}

/* Single product ribbon (larger) */
.wc-status-ribbon-single {
    top: 20px;
    left: -50px;
    width: 200px;
    padding: 10px 0;
    font-size: 13px;
}

/* ==========================================================================
   Product Status Badge (below title)
   ========================================================================== */

.wc-product-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin: 8px 0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wc-product-status-badge .status-icon {
    font-size: 14px;
    line-height: 1;
}

.wc-product-status-badge .status-text {
    line-height: 1;
}

/* Single product badge (larger) */
.wc-status-badge-single {
    padding: 6px 16px;
    font-size: 14px;
    margin: 12px 0;
}

.wc-status-badge-single .status-icon {
    font-size: 16px;
}

/* ==========================================================================
   Status-specific Colors
   ========================================================================== */

/* Coming Soon - Blue */
.wc-status-coming_soon.wc-product-status-badge {
    background-color: #E3F2FD;
    color: #1976D2;
}

/* Old Model - Orange */
.wc-status-old_model.wc-product-status-badge {
    background-color: #FFF3E0;
    color: #E65100;
}

/* Discontinued - Red */
.wc-status-discontinued.wc-product-status-badge {
    background-color: #FFEBEE;
    color: #C62828;
}

/* Limited Stock - Yellow */
.wc-status-limited_stock.wc-product-status-badge {
    background-color: #FFF8E1;
    color: #F57C00;
}

/* Clearance - Purple */
.wc-status-clearance.wc-product-status-badge {
    background-color: #F3E5F5;
    color: #7B1FA2;
}

/* Pre-Order - Teal */
.wc-status-pre_order.wc-product-status-badge {
    background-color: #E0F2F1;
    color: #00695C;
}

/* Back Order - Pink */
.wc-status-back_order.wc-product-status-badge {
    background-color: #FCE4EC;
    color: #AD1457;
}

/* Sale - Red */
.wc-status-sale.wc-product-status-ribbon {
    background-color: #e74c3c !important;
}

.wc-status-sale.wc-product-status-badge {
    background-color: #FFEBEE;
    color: #C62828;
    border: 2px solid #e74c3c;
}

/* ==========================================================================
   Product Loop Positioning
   ========================================================================== */

/* Ensure parent container has position relative for ribbon */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative !important;
    overflow: hidden !important; /* Clip ribbon properly */
}

/* Ribbon should be positioned relative to li, not the link */
.woocommerce ul.products li.product > .wc-product-status-ribbon,
.woocommerce-page ul.products li.product > .wc-product-status-ribbon {
    position: absolute;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
    position: relative;
    display: block;
}

/* Image container needs relative positioning */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    position: relative;
}

/* ==========================================================================
   Single Product Page Positioning
   ========================================================================== */

.single-product div.product .images {
    position: relative;
    overflow: hidden; /* Clip ribbon properly */
}

.single-product div.product .woocommerce-product-gallery {
    position: relative;
    overflow: hidden; /* Clip ribbon properly */
}

.single-product div.product .woocommerce-product-gallery__wrapper {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Animation Effects
   ========================================================================== */

.wc-product-status-ribbon {
    animation: slideInRight 0.5s ease-out;
}

.wc-product-status-badge {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .wc-product-status-ribbon {
        top: 10px;
        left: -35px;
        width: 120px;
        padding: 6px 0;
        font-size: 9px;
    }

    .wc-status-ribbon-single {
        top: 15px;
        left: -40px;
        width: 160px;
        padding: 8px 0;
        font-size: 11px;
    }

    .wc-product-status-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    .wc-status-badge-single {
        font-size: 12px;
        padding: 5px 14px;
    }
}

@media (max-width: 480px) {
    .wc-product-status-ribbon {
        top: 8px;
        left: -30px;
        width: 100px;
        padding: 5px 0;
        font-size: 8px;
    }

    .wc-status-ribbon-single {
        top: 12px;
        left: -35px;
        width: 140px;
        padding: 7px 0;
        font-size: 10px;
    }
}

/* ==========================================================================
   Theme Compatibility Adjustments
   ========================================================================== */

/* Ensure ribbons appear above lazy-loaded images */
.wc-product-status-ribbon {
    z-index: 100 !important;
}

/* Handle flex layouts */
.flex .wc-product-status-badge,
.products .wc-product-status-badge {
    flex-shrink: 0;
}