:root {
    --text: #555;
    --black: #000;
    --white: #fff;
    --border: #ddd;
    --gray-dark: #434343;
    --gray-light: #c5c5c5;
    --blue-link: blue;
    --loading: #c5c5c573;
    --accent: var(--red, #e75f5f);
    --success: var(--tan, #d1cbc3);
}

::backdrop {
    backdrop-filter: blur(2px);
}

[hidden] {
    display: none !important;
}

select:has(option[disabled]:checked) {
    color: #b5b5b5;
}

body:has(dialog[open]) {
    overflow: hidden !important;
}

[data-selection-group] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;

    fieldset:last-of-type {
        grid-column: span 3;
    }

    fieldset {
        box-shadow: 5px 5px 10px #63626291;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        cursor: pointer;

        &:hover {
            img {
                transform: scale(1.2);
                opacity: 1;
                filter: grayscale(0);
            }

            footer {
                padding-left: 2rem;
            }
        }

        header {
            text-align: center;
            height: 15vh;
        }

        footer {
            font-size: 1.3rem;
            padding: 1rem;
            position: absolute;
            bottom: 0;
            color: #757575;
            transition: padding-left 600ms, font-size 300ms;

            &::first-letter {
                font-family: "itc-fenice", serif;
                font-size: 1.5rem;
                font-weight: bold;
                color: var(--red, #000);
            }
 
            @media only screen and (min-width: 1000px) {
                font-size: 2.5rem;

                &::first-letter {                  
                    font-size: 4rem;                   
                }
            }
        }

        img {
            position: relative;
            top: 0;
            left: 35%;
            width: 100%;
            object-fit: cover;
            z-index: -1;
            transition: all 800ms;
            filter: grayscale(1);
            opacity: .5;
            max-height: 20vh;
        }
    }
}

.purchase-wrapper {
    min-height: 30rem;
    border: 1px solid var(--border, #434343);
    margin: 2rem auto;

    >header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid var(--border, #434343);
        align-items: center;
    }

    dialog {
        outline: none;
        border: none;
        overflow: hidden;
        padding: 0;
        user-select: none;
        box-shadow: 5px 5px 10px #2d2d2d91;
        color: var(--text);
    }

    hr {
        width: 95%;
        border: none;
        border-bottom: 1px solid var(--border);
        margin: 1rem auto;
    }

    button {
        border: none;
        background-color: var(--accent);
        border-radius: 6px;
        color: var(--white);
        padding: .7rem 1rem;
        text-transform: uppercase;
    }

    input,
    select,
    textarea {
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text);
        min-width: 1px;
    }

    input[type="date"] {
        height: 45px;
        border: 1px solid #b5b5b5;
        padding: 8px 14px;
        vertical-align: middle
    }

    section[data-result] {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(5, 1fr);
        color: var(--gray-dark, #434343);
        overflow: hidden auto;
        max-height: 50vh;

        &>span {
            color: var(--text);
            font-size: clamp(17px, 1.2rem, 20px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 1rem;
            text-align: center;

            &:nth-last-child(-n+5) {
                border: none;
            }

            &[data-header-cell] {
                background-color: #fff;
                text-align: center;
                font-weight: 600;
                position: sticky;
                top: 0;
                height: 100%;
            }

            &[data-has-offer="true"] {
                color: var(--blue-link);
                cursor: pointer;
                text-decoration: underline;
            }
        }

        [data-header-line-break] {
            grid-column: span 5;
            border-bottom: 1px solid var(--border);
            padding: 0;
        }

        .row-action {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;

            a[data-invert] {
                color: var(--accent);
                border: 1px solid var(--accent);
                background-color: transparent;
            }
        }

        h2 {
            justify-self: center;
            grid-column-start: 1;
            grid-column-end: 6;
            margin: 5rem;
            font-size: 3rem;
        }

        [data-admin-update-deleted] {
            display: flex;
            justify-content: center;

            >input[type="checkbox"] {
                height: 1.2rem;
                accent-color: var(--gray, #5f5f5f);
            }
        }

        [data-column-actions] {
            display: flex;
            align-items: center;
            gap: 1rem;

            i,
            a {
                color: var(--text);
            }
        }

        [data-line-break] {
            grid-column: span 6;
            border-bottom: 1px solid var(--border, #434343);
        }
    }

    [data-search] {
        /* display: inline-flex; */
        display: none;
        gap: 1rem;
        align-items: center;
        border-bottom: 1px solid var(--border);
        overflow: hidden;

        input[type="text"] {
            all: revert;
            border: none;
            background-color: transparent;
            padding: .5rem;
            font-size: 1.2rem;
            outline: none;
        }

        button[type="submit"] {
            border: none;
            background-color: var(--border);
            color: var(--white);
            padding: 0 1rem;
        }

        [data-search-mine] {
            color: var(--accent);
            transition: transform 700ms;
            padding-right: 1rem;
        }

        [data-search-mine]:hover {
            transform: scale(1.3);
        }
    }

    [data-purchase-dialog] {
        >header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            position: sticky;
            top: 0;
            padding: 1rem;
            background-color: var(--accent);
            color: var(--white);

            h4 {
                font-size: 2rem;
                color: revert;
                flex: 1;
                text-align: center;
                margin: 0;
            }

            i:last-of-type {
                margin-left: auto;
                cursor: pointer;
                font-size: 2rem;

                &::after {
                    content: "\002715";
                    font-style: normal;
                }
            }

            i:first-of-type {
                display: none;
                margin-left: auto;
                cursor: pointer;
                font-size: 2rem;

                &::after {
                    content: "\2190";
                    font-style: normal;
                }
            }
        }

        >main {
            width: clamp(500px, 60vw, 950px);
            height: clamp(1rem, 75vh, 720px);
            overflow-y: auto;
            padding: 2rem;
            outline: none;
            scroll-behavior: smooth;

            >form {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            [data-pieces] {
                display: grid;
                grid-template-columns: 7fr 2fr;
                width: 90%;
                gap: 1rem;
                padding: 0 5rem;

                label {
                    font-size: 1.5rem;
                    opacity: .8;
                }
            }

            [data-drop-area] {
                display: revert;
                text-align: center;
                line-height: 200px;
                border: 2px dashed var(--gray-light);
                cursor: help;
            }

            [data-preview-container] {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                justify-content: center;
                gap: 3rem;
                padding: 3rem;
            }

            .preview-image {
                display: flex;
                justify-content: center;
                box-shadow: 5px 5px 15px var(--text);
                border-radius: 6px;

                img {
                    animation: fadeIn 1s forwards;
                }

                i {
                    top: 0;
                    font-size: 3rem;
                    font-weight: 900;
                    color: var(--white);
                    cursor: pointer;
                    position: absolute;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--gray-dark);
                    opacity: 0;
                    transition: opacity .3s;
                }

                i:hover {
                    opacity: 1;
                }
            }
        }

        >footer {
            display: flex;
            position: sticky;
            bottom: 0;
            flex-direction: row-reverse;
            padding: 1rem;
            gap: 1rem;

            button {
                opacity: 0;
                pointer-events: none;
                transition: opacity 400ms;
            }
        }

        &[data-count] {
            >footer {
                [data-submit] {
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }

    [data-dialog-offer] {

        header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            position: sticky;
            top: 0;
            padding: 1rem;
            background-color: var(--accent);
            color: var(--white);

            h4 {
                font-size: 2rem;
                color: revert;
                flex: 1;
                text-align: center;
                margin: 0;
            }

            i {
                margin-left: auto;
                cursor: pointer;
                font-size: 2rem;

                &::after {
                    content: "\002715";
                    font-style: normal;
                }
            }
        }

        main {
            padding: 3rem;
        }

        footer {
            text-align: right;
            padding: 1rem;
        }
    }
}

[data-purchase-notify] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    gap: 2rem;
    padding: 1rem;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    border-radius: .5rem;
    box-shadow: 0 5px 10px #000000a3;
    overflow: hidden;
    opacity: 0;
    z-index: 1000000000;
    background-color: var(--white);
    border-block: 1px solid var(--red, --white, #fff);
    border-inline: 1rem solid var(--red, --white, #fff);

    main {
        padding: .5em;
        font-size: .5em;
    }
}

.round {
    border-radius: 6px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}