/*
 * ------
 * wizard
 * ------
 */

.checkout-wizard {
    background-color: var( --color-white );
    border: 1px solid var( --color-pearlgray );
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 3px 5px rgba( 46, 48, 60, 0.05 );
}

    /*
     * -----------------
     * wizard navigation
     * -----------------
     */

    .checkout-wizard .pages-nav-container ul.pages-nav  {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-wrap: nowrap;
        justify-content: stretch;
        color: var( --color-pearlgray-dark );
        background-color: var( --color-pearlgray-light );
        border-bottom: 1px solid var( --color-pearlgray );
        padding: 0;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li {
        flex: auto;
        display: block;
        position: relative;
        list-style: none;
        cursor: pointer;
        text-align: center;
        padding: 5px;
        margin-top: 5px;
        margin-bottom: -1px;
        margin-left: -1px;
        margin-right: -1px;
        font-weight: 700;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li:first-child {
        margin-left: 5px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li:last-child {
        margin-right: 5px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li.active {
        color: var( --color-panthagray );
        background-color: var( --color-white );
        border-color: var( --color-pearlgray );
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li {
        margin-bottom: 5px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li:first-child {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.active,
    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.visited {
        border-top-color: var( --color-pearlgray );
        border-bottom-color: var( --color-pearlgray );
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.active:not(:first-child) {
        border-left-color: transparent;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.active:not(:last-child) {
        border-right-color: var( --color-pearlgray );
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.active:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 4px;
        right: 0px;
        width: calc( 1.6em + 2px );
        height: calc( 1.6em + 2px );
        background-color: var( --color-white );
        border-top: 1px solid var( --color-pearlgray );
        border-right: 1px solid var( --color-pearlgray );
        border-radius: 2px;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateX( 50% ) rotate( 45deg );
        -moz-transform: translateX( 50% ) rotate( 45deg );
        -ms-transform: translateX( 50% ) rotate( 45deg );
        -o-transform: translateX( 50% ) rotate( 45deg );
        transform: translateX( 50% ) rotate( 45deg );
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.visited {
        color: var( --color-panthagray );
        background-color: var( --color-white );
    }

    .checkout-wizard .pages-nav-container ul.pages-nav.sign-like li.visited:first-child {
        border-left-color: var( --color-pearlgray );
        border-right-color: transparent;
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li:hover {
        color: var( --color-panthagray );
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li.active .num {
        color: var( --color-orange );
    }

    @media( max-width: 481px ) {
        .checkout-wizard .pages-nav-container ul.pages-nav li > *:not(.num) {
            display: none;
        }
    }

    .checkout-wizard .pages-nav-container ul.pages-nav li p {
        font-weight: inherit;
    }

    /*
     * ------------
     * wizard pages
     * ------------
     */

    /*.checkout-wizard .pages {
        width: 100%;
    }*/

        /*
         * -----------------
         * wizard pages page
         * -----------------
         */

        .checkout-wizard .pages .checkout-page {
            padding: 20px;
            display: none;
        }

        .checkout-wizard .pages.view-page-1 .page-1, 
        .checkout-wizard .pages.view-page-2 .page-2, 
        .checkout-wizard .pages.view-page-3 .page-3, 
        .checkout-wizard .pages.view-page-4 .page-4, 
        .checkout-wizard .pages.view-page-5 .page-5, 
        .checkout-wizard .pages.view-page-6 .page-6, 
        .checkout-wizard .pages.view-page-7 .page-7, 
        .checkout-wizard .pages.view-page-8 .page-8, 
        .checkout-wizard .pages.view-page-9 .page-9, 
        .checkout-wizard .pages.view-page-10 .page-10 {
            display: flex;
            display: -webkit-flex;
            display: -ms-flexbox;
            flex-wrap: wrap;
        }

        .checkout-wizard .pages .checkout-page h3 {
            margin-bottom: 20px;
        }

        .checkout-wizard .pages .checkout-page > *:not(.btn.prev):not(.btn.next):not(.row) {
            width: 100%;
        } 

        .checkout-wizard .pages .checkout-page > .row {
            width: calc( 100% + 20px );
        }

        .checkout-wizard .pages .checkout-page > *:not(.btn.prev):not(.btn.next) {
            flex: none;
        }

        .checkout-wizard .pages .checkout-page .btn.prev {
            display: inline-block;
            width: fit-content;
            margin-right: auto;
            margin-left: 0;
        }

        .checkout-wizard .pages .checkout-page .btn.next {
            display: inline-block;
            width: fit-content;
            margin-left: auto;
            margin-right: 0;
        }

    /*
     * ----------------
     * wizard cupon row
     * ----------------
     */

    .checkout-wizard .coupon-row {
        display: none;
    }

    .checkout-wizard .coupon-row.active {
        display: block;
        margin: 20px 20px 0 20px;
        padding: 0 0 20px 0;
        border-bottom: 1px solid var( --color-pearlgray-light );
    }

    .checkout-wizard .checkout_coupon {
        display: flex !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        flex-wrap: nowrap;
        column-gap: 10px;
        padding: 0;
    }

    .checkout-wizard  .checkout_coupon input {
        flex: auto;
    }

    .checkout-wizard  .checkout_coupon button {
        flex: none;
    }