/************* cart table *************/
.cart-table {
    width: 100%;
    border: 1px solid var(--light-stroke);
    tr {
        border-top: 1px solid var(--light-stroke);
    }
    th {
        font-weight: 400; 
        text-transform: uppercase;
        padding: 24px 40px;
    }
    .remove_product {
        transition: var(--transition-base);
        &:hover {
            color: var(--secondary-color);
        }
    }
    td {
        padding: 30px 40px;
        vertical-align: middle;
        .product-box {
            min-width: 350px;
        }
        .feature-image {
            width: 80px;
            padding: 10px;
        }
        .quantity {
            input {
                max-width: 50px;
                border: 1px solid var(--light-stroke);
                padding: 10px;
                text-align: center;
            }
            .step-btns {
                width: 30px;
                height: 46px;
                border: 1px solid var(--light-stroke);
                border-left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                position: relative;
                &::before {
                    content: ''; 
                    position: absolute;
                    left: 0; 
                    top: 50%;
                    width: 100%;
                    height: 1px;
                    background-color: var(--light-stroke);
                }
                button {
                    font-size: 12px;
                    padding: 0;
                    display: block;
                }
            }
        }
    }
    @include screen-992 {
        tbody {
            tr {
                th {

                }
            }
        }
    }
}

.cart-coupon-form {
    max-width: 475px;
    gap: 10px;
    input {
        width: 100%;
        background-color: transparent;
        border: 1px solid var(--light-stroke);
        font-weight: 300;
        font-size: 14px;
    }
    .submit-btn {
        border: 1px solid var(--light-stroke);
        flex-shrink: 0;
        padding: 13px 30px;
        transition: var(--transition-base);
        &:hover {
            background-color: var(--primary-color);
            color: var(--white-color);
        }
    } 
}

.cart-calculator-form {
    table {
        width: 100%;
        border: 1px solid var(--light-stroke);
        tr {
            border-top: 1px solid var(--light-stroke);
        }
        td {
            font-size: 18px;
            vertical-align: top;
            width: 50%;
            padding: 24px 32px;
            .shipping-method {
                min-width: 250px;
                label {
                    display: block;
                    span {
                        position: relative;
                        padding-left: 24px;
                        margin-left: -20px;
                        &::before {
                            content: '';
                            position: absolute;
                            left: 0; 
                            top: 6px; 
                            width: 18px; 
                            height: 18px;
                            border: 1px solid var(--primary-color);
                            border-radius: 50%;
                        }
                        &::after {
                            content: '';
                            position: absolute;
                            left: 5px;
                            top: 11px;
                            width: 8px;
                            height: 8px;
                            background-color: var(--primary-color);
                            border-radius: 50%;
                            opacity: 0;
                        }
                    }
                    input {
                        opacity: 0;
                        &:checked {
                            ~ span {
                                &::after {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                    + label {
                        margin-top: 12px;
                    }
                }
                p {
                    max-width: 270px;
                }
            }
        }
    }
}