@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Space+Grotesk:wght@300..700&display=swap');

:root {
    /* fonte */
    --font: "Space Grotesk", sans-serif;

    /* cores */
    --primary: #413EC9;
    --primary-hover-btn: #4B49C9;
    --primary-hover: #8886FC;
    --white: #FFFFFF;
    --white-8: rgba(255,255,255,.08);
    --white-16: rgba(255,255,255,.16);
    --white-32: rgba(255,255,255,.32);
    --white-40: rgba(255,255,255,.40);
    --white-64: rgba(255,255,255,.64);
    --overflow-56: rgba(12, 11, 40, 0.56);
    --overflow-24: rgba(12, 11, 40, 0.24);
    --red: #C93E3E;
    --red-hover: #C94B4B;
    --gradient: radial-gradient(72.73% 72.73% at 50% 50%, #21204F 0%, #0A0925 100%);
    --gradient-background: #21204F;

    /* tipografia */
    --h1-desk: 700 32px/40px var(--font);
    --h3: 700 24px/32px var(--font);
    --h5-desk: 700 20px/30px var(--font);
    --h6: 500 14px/22px var(--font);
    --font-base: 400 16px/24px var(--font);
    --text-btn: 500 16px/24px var(--font);
    --text-btn-sm: 500 14px/20px var(--font);
    --text-link: 500 16px/24px var(--font);
    --caption-bold: 600 12px/16px var(--font);
    --caption: 500 12px/16px var(--font);

    --h5-mobile: 700 16px/24px var(--font);
    --h1-mobile: 700 40px/48px var(--font);
    --mini: 400 14px/22px var(--font);
    --mini-link: 500 14px/22px var(--font);

    /* blur */
    --blur-16: blur(16px);
    --blur-24: blur(24px);
    --blur-24: blur(80px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: var(--font);
    font: var(--font-base);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

@keyframes load {
    from {
        transform: rotate(0);
    } to {
        transform: rotate(360deg);
    }
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--gradient-background);
    background-image: var(--gradient);
    padding: 64px 24px;
    max-width: 100vw;
    overflow-x: hidden;

    @media (max-width: 880px) {
        padding: 64px 16px 120px;
        justify-content: flex-start;
    }

    .content {
        width: 100%;
        max-width: 1024px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 72px;

        @media (max-width: 880px) {
            gap: 64px;
        }

        .title {
            & h5 {
                color: var(--primary-hover);
                font: var(--h5-mobile);
                margin-bottom: 8px;
                text-align: center;

                @media (max-width: 880px) {
                    font: var(--h5-mobile);
                    margin-bottom: 16px;
                }
            }

            & h1 {
                color: var(--white);
                font: var(--h1-desk);
                text-align: center;
                max-width: 720px;

                @media (max-width: 880px) {
                    font: var(--h1-desk);
                }
            }
        }

        .action-area {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 24px;

            .copyright {
                text-align: center;
                color: var(--white-64);
                font: var(--mini);

                & a {
                    color: var(--primary-hover);
                    font: var(--mini-link);
                    text-decoration: underline;
                }
            }

            .input-area {
                width: 100%;
                height: 96px;
                border-radius: 16px;
                background-color: var(--white-8);
                border: 1px solid var(--white-16);
                backdrop-filter: var(--blur-24);
                -webkit-backdrop-filter: var(--blur-24);
                display: flex;
                align-items: center;
                justify-content: space-between;
                overflow: hidden;

                @media (max-width: 880px) {
                    flex-direction: column;
                    gap: 24px;
                    height: auto;
                    border-radius: 0;
                    overflow: visible;
                    background-color: transparent;
                    border: none;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    justify-content: flex-start;
                }
    
                .input {
                    width: 100%;
                    height: 100%;
                    padding: 16px 40px;
                    border: none;
                    box-shadow: none;
                    background: none;
                    color: var(--white);
                    font: var(--text-btn);
                    flex-shrink: 1;

                    @media (max-width: 880px) {
                        border-radius: 12px;
                        background-color: var(--white-8);
                        border: 1px solid var(--white-16);
                        backdrop-filter: var(--blur-24);
                        -webkit-backdrop-filter: var(--blur-24);
                        padding: 16px;
                    }
    
                    &::placeholder {
                        font: var(--font-base);
                        color: var(--white-32);
                    }
                }
    
                .btn-group {
                    width: auto;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 16px;

                    @media (max-width: 880px) {
                        width: 100%;
                        padding: 0;
                        display: grid;
                        grid-auto-flow: row;
                    }
                }
            }

            .info-area {
                width: 100%;
                border-radius: 16px;
                background-color: var(--white-8);
                border: 1px solid var(--white-16);
                backdrop-filter: var(--blur-24);
                -webkit-backdrop-filter: var(--blur-24);
                display: flex;
                align-items: center;
                gap: 24px;
                pointer-events: none;
                opacity: 0;
                height: 0px;
                padding: 0;
                transition: all .16s ease-in-out;

                &.visible {
                    pointer-events: all;
                    opacity: 1;
                    height: auto;
                    padding: 16px;
                }

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

                .thumb {
                    width: 180px;
                    min-width: 180px;
                    aspect-ratio: 16 / 9;
                    border-radius: 12px;
                    overflow: hidden;
                    object-fit: cover;

                    @media (max-width: 880px) {
                        width: 100%;
                    }

                    & img {
                        height: 100%;
                    }
                }

                .infos {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    flex: 1;
                    overflow: hidden;

                    @media (max-width: 880px) {
                        width: 100%;
                    }

                    & h5 {
                        font: var(--h5-desk);
                        color: var(--white);

                        @media (max-width: 880px) {
                            font: var(--h5-mobile);
                        }
                    }

                    & p {
                        font: var(--mini);
                        color: var(--white-64);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }

            .download-area {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 12px;
                transition: all .16s ease-in-out;
                pointer-events: none;
                opacity: 0;
                height: 0px;

                &.visible {
                    pointer-events: all;
                    opacity: 1;
                    height: auto;
                }

                .media {
                    width: 100%;
                    border-radius: 16px;
                    background-color: var(--white-8);
                    border: 1px solid var(--white-16);
                    backdrop-filter: var(--blur-24);
                    -webkit-backdrop-filter: var(--blur-24);
                    display: flex;
                    align-items: center;
                    gap: 40px;
                    padding: 16px;
                    padding-left: 24px;
    
                    @media (max-width: 880px) {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 20px;

                        .btn {
                            width: 100%;
                        }
                    }
    
                    .media-info {
                        width: calc(100% - 272px - 40px);
                        flex-grow: 1;
                        display: flex;
                        align-items: center;
                        gap: 12px;
    
                        @media (max-width: 880px) {
                            width: 100%;
                            align-items: flex-start;
                            flex-direction: row-reverse;
                        }
    
                        .icon {
                            width: 28px;
                            min-width: 28px;
                            height: 28px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            opacity: .72;
                            user-select: none;

                            @media (max-width: 880px) {
                                width: 24px;
                                min-width: 24px;
                                height: 24px;
                            }
                
                            & svg {
                                width: 100%;
                                height: 100%;
                                color: var(--white);
                            }
                        }
    
                        .title {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            width: calc(100% - 188px - 24px);
    
                            @media (max-width: 640px) {
                                width: 100%;
                                /* flex-direction: column; */
                                /* align-items: flex-start; */
                                gap: 8px;
                            }
    
                            .label {
                                font: var(--h5-mobile);
                                color: var(--white);
                            }

                            .tags {
                                display: flex;
                                align-items: center;
                                gap: 8px;
    
                                .tag {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 4px 12px;
                                    border-radius: 99px;
                                    background-color: var(--white-16);
                                    text-align: center;
                                    color: var(--white);
                                    font: var(--caption-bold);

                                    &.ext {
                                        background-color: var(--primary);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            
        }

        .logos-area {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 32px;

            @media (max-width: 640px) {
                gap: 24px;
            }

            .logo {
                max-height: 28px;
                opacity: .4;
                transition: .16s ease-in-out;

                @media (max-width: 640px) {
                    max-height: 22px;
                }

                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    .alert {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background-color: var(--primary);
        position: fixed;
        bottom: 24px;
        right: 24px;
        cursor: pointer;
        transition: all .16s ease-in-out;
        box-shadow: 0 8px 40px var(--overflow-24);

        &:hover {
            background-color: var(--primary-hover-btn);
            transform: scale(.96);
        }

        .icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .72;

            & svg {
                max-width: 100%;
                color: var(--white);
            }
        }
    }

    .btn {
        padding: 16px 32px;
        border-radius: 12px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        height: 64px;
        cursor: pointer;
        transition: .16s ease-in-out;
        flex-shrink: 0;
        text-decoration: none;
        border: none;
        overflow: hidden;
        position: relative;

        @media (max-width: 640px) {
            padding: 16px;
        }

        &.sm {
            height: 44px;
            padding: 12px 24px;
            gap: 8px;

            .label {
                font: var(--text-btn-sm);
            }

            .icon {
                width: 18px;
                height: 18px;
            }
        }

        &.error {
            background-color: var(--red);
            cursor: not-allowed;
            /* pointer-events: none; */
            opacity: 1 !important;

            &:hover {
                background-color: var(--red);
            }
        }

        &.in-progress {
            pointer-events: none;
            cursor: wait;
        }

        .progress {
            content: "";
            position: absolute;
            inset: 0;
            width: 0%;
            background-color: var(--white-8);
        }

        &:hover {
            background-color: var(--primary-hover-btn);
        }

        &:disabled {
            opacity: .24;
            cursor: not-allowed;
        }

        &.w-272 {
            width: 272px;

            @media (max-width: 880px) {
                width: 100%;
            }
        }

        .icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .72;
            user-select: none;

            &.load, &.error {
                display: none;
            }

            & svg {
                max-width: 100%;
                color: var(--white);
            }
        }

        .label {
            font: var(--text-btn);
            color: var(--white);
            white-space: nowrap;
        }
    }

    .load {
        animation: load .7s linear infinite;
    }

    .backdrop {
        position: fixed;
        inset: 0;
        background-color: var(--overflow-56);
        backdrop-filter: var(--blur-16);
        -webkit-backdrop-filter: var(--blur-16);
        padding: 24px;
        /* display: flex;
        align-items: center;
        justify-content: center; */
        opacity: 0;
        pointer-events: none;
        transition: all .16s;

        &.active {
            pointer-events: all;
            opacity: 1;
        }

        .modal {
            width: 100%;
            max-width: 496px;
            border-radius: 16px;
            background-color: var(--white-8);
            border: 1px solid var(--white-16);
            backdrop-filter: blur(240px);
            -webkit-backdrop-filter: blur(240px);
            transform: translate(-50%, -50%) scale(.8);
            opacity: 0;
            transition-duration: .32s;
            transition-delay: .16s;
            transition-property: transform, opacity;
            pointer-events: none;
            position: fixed;
            top: 50%;
            left: 50%;
            max-height: 95vh;

            @media (max-width: 640px) {
                max-width: 100vw;
                top: auto;
                bottom: 0;
                transform: translate(-50%, 80px) scale(1);
                border-radius: 16px 16px 0 0;
                border: none;
                border-top: 1px solid var(--white-16);
            }

            &.w-392 {
                max-width: 392px;

                @media (max-width: 640px) {
                    max-width: 100vw;
                }
            }

            &.active {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                pointer-events: all;

                @media (max-width: 640px) {
                    transform: translate(-50%, 0) scale(1);
                }
            }

            .header {
                padding: 24px 32px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 24px;

                @media (max-width: 640px) {
                    padding: 24px 16px;
                }

                & h3 {
                    color: var(--white);
                    font: var(--h3);
                }

                .close {
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--white-16);
                    border-radius: 50%;
                    cursor: pointer;

                    & svg {
                        width: 24px;
                        color: var(--white);
                    }
                }
            }

            .body {
                padding: 24px 32px;
                display: flex;
                flex-direction: column;
                gap: 24px;
                overflow-y: auto;
                max-height: calc(95vh - 88px);

                @media (max-width: 640px) {
                    padding: 16px;
                }

                .text {
                    color: var(--white);
                }

                .group {
                    & h4 {
                        font: var(--mini-link);
                        color: var(--white-64);
                        margin-bottom: 16px;
                    }

                    .options {
                        display: grid;
                        grid-template-columns: repeat(3,1fr);
                        gap: 8px;
                        grid-auto-flow: row;

                        @media (max-width: 640px) {
                            grid-template-columns: repeat(2,1fr);
                        }

                        .option {
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px;
                            border-radius: 12px;
                            border: 1px solid var(--white-16);
                            cursor: pointer;
                            /* transition: .16s ease-in-out; */

                            .radio {
                                width: 16px;
                                height: 16px;
                                border-radius: 50%;
                                border: 1px solid var(--white-32);
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                & img {
                                    width: 16px;
                                    opacity: 0;
                                    /* transition: .16s ease-in-out; */
                                }
                            }

                            .label {
                                font: var(--text-btn);
                                color: var(--white);

                                & span {
                                    font: var(--caption);
                                    color: var(--white-64);
                                }
                            }

                            &:hover {
                                background-color: var(--white-8);

                                .radio {
                                    background-color: var(--white-8);
                                }
                            }

                            &.selected {
                                background-color: var(--primary);
                                border-color: var(--primary);

                                .radio {
                                    & img {
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .footer {
                padding: 24px 32px;

                @media (max-width: 640px) {
                    padding: 24px 16px;
                }
            }
        }
    }

    .container-animation {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        @media (max-width: 880px) {
            width: 100%;
            justify-content: flex-start;
        }

        .btn {
            width: 100%;
        }

        .animation {
            position: absolute;
            inset: -72px;
            pointer-events: none;
            z-index: 1;

        }
    }

    @media (max-width: 640px) {
        #logo-x {
            display: none;
        }
    }
}