/* Arquivo CSS com classes prontas para cada tipo de atributo. Sumário:

    0. Geral
        0.1. Variáveis
        0.2. Reset
    1. Flexbox
        1.1. Posicionamento
        1.2. Gap's
    2. Larguras e Alturas
    3. Fontes
        3.1. Tamanhos
        3.2. Pesos
        3.3. Família
        3.4. Cores
            3.4.1. Hover
        3.5. Pré-formatações
    4. Cores de Fundo
        4.1. Hover
    5. Bordas
        5.1. Arredondamento
        5.2. Estilo
    6. Formulários
    7. Imagens
        7.1. SVG's
    8. Transições
    9. Posições
    10. Cursor
    11. Padding/Margin
    12. Displays
    13. Swiper
    14. Skeleton Loading
    15. Animações
    16. Div's Pré-formatadas

    . Responsividade
*/
/* 
    0. Geral
*/
/* 0.1. Variáveis */
:root {
    --font-poppins: "Poppins", sans-serif;
    --font-inter: "Inter", sans-serif;
    --font-main: var(--font-inter);
    --font-titles: var(--font-poppins);

    --white: #fff;
    --black: #000;
    --grey: #656565;
    --pink1: rgb(255, 128, 213);
    --pink2: #ff66cd;
    --pink3: #ff95dc;
    --highlight1: #F2C322;
    --highlight2: #FFD700;
    --yellow-star: #f8d000;
    --light-grey: #f8f8f8;
    --subtitle-grey: #898989;
    --placeholder-grey: #b1b1b1;
    --menu-nav-hover: rgba(255, 255, 255, .15);
    --clr-whatsapp: #01BA21;
    --clr-dark-paragraph: #404040;
    --clr-light-paragraph: #e9e9e9;
    --clr-alert: rgb(219, 28, 28);
    --clr-error: rgb(220, 0, 0);
    --clr-success: rgb(0, 140, 0);
}

/* 0.2. Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    color: #000;
    font-family: var(--font-inter);
}

/*
    1. Flexbox 
*/
/* 1.1. Posicionamento */
.flex {display: flex;}
.row {flex-direction: row;}
.row-reverse {flex-direction: row-reverse;}
.column {flex-direction: column;}
.column-reverse {flex-direction: column-reverse;}
.wrap {flex-wrap: wrap;}
.no-wrap {flex-wrap: nowrap;}
.justify-start {justify-content: start;}
.justify-center {justify-content: center;}
.justify-end {justify-content: end;}
.justify-between {justify-content: space-between;}
.align-start {align-items: start;}
.align-center {align-items: center;}
.align-end {align-items: end;}
.align-stretch {align-items: stretch;}

/* 1.2. Gap's */
.gap-0_1rem {gap: 0.1rem;}
.gap-0_2rem {gap: 0.2rem;}
.gap-0_3rem {gap: 0.3rem;}
.gap-0_4rem {gap: 0.4rem;}
.gap-0_5rem {gap: 0.5rem;}
.gap-0_6rem {gap: 0.6rem;}
.gap-0_7rem {gap: 0.7rem;}
.gap-0_8rem {gap: 0.8rem;}
.gap-0_9rem {gap: 0.9rem;}
.gap-1_0rem {gap: 1rem;}
.gap-1_5rem {gap: 1.5rem;}
.gap-2_0rem {gap: 2rem;}
.gap-2_0rem-1_0rem {gap: 2rem 1rem;}
.gap-2_5rem {gap: 2.5rem;}
.gap-3_0rem {gap: 3rem;}
.gap-3_5rem {gap: 3.5rem;}
.gap-4_0rem {gap: 4rem;}
.gap-4_5rem {gap: 4.5rem;}
.gap-5_0rem {gap: 5rem;}

/* 2. Larguras e Alturas */
.w-main {max-width: 1400px; width: 100%;}

.w-full {width: 100%;}
.w-half {width: 50%;}
.w-fit {width: fit-content;}
.w-max-400 {max-width: 400px;}
.w-max-500 {max-width: 500px;}
.w-max-600 {max-width: 600px;}
.w-max-700 {max-width: 700px;}
.w-max-800 {max-width: 800px;}
.w-max-900 {max-width: 900px;}
.w-max-1000 {max-width: 1000px;}
.w-max-1200 {max-width: 1200px;}
.w-max-1400 {max-width: 1400px;}
.w-max-1600 {max-width: 1600px;}
.h-full {width: 100%;}
.h-min-80vh {min-height: 80vh;}
.h-min-90vh {min-height: 90vh;}
.h-min-100vh {min-height: 100vh;}
.h-full {height: 100%;}

/*
    3. Fontes 
*/
/* 3.1. Tamanhos */
.fs-12px {font-size: 12px;}
.fs-13px {font-size: 13px;}
.fs-14px {font-size: 14px;}
.fs-15px {font-size: 15px;}
.fs-16px {font-size: 16px;}
.fs-18px {font-size: 18px;}
.fs-20px {font-size: 20px;}
.fs-22px {font-size: 22px;}
.fs-24px {font-size: 24px;}
.fs-28px {font-size: 28px;}
.fs-32px {font-size: 32px;}
.fs-40px {font-size: 40px;}
.fs-48px {font-size: 48px;}

/* 3.2. Pesos */
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}

/* 3.3. Família */
.ff-poppins {font-family: var(--font-poppins);}
.ff-inter {font-family: var(--font-inter);}
.ff-main {font-family: var(--font-main);}
.ff-title {font-family: var(--font-titles);}

/* 3.4. Cores */
.clr-white {color: var(--white);}
.clr-black {color: var(--black);}
.clr-pink {color: var(--pink2);}
.clr-highlight {color: var(--highlight2);}
.clr-dark-paragraph {color: var(--clr-dark-paragraph);}
.clr-light-paragraph {color: var(--clr-light-paragraph);}
.error {color: var(--clr-error);}
.success {color: var(--clr-success);}

/* 3.4.1. Hover */
/* TODO: ver se o filter funciona em cores de texto */

/* 3.5. Pré-formatações */
.h2, .h3, .h4 {
    font-weight: 600;
    font-family: var(--font-poppins);
}
.h2 {font-size: 28px;}
.h3 {font-size: 24px;}
.h4 {font-size: 20px;}

.txt-center {text-align: center;}
.txt-upper {text-transform: uppercase;}
.txt-underline {text-decoration: underline;}

/* 4. Cores de Fundo */
.bg-white {background-color: var(--white);}
.bg-black {background-color: var(--black);}
.bg-pink1 {background-color: var(--pink1);}
.bg-pink2 {background-color: var(--pink2);}
.bg-pink3 {background-color: var(--pink3);}
.bg-highlight {background-color: var(--highlight2);}
.bg-whatsapp {background-color: var(--clr-whatsapp);}
.bg-light-grey {background-color: var(--light-grey);}

/* 4.1. Hover */
.bg-white.hover:hover,
.bg-black.hover:hover,
.bg-pink1.hover:hover,
.bg-pink2.hover:hover,
.bg-pink3.hover:hover,
.bg-highlight.hover:hover,
.bg-whatsapp.hover:hover {
    filter: brightness(.9);
}

/* 
    5. Bordas 
*/
/* 5.1. Arredondamento */
.bdr-half {border-radius: 50%;}
.bdr-4 {border-radius: 4px;}
.bdr-8 {border-radius: 8px;}
.bdr-12 {border-radius: 12px;}
.bdr-16 {border-radius: 16px;}
.bdr-20 {border-radius: 20px;}
.bdr-24 {border-radius: 24px;}

/* 5.2. Estilo */
.bdr-1-solid-black {border: 1px solid var(--black);}
.bdr-2-solid-black {border: 2px solid var(--black);}
.bdr-top-1-solid-black {border-top: 1px solid var(--black);}
.bdr-right-1-solid-black {border-right: 1px solid var(--black);}
.bdr-bottom-1-solid-black {border-bottom: 1px solid var(--black);}
.bdr-left-1-solid-black {border-left: 1px solid var(--black);}
.bdr-none {border: none;}

/* 6. Formulários */
form {  
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;

    /* Remover estilização padrão do campo de pesquisa */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance:none;
    }

    .input-required {
        color: var(--clr-alert);
        font-size: 18px;
    }

    button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        border: none;
        background-color: transparent;
        cursor: pointer;
        transition: all .2s;

        .loading {
            display: none;
            
            &.active {
                display: flex;
            }

            svg {
                width: 20px;
                height: 20px;
                fill: var(--white);
                display: inline-block;
                transition: transform 0.3s ease;
                animation: spin 1.4s linear infinite;
            }
        }
    }    

    .fields {
        --gap-fields: 1.3rem;

        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-fields);
        align-items: start;
        justify-content: center;
        
        .form-group {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: .4rem;

            &.w-1_1 {width: 100%;}
            &.w-1_2 {width: calc((100% - (var(--gap-fields))) / 2);}
            &.w-1_3 {width: calc((100% - (var(--gap-fields) * 2)) / 3);}
            &.w-1_4 {width: calc((100% - (var(--gap-fields) * 3)) / 4);}

            .field {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: .3rem;
                position: relative;

                &[data-input-type="checkbox"] {
                    flex-direction: row-reverse;
                    justify-content: start;
                    gap: .5rem;

                    label {
                        font-weight: 400;
                    }
                }

                label {
                    font-size: 15px;
                    font-family: var(--font-poppins);
                    font-weight: 500;
                }

                div label {
                    font-weight: 400;
                }

                input, select, textarea {
                    font-size: 15px;
                    border-radius: 4px;
                    border: 1px solid var(--black);
                    padding: .5rem .7rem;

                    &.input-password.main {padding-right: 3rem;}

                    &.disabled {background-color: rgba(0, 0, 0, .15);}
                }

                textarea {resize: none;}

                .hide-password {
                    cursor: pointer;
                    padding: .1rem;
                    position: absolute;
                    right: 10px;
                    top: 32px;
                    display: none;

                    &.active {display: flex;}

                    &:hover {
                        svg {fill: var(--black)}
                    }

                    svg {
                        width: 24px;
                        height: 24px;
                        fill: var(--grey);
                        transition: all .2s;
                    }
                }
            }

            .errors {
                display: flex;
                flex-direction: column;
                gap: .2rem;

                .alert {
                    font-size: 14px;
                    font-weight: 500;
                }
            }
        }
    }
}

/* 
    7. Imagens 
*/
.obj-fit-cover {object-fit: cover;}
.obj-fit-contain {object-fit: cover;}
.obj-psn-center {object-position: center center;}

/* 7.1. SVG's */
svg {flex-shrink: 0;}
#breadcrumbs svg {
    width: 12px;
    height: 12px;
}

/* 8. Transições */
.trsn-a02 {transition: all .2s;}
.trsn-a03 {transition: all .3s;}
.trsn-a04 {transition: all .4s;}
.trsn-a05 {transition: all .5s;}
.trsn-a10 {transition: all 1s;}
.trsn-a12 {transition: all 1.2s;}
.trsn-a15 {transition: all 1.5s;}

/* 9. Posições */
.psn-relative {position: relative;}
.psn-absolute {position: absolute;}
.psn-fixed {position: fixed;}

/* 10. Cursor */
.cs-pointer {cursor: pointer;}

/* 11. Padding/Margin */
.pd-v0_1-h1_0 {padding: .1rem 1rem;}
.pd-v0_2-h1_0 {padding: .2rem 1rem;}
.pd-v0_3-h1_0 {padding: .3rem 1rem;}
.pd-v0_4-h1_0 {padding: .4rem 1rem;}
.pd-v0_5-h1_0 {padding: .5rem 1rem;}
.pd-v1_0-h1_0 {padding: 1rem;}
.pd-v2_0-h1_0 {padding: 2rem 1rem;}
.pd-v3_0-h1_0 {padding: 3rem 1rem;}
.pd-v4_0-h1_0 {padding: 4rem 1rem;}
.pd-v5_0-h1_0 {padding: 5rem 1rem;}

main#container.inst {padding-top: 166px;}
.pd-section {padding: 4rem 1rem;}

/* 12. Displays */
.ds-none {display: none;}
.ds-block {display: block;}

/* 13. Swiper */
.swiper-container {
    &.outside {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        .swiper {
            width: 90%;
            
            .swiper-wrapper {
                margin-bottom: 2.5rem;
            }
        }
        
        .swiper-button-prev,
        .swiper-button-next {
            position: relative
        }

        .swiper-button-next {right: 0;}
        .swiper-button-prev {left: 0;}
    }

    .swiper.header-main {
        overflow-y: visible !important;
        padding-bottom: 2.5rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);
        background-color: var(--pink2);

        &::after {
            content: '';          
            background-size: contain;
            background-repeat: no-repeat;
            width: 24px;
            height: 24px;
            filter: invert();
        }

        &.header-main {
            width: 48px;
            height: 48px;

            &::after {
                width: 32px;
                height: 32px;
            }
        }
    }

    .swiper-button-next {
        padding-left: 2px;
        
        &::after {background-image: url('../../icons/bootstrap/chevron-right.svg');}
        &.header-main {right: 32px;}
    }
    
    .swiper-button-prev {
        padding-right: 2px;
        
        &::after {background-image: url('../../icons/bootstrap/chevron-left.svg');}
        &.header-main {left: 32px;}
    }

    .swiper-pagination {
        .swiper-pagination-bullet {
            height: 12px;
            width: 12px;
            opacity: .6;
            transition: all .4s;
            background-color: var(--white);

            &:hover {
                opacity: .9;
            }
        }

        .swiper-pagination-bullet-active {
            width: 32px;
            border-radius: 64px;
            opacity: 1;
            background-color: var(--pink2) !important;
        }
        
        &.black .swiper-pagination-bullet {background-color: var(--black);}
        &.grey .swiper-pagination-bullet {background-color: var(--grey);}
    }
}

/* 14. Skeleton Loading */
.skeleton-loading {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton_loading 3s infinite linear;
    border-radius: 4px;

    &.light {
        background: linear-gradient(90deg, #eaeaea 25%, #ffffff 50%, #eaeaea 75%);
        background-size: 200% 100%;
    }
    
    &.dark {
        background: linear-gradient(90deg, #b4b4b4 25%, #9b9b9b 50%, #b4b4b4 75%);
        background-size: 200% 100%;
    }
}


/* 15. Animações */
    /* 14. Skeleton Loading - Animação do efeito de brilho */
    @keyframes skeleton_loading {
        from {background-position: 200% 0;}
        to {background-position: -200% 0;}
    }

    /* 6. Formulários - Ícone carregando */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

/* 16. Div's Pré-formatadas */
.paragraphs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* . Responsividade */
@media (max-width: 1500px) {
    .pd-section {padding: 4rem 5rem;}

    #breadcrumbs .content {
        padding: 1rem 5rem;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    /* 11. Padding/Margin */   
    /* main#container.inst {padding-top: 107px;} */
    /* TODO: Remover (TEMPORARIO) */
    main#container.inst {padding-top: 103px;}
    .pd-section {padding: 4rem 1rem;}

    #breadcrumbs .content {
        overflow-x: scroll;
        padding: 1rem;

        a {text-wrap: nowrap;}
    }

    /* 3.5. Pré-formatações */
    .h2 {font-size: 24px;}
    .h3 {font-size: 22px;}
    .h4 {font-size: 10px;}
}

@media (max-width: 768px) {
    /* 3.5. Pré-formatações */
    .h2, .h3, .h4 {
        text-align: center;
    }
    .h2 {font-size: 22px;}
    .h3 {font-size: 20px;}
    .h4 {font-size: 18px;}

    /* 6. Formulários */
    form .fields { 
        flex-direction: column;

        .form-group { 
            width: 100% !important;
        }
    }

    /* 13. Swiper */
    .swiper-container {
        .swiper-button-next,
        .swiper-button-prev {
            width: 32px;
            height: 32px;

            &::after {
                width: 20px;
                height: 20px;
            }

            &.header-main {
                width: 36px;
                height: 36px;

                &::after {
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
}