/**
 * 2007-2024 PrestaShop
 *
 * Front-office styles for su_feature_od module
 * Version 1.2.0
 */

/* ============================================
   ANTI-FLASH: Masquer temporairement les zones
   qui seront modifiées par le JS
   ============================================ */

/* État initial: masquer les zones en cours de traitement */
body:not(.su-features-processed) .order-line .details,
body:not(.su-features-processed) .order-item .desc,
body:not(.su-features-processed) #order-products td:first-child,
body:not(.su-features-processed) .cart-item .col-8,
body:not(.su-features-processed) .cart_sum_product_line .col-5 {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

/* État après traitement: révéler */
body.su-features-processed .order-line .details,
body.su-features-processed .order-item .desc,
body.su-features-processed #order-products td:first-child,
body.su-features-processed .cart-item .col-8,
body.su-features-processed .cart_sum_product_line .col-5 {
    opacity: 1;
}

/* ============================================
   CONTENEUR PRINCIPAL
   ============================================ */

.su-feature-od-container {
    margin-top: 5px;
}

/* ============================================
   MODE LISTE: Features en format dl/dt/dd
   Utilisé pour: Panier, Checkout sidebar
   ============================================ */

.su-feature-od-features {
    margin: 5px 0;
    font-size: 0.9rem;
}

/* Style dl identique aux déclinaisons du thème */
dl.su-feature-od-features {
    display: block;
}

dl.su-feature-od-features dt {
    float: left;
    clear: left;
    margin-right: 5px;
    font-weight: normal;
}

dl.su-feature-od-features dd {
    margin-left: 0;
    margin-bottom: 2px;
}

/* ============================================
   MODE INLINE: Features dans les parenthèses
   Utilisé pour: Order Confirmation, Order Detail
   ============================================ */

.su-feature-od-inline-features {
    color: inherit;
    font-size: inherit;
}

/* ============================================
   STYLES DES RÉFÉRENCES
   ============================================ */

.su-feature-od-reference {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
}

/* Référence dans le conteneur */
.su-feature-od-container .su-feature-od-reference {
    margin-top: 3px;
}

/* Référence sur Order Detail desktop (avec br) */
span.su-feature-od-reference {
    display: inline;
}

/* ============================================
   PANIER: Styles spécifiques
   ============================================ */

.cart-item .su-feature-od-container {
    margin-top: 5px;
}

.cart-item .su-feature-od-features {
    margin-left: 0;
    padding-left: 0;
}

/* Noms de features en gras sur le panier */
.cart-item dl.su-feature-od-features dt {
    font-weight: bold;
}

/* Label "Part Number:" en gras sur le panier */
.cart-item .su-feature-od-ref-label {
    font-weight: bold;
}

/* ============================================
   CHECKOUT SIDEBAR: Styles spécifiques
   ============================================ */

.cart_sum_product_line .su-feature-od-container {
    margin-top: 3px;
}

.cart_sum_product_line .su-feature-od-features {
    font-size: 0.9rem;
}

/* Noms de features en gras sur le checkout sidebar */
.cart_sum_product_line dl.su-feature-od-features dt {
    font-weight: bold;
}

/* Label "Part Number:" en gras sur le checkout sidebar */
.cart_sum_product_line .su-feature-od-ref-label {
    font-weight: bold;
}

.cart_sum_product_line .su-feature-od-reference {
    font-size: 0.9rem;
}

/* ============================================
   ORDER CONFIRMATION: Styles spécifiques
   ============================================ */

.order-line .details .su-feature-od-reference {
    margin-top: 5px;
}

/* ============================================
   ORDER DETAIL: Styles spécifiques
   ============================================ */

#order-products .su-feature-od-reference {
    color: #000000;
}

.order-items .order-item .su-feature-od-reference {
    margin-top: 3px;
}

/* ============================================
   CONTENEUR CACHÉ
   ============================================ */

#su-feature-od-data {
    display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .su-feature-od-features {
        font-size: 0.85em;
    }
    
    .su-feature-od-reference {
        font-size: 0.8em;
    }
    
    /* Sur mobile, l'anti-flash peut être gênant, on réduit l'effet */
    body:not(.su-features-processed) .order-line .details,
    body:not(.su-features-processed) .order-item .desc,
    body:not(.su-features-processed) .cart-item .col-8,
    body:not(.su-features-processed) .cart_sum_product_line .col-5 {
        opacity: 0.5;
    }
}

/* ============================================
   PRINT: Styles pour impression
   ============================================ */

@media print {
    .su-feature-od-features,
    .su-feature-od-reference,
    .su-feature-od-inline-features {
        color: #000 !important;
    }
    
    /* Pas d'anti-flash à l'impression */
    body:not(.su-features-processed) .order-line .details,
    body:not(.su-features-processed) .order-item .desc,
    body:not(.su-features-processed) #order-products td:first-child,
    body:not(.su-features-processed) .cart-item .col-8,
    body:not(.su-features-processed) .cart_sum_product_line .col-5 {
        opacity: 1;
    }
}