/* assets/css/cart-page.css - v1.0.0 */

/* ========== CONTAINER ========== */
.spz-cart-page-container {
    width: 100%;
}

/* ========== ESTRUTURA DA TABELA (GRID 3 COLUNAS) ========== */
.spz-cart-page-header,
.spz-cart-page-row,
.spz-cart-page-discount-row,
.spz-cart-page-total-row {
    display: grid;
    grid-template-columns: 50% auto auto;
    align-items: center;
    position: relative;
}

.spz-col-1,
.spz-cart-page-col-item,
.spz-cart-page-discount-label,
.spz-cart-page-total-label {
    text-align: left;
}

.spz-col-2,
.spz-cart-page-col-val,
.spz-cart-page-discount-val,
.spz-cart-page-total-val {
    text-align: left;
}

.spz-col-3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spz-cart-page-row {
    border-bottom: 1px solid transparent;
}

.spz-cart-page-footer {
    display: block;
    width: 100%;
}

/* ========== DIVISOR VERTICAL ========== */
.spz-cart-page-table.has-vertical-divider .spz-cart-page-header::after,
.spz-cart-page-table.has-vertical-divider .spz-cart-page-row::after,
.spz-cart-page-table.has-vertical-divider .spz-cart-page-discount-row::after,
.spz-cart-page-table.has-vertical-divider .spz-cart-page-total-row::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e0e0e0;
    width: 1px;
    height: 70%;
    left: 50%;
}

/* ========== BOTÃO REMOVER (X) ========== */
.spz-cart-page-remove {
    background: transparent;
    border: none;
    color: #FF6B6B;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.spz-cart-page-remove:active {
    transform: scale(0.95);
}

/* ========== DIVISOR HORIZONTAL ========== */
.spz-cart-page-divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
}

/* ========== CARRINHO VAZIO ========== */
.spz-cart-page-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

/* ========== RESPONSIVO ========== */
@media (max-width: 768px) {
    .spz-cart-page-header,
    .spz-cart-page-row,
    .spz-cart-page-discount-row,
    .spz-cart-page-total-row {
        grid-template-columns: 1fr auto auto;
        gap: 10px;
    }
    
    .spz-cart-page-col-item {
        font-size: 14px;
    }
    
    .spz-cart-page-col-val {
        font-size: 14px;
    }
    
    .spz-cart-page-remove {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }
}