/**
 * STR Delivery Stock - Styles CSS
 * Version 2.0 - Thème STR PERFORMANCE
 * 
 * Styles pour :
 * - Bandeau Chronopost (rouge - France métropolitaine)
 * - Bandeau Stock (bleu - International)
 * - Bandeau Rupture (gris)
 *
 * @author STR PERFORMANCE
 */

/* ============================================
   BANDEAU PRINCIPAL - Base commune
   ============================================ */
.str-delivery-banner {
    padding: 12px 18px;
    margin: 0 0 15px 0;
    text-align: left;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.str-delivery-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Quantité en surbrillance */
.str-quantity-highlight {
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* ============================================
   BANDEAU CHRONOPOST - Rouge (France métropolitaine)
   ============================================ */
.str-delivery-banner.str-chronopost {
    background-color: #e85a4f;
    box-shadow: 0 2px 4px rgba(232, 90, 79, 0.2);
}

.str-chronopost .str-quantity-highlight {
    color: #ffeb3b;
}

/* Sous-éléments du bandeau Chronopost - inline par défaut */
.str-message-main,
.str-message-detail,
.str-message-stock {
    display: inline;
}

.str-message-main::after {
    content: " ";
}

.str-message-detail::after {
    content: " : ";
}

/* ============================================
   BANDEAU STOCK - Bleu (International)
   ============================================ */
.str-delivery-banner.str-stock-info {
    background-color: #2196F3;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.str-stock-info .str-quantity-highlight {
    color: #ffeb3b;
}

/* ============================================
   BANDEAU RUPTURE - Gris
   ============================================ */
.str-delivery-banner.str-out-of-stock {
    background-color: #6c757d;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.str-out-of-stock .str-delivery-text {
    text-align: center;
}

/* ============================================
   RESPONSIVE - TABLETTE (768px - 1024px)
   ============================================ */
@media screen and (max-width: 1024px) {
    .str-delivery-banner {
        padding: 11px 15px;
    }

    .str-delivery-text {
        font-size: 12px;
    }

    .str-quantity-highlight {
        font-size: 15px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (moins de 768px)
   ============================================ */
@media screen and (max-width: 767px) {
    .str-delivery-banner {
        padding: 10px 12px;
        border-radius: 3px;
    }

    .str-delivery-text {
        font-size: 11px;
        letter-spacing: 0.2px;
        line-height: 1.6;
        text-align: center;
    }

    .str-quantity-highlight {
        font-size: 14px;
        display: inline;
    }
}

/* ============================================
   RESPONSIVE - PETIT MOBILE (moins de 480px)
   ============================================ */
@media screen and (max-width: 479px) {
    .str-delivery-banner {
        padding: 10px 8px;
    }

    .str-delivery-text {
        font-size: 10px;
        line-height: 1.7;
        letter-spacing: 0.1px;
    }

    .str-quantity-highlight {
        font-size: 13px;
        display: inline;
    }
    
    /* Bandeau Chronopost sur plusieurs lignes */
    .str-chronopost .str-message-main,
    .str-chronopost .str-message-detail,
    .str-chronopost .str-message-stock {
        display: block;
        text-align: center;
    }
    
    .str-chronopost .str-message-main::after,
    .str-chronopost .str-message-detail::after {
        content: "";
    }
    
    .str-chronopost .str-message-main {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .str-chronopost .str-message-detail {
        font-size: 9px;
        opacity: 0.9;
        margin-bottom: 4px;
    }
    
    .str-chronopost .str-message-stock {
        font-size: 10px;
    }
}

/* ============================================
   RESPONSIVE - TRÈS PETIT MOBILE (moins de 360px)
   ============================================ */
@media screen and (max-width: 359px) {
    .str-delivery-banner {
        padding: 8px 6px;
    }
    
    .str-delivery-text {
        font-size: 9px;
        line-height: 1.8;
    }

    .str-quantity-highlight {
        font-size: 12px;
    }
    
    /* Chronopost encore plus compact */
    .str-chronopost .str-message-main {
        font-size: 10px;
    }
    
    .str-chronopost .str-message-detail {
        font-size: 8px;
    }
    
    .str-chronopost .str-message-stock {
        font-size: 9px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .str-delivery-banner {
        border: 2px solid #333;
        background: #fff !important;
    }
    
    .str-delivery-banner.str-chronopost {
        border-color: #e85a4f;
    }
    
    .str-delivery-banner.str-stock-info {
        border-color: #2196F3;
    }
    
    .str-delivery-text,
    .str-quantity-highlight {
        color: #333 !important;
        text-shadow: none !important;
    }
}