:root {
    --greenfields-green: rgba(12, 95, 46, 1);
    --greenfields-green-light: rgba(12, 95, 46, 0.25);
    --greenfields-highlight: #fab638;
}

@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../../shared/assets/fonts/Raleway-Regular.ttf");
}


@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url("../../shared/assets/fonts/Raleway-ExtraBold.ttf");
}

body {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
}

#page2 header.cover {
    background-image: url("./assets/crowd.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("./assets/shapes.svg");
        opacity: 0.25;
    }

    & .cover-bg {
        display: none;
    }

    & .cover-content {
        z-index: 2;
        height: 33vh;

        & h2,
        p {
            display: none;
        }
    }
}

.navbar {
    background-image: url("./assets/shapes.svg");
    background-color: var(--greenfields-highlight);
    background-blend-mode: soft-light;
    background-size: cover;
    border-bottom: unset;

    & .navbar-brand {
        font-family: inherit;
    }
}

.nav-ttgroups {
    display: none !important;
}

.table.config.custom-ticket-overview {
    width: 100%;

    & .ticketGroupTitle {
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 800;
        color: var(--greenfields-green);
        text-align: center;
        padding: 4rem 0;
        background-color: inherit !important;

        @media (max-width: 767px) {
            font-size: 3rem;
        }
    }

    .ticketTypes {
        background-color: var(--greenfields-green-light);
        background-image: url("./assets/shapes.svg");
        background-blend-mode: soft-light;
        background-size: cover;
        color: var(--greenfields-green);
        border-bottom: 1px solid var(--greenfields-green);

        & td {
            padding: 2rem;

            @media (max-width: 767px) {
                padding: 1rem 2rem;
            }

            &:first-child {
                background-color: unset !important;
            }
        }

        & .ticketType-title {
            text-transform: uppercase;
            font-size: 2rem;
            font-weight: 800;
        }

        & .ticketTypeSum {
            height: 4rem;
            margin-bottom: 1rem;
        }

        & .input-group {
            display: flex;
            gap: 0.2rem;
            align-items: center;
            height: 4rem;

            & .input-group-btn,
            select {
                height: 100%;
                width: auto;
            }

            & .input-group-btn {
                padding: unset;

                & .btn {
                    height: inherit;
                    border-radius: unset !important;
                    margin: unset !important;
                }
            }

            & select {
                box-shadow: unset !important;
                border-radius: unset !important;
            }
        }

        &:has(.ticket-public-limit) {
            border-bottom: unset;
            --outline-width: 0.5rem;

            & .ticket-public-limit {
                display: none !important;
            }

            outline: var(--outline-width) solid var(--greenfields-highlight);
            outline-offset: calc(-1 * var(--outline-width));
            position: relative;

            &::after {
                display: block;
                content: "Best Deal";
                position: absolute;
                top: 0;
                right: 100%;
                background-color: var(--greenfields-highlight);
                padding: 1rem;
                height: 100%;
                text-align: center;
                writing-mode: sideways-lr;

                @media (max-width: 767px) {
                    writing-mode: unset;
                    height: unset;
                    width: 100%;
                    right: unset;
                    left: 0;
                    position: unset;
                    display: flex;
                    padding: 1rem 2rem;
                }
            }
        }
    }
}

.add-i-here {
    height: 0;
}

.ticket-type-description {
    @supports selector(::details-content) {
        &::details-content {
            margin-top: 0;
            block-size: 0;
            opacity: 0;
            transition: all 0.2s;
            transition-behavior: allow-discrete;
        }

        &[open]::details-content {
            margin-top: 1rem;
            block-size: auto;
            opacity: 1;
        }
    }

    @supports not selector(::details-content) {
        &[open] p {
            margin-top: 1rem;
        }
    }

    & summary {
        cursor: pointer;
        transition: opacity 0.2s ease-in-out;

        & span::before {
            content: "i";
            display: inline-flex;
            place-content: center;
            height: 2rem;
            aspect-ratio: 1;
            font-weight: 800;
            background-color: white;
            color: black;
            border-radius: 0;
            margin-right: 1rem;
        }

        &:hover {
            opacity: 0.5;
        }
    }

    & summary::-webkit-details-marker {
        display: none;
    }

    &::marker {
        content: "";
        display: none;
    }
}

#page2 {
    & .ticketTypes {
        & p.mobileBadgeSpace {
            padding-bottom: unset;
        }
    }
}

#page3 {
    & .tioNotOrganizer {
        font-family: inherit;
    }

    & h2,
    h3 {
        font-family: inherit !important;
    }

    & .radio-inline {
        font-family: inherit !important;
    }

    & .mobile-table-highlight {
        font-family: inherit !important;
    }

    & .checkbox {
        font-family: inherit !important;
    }

    & :is(.shipmentDiv, .insuranceDiv) .radio {
        font-family: inherit !important;
    }

    & .insuranceDiv {
        & .highlight-card {
            background-color: var(--greenfields-green-light);
        }

        & .highlight-card__title {
            background-color: var(--greenfields-green);
        }
    }
}