/**
 * css/custom/shoppingcart.css
 * Stili personalizzati per lo shopping cart
 * 
 * @package ItticiSurgelati
 * @version 1.0.1
 *
 */

/* ============================================
   VARIABILI
   ============================================ */
.popup-shopping-cart {
    --cart-bg           : #ffffff;
    --cart-border       : #e9e9e9;
    --cart-text         : #182931;
    --cart-title        : #182931;
    --cart-unit-price   : #ff5f1f;
    --cart-um-base      : #182931;
    --cart-value        : #ff5f1f;
    --cart-hover        : #f1f1f1;

    --cart-button-hover : #ff5f1f;


}

/* ============================================
   HEADER CARRELLO
   ============================================ */
.popup-shopping-cart .popup-header {
    padding         : 10px 24px;
    /** linea top items */ 
    border-bottom   : 1px solid var(--cart-border);
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.popup-shopping-cart .popup-header .title {
    font-size       : 34px;
    font-weight     : 300;
    color           : var(--cart-text);
    margin          : 0;
}

.popup-shopping-cart .popup-header .icon-close {
    cursor          : pointer;
    font-size       : 40px !important;
    font-weight     : 300;
    width           : 50px;
    height          : 50px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    color           : #141414;
    transition      : color 0.2s;
}

.popup-shopping-cart .popup-header .icon-close:hover {
    color           : var(--cart-unit-price);
}


/* ============================================
   LISTA ITEMS
   ============================================ */

/** ... items */ 
.popup-shopping-cart .tf-mini-cart-items {
    padding         : 16px;
    max-height      : calc(100vh - 420px);  
    overflow-y      : auto;
    margin-bottom   : 10px;
}

/** ... Singolo item - struttura a griglia 3 colonne */
.popup-shopping-cart .tf-mini-cart-item {
    display              : grid;
    grid-template-columns: 112px 1fr 40px;   */ 
    gap                  : 0px;
    padding              : 0px 10; 
    border-bottom        : 2px solid var(--cart-border);
    transition           : background-color 0.2s;
    min-height           : 112px;
    align-items          : top;
}

.popup-shopping-cart .tf-mini-cart-item:hover {
    background-color     : var(--cart-hover);
}

/** ... Immagine prodotto */
.popup-shopping-cart .tf-mini-cart-image {
    width           : 85px;
    height          : 85px;
    border-radius   : 10px;
    overflow        : hidden;
    background      : #f8f8f8;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.popup-shopping-cart .tf-mini-cart-image img {
    width           : 100%;
    height          : 100%;
    object-fit      : contain;
}

/** ... Info prodotto */
.popup-shopping-cart .tf-mini-cart-info {
    flex            : 1;
    min-width       : 0;
    padding-left    : 20px;
    display         : flex;
    flex-direction  : column;
    justify-content : flex-start;
    height          : 100%;
}


/* ============================================
   DESCRIZIONE PRODOTTO
   ============================================ */
.popup-shopping-cart .tf-mini-cart-info .title {
    font-size       : 18px;
    font-weight     : 600;
    margin          : 0;
    line-height     : 1.0;
    max-height      : 15px;
    overflow        : hidden;
}

.popup-shopping-cart .tf-mini-cart-info .title a {
    color               : var(--cart-title);
    text-decoration     : none;
    display             : -webkit-box;
    -webkit-line-clamp  : 2;
    -webkit-box-orient  : vertical;
    overflow            : hidden;
}

.popup-shopping-cart .tf-mini-cart-info .title a:hover {
    color           : var(--cart-title);
}

/* ... Nascondi il vecchio bottone all'interno delle info */
.popup-shopping-cart .tf-mini-cart-info .icon-close.remove {
    display         : none;
}

/* ============================================
   PREZZO UNITARIO
   ============================================ */
.cart-item-unit-price {
    display         : flex;
    align-items     : baseline;
    gap             : 2px;              
    margin          : 0;
    padding         : 0;
    /** font-size       : 14px;              */ 
    line-height     : 1.2;              
}

.cart-item-unit-price .unit-price-label {
    color           : #182931;
    font-size       : 16px;             
    font-weight     : 400;
    line-height     : 1.2;    
}

.cart-item-unit-price .unit-price-value {
    font-size       : 20px;             
    color           : var(--cart-unit-price);
    font-weight     : 400;
}

.cart-item-unit-price .unit-price-umbase {
    color           : var(--cart-um-base);
    font-size       : 14px;             
    font-weight     : 400;
    margin-left     : 3px;
}


/* ============================================
   ACQUISTO A PEZZI O PEZZARTURE
   ============================================ */
.cart-item-details {
    margin          : 0;
    padding         : 0;
}

.detail-row {
    display         : flex;
    align-items     : baseline;
    gap             : 1px;
    margin-top      : 0px;
    padding         : 0;
    line-height     : 1.1;
}

.detail-label {
    font-size       : 16px;
    color           : #4b5b63;
    font-weight     : 400;
    min-width       : 110px;
}

.detail-label-pezzi {
    font-size       : 16px;
    color           : #4b5b63;
    font-weight     : 400;
    min-width       : 110px;
    padding-left    : 5px;
}

.detail-label-tranci {
    font-size       : 16px;
    color           : #4b5b63;
    font-weight     : 400;
    min-width       : 110px;
    padding-left    : 5px;
}

.detail-value {
    font-size       : 16px;
    color           : var(--cart-value);
    font-weight     : 500;
    padding-left    : 5px;  
}

.detail-qty-ord {
    font-size       : 18px;
    font-weight     : 700;
    color           : var(--cart-value);
    font-weight     : 500;
    padding-left    : 5px;  
}

/* ============================================
   TOTALE RIGA (QUANTITÀ ORDINATA + TOTALE IMPORTO)
   ============================================ */
.cart-item-total {
    display         : flex;
    align-items     : baseline;          /* ALLINEA SULLA LINEA DI BASE DEL TESTO */
    justify-content : space-between;
    gap             : 0px;
    margin          : 0px 0 0 0;
    padding         : 0px 0 0 0;
    line-height     : 1.2;
    flex-wrap       : wrap;
}

/* GRUPPO "QUANTITÀ ORDINATA" (NUMERO + UNITÀ DI MISURA) */
.total-quantity {
    display         : inline-flex;
    align-items     : baseline;   /* ALLINEA SULLA LINEA DI BASE */
    gap             : 6px;
    background      : transparent;
    padding         : 0;
    border-radius   : 0;
}

/* LABEL "QUANTITÀ ORDINATA:" */
.quantity-label {
    font-size       : 16px;
    font-weight     : 600;
    color           : #182931;
    display         : inline-block;
    letter-spacing  : 0.2px;
    line-height     : 1.2;
}

/* NUMERO DELLA QUANTITÀ (ES: 1,500) */
.quantity-number {
    font-weight     : 700;
    color           : #ff5f1f;
    font-size       : 20px;
    line-height     : 1.2;
}

/* UNITÀ DI MISURA (KG, PZ, CF) */
.quantity-umbase {
    font-size       : 14px;
    font-weight     : 500;
    color           : #182931;
    line-height     : 1.2;
}

/* LABEL "TOTALE:" */
.total-label {
    font-size       : 18px;
    font-weight     : 500;
    color           : #4b5b63;
    margin-left     : auto;
    line-height     : 1.2;
}

/* VALORE TOTALE DELLA RIGA (ES: € 25,00) */
.total-value {
    font-size       : 24px;
    font-weight     : 600;
    color           : #ff5f1f;
    line-height     : 1.2;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .cart-item-total {
        flex-direction  : column;
        align-items     : flex-start;
        gap             : 10px;
    }
    
    .total-label {
        margin-left     : 0;
    }
    
    .total-quantity {
        padding         : 4px 10px;
    }
    
    .quantity-label {
        font-size       : 12px;
    }
    
    .quantity-number {
        font-size       : 14px;
    }
    
    .total-value {
        font-size       : 16px;
    }
}



/* ============================================
   BOTTONE RIMOZIONE
   ============================================ */
.cart-item-remove {
    display         : flex;
    justify-content : center;
    align-items     : center;
    height          : 85px;
}

.cart-item-remove .remove {
    cursor          : pointer;
    font-size       : 16px;
    color           : #999;
    padding         : 6px;
    border-radius   : 50%;
    transition      : all 0.2s;
    background      : #f5f5f5;
}

.cart-item-remove .remove:hover {
    color           : var(--cart-price);
    background      : #ffe4d9;
}







/* ============================================
   BOTTOM PANEL
   ============================================ */
.popup-shopping-cart .tf-mini-cart-bottom {
    position        : sticky;
    bottom          : 0;
    background      : var(--cart-bg);

    border-top      : 0px solid var(--cart-border);

    padding         : 5px 24px 5px 24px;
    box-shadow      : 0 -4px 10px rgba(0, 0, 0, 0.05);

    margin-top      : 30px;
}

/* Threshold (subtotale e progress) */
.popup-shopping-cart .tf-mini-cart-threshold {
    margin-bottom   : 5px;
}


/* ============================================
   BOTTOM PANEL - TOTALE
   ============================================ */

/* Contenitore del subtotale e totale */
.popup-shopping-cart .tf-mini-cart-threshold .text {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    margin-bottom   : 5px;
}

/* Label "Sub Totale(0 item)" */
.popup-shopping-cart .tf-mini-cart-threshold .subtotal {
    font-size       : 18px;
    font-weight     : 400;
    color           : #4b5b63;
    margin          : 0;
}

/* Valore totale - allineato a sinistra (non più a destra) */
.popup-shopping-cart .tf-mini-cart-threshold .total-price {
    font-size       : 40px;
    font-weight     : 600;
    color           : #ff5f1f !important;
    margin          : 0;
    /* Rimuovi position: relative e left: -40px se presenti */
    text-align      : left;
}



/* Progress bar */
.popup-shopping-cart .tf-progress-bar {
    height          : 4px;
    background      : #f0f0f0;
    border-radius   : 3px;
    margin-bottom   : 4px;
    overflow        : hidden;
}

.popup-shopping-cart .tf-progress-bar .value {
    height          : 100%;
    background      : var(--cart-price);
    border-radius   : 3px;
    transition      : width 0.3s;
}

/* Free shipping message */
.popup-shopping-cart .desc {
    font-size       : 13px;
    color           : #4b5b63;
    margin-bottom   : 5px;
    line-height     : 1.2;
}

.popup-shopping-cart .desc .fw-bold {
    color           : var(--cart-price);
}

/* Tool buttons (Note, Consegna, Gift) */
.popup-shopping-cart .tf-mini-cart-tool {
    display         : flex;
    gap             : 5px;
    margin-bottom   : 5px;
}

.popup-shopping-cart .tf-mini-cart-tool-btn {
    flex            : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 4px;
    background      : #f8f8f8;
    border-radius   : 30px;
    cursor          : pointer;
    transition      : all 0.2s;
    font-size       : 13px;
    font-weight     : 500;
}

.popup-shopping-cart .tf-mini-cart-tool-btn:hover {
    background      : var(--cart-price);
    color           : white;
}

.popup-shopping-cart .tf-mini-cart-tool-btn:hover i {
    color           : white;
}

/* ============================================
   BOTTONI AZIONE
   ============================================ */
.popup-shopping-cart .tf-mini-cart-bottom-wrap {
    display         : flex;
    flex-direction  : column;
    gap             : 6px;
    width           : 100%;
}

.popup-shopping-cart .tf-mini-cart-view-checkout {
    display         : flex;
    justify-content : flex-end;
    width           : 100%;
}

/* Bottone CONFERMA L'ORDINE (classe specifica) */
.popup-shopping-cart .btn-checkout {
    /** background      : #182931; */ 

    background      : var(--cart-button-hover);


    color           : white;
    padding         : 8px 30px;
    border-radius   : 28px;
    text-decoration : none;
    font-weight     : 500;
    font-size       : 18px;
    display         : inline-block;
    width           : auto;
    min-width       : 200px;
    text-align      : center;
    border          : none;
    transition      : all 0.2s;
    cursor          : pointer;
}

.popup-shopping-cart .btn-checkout:hover {
    background      : var(--cart-button-hover);
}



/* Free shipping footer */
.popup-shopping-cart .free-shipping {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    font-size       : 12px;
    color           : #4b5b63;
    padding         : 5px;
    background      : #f8f8f8;
    border-radius   : 30px;
    width           : 100%;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.popup-shopping-cart .box-text_empty {
    text-align      : center;
    padding         : 40px 20px;
}

.popup-shopping-cart .box-text_empty .icon {
    font-size       : 64px;
    color           : #ddd;
    margin-bottom   : 20px;
    display         : inline-block;
}

.popup-shopping-cart .box-text_empty .text-emp {
    font-size       : 20px;
    font-weight     : 500;
    margin-bottom   : 12px;
    color           : var(--cart-text);
}

.popup-shopping-cart .box-text_empty .text-main {
    font-size       : 14px;
    color           : #4b5b63;
    margin-bottom   : 24px;
}

.popup-shopping-cart .box-text_empty .shop-empty_bot {
    display         : flex;
    gap             : 12px;
    justify-content : center;
}

.popup-shopping-cart .box-text_empty .shop-empty_bot a {
    padding         : 10px 24px;
    border-radius   : 30px;
    text-decoration : none;
    font-weight     : 500;
    transition      : all 0.2s;
}

.popup-shopping-cart .box-text_empty .shop-empty_bot .animate-btn {
    background      : var(--cart-price);
    color           : white;
}

.popup-shopping-cart .box-text_empty .shop-empty_bot .style-line {
    background      : white;
    border          : 1px solid var(--cart-border);
    color           : var(--cart-text);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .popup-shopping-cart .tf-mini-cart-item {
        grid-template-columns: 65px 1fr 35px;
        gap             : 8px;
    }
    
    .popup-shopping-cart .tf-mini-cart-image {
        width           : 65px;
        height          : 65px;
    }
    
    .cart-item-remove {
        height          : 65px;
    }
    
    .popup-shopping-cart .tf-mini-cart-info .title {
        font-size       : 16px;
    }
    

    
    /* Prezzo unitario mobile */
    .cart-item-unit-price {
        font-size       : 13px;         /* Mobile leggermente più piccolo */
    }
    
    .cart-item-unit-price .unit-price-label {
        font-size       : 13px;
    }
    
    .cart-item-unit-price .unit-price-value {
        font-size       : 15px;
    }
    
    .cart-item-unit-price .unit-price-umbase {
        font-size       : 12px;
    }


    .detail-label {
        min-width       : 90px;
        font-size       : 11px;
    }
    
    .detail-value {
        font-size       : 12px;
    }
    
    .cart-item-total .total-quantity {
        font-size       : 13px;
    }
    
    .cart-item-total .total-value {
        font-size       : 15px;
    }
    
    .popup-shopping-cart .tf-mini-cart-threshold .total-price {
        font-size       : 20px;
    }
    
    .popup-shopping-cart .btn-checkout {
        min-width       : 160px;
        font-size       : 13px;
        padding         : 8px 20px;
    }
}