a[data-session-cart-icon] {
    color:white;
    background-color: #9F1F63;
    border-radius: 100%;
    width:40px;
    height:40px;
    aspect-ratio: 1/1;
    display:inline-flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow: visible;
    padding:0;
    gap:0.25rem;
    text-decoration: none;

    span {
        font-family: 'Roboto', sans-serif;
        font-size: 0.8rem;
        font-weight: bold;
        position:absolute;
        display:inline-flex;
        justify-content:center;
        align-items:center;
        right:-8px;
        bottom:0;
        background-color: #F3AE18;
        color: #64013A;
        border-radius: 100%;
        width:25px;
        height:25px;
    }
}
a[data-session-cart-icon][data-session-cart-total="0"] {
    background-color: #959595;
    span {
        display: none;
    }
}


form.session-cart {

    /* first and last .cart-item should have rounded borders */
    > div:first-of-type {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
    > div:last-of-type {
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    img {
        width: 150px;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .cart-item:nth-child(odd) {
        background-color: rgba(255,255,255,0.65);
    }
    .cart-item:nth-child(even) {
        background-color: rgba(255,255,255,0.45);
    }

    .cart-item {
        display: grid;
        grid-template-columns: /*75px*/ 150px /*50px*/ 5fr 1fr 1fr /*100px*/;
        grid-gap: 1rem;
        align-items: center;
        margin: 0;
        padding: 1rem;

        .cart-item-tag {
            display:none;
            span {
                text-transform: uppercase;
                display:inline-flex;
                flex-direction: row;
                justify-content:center;
                align-items:center;
                min-width:80px;
                padding: 0.5rem;
                background-color: #63013A;
                color: white;
                border-radius: 0.5rem;
            }
            span[data-session-cart-tag="course"] {
            }
            span[data-session-cart-tag="package"] {
                background-color: #F3AE18;
                color: #64013A;
            }
        }

        .cart-item-id {
            display: none;
        }

        .cart-item-title {
            align-self: center;
            display:flex;
            flex-direction:column;
            gap:0.5rem;
            font-family: 'gilroy', 'open sans', sans-serif;

            p {
                color: #63043A;
            }
            strong {
                font-weight:bold;
            }

            h3 {
                font-size:1rem;
                text-transform: none;
                margin-bottom:0;
                font-weight: normal;

                i {
                    font-size:0.75rem;
                }
            }
        }

        .cart-item-description {

        }

        .cart-item-quantity {
            justify-self: center;
            input {
                /* make it read only */
                display:none;
                pointer-events: none;
                background-color: white;
                border: 1px solid #959595;
                border-radius: 0.5rem;
                /* hide the up and down arrows */
                -webkit-appearance: none;
                -moz-appearance: textfield;
                appearance: textfield;
                padding: 0.5rem;
                width: 50px;
            }
            button.cart-item-quantity--decrement,
            button.cart-item-quantity--increment {
                display:none;
            }
            button.cart-item-remove {
                cursor: pointer;
                background-color: #9F1E63;
                width: 40px;
                height: 40px;
                color:white;
                border: none;
                border-radius: 0.5rem;
                transition: all 0.3s;
            }
            button.cart-item-remove:hover {
                background-color: #63013A;
            }
            button svg, button i {
                pointer-events: none;
            }
        }

        .cart-item-price {
            justify-self: end;
            font-weight: bold !important;
            font-family: "gilroy", "Open Sans", sans-serif;
            color: green !important;
        }

        .cart-item-total {
            display:none;
            justify-self: end;
        }
    }

    .cart-total-value {
        display:none;
    }
}

p.course-credits {
    color: #63043A;
    font-family: 'gilroy', 'open sans', sans-serif;
    strong {
        font-weight:bold;
    }
}