/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Checkout Page CSS Module */

.breadcrumbs {
    font-family: var(--font-audiowide);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.875rem;
}

.breadcrumbs > * {
    margin: 0;
}

.breadcrumbs a {
    color: var(--accent-orange);
}

.breadcrumbs a:not(:last-of-type) + .divider {
    color: var(--accent-orange);
}

.breadcrumbs .divider::after {
    content: '>';
}

.user-addresses {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
}

.user-addresses .address-box {
    position: relative;
    padding: 1rem;
    border: 2px solid var(--light-blue);
    border-radius: 0.5rem;
    -webkit-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
    cursor: pointer;
}

.user-addresses .address-box:hover {
    border-color: var(--accent-orange);
}

.user-addresses .address-box::after {
    content: '';    
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--light-blue);
    border: 0.25rem solid var(--light-blue);
}

.user-addresses .address-box .address__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.user-addresses .address-box .address__person {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.user-addresses .address-input:checked + .address-box {
    border-color: var(--accent-orange);
}

.user-addresses .address-input:checked + .address-box::after {
    background-color: var(--accent-orange);
}

.user-addresses .address-input:checked + .address-box .address__title {
    color: var(--accent-orange);
}

.user-addresses.inactive .address-box {
    opacity: 0.5;
    pointer-events: none;
}

.address-group .cta-buttons {
    margin-block: 1.5rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.address-group .cta-buttons button {
    font-size: 0.8em;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    padding-inline: 1rem;
}

.address-group .cta-buttons .close {
    display: none;
}

.new-address-form {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 0fr;
    grid-template-rows: 0fr;
    -webkit-transition: grid-template-rows 300ms ease;
    -o-transition: grid-template-rows 300ms ease;
    transition: grid-template-rows 300ms ease;
    transition: grid-template-rows 300ms ease, -ms-grid-rows 300ms ease;
}

.new-address-form > div {
    overflow: hidden;
}

.new-address-form.active {
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
}

/* Checkout Inforamtion Page */

.checkout-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap:  3.125rem;
    margin-block: 4.375rem  3.125rem;
}

.checkout-layout > * {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}

.checkout-layout .divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    color: #C7D9E366;
    margin-block: 2.5rem;
}

.checkout-layout .divider::before,
.checkout-layout .divider::after {
    content: '';
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 1px;
        flex-basis: 1px;
    height: 1px;
    background-color: currentColor;
}

.euplatesc {
    width: 100%;
}

.field-group {
    border: none;
    padding: 0;
    margin: 0;
}

.field-group:not(:first-of-type) {
    margin-block:  3.125rem;
}

.field-group__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.625rem;
}

.field-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.25rem;
}

.field-row:not(:first-of-type) {
    margin-top: 1.25rem;
}

.field-row .field {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}

.field-row .field input:not([type='checkbox']):not([type='radio']),
.field-row .field select,
.field-row .field textarea {
    width: 100%;
}

.cta-buttons {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1.875rem;
}

.back-button {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.625rem;
}

.back-button::before {
    content: '<';
    font-family: var(--font-orbitron);
    font-size: 1rem;
}

@media screen and (max-width: 680px) {

    .checkout-layout {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

}

@media screen and (max-width: 480px) {

    .field-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .field-row .field:empty {
        display: none;
    }

}