/**
 * -------------------------------------------------------------------------
 *
 * The main styles.
 * It is inspired by Morooka's codepen Shopping UI (see https://codepen.io/mo-ro/pen/jObjGJm).
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Shopping UI with Vue.js
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    :root {
        --screenMargin:  2;
        --screenHeight:  60;
        --screenWidth:   34;

        --frameMargin:   2;
        --frameHeight:   calc( var(--frameMargin) +   var(--screenMargin) + var(--screenHeight) + var(--screenMargin)       + var(--frameMargin) );
        --frameWidth:    calc( var(--frameMargin) + ( var(--screenMargin) + var(--screenWidth)  + var(--screenMargin) ) * 2 + var(--frameMargin) );

        --displayHeight: 100vh;
        --displayWidth:  100vw;

        --fontByHeight:  calc( var(--displayHeight) / var(--frameHeight) );
        --fontByWidth:   calc( var(--displayWidth)  / var(--frameWidth)  );
        --fontOptimal:   min( var(--fontByHeight), var(--fontByWidth) );
        --fontSize:      max( var(--fontOptimal), 10px );

        font-size: var(--fontSize);
    }

    .center {
        text-align: center;
    }

    .hr::before {
        background: #f6c90e;
        border-radius: 0.3rem;
        content: '';
        display: block;
        height: 0.6rem;
        margin-bottom: 2rem;
    }

    body {
        background: #eceff1;
        font-size: 1rem;
        font-family: "Rubik", sans-serif;
        color: #303841;
    }
    body.ordering {
        cursor: wait !important;
        user-select: none !important;
    }
    body.ordering * {
        cursor: wait !important;
        pointer-events: none !important;
        user-select: none !important;
    }
    body::before {
        content: '';
        display: block;
        height: 1px;
        width: 1px;
        opacity: 0;
        position: fixed;
        top: -1px;
        left: -1px;
        z-index: -1;
    }
    body.ordering::before {
        background: #f6c90e;
        content: 'Please wait...';
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 3rem;
        font-weight: bold;
        height: 100vh;
        width: 100vw;
        padding: 1rem;
        opacity: 0.85;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 65535;
        transition: opacity 0.75s;
    }

        [data-label]::before {
            content: attr(data-label);
        }

        small {
            display: block;
            font-size: 1.4rem;
            font-weight: normal;
            line-height: 1.5;
            margin: 0.6rem 0 0;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        small:empty {
            display: none;
        }

        .wrapper {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            height: 100vh;
            max-width: 80rem;
            margin: 0 auto;
            padding: 2rem 2rem 0;
            position: relative;
        }
        .wrapper::before {
            content: '';
            display: block;
            position: fixed;
            width: 300vw;
            height: 100vh;
            top: 50%;
            left: 50%;
            border-radius: 100%;
            transform: translateX(-50%) skewY(-8deg);
            background-color: #f6c90e;
            z-index: -1;
            animation: wave 8s ease-in-out infinite alternate;
        }
        .wrapper::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            margin-top: calc(2rem - 1px);
        }

        @keyframes wave {
            0% {
                transform: translateX(-50%) skew(0deg, -8deg);
            }
            100% {
                transform: translateX(-30%) skew(8deg, -4deg);
            }
        }

            .screen {
                background-color: #fff;
                box-sizing: border-box;
                width: 34rem;
                height: 60rem;
                box-shadow: 0 0.32rem 0.22rem rgba(0, 0, 0, 0.02),
                            0 0.7rem  0.54rem rgba(0, 0, 0, 0.028),
                            0 1.21rem 1.01rem rgba(0, 0, 0, 0.035),
                            0 1.98rem 1.81rem rgba(0, 0, 0, 0.042),
                            0 3.47rem 3.38rem rgba(0, 0, 0, 0.05),
                            0 8.1rem  8.1rem  rgba(0, 0, 0, 0.07);
                border-radius: 3rem;
                border: #f6c90e 0.6rem solid;
                overflow-y: scroll;
                padding: 0 2.8rem;
                position: relative;
                margin: 2rem;
            }
            .screen::before {
                content: '';
                display: block;
                position: absolute;
                width: 30rem;
                height: 30rem;
                border-radius: 100%;
                background-color: #f6c90e;
                top: -20%;
                left: -50%;
                z-index: 0;
            }
            .screen::-webkit-scrollbar {
                display: none;
            }

                .app-bar {
                    font-size: 1.4rem;
                    line-height: 1.5;
                    padding: 1.2rem 0;
                    position: relative;
                }

                    .app-bar .logo {
                        display: block;
                        width: 5rem;
                    }

                .title {
                    font-size: 2.4rem;
                    font-weight: bold;
                    margin: 2rem 0;
                    position: relative;
                }

                    .title * {
                        display: block;
                        font-size: 1.4rem;
                        font-weight: normal;
                        margin: 0.6rem 0 0;
                    }

                    .title a {
                        background: #f57f17;
                        border-radius: 0.6rem;
                        color: #fff;
                        padding: 0.6rem 0.8rem;
                        text-decoration: none;
                    }

                    .title small {
                        background: #f57f17;
                        border-radius: 0.6rem;
                        color: #fff;
                        padding: 0.4rem 0.8rem;
                    }

                    .title a[href=""] {
                        display: none;
                    }

                .shop-items {
                    position: relative;
                }

                    .item-block {
                        padding: 4rem 0 6rem;
                    }
                    .item-block:first-child {
                        padding-top: 0;
                    }

                        .item-block > small {
                            background: #bdbdbd;
                            border-radius: 0.6rem;
                            color: #616161;
                            margin-top: 2rem;
                            padding: 0.4rem 0.8rem;
                        }

                        .item-block .image-area {
                            border-radius: 3rem;
                            height: 38rem;
                            display: flex;
                            align-items: center;
                            overflow: hidden;
                        }

                            .item-block .image-area .image {
                                display: block;
                                width: 100%;
                                filter: drop-shadow(0 3rem 2rem rgba(0, 0, 0, 0.2));
                                transform: rotate(-24deg);
                                margin-left: -1.6rem;
                            }

                        .item-block .name {
                            font-size: 2rem;
                            font-weight: bold;
                            margin: 2.6rem 0 2rem;
                            line-height: 1.5;
                        }
                        .item-block .name.tr {
                            border-top: #bdbdbd 0.1rem solid;
                            padding-top: 1rem;
                        }

                        .item-block .name.gray {
                            color: #9e9e9e;
                        }

                        .description {
                            font-size: 1.4rem;
                            color: #777;
                            line-height: 1.8;
                            margin-bottom: 2rem;
                        }
                        .description.error {
                            background: #d32f2f;
                            border-radius: 0.6rem;
                            color: #ffebee;
                            padding: 1rem;
                        }
                        .description.success {
                            background: #43a047;
                            border-radius: 0.6rem;
                            color: #e8f5e9;
                            padding: 1rem;
                        }
                        .description.hr {
                            margin-top: 2rem;
                        }
                        .description:empty {
                            display: none;
                        }

                            .description * {
                                max-width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                vertical-align: middle;
                            }

                            a {
                                color: #48f;
                                display: inline-block;
                            }

                            b,
                            strong {
                                display: inline-block;
                                font-weight: bold;
                            }

                            code {
                                color: #f57f17;
                                display: inline-block;
                                font-family: monospace;
                            }

                        ul,
                        ol {
                            font-size: 1.4rem;
                            color: #777;
                            line-height: 1.8;
                            margin: 0 0 2rem 2rem;
                            list-style: disc;
                        }
                        ol {
                            list-style: decimal;
                        }

                            li + li {
                                margin-top: 1rem;
                            }

                        .bottom-area {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                        .bottom-area + .bottom-area,
                        .bottom-area + .description {
                            margin-top: 2rem;
                        }
                        .bottom-area.hr {
                            border-top: #f6c90e 0.6rem solid;
                            margin-top: 2rem;
                            padding-top: 2rem;
                        }
                        .bottom-area.hr::before {
                            display: none;
                        }

                            .bottom-area .price {
                                font-size: 1.8rem;
                                font-weight: bold;
                            }

                            .bottom-area .button,
                            .bottom-area .amount {
                                background-color: #f6c90e;
                                border: none;
                                border-radius: 10rem;
                                box-sizing: border-box;
                                box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
                                transition: box-shadow 0.4s,
                                            background-color 0.2s;
                                color: inherit;
                                outline: none;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                font-size: 1.4rem;
                                font-weight: bold;
                                height: 4.6rem;
                                padding: 1.6rem 2rem;
                                user-select: none;
                                white-space: nowrap;
                                position: relative;
                                text-decoration: none;
                                overflow: hidden;
                            }
                            .bottom-area .amount {
                                background: #f57f17;
                                color: #fff;
                                cursor: default;
                            }
                            .bottom-area .amount.gray {
                                background: #bdbdbd;
                                color: #9e9e9e;
                            }
                            .bottom-area[data-amount^="0"] .button,
                            .bottom-area[data-amount^="-"] .button {
                                background-color: #bdbdbd !important;
                                color: #9e9e9e !important;
                                cursor: default !important;
                                pointer-events: none !important;
                                user-select: none !important;
                            }
                            .bottom-area .button.small {
                                font-size: 1.1rem;
                                height: 3.2rem;
                                padding: 1.6rem;
                                border-radius: 5rem;
                            }
                            .bottom-area .button:hover,
                            .bottom-area .button:active,
                            .bottom-area .button:focus {
                                background-color: #f8d43f;
                                box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
                            }
                            .bottom-area .button.-active {
                                pointer-events: none;
                                cursor: default;
                                user-select: none;
                            }

                                .bottom-area .button .cover {
                                    width: 1.6rem;
                                    height: 1.6rem;
                                    position: absolute;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }

                                    .bottom-area .button .cover .check {
                                        width: 100%;
                                        height: 100%;
                                        transform: translate(-100%, -73%) rotate(-45deg);
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                    }
                                    .bottom-area .button .cover .check::before,
                                    .bottom-area .button .cover .check::after {
                                        content: '';
                                        display: block;
                                        background-color: #303841;
                                        position: absolute;
                                        left: 0;
                                        bottom: 0;
                                        border-radius: 1rem;
                                    }
                                    .bottom-area .button .cover .check::before {
                                        width: 0.3rem;
                                        height: 50%;
                                    }
                                    .bottom-area .button .cover .check::after {
                                        width: 100%;
                                        height: 0.3rem;
                                    }

                                .buttonText-leave-active,
                                .buttonText-enter-active {
                                    transition: opacity 0.2s, top 0.35s;
                                }
                                .buttonText-leave-to,
                                .buttonText-enter {
                                    opacity: 0;
                                }

                .no-content {
                    line-height: 1.5;
                    position: relative;
                }

                    .no-content .text {
                        font-size: 1.4rem;
                    }

                    .noContent-enter-active,
                    .noContent-leave-active {
                        transition: opacity 0.5s;
                        position: absolute;
                    }
                    .noContent-enter,
                    .noContent-leave-to {
                        opacity: 0;
                    }

                .cart-items {
                    position: relative;
                }

                    .cart-item {
                        display: flex;
                        padding: 2rem 0;
                    }

                        .cart-item .left {
                        }

                            .cart-image {
                                width: 9rem;
                                height: 9rem;
                                border-radius: 100%;
                                background-color: #eee;
                                margin-right: 3.4rem;
                            }

                                .cart-image .image-wrapper {
                                }

                                    .cart-image .image-wrapper .image {
                                        display: block;
                                        width: 140%;
                                        transform: rotate(-28deg) translateY(-4rem);
                                        filter: drop-shadow(0 3rem 2rem rgba(0, 0, 0, 0.2));
                                    }

                        .cart-item .right {
                        }

                            .cart-item .right .name {
                                font-size: 1.4rem;
                                font-weight: bold;
                                line-height: 1.5;
                                margin-bottom: 1rem;
                            }

                            .cart-item .right .price {
                                font-size: 2rem;
                                font-weight: bold;
                                margin-bottom: 1.6rem;
                            }

                            .cart-item .right .count {
                                display: flex;
                                align-items: center;
                            }

                                .cart-item .right .count .number {
                                    font-size: 1.4rem;
                                    margin: 0 1.4rem;
                                    width: 2rem;
                                    text-align: center;
                                }

                                .cart-item .right .count .button {
                                    cursor: pointer;
                                    width: 2.8rem;
                                    height: 2.8rem;
                                    border-radius: 100%;
                                    background-color: #eee;
                                    font-size: 1.6rem;
                                    font-weight: bold;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    transition: 0.2s;
                                    user-select: none;
                                }
                                .cart-item .right .count .button:hover {
                                    background-color: #ddd;
                                }

                    legend {
                        display: block;
                        margin: 0;
                    }
                    legend + legend {
                        margin-top: 2rem;
                    }

                        legend small {
                            display: block;
                            font-size: 1.4rem;
                            margin: 0 0 0.5rem;
                        }
                        legend small ~ small {
                            display: block;
                            font-size: 1.2rem;
                            margin: 0.5rem 0 0;
                            white-space: normal;
                        }

                        input[type="text"],
                        input[type="email"],
                        input[type="password"],
                        input[type="url"],
                        input[type="color"],
                        input[type="number"],
                        input[type="range"],
                        select,
                        textarea {
                            background: transparent;
                            border: #303841 0.1rem solid;
                            border-radius: 0.6rem;
                            box-sizing: border-box;
                            display: block;
                            font-size: 1.8rem;
                            height: 4rem;
                            width: 100%;
                            padding: 1rem;
                        }
                        textarea {
                            min-height: 15rem;
                            resize: vertical;
                        }

                        legend label {
                            cursor: pointer;
                            display: inline-block;
                            font-size: 1.4rem;
                            margin: 0 0 2rem;
                        }

                    .order-details {
                        display: none;
                        margin: 2rem 0;
                    }
                    .order-details::before {
                        background: #f6c90e;
                        border-radius: 0.3rem;
                        content: '';
                        display: block;
                        height: 0.6rem;
                        margin-bottom: 2rem;
                    }
                    div:not(:empty) + .order-details,
                    div:not(:empty) + legend + legend + .order-details {
                        display: block;
                    }

                    .cart-items button[type="submit"] {
                        display: none;
                    }

    .cartList-enter-active {
        transition: all 2s;
    }
    .cartList-enter-active .right .name,
    .cartList-enter-active .right .price {
        transition: 0.4s;
    }
    .cartList-enter-active .right .name {
        transition-delay: 0.7s;
    }
    .cartList-enter-active .right .price {
        transition-delay: 0.85s;
    }
    .cartList-enter-active .right .count {
        transition: opacity 0.4s;
        transition-delay: 1s;
    }
    .cartList-enter-active .cart-image {
        transition: 0.5s cubic-bezier(0.79, 0.01, 0.22, 1);
    }
    .cartList-enter-active .cart-image .image-wrapper {
        transition: 0.5s cubic-bezier(0.79, 0.01, 0.22, 1) 0.1s;
    }

    .cartList-enter > .right .name,
    .cartList-enter > .right .price {
        opacity: 0;
        transform: translateX(3rem);
    }
    .cartList-enter > .right .count {
        opacity: 0;
    }
    .cartList-enter .cart-image {
        transform: scale(0);
    }
    .cartList-enter .cart-image .image-wrapper {
        transform: scale(0);
    }

    .cartList-leave-active {
        transition: 0.7s cubic-bezier(0.79, 0.01, 0.22, 1);
        position: absolute;
    }
    .cartList-leave-to {
        transform: scale(0);
        opacity: 0;
    }

    .cartList-move {
        transition: 0.7s cubic-bezier(0.79, 0.01, 0.22, 1);
    }