/* ***************** */
/* Start Cart Dialog */
/* ***************** */

#cart {
    
    border-radius: 1em;
    background: var(--main-dialog-background);
    opacity: 0.95;
    
    border-style: none;
    color: var(--main-font-color);
    
    width: 90%;
    padding: 0.5em;
}

@media (min-width: 1024px) {
    #cart {
        width: 80%;
        height: 80%;
    }
}

#cart > div {
    width: 100%;
    display: grid;
    grid-template: 
        'cartheader'
        'cartcontainer'
        'cartcheckout'
        'cartclose';
    
}

#cart .cartheader {
    grid-area: cartheader;
    
    text-align: center;
    font-size: xx-large;
}

#cart .cartcontainer {
    grid-area: cartcontainer;
    
    grid-template:
        'cartdata'
        'elementfooter';
    grid-template-columns: 1fr;
}

#cart .cartcheckout {
    grid-area: cartcheckout;
    width: 100%;
    
    border-radius: 1em;
    border-color: var(--main-button-border-color);
    background: transparent;
}

#cart .cartclose {
    grid-area: cartclose;
    
    border-radius: 1em;
    border-color: var(--main-button-border-color);
    background: transparent;
}


#cart .cartcontainer .elementheader {
    display: none;
}

@media (min-width: 1024px) {
    #cart .cartcontainer .elementheader {
        display: initial;
        width: 100%;
        display: inline-grid;
        grid-template: 'title price count amount';
        grid-template-columns: 1fr 10% 10% 10%;
        padding-left: 0.5em;
        padding-right: 1.5em;
        margin-bottom: 1em;
        border-style: none;
    }
}

#cart .cartcontainer #cartdata {
    grid-area: cartdata;
}

#cart .cartcontainer .elementfooter {
    grid-area: elementfooter;
}

/* *************** */
/* End Cart Dialog */
/* *************** */



/* ****************** */
/* Begin Cart Element */
/* ****************** */

#cart #cartdata .cartelement {
    display: grid;
    
    grid-template:
        'cartimage title title title'
        'cartimage price count amount'
        'cartimage pricetax . amounttax'
        'action action action action';
    grid-template-columns: 20% 1fr 8% 25%;
    grid-column-gap: 0.5em;
    
    margin-right: 0em;
    margin-bottom: 1em;
    
    padding-top: 0.3em;
    padding-left:0.3em;
    padding-right: 0.3em;
    padding-bottom: 0em;
    
    border-radius: 1em;
    
    background-color: var(--cart-background-color);
    
    box-shadow: 0 7px 14px 0 rgb(60 66 87 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

@media (min-width: 1024px) {
    
    #cart #cartdata .cartelement {
        grid-template:
            'cartimage title price count amount'
            'cartimage title pricetax . amounttax'
            'cartimage title action action action';
        
        grid-template-columns: 10% 1fr 10% 7% 10%;
        grid-template-rows: 1.5em 1fr 1fr;
        column-gap: 0.5em;
        
        padding-bottom: 0.3em;
    }
    
}

#cart #cartdata .cartelement .cartimage {
    grid-area: cartimage;
    
    border-radius: 1em;
    box-shadow: 0 7px 14px 0 rgb(60 66 87 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

#cart #cartdata .cartelement .title {
    grid-area: title;
}

#cart #cartdata .cartelement .price {
    grid-area: price;
}

#cart #cartdata .cartelement .pricetax {
    grid-area: pricetax;
    
    font-size: x-small;
}

#cart #cartdata .cartelement .count {
    grid-area: count;
}

#cart #cartdata .cartelement .amount {
    grid-area: amount;
}

#cart #cartdata .cartelement .amounttax {
    grid-area: amounttax;
    
    font-size: x-small;
}

#cart #cartdata .cartelement .action {
    grid-area: action;
    
    margin-top: 1em;
    margin-left: 2em;
    margin-right: 2em;
    
    border-radius: 1em;
    border-color: var(--main-button-border-color);
    background: transparent;
}

/* **************** */
/* End Cart Element */
/* **************** */

#cart .cartcontainer .elementfooter {
    
    display: grid;
    grid-template-columns: 60% 40%;
    column-gap: 0.5em;
    margin-bottom: 1em;
    margin-right: 1em;
    border-style: none;
    
}

@media (min-width: 1024px) {
    #cart .cartcontainer .elementfooter {
        grid-template-columns: 80% 20%;
    }
}

#cart .cartcontainer .total {
    text-align: right;
    font-size: larger;
}

#cart .cartcontainer .totalnet {
    text-align: right;
    font-size: small;
}

#cart .cartcontainer .totaltax {
    text-align: right;
    font-size: small;
}

#cart .cartcontainer .caption {
    text-align: right;
}




/* ***************** */
/* Begin Cart Button */
/* ***************** */

.cartbuttongroup {
    position: absolute;
    top: 1em;
    right: 1em;
}

.cartbuttongroup #cartbutton {
    color: var(--main-font-color);
    font-size: 3em;
    height: 1.5em;
    padding-top: 0.3rem;
    padding-right: 0.8rem;
    padding-bottom: 0rem;
    padding-left: 0.8rem;
    line-height: 1em;
    border-color: var(--main-border-color);
}

.cartbuttongroup #cartbadge {
    text-align: center;
    color: var(--main-font-color);
    background-color: var(--spacemall-light-blue) !important;
    border-color: var(--main-border-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 0.5em;
    width: 1.6em;
    position: relative;
    top: -2em;
    left: -0.4em;
}

/* *************** */
/* End Cart Button */
/* *************** */