/* Permanent styles */
.filters-form {
    display: flex;
    @media only screen and (max-width: 900px) {
        flex-direction: column;
    }
    justify-content: center;
    gap: 1em;

    fieldset {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);

        &.age-categories {
            max-height: 7em;

            .input-wrap {
                min-width: 4em;
            }
        }
    }

    .submit-button {
        align-self: center;
        color: var(--body-background-color);
    }
}

ul {
    padding-left: 0;
}

.screening-day-wrap, .movie-screening-wrap {
    &::marker {
        content: "";
    }
}

.screening-day-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;

    .screening-day {
        padding-left: 2em;
        padding-right: 2em;

        border-top: 1px solid var(--primary-color);
    }

    h4 {
        margin-top: 0;
        text-align: center;
    }

    .movies-wrap {
        display: flex;
        @media only screen and (max-width: 900px) {
            flex-direction: column;
        }
        justify-content: space-around;
        gap: 1em;
        width: 100%;

        padding-left: 1em;
        padding-right: 1em;

        .movies-list {
            flex: 1 1 0px;
            max-width: 50%;
            @media only screen and (max-width: 900px) {
                max-width: 100%;
            }
        }
    }
}

.movie-wrap {
    display: flex;
    @media only screen and (max-width: 900px) {
        flex-direction: column;
    }
    gap: 1em;
    justify-content: space-between;

    margin-bottom: 1em;

    border: 1px solid var(--primary-color);
    padding: 1em;
    padding-bottom: 1.2em;

    .card {
        background-color: var(--tertiary-color);
        color: var(--body-background-color);

        padding: .3em;
        margin-right: .5em;
        margin-bottom: .5em;
    }

    .info-wrap {
        .info-top-wrap {
            margin-bottom: .7em;

            .title {
                display: inline;
            }

            .release-date {
                margin-left: .5em;
                /* This is the only place that needs this because movie titles can be loooong */
                word-break: keep-all;

                &::before {
                    content: "📅";
                    margin-right: .2em;
                }
            }
        }

        .info-bottom-wrap {
            > *:not(:last-child) {
                margin-right: .5em;

                &::after {
                    margin-left: .5em;
                    content: '|';
                }
            }

            .length {
                &::before {
                    content: "⏳";
                    margin-right: .5em;
                }
            }

            .age-category {
                &::before {
                    content: "👶";
                    margin-right: .5em;
                }
            }
        }
    }

    .movie-screenings-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;

        .movie-screening-wrap {
            width: fit-content;
        }
        .screening-cinema {
            &::before {
                content: "(";
            }
            &::after {
                content: ")";
            }
        }
    }
}