.page-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0px 30px;
    max-width: 800px;
    margin: auto;
    margin-bottom: 40px;
}

.page-title {
    margin-bottom: 45px;
}

:is(.cart-item, .order-item)s {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
}

.cart-container,
.subtotal,
.billing-container,
.license-container,
.receipt-container {
    -webkit-box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
    min-height: 30px;
    padding: 20px;
    background: white;
    border-radius: 3px;
}
.receipt-container .mixes.loading {
    padding: 30px;
    text-align: center;
    font-size: 40px;
    color: var(--dark-blue);
}
.cart-item {
    display: grid;
    grid-template-columns: 75px 1fr;
    grid-template-rows: 20px 1fr 20px auto;
    grid-gap: 5px;
    padding: 20px 0;
    grid-template-areas:
        "img title cost"
        "img producer buttons"
        "voiceover voiceover voiceover";
}
.cart-item .mix-buttons {
    grid-area: buttons;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-areas:
        "edit"
        "remove";
    padding-top: 4px;
}

@media (min-width: 500px) {
    .cart-item {
        grid-gap: 5px 20px;
        grid-template-areas:
            "img title buttons"
            "img producer buttons"
            "img cost buttons"
            "voiceover voiceover voiceover";
    }
    .cart-item .mix-buttons {
        padding-bottom: 2px;
    }
}

.order-item {
    display: grid;
    grid-template-columns: 75px 1fr;
    grid-template-rows: 20px 1fr 1fr auto;
    grid-gap: 5px 15px;
    padding: 20px 0;
    grid-template-areas:
        "img title cost"
        "img length ..."
        "img license ..."
        "voiceover voiceover voiceover";
}

.order-item .mix-length {
    grid-area: length;
    display: flex;
    align-items: flex-end;
}
.order-item .mix-license {
    grid-area: license;
    align-items: flex-end;
    display: flex;
    font-size: 15px;
    line-height: 15px;
}
.order-item .mix-length {
    font-size: 15px;
    line-height: 15px;
}

:is(.cart-item, .order-item) > div {
    text-align: left;
    padding-left: 0;
}
:is(.cart-item, .order-item) .mix-title {
    display: flex;
    grid-gap: 10px;
}
:is(.cart-item, .order-item) .mix-img {
    width: unset;
}
.mix-title .title {
    font-size: 17px;
}
.mix-title .mix-producer,
.mix-length {
    color: grey;
    font-weight: 400;
    font-size: 13px;
}
.mix-addons {
    margin-top: 5px;
    grid-area: voiceover;
}
.mix-license-renewal {
    grid-area: voiceover;
    margin-top: 10px;
}

:is(.cart-item, .order-item) .mix-cost {
    grid-area: cost;
    align-self: end;
    line-height: 10px;
}
:is(.cart-item, .order-item) .mix-producer {
    grid-area: producer;
    font-size: 15px;
}
.cart-item .mix-length {
    grid-area: length;
    align-self: end;
    line-height: 10px;
}
:is(.cart-item, .order-item) .mix-remove {
    grid-area: remove;
    align-self: end;
    line-height: 10px;
    --hover: var(--red);
    cursor: pointer;
}
:is(.cart-item, .order-item) .mix-edit {
    --hover: var(--dark-blue);
}
:is(.cart-item, .order-item) :is(.mix-edit, .mix-remove) {
    cursor: pointer;
}
:is(.cart-item, .order-item) :is(.mix-edit, .mix-remove):hover {
    color: var(--hover);
}

:is(.cart-item, .order-item) + :is(.cart-item, .order-item) {
    border-top: 1px solid grey;
}

h1.page-title {
    font-size: 40px;
    text-align: center;
    margin-top: 50px;
    font-weight: 400;
}

:is(.subtotal, .cart-container, .billing-container, .license-container, .receipt-container) .panel-title {
    padding: 4px 6px 11px 0;
    text-align: center;
    font-size: 25px;
    font-weight: 300;
    border-bottom: 1px solid grey;
}

.panel-title .description {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 100;
}

.subtotal {
    display: grid;
    grid-gap: 30px;
}
.subtotal .amount {
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    color: var(--dark-blue);
}

.checkout {
    text-transform: uppercase;
}
.mobile-checkout {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    padding: 10px;
}
.register-form,
.login-form {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 15px;
    position: relative;
}

.billing-divider {
    text-align: center;
    margin: 33px;
    font-weight: 400;
    font-size: 21px;
}

.billing-info {
    margin-top: 9px;
    margin-bottom: 30px;
}

.register-form > *,
.login-form > * {
    display: block;
    align-self: center;
}

:is(.register-form, .login-form) > input {
    background-color: #80808038;
    border: 1px solid grey;
    padding: 4px 8px 2px;
    border-radius: 3px;
}

.register-error,
.login-error {
    color: var(--error-text);
    margin-top: 10px;
    display: none;
}

.forgot-password {
    position: absolute;
    bottom: -26px;
    line-height: 26px;
    right: 0;
}

.billing-container button {
    margin-top: 40px;
}

.license-container button {
    margin-top: 20px;
}

.license-panel {
    width: 100%;
    height: 400px;
    overflow: scroll;
    border: 1px solid grey;
    border-radius: 3px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.license-container .checkbox-wrapper {
    text-align: left;
    margin: 0 6px;
}

.license-container ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.license-container ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--orange);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.cart-empty-wrapper {
    margin: 70px 50px;
    text-align: center;
    display: grid;
    grid-gap: 20px;
}

.cart-empty-wrapper .title {
    font-size: 30px;
}

.cart-empty-wrapper .description {
    line-height: 20px;
}

.cart-empty-wrapper a {
    margin-top: 20px;
}

.subtotal .discount-wrapper {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-template-areas: "input button";
}

.discount-wrapper input {
    outline: none;
    width: 100%;
    padding-left: 10px;
    padding-top: 4px;
    height: 33px;
    /* background: #f0f0f0; */
    box-shadow: inset rgba(50, 50, 93, 0.1) 0px 2px 5px -1px, inset rgba(0, 0, 0, 0.1) 0px 1px 3px -1px;
    border: #cccccc 1px solid;
    font-size: 15px;
    border-radius: 4px 0 0 4px;
    grid-area: input;
}

.discount-wrapper .btn.apply-discount {
    font-size: 15px;
    height: 33px;
    border-radius: 0 4px 4px 0;
    grid-area: button;
}

.discount-wrapper .discount-message {
    grid-column: 1/3;
    color: var(--orange);
    height: 15px;
    text-transform: none;
}

.discount-wrapper .discount-message.error {
    color: #ce3b3b;
}

@media (min-width: 900px) {
    .page-container {
        grid-template-columns: 1fr 400px;
        max-width: 1000px;
    }
}