/* WooCommerce Plus Minus Direct Cart - Styles */

.wc-pm-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Stato senza quantità - Solo bottone + */
.wc-pm-quantity-wrapper.no-quantity {
    padding: 0;
    gap: 0;
    border: none;
    background: transparent;
}

.wc-pm-quantity-wrapper.no-quantity .wc-pm-minus,
.wc-pm-quantity-wrapper.no-quantity .wc-pm-quantity {
    display: none;
}

.wc-pm-quantity-wrapper.no-quantity .wc-pm-plus {
    width: 100%;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 0.8em !important;
    font-weight: normal;
    background: #333 !important;
    color: #fff;
    border: none !important;
}

.wc-pm-quantity-wrapper.no-quantity .wc-pm-plus:hover {
    background: #000 !important;
}

/* Stato con quantità - Mostra tutto */
.wc-pm-quantity-wrapper.has-quantity .wc-pm-minus,
.wc-pm-quantity-wrapper.has-quantity .wc-pm-quantity {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.wc-pm-quantity-wrapper.wc-pm-single {
    padding: 0;
    font-size: 18px;
}

.wc-pm-quantity-wrapper.wc-pm-single.no-quantity .wc-pm-plus {
    padding: 15px 30px;
    font-size: 18px;
}

.wc-pm-minus,
.wc-pm-plus {
    background: transparent !important;
    color: #333;
    border: 2px solid #333 !important;
    padding: 0 !important;
    width: 35%;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* Display flex important solo quando quantità > 0 */
.wc-pm-quantity-wrapper.has-quantity .wc-pm-minus,
.wc-pm-quantity-wrapper.has-quantity .wc-pm-plus {
    display: flex !important;
}

.wc-pm-quantity-wrapper .wc-pm-minus,
.wc-pm-quantity-wrapper .wc-pm-plus {
    width: 35%;
    height: 40px;
    font-size: 0.8em;
}

.wc-pm-minus:hover,
.wc-pm-plus:hover {
    border-color: #000 !important;
    background: #d0d0d0 !important;
}

/* Quando quantità >= 1: icone SVG nere per bottone plus */
.wc-pm-quantity-wrapper.has-quantity .wc-pm-plus::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M6.63462 8.36539H0L0 6.63462H6.63462V0L8.36539 0V6.63462H15V8.36539H8.36539V15H6.63462V8.36539Z" fill="%23000000"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Quando quantità > 1: icona SVG nera per bottone minus */
.wc-pm-quantity-wrapper.has-quantity:not(.quantity-1) .wc-pm-minus::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 3px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="3" viewBox="0 0 15 3" fill="none"><path d="M6.63462 2.36544H0L0 0.634672H6.63462L8.36539 0.634644L15 0.634672V2.36544H8.36539H6.63462Z" fill="%23000000"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Stile cestino quando quantità è 1 */
.wc-pm-quantity-wrapper[data-quantity="1"] .wc-pm-minus,
.wc-pm-quantity-wrapper.quantity-1 .wc-pm-minus {
    background: #dc3545;
    font-size: 0;
}

.wc-pm-quantity-wrapper[data-quantity="1"] .wc-pm-minus:hover,
.wc-pm-quantity-wrapper.quantity-1 .wc-pm-minus:hover {
    background: #c82333;
}

.wc-pm-quantity-wrapper[data-quantity="1"] .wc-pm-minus::before,
.wc-pm-quantity-wrapper.quantity-1 .wc-pm-minus::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_909_811)"><mask id="mask0_909_811" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30"><rect x="0.5" width="30" height="30" fill="%23000000"/></mask><g mask="url(%23mask0_909_811)"><path d="M9.63469 25.625C9.01135 25.625 8.47885 25.4042 8.03719 24.9628C7.59573 24.5211 7.375 23.9886 7.375 23.3653V7.49997H6.125V5.62497H11.75V4.51935H19.25V5.62497H24.875V7.49997H23.625V23.3653C23.625 23.9967 23.4063 24.5312 22.9688 24.9687C22.5313 25.4062 21.9968 25.625 21.3653 25.625H9.63469ZM21.75 7.49997H9.25V23.3653C9.25 23.4776 9.28604 23.5698 9.35812 23.6418C9.43021 23.7139 9.5224 23.75 9.63469 23.75H21.3653C21.4616 23.75 21.5497 23.7099 21.6297 23.6297C21.7099 23.5497 21.75 23.4615 21.75 23.3653V7.49997ZM12.255 21.25H14.1297V9.99997H12.255V21.25ZM16.8703 21.25H18.745V9.99997H16.8703V21.25Z" fill="%23000000"/></g></g><defs><clipPath id="clip0_909_811"><rect width="30" height="30" fill="white" transform="translate(0.5)"/></clipPath></defs></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.wc-pm-quantity-wrapper[data-quantity="1"] .wc-pm-minus::before,
.wc-pm-quantity-wrapper.quantity-1 .wc-pm-minus::before {
    width: 22px;
    height: 22px;
}

.wc-pm-quantity {
    min-width: 30%;
    text-align: center;
    font-weight: normal !important;
    font-size: 16px;
    color: #333;
}

.wc-pm-quantity-wrapper .wc-pm-quantity {
    font-size: 20px;
    min-width: 30%;
}

/* Dimensioni variabili per shortcode */
.wc-pm-quantity-wrapper.wc-pm-small {
    padding: 5px 8px;
    gap: 6px;
}

.wc-pm-small .wc-pm-minus,
.wc-pm-small .wc-pm-plus {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.wc-pm-small .wc-pm-quantity {
    font-size: 14px;
    min-width: 25px;
}

.wc-pm-quantity-wrapper.wc-pm-large {
    padding: 15px 20px;
    gap: 15px;
}

.wc-pm-large .wc-pm-minus,
.wc-pm-large .wc-pm-plus {
    width: 50px;
    height: 50px;
    font-size: 26px;
}

.wc-pm-large .wc-pm-quantity {
    font-size: 24px;
    min-width: 50px;
}

/* Loading state */
.wc-pm-quantity-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .wc-pm-quantity-wrapper {
        gap: 0;
        padding: 0;
    }
    
    .wc-pm-minus,
    .wc-pm-plus {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}

/* Effetto fade per cambio quantità */
.wc-pm-quantity {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}