@import url("../../shared/assets/styles/reset.css");

@font-face {
    font-family: "Mortend";
    src: url("./assets/fonts/mortend-400.woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Mortend";
    src: url("./assets/fonts/mortend-800.woff2");
    font-weight: 800;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-ExtraLight.ttf");
    font-weight: 100;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-Light.ttf");
    font-weight: 200;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-Thin.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Barlow";
    src: url("../../shared/assets/fonts/Barlow-ExtraBold.ttf");
    font-weight: 800;
}

:root {
    --font-primary: "Barlow";
    --font-size-l: 1.5rem;
    --font-size-xl: 2.5rem;
    --transition-regular: 0.2s ease-in-out;
    --border-radius-s: 0.2rem;
    --border-radius-m: 1rem;
    --border-radius-l: 2rem;
    --blur: blur(10px);
    --color-primary: #2EEE9D;
    --color-secondary: #0D5C43;
    --color-tertiary: #7DF9C2;
    --color-neutral: #0A0D0B;
    --color-text-light: white;
    --color-text-dark: var(--color-neutral);
    --faded: 0.2;
}

#custom-shop {
    width: 100dvw;
    height: 100dvh;

    & select {
        text-align-last: center;
    }

    & select,
    button {
        appearance: none;
        background-color: transparent;
        border: unset;
    }

    & ul.unset {
        padding: unset;
        list-style-type: none;
    }

    & > .foreground {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 1rem;
        max-height: 95dvh;
        width: 90%;
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;

        @media screen and (min-width: 768px) {
            justify-content: center;
            width: 500px;

            &#purchase-complete {
                width: unset;
            }
        }

        & #locale-select {
            position: fixed;
            top: 0;
            right: 0;
            left: auto;
            display: flex;
            flex-direction: row;
            gap: 0.5rem;

            & button {
                text-transform: uppercase;
                padding: 0;

                &.active {
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        top: 100%;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: white;
                    }
                }
            }
        }

        & > .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 1rem auto 0 auto;

            & > .logo {
                height: 6rem;
                margin-bottom: 1rem;
            }

            & .event-meta {
                display: flex;
                flex-direction: row;

                & > div:not(:last-child)::after {
                    content: "//";
                    display: inline-block;
                    margin: 0 0.5rem;
                }
            }
        }

        & > .content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 0;

            @media screen and (min-width: 768px) {
                width: inherit;
            }

            & #slide-indicator {
                display: flex;
                flex-direction: row;
                gap: 0.5rem;
                align-items: center;
                margin: auto;

                & li {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 0.5rem 1rem;
                    transition: all var(--transition-regular);
                    cursor: pointer;
                    letter-spacing: 0.2rem;
                    font-weight: 600;
                    height: 3.2rem;
                    aspect-ratio: 1;
                    border-radius: 50%;

                    & .index {
                        font-size: 0.8rem;
                    }

                    & img {
                        filter: invert();
                        height: 1.5rem;
                    }

                    &.active {
                        background-color: rgba(255, 255, 255, 0.5);
                        backdrop-filter: var(--blur);
                    }

                    &.complete {
                        background-color: var(--color-secondary);
                        backdrop-filter: var(--blur);

                        & + .separator + li {
                            cursor: pointer !important;
                        }
                    }

                    &:not(.complete):not(.active) {
                        cursor: not-allowed;
                    }
                }

                & .separator {
                    height: 1px;
                    width: 2rem;
                    display: inline-block;
                    background-color: var(--color-tertiary);
                }
            }

            & > #slides {
                overflow-y: scroll;
                scrollbar-width: none;
                flex-grow: 1;
                min-height: 0;
                position: relative;

                @media screen and (min-width: 768px) {
                    min-width: 400px;
                }

                & .slide {
                    transition: all var(--transition-regular);
                    position: relative;
                    width: 100%;
                    overflow-x: hidden;
                    scrollbar-width: none;

                    &:not(.active) {
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        pointer-events: none;
                        max-height: 0;
                        overflow: hidden;
                    }

                    &#tickets {
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;

                        & .ticket-type-group {
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            border-radius: var(--border-radius-s);
                            backdrop-filter: var(--blur);
                            padding: 1rem;

                            /* &:open .toggle img {
                                transform: scale(1);
                            }

                            &:not(:open) .toggle img {
                                transform: scale(-1);
                            } */

                            & .ticket-type-group-header {
                                display: flex;
                                flex-direction: row;
                                align-items: end;
                                gap: 1rem;
                                width: 100%;
                                font-size: 0.8rem;
                                color: var(--color-tertiary);
                                position: sticky;
                                top: 0;
                                cursor: pointer;

                                & .toggle {
                                    & img {
                                        height: 1rem;
                                        transition: all var(--transition-regular);
                                        filter: invert();
                                    }
                                }

                                & .ticket-type-group-name {
                                    display: flex;
                                    flex-direction: row;
                                    gap: 0.5rem;

                                    & .name {
                                        white-space: nowrap;
                                        font-weight: 800;
                                    }

                                    & .ticket-count {
                                        font-weight: 200;
                                    }
                                }

                                & .line {
                                    display: block;
                                    width: 100%;
                                    height: 1px;
                                    background-color: var(--color-tertiary);
                                }
                            }

                            & ul {
                                display: flex;
                                flex-direction: column;
                                gap: 2rem;
                            }
                        }

                        & .ticket-type {
                            display: grid;
                            grid-template-columns: auto;
                            grid-template-rows: repeat(3, auto);
                            gap: 0.5rem;
                            text-align: center;
                            justify-content: center;

                            & details.name {
                                & summary {
                                    cursor: pointer;
                                    & .indicator {
                                        margin-left: 1rem;
                                        border-radius: 50%;
                                        font-size: 0.8rem;
                                        background-color: var(--color-secondary);
                                        color: var(--color-tertiary);
                                        aspect-ratio: 1;
                                        padding: 0.1rem;
                                        width: 1.5rem;
                                        display: inline-flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-weight: 600;
                                    }
                                }
                            }

                            & .ticketType-description {
                                font-weight: 200;
                                font-size: 0.8rem;
                            }

                            & .amount-available {
                                font-size: 0.8rem;
                                font-weight: 200;
                                color: var(--color-primary);
                            }

                            &:has(.amount-available) {
                                grid-template-rows: repeat(4, auto);
                                & .amount-available {
                                    grid-row: 2;
                                    grid-column: 1;
                                }

                                & .price {
                                    grid-row: 3;
                                }
                                
                                & .ticket-amount-input, .sold-out-text {
                                    grid-row: 4;
                                }
                            }

                            &.sold-out {

                                & .name, .price {
                                    opacity: 0.25;
                                }

                                & .sold-out-text {
                                    background-color: var(--color-tertiary);
                                    color: var(--color-neutral);
                                    grid-column: 1 / -1;
                                    grid-row: 3;
                                }
                            }

                            & .name {
                                grid-row: 1;
                                grid-column: 1 / -1;
                                font-weight: 600;
                            }

                            & .price {
                                grid-row: 2;
                            }

                            & .ticket-amount-input, .sold-out-text {
                                grid-row: 3;
                                border-radius: var(--border-radius-l);
                                width: fit-content;
                                margin: auto;
                            }

                            & .ticket-amount-input {
                                padding: 0 1rem;
                                background-color: var(--color-neutral);
                            }

                            @media screen and (min-width: 768px) {
                                grid-template-columns: 1fr auto;
                                grid-template-rows: repeat(2, auto);
                                gap: 0 2rem;
                                text-align: unset;
                                justify-content: unset;

                                &:has(.amount-available) {
                                    grid-template-rows: repeat(3, auto);
                                }

                                & .name {
                                    grid-column: 1 / -1;
                                    grid-row: 1;
                                }

                                & .price {
                                    grid-column: 1;
                                    grid-row: 2;
                                }

                                & .ticket-amount-input, .sold-out-text {
                                    grid-column: 2 !important;
                                    grid-row: 1 / -1 !important;
                                }

                                & .ticket-amount-input {
                                    padding-bottom: 0.2rem;
                                    padding-top: 0.2rem;
                                }
                            }
                        }
                    }

                    &:is(#customer-data, #summary) {
                        backdrop-filter: var(--blur);
                        padding: 1rem;
                    }

                    &#customer-data {
                        & .page3a > h2:first-child {
                            margin-top: unset;
                        }

                        & input, select {
                            color: var(--color-text-light) !important;
                            border: 1px solid var(--color-text-light);
                        }

                        & select {
                            text-align-last: left;
                        }

                        & .persRowPeopleData {
                            & .form-group-company {
                                display: none !important;
                            }

                            & .form-group[style="display: none;"] {
                                display: block !important;
                            }
                        } 

                        & .insuranceDiv {
                            & .highlight-card {
                                background-color: var(--color-secondary);

                                & h3 {
                                    font-weight: 800;
                                }
                            }
                        }

                        & .information {
                            background-color: var(--color-secondary);
                            padding: 1rem;
                            font-size: 0.8rem;
                            border-radius: var(--border-radius-s);

                            & hr {
                                margin: 1rem 0;
                            }
                        }
                    }

                    &#summary {
                        & .dynPriceWppf {
                            font-size: 1rem !important;
                        }

                        & .couponDiv input {
                            border-radius: var(--border-radius-s) !important;
                            height: 100%;
                        }
                    }
                }
            }
        }

        & > .footer {
            display: flex;
            flex-direction: row;
            padding: 1rem 2rem;
            border-radius: var(--border-radius-l);
            width: fit-content;
            margin: auto;

            & > div {
                margin-right: 2rem;
            }

            & button {
                display: flex;
                align-items: center;
                transition: all var(--transition-regular);

                &[data-action="previous"] img {
                    rotate: 180deg;
                }

                & img {
                    height: 1rem;
                    filter: invert();
                }
            }
        }

        &:has(#tickets.active) .footer button[data-action="previous"] {
            opacity: var(--faded);
            pointer-events: none;
        }
    }

    & > .background {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .badge {
        border-radius: var(--border-radius-l);
        padding: 0.5rem 1rem;
        text-transform: uppercase;
        font-size: 0.8rem;
        display: inline-block;
        white-space: nowrap;
    }
}

body {
    background-color: var(--color-neutral) !important;
    color: var(--color-text-light);

    & .modal {
        color: var(--color-text-dark);
    }

    & footer {
        color: var(var(--color-text-light)) !important;
        font-size: 0.8rem;
        background-color: inherit !important;

        & .container {
            background-color: inherit !important;

            & a {
                color: inherit !important;
            }
        }
    }
}

.container-purchasecomplete {
    padding: 1rem;
    backdrop-filter: var(--blur);

    & p {
        font-family: inherit !important;
        font-size: unset;
    }

    & h2:first-of-type {
        margin-top: unset;
        font-size: 1.5rem;
        font-weight: bold;
    }

    & > .row {
        margin: unset;

        & > .col-md-5, .col-md-7 {
            padding: unset;
            & > div {
                padding: unset !important;
            }
        }
    }

    & .list-eventinfos {
        color: inherit !important;
    }

    & .button-custom {
        margin-top: 2rem;
    }
}

.liquid-glass {
    background-blend-mode: luminosity;
    backdrop-filter: blur(4px);
    background: #ffffff03;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 1px #ffffff1a
}

.liquid-glass:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(#ffffff73 0%, #ffffff26 20%, #fff0 40% 60%, #ffffff26 80%, #ffffff73 100%);
    padding: 1.4px;
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-position: 0 0, 0 0;
    mask-size: auto, auto;
    mask-repeat: repeat, repeat;
    mask-clip: content-box, border-box;
    mask-origin: content-box, border-box;
    mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

.liquid-glass-strong {
    background-blend-mode: luminosity;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    background: #ffffff03;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 4px #0000000d, inset 0 1px 1px #ffffff26
}

.liquid-glass-strong:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(#ffffff80 0%, #fff3 20%, #fff0 40% 60%, #fff3 80%, #ffffff80 100%);
    padding: 1.4px;
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-position: 0 0, 0 0;
    mask-size: auto, auto;
    mask-repeat: repeat, repeat;
    mask-clip: content-box, border-box;
    mask-origin: content-box, border-box;
    mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}



button {
    transition: all var(--transition-regular);

    &[disabled] {
        opacity: var(--faded);
    }
}

details {
    border-radius: var(--border-radius-regular);

    @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;
        }
    }

    &[open] summary span::before {
        rotate: 90deg;
    }

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

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