div[data-event-search] {
    min-height: 300px;

    > form {
        background-color: white;
        border-radius: 18px;
        padding: var(--layout-gutter);
        margin-top: var(--layout-gutter);
        display: flex;
        flex-direction: column;
        gap: calc(var(--layout-gutter) / 2);

        label {
            font-size: 1.2rem;
            font-weight: bold;
        }

        button[type="submit"] {
            margin-left: auto;
            margin-right: 0;
        }

        div.categories, div.when {
            --skeleton-min-height: 44px;

            display: flex;
            gap: calc(var(--layout-gutter) / 2);
            flex-wrap: wrap;

            label {
                border: solid 1px var(--colour-text-accent);
                border-radius: 18px;
                padding: calc(var(--layout-gutter) / 2);

                display: flex;
                gap: calc(var(--layout-gutter) / 2);
                align-items: center;
                cursor: pointer;
                font-size: 1rem;
                font-weight: normal;
                user-select: none;

                input {
                    flex-shrink: 0;
                }

                &:has(input:checked) {
                    border-color: var(--colour-primary);
                    background-color: var(--colour-primary);
                    color: white;

                    p.title {
                        font-weight: bold;
                    }
                }
            }
        }
        
        &:not(:has(label.category)) {
            button[type="submit"] {
                cursor: not-allowed;

                &:active {
                    pointer-events: none;
                }
            }
        }
    }

    div.results-wrapper {        
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &:not(.active) {
            display: none;
        }

        div.results {
            background-color: white;
            min-height: 200px;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            padding: var(--layout-gutter);
            max-height: 95vh;
            overflow-y: auto;

            > p.title {
                font-size: 1.4rem;
                font-family: 'Sorts Mill Goudy', sans-serif;
            }

            ol {
                list-style: none;
                padding: 0;
                margin: 0;
                
                margin-top: var(--layout-gutter);

                &:has(form.multi-tickets.active) {
                    > li:not(:has(form.multi-tickets.active)) {
                        display: none;
                    }
                }

                > li {
                    &:not(:last-of-type) {
                        border-bottom: solid 1px var(--colour-text-accent);
                    }

                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--layout-gutter) / 2);
                    align-items: stretch;
                    padding: calc(var(--layout-gutter) / 2) 0;

                    &.empty {
                        align-items: center;
                        justify-content: center;

                        p:first-of-type {
                            font-size: 1.2rem;
                            font-weight: bold;
                        }
                    }

                    div.top {
                        display: flex;
                        gap: calc(var(--layout-gutter) / 2);

                        div.cal {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 0 calc(var(--layout-gutter) / 2);

                            .dayName {
                                font-size: 0.8rem;
                                font-weight: lighter;
                            }

                            .day {
                                font-size: 1.4rem;
                                font-weight: bold;
                            }

                            .month {
                                font-size: 1rem;
                                font-weight: bold;
                            }
                        }

                        div.details {
                            flex: 1;
                            height: 100%;
                            display: flex;
                            flex-direction: column;

                            .title {
                                font-size: 1.2rem;
                                font-weight: bold;
                            }

                            div.badges {
                                display: flex;
                                flex-direction: row;
                                gap: calc(var(--layout-gutter) / 2);
                                flex-wrap: wrap;

                                p {
                                    display: flex;
                                    gap: calc(var(--layout-gutter) / 4);
                                    font-size: 1rem;
                                    font-weight: bold;

                                    padding: 4px;
                                    border-radius: 6px;
                                    background-color: silver;
                                    color: white;
                                    width: fit-content;

                                    &.time {
                                        background-color: var(--colour-text-accent);
                                    }
                                }
                            }

                            .description {
                                flex: 1;
                                font-size: 0.8rem;
                            }
                        }
                    }

                    div.purchase-option {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        form.single-ticket {
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-end;
                            width: 100%;

                            button[type="submit"] {
                                width: 190px;
                            }
                        }

                        &:has(form.multi-tickets) {
                            flex-direction: column;

                            form.multi-tickets {
                                width: 90%;
                                background-color: #d4c1551a;
                                border-radius: 18px;
                                padding: var(--layout-gutter);
                                margin-top: var(--layout-gutter);

                                &:not(.active) {
                                    display: none;
                                }

                                ul {
                                    list-style: none;
                                    padding: 0;
                                    margin: 0;

                                    li {
                                        display: flex;
                                        margin-bottom: 9px;

                                        div:first-of-type {
                                            flex: 1;
                                            p.name {
                                                font-weight: bold;
                                            }
                                        }
                                    }
                                }

                                div.buttons {
                                    display: flex;
                                    gap: var(--layout-gutter);
                                    justify-content: flex-end;
                                    margin-top: var(--layout-gutter);
                                    align-items: center;
                                }
                            }

                            button.toggle {
                                align-self: flex-end;
                            }

                            &:has(form.multi-tickets.active) {
                                button.toggle {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

div[data-event-disabled-purchases] {
    padding: var(--layout-gutter) 0px;
    width: fit-content;
    text-align: center;
    background-color: white;
    padding: var(--layout-gutter);
    border-radius: 18px;
    margin: var(--layout-gutter) auto;
}

div[data-event-wait-list] {
    padding: var(--layout-gutter);
    max-width: 750px;
    width: 100%;
    background-color: white;
    border-radius: 18px;
    margin: var(--layout-gutter) auto;

    form {
        div.form-component {
            display: flex;
            gap: calc(var(--layout-gutter) / 2);
            flex-direction: column;

            div.controls {
                display: flex;
                gap: calc(var(--layout-gutter) / 2);
                align-items: flex-end;  

                @media (max-width: 768px) {
                    flex-direction: column;
                    align-items: center;
                }

                label {
                    flex: 1;
                    width: 100%;
                }
            }

            input[name="referrer"] {
                position: absolute;
                left: -99999px;
                top: -99999px;
            }

            &:has(.on-waitlist) {
                div.controls, p.privacy {
                    display: none !important;
                }
                
                .on-waitlist {
                    a {
                        margin-left: auto;
                        margin-right: 0;
                        width: fit-content;
                        display: block;
                        margin-top: calc(var(--layout-gutter) / 2);
                    }
                }
            }

            p.thanks {
                flex: 1;
                width: 100%;
                border-left: solid 5px var(--colour-primary);
                padding: calc(var(--layout-gutter) / 2);
                background-color: #dbf9ee;
            }

            p.privacy {
                border-left: solid 5px #cdc6f6;
                padding: calc(var(--layout-gutter) / 2);

                font-size: 0.8rem;
            }
        }
    }
}