/************************\
 * Order Page CSS Rules *
\************************/
@import url("/resource/stylesheet/responsive.css");

@layer order {

    :root {
        --product-background: #f702;
        --vegan-colour: #a7fa;
        --vegetarian-color: #7fff7faf;
        --pescetarian-color: #afffffaf;
        scroll-behavior: smooth;
    }

    #legend,
    #post-products {
        border: var(--half-border-weight) solid white;
        border-radius: var(--image-border-radius);
        padding: var(--medium-spacing);
        margin: var(--large-spacing) auto var(--large-spacing);
        height: min-content;
        background-color: white;
        background-image: linear-gradient(to right, #fed3, #feda);
        text-align: center;

        p {
            display: inline-block;
            padding: var(--small-spacing);
            border-radius: var(--image-border-radius);

            &:not(:first-of-type) {
                margin-left: var(--small-spacing);
            }
        }

        .pre-load>p {
            display: block;

            margin-top: var(--small-spacing);
            padding: 0;

            font-size: 1.5em;

            a {
                display: inline-block;
            }

            &:not(:first-of-type) {
                font-size: 1.25em;
            }
        }


        .post-load {
            display: none;

            &.heading {
                font-weight: bold;
                font-size: 1.5em;
            }
        }

        &#post-products {
            background-image: linear-gradient(to left, #fed3, #feda);
            margin-top: var(--large-spacing);
            animation: 5s productFadeIn ease;
            overflow: hidden;
            padding: 0;

            button {
                padding: var(--medium-spacing);
                border: none;
                height: 100%;
                width: 100%;

                border-radius: var(--border-radius);
                background-color: transparent;

                font-weight: bold;
                font-size: 1.25em;
            }

            &:active,
            button:active {
                filter: invert(0.05);
            }
        }
    }

    #products {
        width: 100%;
    }

    .vegan,
    .vegetarian,
    .pescetarian {
        backdrop-filter: blur(0.25em);
    }

    .vegan {
        background-color: var(--vegan-colour);
    }

    .vegetarian {
        background-color: var(--vegetarian-color);
    }

    .pescetarian {
        background-color: var(--pescetarian-color);
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--large-spacing);

        background-color: var(--background-primary);
        border-radius: var(--image-border-radius);

        width: 100%;
    }

    .category {
        &:not(:first-child) {
            margin-top: var(--huge-spacing)
        }
    }

    .product {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        background-color: var(--product-background);
        background-image: linear-gradient(67deg, var(--product-background), transparent, transparent);
        border-radius: var(--image-border-radius);
        font-family: var(--brand-font-text);

        .thumbnail-background {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            background-image: url("/resource/image/logo/markOrange.png");
            background-color: white;
            background-position: center;
            background-size: cover;
            border-radius: var(--image-border-radius);
            overflow: hidden;

            .thumbnail-foreground {
                display: flex;
                flex-direction: column;

                aspect-ratio: 1.55;
                height: 100%;

                background-image: url("/resource/image/logo/markOrange.png");
                border-radius: var(--image-border-radius);
                background-repeat: no-repeat;
                backdrop-filter: blur(1em);
                background-position: center;
                background-size: contain;
                overflow: hidden;
            }

            .spacer {
                flex-grow: 1;
            }

            .badges {
                margin: var(--small-spacing);
                justify-content: right;
                display: flex;

                &:hover>p,
                &.active>p {
                    line-height: 100%;

                    &:not(.price) {
                        padding-top: 0.25em;
                        font-weight: 600;
                        font-size: 0.75em;
                        line-height: 140%;
                        overflow: hidden;
                    }

                    &.price {
                        padding: var(--small-spacing);
                    }

                    &.vegan::after {
                        content: " Vegan";
                    }

                    &.vegetarian::after {
                        content: " Vegetarian";
                    }

                    &.pescetarian::after {
                        content: " Pescetarian";
                    }
                }

                &>p {
                    padding: var(--small-spacing);
                    line-height: 100%;
                    cursor: help;
                    height: min-content;

                    &.price {
                        padding: var(--small-spacing) var(--medium-spacing);
                        background-color: #fffb;
                        cursor: default;
                    }

                    &:first-of-type {
                        border-radius: var(--image-border-radius) 0 0 var(--image-border-radius);
                    }

                    &:last-of-type {
                        border-radius: 0 var(--image-border-radius) var(--image-border-radius) 0;
                    }

                    &:first-of-type:last-of-type {
                        border-radius: var(--image-border-radius);
                    }
                }
            }
        }

        .information,
        .ingredients,
        .numerals {
            padding: 0 var(--medium-spacing);
        }

        .information {
            flex-grow: 1;

            &>* {
                display: block;
                width: 100%;
                margin: 0;
            }

            .title {
                text-align: center;
                font-weight: bold;
            }

            .description {

                text-align: center;
            }
        }

        .turnaround {
            margin-left: var(--medium-spacing);
        }

        .buttons {
            display: inline-flex;

            background-image: linear-gradient(to bottom, #8421, transparent);
            border-radius: var(--image-border-radius);
            font-family: var(--brand-font-monospace);

            overflow: hidden;
            width: 100%;
            height: 2em;

            .coming-soon {
                text-align: center;
                font-weight: bold;
                font-size: 1.25em;
                width: 100%;
            }

            &>div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                flex-grow: 1;

                font-weight: bold;
                text-align: center;

                &:not(:last-child) {
                    border-right: var(--half-border-weight) solid #0002;
                }

                &.remove {
                    border-right-style: solid;
                }

                &.count {
                    font-size: 1.25em;
                    flex-grow: 2;
                }

                &>p {
                    width: 100%;
                }

                button {
                    background-color: transparent;
                    border: none;
                    height: 100%;
                    width: 100%;

                    &:not(.count) {
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 1.25em;
                        filter: invert();

                        &:active {
                            background-color: #0000007f;
                            filter: invert(0);
                        }
                    }

                    &.remove {
                        background-image: url("/resource/image/symbol/cross.svg");
                    }

                    &.subtract {
                        background-image: url("/resource/image/symbol/minus.svg");
                    }

                    &.add {
                        background-image: url("/resource/image/symbol/plus.svg");
                    }
                }
            }
        }
    }

    @keyframes productFadeIn {
        from {
            filter: opacity(0);
            height: 0;
        }

        to {
            filter: opacity(1);
            height: 100%;
        }
    }

    @keyframes badgeExpand {
        0% {
            width: 1.75em;
        }

        99% {
            width: 6em;
        }

        100% {
            width: max-content;
        }
    }
}