/* Home page styles */
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

@font-face {
    font-family: "cakefont";
    src: url("../font/cakedingbats-webfont.eot");
    src: url("../font/cakedingbats-webfont.eot?#iefix")
            format("embedded-opentype"),
        url("../font/cakedingbats-webfont.woff2") format("woff2"),
        url("../font/cakedingbats-webfont.woff") format("woff"),
        url("../font/cakedingbats-webfont.ttf") format("truetype"),
        url("../font/cakedingbats-webfont.svg#cake_dingbatsregular")
            format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {
    --delay-default: 300ms;
    font-size: 16px;

    cursor: url("../img/cursor.png"), default !important;

    a:hover, button:hover{
        cursor: url("../img/cursor-pointer.png") 5 0, pointer !important;
    }
}

body {
    background-color: #ffcc00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
}

section {
    padding-block: 60px;
}

img {
    user-select: none;
}

::selection {
    background-color: #1e1e1e;
    color: #ffcc00;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #a58400;
}
::-webkit-scrollbar-thumb:hover {
    background: #8f7201;
}

#instrucoesParaVotar {
    display: flex;
    flex-direction: column;
    place-items: center;

    .titulo-container {
        font-size: clamp(1rem, 5vw, 4rem);
        font-family: "Alfa Slab One", Arial;
        text-align: center;
        margin-bottom: 30px;
        color: #1e1e1e;
    }

    .container-votar {
        display: flex;
        gap: 40px;

        .card-passo {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;

            .passo-imagem {
                background: rgba(255, 255, 255, 0.36);
                padding: 15px;
                border-radius: 8px;

                width: 280px;
            }

            .descricao {
                font-size: 0.875rem;
                font-weight: 200;
                font-family: Alfa Slab One, arial;
                text-align: center;
                color: #1e1e1e;

                width: 100%;
                max-width: 30ch;
                max-width: 280px;
                margin: 0;
            }
        }
    }
}

#temporizador {
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        font-size: clamp(1.5rem, 6vw, 4rem);
        font-family: "Alfa Slab One", Arial;
        display: block;
        text-align: center;
        color: #1e1e1e;
        margin-bottom: 30px;
    }
    .temporizador {
        position: relative;

        display: grid;
        grid-template-columns: repeat(4, minmax(68px, 100px));
        grid-auto-flow: column;
        gap: 30px;

        font-size: 3rem;
        
        .indicador-temporizador {
            position: relative;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;

            font-family: "Alfa Slab One", Arial;
            font-size: clamp(1.2rem, 6vw, 2rem);
            color: #1e1e1e;
            text-align: center;

            .display-relogio {
                font-size: clamp(1.2rem, 6vw, 2rem);
                font-family: "Alfa Slab One", Arial;
                text-align: center;
                place-content: center;
                color: white;
    
                width: 100%;
                aspect-ratio: 1 / 1;
    
                background-color: #1e1e1e;
                border-radius: 20px;

                user-select: none;
            }

            &::after{
                content: ':';

                position: absolute;
                right: -15px;
                bottom: 20px;
                transform: translateX(50%);
            }
            &:last-of-type::after{
                content: unset;
            }
        }


        
        &:hover ~ .tempo-formatado {
            opacity: 1;
        }
    }
    .tempo-formatado {
        position: relative;
        top: 30px;

        font-family: "Alfa Slab One", Arial;
        color: white;
        font-size: clamp(0.8rem, 5vw, 1.25rem);
        letter-spacing: 1px;

        padding: 15px 30px;
        background-color: #1e1e1e;
        border-radius: 50px;
        width: max-content;

        opacity: 0;

        transition: var(--delay-default);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;

            width: 30px;
            height: 20px;

            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            transform: translate(-50%, -100%);

            background-color: #1e1e1e;
        }
    }
}

#participantes {
    padding: 50px;
    margin-block: 60px;
    background: radial-gradient(circle at 0 0, #ffcc00 30px, transparent 30px),
        radial-gradient(circle at 100% 0, #ffcc00 30px, transparent 30px),
        radial-gradient(circle at 100% 100%, #ffcc00 30px, transparent 30px),
        radial-gradient(circle at 0 100%, #ffcc00 30px, transparent 30px),
        #fff;

    .cabecalho-participantes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        
        margin-bottom: 20px;

        .tituto-participantes {
            font-size: 2rem;
            font-family: "Alfa Slab One", Arial;
            color: #1e1e1e;
            position: relative;
        }
        .pesquisa-filtro {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
            width: max-content;
            max-width: 100%;

            .ordenador {
                position: relative;
                flex-shrink: 0;
    
                width: 40px;
                height: 40px;
    
                background: rgba(255, 255, 255, 0.36);
                border: 2px solid #1e1e1e;
                border-radius: 100%;
    
                transition: var(--delay-default);
                place-content: center;
                overflow: hidden;
    
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -60%;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(
                        120deg,
                        transparent,
                        rgba(255, 255, 255, 0.5),
                        transparent
                    );
                    transform: skewX(-30deg);
                    transition: left 0.4s;
                }
    
                &:hover, &:focus {
                    transform: scale(1.1);
                }
    
                &:hover::before, &:focus::before {
                    left: 120%;
                    transition: left 0.6s ease-out;
                }
            }
    
            .input-group {
                position: relative;
                
                max-width: 264px;
                width: 100%;
    
                .icone-search {
                    position: absolute;
                    top: 50%;
                    left: 10px;
                    transform: translateY(-50%);
                    height: 20px;
                    width: 20px;
                }
    
                .barra-pesquisa-participantes {
                    font-family: "Alfa Slab One", Arial;
                    font-size: 1rem;
                    width: 100%;
    
                    background: rgba(255, 255, 255, 0.36);
        
                    padding: 8px 16px 8px 40px;
                    border-radius: 32px;
                    border: 2px solid black;
    
                    &::placeholder {
                        color: #1e1e1e;
                    }
                }

                #limparCampo{
                    all: unset;

                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);

                    height: 20px;
                    width: 20px;

                    opacity: 0;

                    transition: var(--delay-default);
                }
    
                .barra-pesquisa-participantes:focus {
                    outline: none;
                }
            }
        }
    }

    .lista {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        column-gap: 150px;

        .participante {
            position: relative;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            
            width: 100%;

            padding-block: 25px;
            border-bottom: 2px solid #d39e00;

            &.elementoEscondido{
                display: none;
            }

            .logo {
                width: 100px;
                height: 100px;
                object-fit: scale-down;
                border-radius: 12px;
                background: white;
            }

            .info {
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 50%;
                align-items: center;

                .estabelecimento {
                    font-family: "Alfa Slab One", Arial;
                    color: #121714;
                    font-size: 1.125rem;

                    margin-bottom: 10px;
                }

                .voto {
                    position: relative;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 15px;

                    font-family: "Alfa Slab One", Arial;
                    color: white;
                    letter-spacing: 0.1rem;
                    text-decoration: none;

                    border: none;
                    padding: 10px 15px;
                    border-radius: 60px;
                    background: #c01212;

                    transition: var(--delay-default);
                    overflow: hidden;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: -60%;
                        width: 50%;
                        height: 100%;
                        background: linear-gradient(
                            120deg,
                            transparent,
                            rgba(255, 255, 255, 0.5),
                            transparent
                        );
                        transform: skewX(-30deg);
                        transition: calc(2 * var(--delay-default)) ease-out;
                    }

                    &:hover, &:focus {
                        transform: rotateY(20deg) rotateX(-15deg);
                    }

                    &:hover::before, &:focus::before {
                        left: 120%;
                    }

                    img {
                        width: 30px;
                    }
                }
            }
        }
    }
    .mensagem-nenhum-estabelecimento{
        font-size: 1rem;
        font-family: "Alfa Slab One", Arial;
        color: #1e1e1e;
        text-align: center;

        margin-block: 20px 0;

        width: 100%;
    }
}

#mapaCriciuma {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;

    .titulo-container {
        font-size: clamp(1rem, 5vw, 4rem);
        font-family: "Alfa Slab One", Arial;
        text-align: center;
        margin: 0;
        color: #1e1e1e;
    }

    #map {
        height: 400px;
        width: 100%;
        max-width: 100%;
        max-height: 100%;

        margin: auto;

        border-radius: 30px;

        .leaflet-popup-content {
            display: flex;
            flex-direction: column;
            gap: 10px;

            h2 {
                font-family: "Alfa Slab One", Arial;
                font-size: 0.8rem;
                margin: 0;
                text-align: center;
            }
            .link-pin {
                position: relative;

                font-size: 0.8rem;
                font-weight: 500;
                font-family: "Alfa Slab One";
                text-align: center;
                place-content: center;
                text-decoration: none;

                color: white;

                background: #e30613;

                border: 1px solid #121714;

                padding-block: 3px;
                padding-inline: 12px;

                transition: var(--delay-default);
                overflow: hidden;
                clip-path: polygon(
                    100% 0,
                    95% 50%,
                    100% 100%,
                    0% 100%,
                    5% 50%,
                    0% 0%
                );

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -60%;
                    width: 50%;
                    height: 100%;
                    background: linear-gradient(
                        120deg,
                        transparent,
                        rgba(255, 255, 255, 0.5),
                        transparent
                    );
                    transform: skewX(-30deg);
                    transition: left 0.4s;
                }

                &:hover {
                    transform: scale(1.05);
                }

                &:hover::before {
                    left: 120%;
                    transition: left 0.6s ease-out;
                }
            }
        }
    }

    em {
        font-family: "Alfa Slab One", Arial;
        text-align: center;
    }
}


@media (max-width:1400px) {
    #instrucoesParaVotar {
        .titulo-container {
            font-size: clamp(1rem, 4vw, 3rem);
        }
    }
    #temporizador {
        h2 {
            font-size: clamp(1rem, 4vw, 3rem);
            margin-bottom: 30px;
        }
    }
    #mapaCriciuma {
        .titulo-container {
            font-size: clamp(1rem, 4vw, 3rem);
            font-family: "Alfa Slab One", Arial;
            text-align: center;
            margin: 0;
            color: #1e1e1e;
        }
    }
}
@media (max-width: 1200px) {
    #instrucoesParaVotar {
        .container-votar {
            .card-passo {
                .passo-imagem {
                    width: 250px;
                    height: 250px;
                }
            }
        }
    }
}
@media (max-width: 991px) {
    #participantes{
        .lista{
            justify-items: center;
            .participante{
                width: min-content;
            
                &:last-of-type{
                    border: none;
                    padding-bottom: 0;
                }
            }
        }
    }
}
@media (max-width: 890px) {
    #instrucoesParaVotar {
        .container-votar {
            flex-direction: column;

            .card-passo {
                flex-direction: row;
            }
        }
    }
}
@media (max-width: 768px) {
    #instrucoesParaVotar {

        .titulo-container {
            font-size: 2rem;
        }
        .container-votar {
            .card-passo {
                flex-direction: column;
                gap: 20px;
            }
        }
    }
    #participantes {
        .cabecalho-participantes {
            flex-direction: column;
        }
    }
    #mapaCriciuma {

        .titulo-container {
            font-size: 2rem;
        }

        #map {
            height: 60vh;
            width: 100%;
            max-width: 100%;
            max-height: 100%;

            margin: auto;

            border-radius: 30px;
        }
    }
    #temporizador{
        
        h2 {
            font-size: 1.5rem;
        }
        .tempo-formatado {
            top: 0px;

            margin-block: 30px;
    
            color: #f8f9fa;
            background-color: #1e1e1e;
            
            border-radius: unset;
    
            opacity: 1;
    
            transition: var(--delay-default);
    
            &::before {
                content: unset;
            }
        }
    }


}
@media (max-width: 425px) {
    section{
        padding-block: 30px;
    }
    #temporizador {
        h2 {
            margin-bottom: 12px;
        }
        .temporizador {
            grid-template-columns: repeat(4, minmax(55px, 100px));
            gap: 5px;
            padding-inline: 30px;

            .indicador-temporizador {
                gap: 0;

                .display-relogio {
                    border-radius: 10px;
                    &::after{
                        content: unset;
                    }
                }
            }
        }
    }
    #participantes{
        padding-inline: 10px;
    }
}