section.instagram {
    div.header {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 22px;

        a {
            flex-shrink: 0;
            display: flex;
            gap: 22px;
            align-items: center;
            text-decoration: none;
            font-weight: bold;
            color: black;

            svg {
                width: 30px;
            }
        }
    }

    div.gallery {
        margin-top: var(--sectionMargin);
    }
}

div.gallery {
    --gap: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;

    a {
        max-width: 180px;
        width: 100%;
        aspect-ratio: 1/1;
        background-color: silver;
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
        cursor: pointer;

        img {
            aspect-ratio: 1/1;
            object-fit: cover;
            object-position: center;
        }
    }

    @media (max-width: 768px) {
        > a {
            max-width: calc((100vw / 2) - var(--gap));
        }
    }

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

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        gap: 44px;
        justify-content: center;
        align-items: center;
        user-select: none;
        
        div.backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        img {
            max-height: 80vh;
            max-width: 80vw;
        }

        svg {
            fill: white;
            width: 40px;
            cursor: pointer;
        }

        .mobile {
            display: none;

            gap: 44px;
            justify-content: center;
        }

        @media (max-width: 992px) {
            flex-direction: column;

            .mobile {
                display: flex;
            }

            .desktop {
                display: none;
            }
        }
    }
}

form.session-search {
    margin-top: 22px;

    div.input.date {
        max-width: 200px;
    }

    div.session-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;

        button.time {
            &[disabled] {
                text-decoration: line-through;
                opacity: 0.5;
                cursor: not-allowed;
            }
        }

        &.expanded {
            flex-direction: column;
        }
    }
}

div.ticket-selector {
    --width: 650px;
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;

    div.backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    div.content {
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
        position: fixed;
        max-width: var(--width);
        width: 100%;
        background-color: white;
        padding: 22px;
        max-height: 90vh;
        overflow: auto;

        p.description {
            border: solid black 1px;
            background-color: #efead840;
            margin-top: 22px;
            padding: 22px;
        }

        p.open-hire {
            margin-top: 22px;
            background-color: var(--colourSecondary);
            padding: 22px;
            padding-left: 37px;
        }

        div.error {
            margin-top: 22px;
            background-color: rgb(233, 233, 233);
            padding: 22px;
            padding-left: 37px;

            &:not(:has(li)) {
                display: none;
            }
        }

        div.tickets {
            display: flex;
            flex-direction: column;
            gap: 11px;

            div.ticket {
                display: flex;
                gap: 22px;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding-top: 22px;

                &:not(:first-of-type) {
                    border-top: solid black 1px;
                }

                div.label {
                    flex-grow: 1;
                }

                div.spaces {
                    display: flex;
                    flex-direction: column;
                    margin-left: 11px;
                }
            }
        }

        p.rop {
            margin-top: 22px;
        }

        form {
            margin-top: 22px;
            display: flex;
            justify-content: flex-end;
            gap: 22px;
            align-items: center;

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

body:has(div.ticket-selector) {
    overflow: hidden;
}

[data-quantity-controls] {
    display: flex;
    align-items: center;

    button {
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        padding: 0;

        &.plus {
            --colour: var(--colourSecondary);
        }

        &.minus {
            --colour: var(--colourPrimary);
        }
    }

    input {
        width: 50px;
        height: 40px;
        text-align: center;
    }
}

[data-loader] {
    position: relative;
    z-index: 10;

    div.loader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.75);
        z-index: 11;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}