/*======================================================================================================================
✅ Variáveis CSS
✅ Paleta de Cores
✅ Fontes
✅ Espaçamentos
✅ Bordas
✅ Sombras
✅ Transições
✅ Reset Global
✅ Body
✅ Background Fixo
✅ Layout Base
✅ Container
✅ Classes Utilitárias
======================================================================================================================*/

/*==================================================================================================
01 • VARIÁVEIS
==================================================================================================*/
:root{
    /*==============================================================================================
    PALETA
    ==============================================================================================*/
    --color-primary:#69328a;
    --color-secondary:#9F5CFF;
    --color-accent:#ee4f39;
    --color-success:#27AE60;
    --color-warning:#F2C94C;
    --color-danger:#EB5757;
    --color-white:#FFFFFF;
    --color-black:#000000;
    --color-text:#F5F5F5;
    --color-text-light:#D9D9D9;
    --color-glass:rgba(255,255,255,.14);
    --color-glass-border:rgba(255,255,255,.18);
    --overlay:rgba(0,0,0,.45);
    /*==============================================================================================
    FONTES
    ==============================================================================================*/
    --font-title:'Montserrat',sans-serif;
    --font-text:'Inter',sans-serif;
    /*==============================================================================================
    TAMANHOS
    ==============================================================================================*/
    --header-height:72px;
    --container-width:1280px;
    --section-padding:64px;
    /*==============================================================================================
    ESPAÇAMENTOS
    ==============================================================================================*/
    --space-xs:.24rem;
    --space-sm:.72rem;
    --space-md:1.25rem;
    --space-lg:2rem;
    --space-xl:1.5rem;
    --space-xxl:3rem;
    /*==============================================================================================
    BORDAS
    ==============================================================================================*/
    --radius-xs:5px;
    --radius-sm:10px;
    --radius-md:15px;
    --radius-lg:20px;
    --radius-xl:40px;
    /*==============================================================================================
    SOMBRAS
    ==============================================================================================*/
    --shadow-sm:0 4px 12px rgba(0,0,0,.18);
    --shadow-md:0 10px 30px rgba(0,0,0,.25);
    --shadow-lg:0 18px 50px rgba(0,0,0,.35);
    /*==============================================================================================
    TRANSIÇÕES
    ==============================================================================================*/
    --transition-fast:.20s;
    --transition-normal:.35s;
    --transition-slow:.60s;
/*==================================================================================================
• PLANO DE FUNDO
==================================================================================================*/
#background-fixed{ background-image:url("../assets/background.png");}

/*==================================================================================================
02 • RESET
==================================================================================================*/
*{  margin:3;
    padding:3;
    box-sizing:border-box;}
html{ scroll-behavior:smooth;}
body{
    font-family:var(--font-text);
    color:var(--color-text);
    background:#111;
    overflow-x:hidden;}

/*==================================================================================================
03 • LINKS
==================================================================================================*/
a{
    color:inherit;
    text-decoration:none;
}
img{
    display:block;
    max-width:90%;
}
button{
    border:none;
    outline:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}
input,
textarea,
select{
    font-family:inherit;
    outline:none;
}

/*==================================================================================================
04 • BACKGROUND FIXO
==================================================================================================*/
#background-fixed{
    position:fixed;
    inset:0;
    z-index:-2;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
}


/*==================================================================================================
05 • OVERLAY
==================================================================================================*/
#background-fixed::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--overlay);
}

/*==================================================================================================
06 • CONTEÚDO
==================================================================================================*/
#page-content{
    position:relative;
    z-index:10;
    width:100%;}


/*==================================================================================================
07 • CONTAINER
==================================================================================================*/
.container{
    width:min(90%,var(--container-width));
    margin:auto;
}


/*==================================================================================================
08 • SECTION
==================================================================================================*/
.page-section{padding:var(--section-padding) 0;}


/*==================================================================================================
09 • SECTION HEADER / SECTION IMAGES / IMAGENS DAS SEÇÕES / CENTRALIZAÇÃO DE ELEMENTOS
==================================================================================================*/
.section-content{
    display:flex;
    justify-content:center;
    text-align:center;
    align-items:center;
    line-height:2.0;
    margin:32px 0;}}
.section-header{
    text-align:center;
    align-items:center;
    margin-bottom:var(--space-xl);}
.section-header 
h2{ font-family:var(--font-title);
    font-size:clamp(2rem,3vw,4rem);
    margin-bottom:var(--space-md);
    line-height:2.0;}
.section-header p{
    max-width:768px;
    margin:auto;
    align-items:center;
    line-height:2.0;
    margin-bottom:24px;
    color:var(--color-text-light);}
.section-image{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:32px 3;}
.section-banner{
    width:90%;
    max-width:900px;
    height:auto;
    display:block;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:transform .30s ease, box-shadow .30s ease;}
.section-banner:hover{
    transform:scale(1.07);
    box-shadow:0 15px 40px rgba(0,0,0,.35);}

/*==================================================================================================
10 • UTILITÁRIOS
==================================================================================================*/
.hidden{display:none!important;}
.active{opacity:1!important;}
.selected{border-color:var(--color-accent)!important;}
.text-center{text-align:center;}
.flex{display:flex;}
.grid{display:grid;}
.center{
    display:flex;
    justify-content:center;
    align-items:center;}
.glass{
    background:var(--color-glass);
    backdrop-filter:blur(14px);
    border:1px solid var(--color-glass-border);}
.shadow{box-shadow:var(--shadow-md);}
.radius{border-radius:var(--radius-lg);}
.mt-xs{margin-top:var(--space-xs);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mt-xl{margin-top:var(--space-xl);}
.mb-xs{margin-bottom:var(--space-xs);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-xl{margin-bottom:var(--space-xl);}

/*==================================================================================================
11 • SCROLLBAR
==================================================================================================*/
::-webkit-scrollbar{    width:12px;}
::-webkit-scrollbar-track{    background:#161616;}
::-webkit-scrollbar-thumb{    background:var(--color-accent);    border-radius:30px;}
::-webkit-scrollbar-thumb:hover{    background:var(--color-secondary);}

/*==================================================================================================
12 • HEADER
==================================================================================================*/
#header-main{
    position:fixed;
    top:1px;
    left:0;
    width:100%;
    height:var(--header-height);
    display:flex;
    align-items:center;
    z-index:9999;
    background:rgba(18,18,30,.30);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:3px solid rgba(255,255,255,.08);
    transition:all var(--transition-normal); }

#header-main .container{
    display:flex;
    justify-content:space-between;
    align-items:center;}

/*==================================================================================================
13 • LOGOTIPO HEADER
==================================================================================================*/
#header-logo{
    display:flex;
    align-items:center;
    gap:var(--space-md); }
#header-logo img{
    width:64px;
    height:64px;
    object-fit:contain; }
#header-logo span{
    color: var(--color-accent);
    font-family:var(--font-title);
    font-size:1rem;
    font-weight:700;
    line-height:1.5;}

/*==================================================================================================
14 • MENU DESKTOP
==================================================================================================*/
#header-navigation ul{
    display:flex;
    align-items:center;
    list-style:none;
    gap:var(--space-xl); }

.menu-link{
    position:relative;
    padding:10px 2px;
    font-weight:700;
    color:var(--color-text);
    transition:all var(--transition-fast);}

.menu-link:hover{ color:var(--color-accent);
}

/*==================================================================================================
15 • MENU ATIVO (SCROLL SPY)
==================================================================================================*/
.menu-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:3px;
    border-radius:10px;
    background:var(--color-accent);
    transition:all var(--transition-normal);}

.menu-link:hover::after{    width:100%;}
.menu-link.active{    color:var(--color-accent);}
.menu-link.active::after{    width:95%;}



/*==================================================================================================
16 • MENU MOBILE
==================================================================================================*/
#mobile-menu-button{
    display:none;
    color:var(--color-white);
    font-size:1.7rem;
}

#mobile-navigation{
    position:fixed;
    top:var(--header-height);
    right:-100%;
    width:280px;
    height:calc(100vh - var(--header-height));
    display:flex;
    flex-direction:column;
    gap:var(--space-lg);
    padding:var(--space-xl);
    background:rgba(16,16,30,.95);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transition:right var(--transition-normal);
    z-index:9998;}

#mobile-navigation a{
    font-weight:600;
    transition:color var(--transition-fast);}

#mobile-navigation a:hover{
    color:var(--color-accent);}

/*==================================================================================================
17 • HERO - PÁGINA INICIAL
==================================================================================================*/
.hero{
    min-height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;}
#hero-logo{
    width:min(240px,72vw);
    margin-bottom:var(--space-xl);}
#hero-title{
    font-family:var(--font-title);
    color:var(--color-accent);
    font-size:clamp(2.5rem,5vw,3rem);
    font-weight:900;
    line-height:1.2;
    margin-bottom:var(--space-lg);
    text-shadow:0 5px 15px rgba(0,0,0,.35);}
#hero-description{
    max-width:900px;
    font-size:1.15rem;
    line-height:2;
    color:var(--color-text-light);
    margin-bottom:var(--space-xl);}

/*==================================================================================================
18 • HERO BUTTONS
==================================================================================================*/
#hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-lg);}

/*==================================================================================================
19 • BOTÕES
==================================================================================================*/
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.8rem;
    padding:15px 34px;
    border-radius:var(--radius-xl);
    font-weight:700;
    transition:all var(--transition-normal);
    box-shadow:var(--shadow-md); }

.button i{font-size:1rem;}

.button.primary{
    background:var(--color-secondary);
    color:var(--color-white);}

.button.secondary{
    background:rgba(255,255,255,.12);
    color:var(--color-white);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.12);}

.button.whatsapp{
    background:var(--color-success);
    max-height: 64px;
    color:white; }


/*==================================================================================================
20 • HOVER DOS BOTÕES
==================================================================================================*/
.button:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    filter:brightness(1.10);}

.button:active{
    transform:translateY(0);}

/*==================================================================================================
21 • CARDS DE PARTICIPAÇÃO / VOU AO EVENTO / NÃO VOU AO EVENTO
==================================================================================================*/
#attendance-selector{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:var(--space-xl);
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xxl);}

.attendance-card{
    position:relative;
    padding:32px;
    border-radius:var(--radius-lg);
    cursor:pointer;
    text-align:center;
    background:var(--color-glass);
    backdrop-filter:blur(14px);
    border:2px solid transparent;
    box-shadow:var(--shadow-md);
    transition:all var(--transition-normal);}

.attendance-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.20);
    box-shadow:var(--shadow-lg);}

.attendance-card.active{
    background:rgba(97, 97, 99, 0.05);
    border:7px solid var(--color-secondary);
    border-color:var(--color-white);
    transform:translateY(-15px);}

.attendance-card img{
    width:200px;
    margin:auto;
    margin-bottom:var(--space-lg);}

.attendance-card h3{
    font-family:var(--font-title);
    margin-bottom:var(--space-md);}

.attendance-card p{
    line-height:2.0;
    color:var(--color-text-light);}


/*==================================================================================================
22 • FORMULÁRIO - Apenas define a aparência do formulário e não controla se o formulário aparece ou não (Iniciará oculto).
==================================================================================================*/
#participant-form{
    display:none;
    background:var(--color-glass);
    backdrop-filter:blur(18px);
    border:1px solid var(--color-glass-border);
    border-radius:var(--radius-lg);
    padding:40px;
    box-shadow:var(--shadow-lg);}


/*==================================================================================================
23 • FIELDSETS - Agrupa visual e semanticamente um conjunto de campos relacionados de um formulário.
==================================================================================================*/
#participant-form fieldset{
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius-md);
    padding:24px;
    margin-bottom:var(--space-xl);}

#participant-form legend{
    padding:0 10px;
    font-family:var(--font-title);
    font-weight:700;}

/*==================================================================================================
24 • INPUT GROUP
==================================================================================================*/
.input-group{
    display:flex;
    flex-direction:column;
    margin-bottom:var(--space-lg);
}
.input-group label{
    margin-bottom:10px;
    font-weight:600;
}

/*==================================================================================================
25 • INPUTS
==================================================================================================*/
.input-group input,
.input-group textarea,
.input-group select{
    width:100%;
    padding:15px 18px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:var(--color-white);
    transition:all var(--transition-fast);
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 7px rgba(91,46,255,.25);
}

/*==================================================================================================
26 • PLACEHOLDER
==================================================================================================*/
::placeholder{color:rgba(255,255,255,.55);}


/*==================================================================================================
27 • CHECKBOX / RADIO
==================================================================================================*/
.checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
    cursor:pointer;
}
input[type="checkbox"],
input[type="radio"]{
    width:20px;
    height:20px;
    accent-color:var(--color-primary);
}



/*==================================================================================================
28 • BLOCO DE MÚSICAS
#music-list → Contêiner que agrupa todos os campos de músicas do formulário.
.music-item → Bloco individual de cada música (URL + prévia).
.music-item label → Estiliza o texto (rótulo) de cada campo de música.
.music-item input → Estiliza o campo de entrada da URL da música.
.music-item textarea → Estiliza uma área de texto dentro do bloco de música (caso exista).
.music-item select → Estiliza uma lista suspensa dentro do bloco de música (caso exista).
.music-item input:focus → Aplica o estilo ao campo de URL quando ele recebe o foco.
.music-item textarea:focus → Aplica o estilo à área de texto quando ela recebe o foco.
.music-item select:focus → Aplica o estilo à lista suspensa quando ela recebe o foco.
==================================================================================================*/
#music-list{display:flex;   flex-direction:column;    gap:12px;}
.music-item{display:flex;   flex-direction:column;    gap:12px;   margin-bottom:var(--space-lg);}
.music-item label{margin-bottom:10px; font-weight:600;}
.music-item input,
.music-item textarea,
.music-item select,
#music-search-input{
    width:100%;
    padding:12px 10px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:var(--color-white);
    transition:all var(--transition-fast);}
.music-item input:focus,
.music-item textarea:focus,
.music-item select:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 7px rgba(91,46,255,.25);}

/*==================================================================================================
29 • PREVIEW DO YOUTUBE / BUSCAS DO YOUTUBE
==================================================================================================*/
.music-preview{
    display:none;
    gap:16px;
    align-items:center;
    padding:15px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.08);}

.music-preview img{
    width:128px;
    border-radius:var(--radius-sm);}

.music-result{
    display:flex;
    gap:16px;
    align-items:center;
    padding:14px;
    cursor:pointer;
    border-radius:12px;
    transition:.25s;}

.music-result:hover{background:rgba(255,255,255,.08);}

.music-result img{ width:96px;    border-radius:10px;}

.music-result strong{display:block;}

.music-result small{opacity:.8;}

#music-search-area{
    display:none;
    margin:20px 0;
}

/*==================================================================================================
30 • PREVIEW DA FOTO - FORMULÁRIO
==================================================================================================*/
#photo-upload-area{margin-top:var(--space-lg);}
#photo-upload{
    width:100%;
    padding:18px;
    border:0px dashed rgba(255,255,255,.25);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.05);}

#photo-preview-area{
    display:none;
    margin:20px 0;
    text-align:center;}

#photo-preview{
    width:72px;
    height:72px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;}

#photo-preview img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid var(--color-accent);
    box-shadow:var(--shadow-md);}

#photo-remove{
    display:none;
    margin-top:18px;}

#submit-area{margin-top:32px;  text-align:center;}
#submit-form{max-width:480px;  width:100%;}

/*==================================================================================================
31 • AVATAR / FOTO / ÁREAS
==================================================================================================*/
#selected-avatar{
    margin-top:var(--space-lg);
    margin-bottom:var(--space-lg);
    text-align:center;}

#avatar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:16px;}

#avatar-grid img{
    width:100%;
    cursor:pointer;
    border-radius:var(--radius-md);
    border:3px solid transparent;
    transition:all var(--transition-fast);}

#avatar-grid img:hover{ transform:scale(1.06);}

#avatar-grid img.selected{
    border-color:var(--color-accent);
    box-shadow:var(--shadow-md);}

#photo-avatar-area,
#photo-camera-area,
#photo-upload-area{ display:none; margin-top:var(--space-lg);}

/*==================================================================================================
32 • BOTÃO ENVIAR
==================================================================================================*/
#submit-form{
    justify-content:center;
    width:100%;
    margin-top:var(--space-xl);
    font-size:1rem; }

/*==================================================================================================
33 • TABELAS

table → Define a aparência e comportamento da tabela inteira.
thead → Representa o cabeçalho da tabela (linha dos títulos).
th → Define cada célula do cabeçalho (Foto, Nome, Música 1...).
tbody → Contém todas as linhas de dados carregadas do banco.
tbody tr → Define o estilo de cada linha de participantes da tabela.
td → Define cada célula de dados da linha (foto, nome e músicas).
==================================================================================================*/
.table-container{
    overflow-x:auto;
    border-radius:var(--radius-lg);
    background:var(--color-glass);
    backdrop-filter:blur(10px);
    border:3px solid var(--color-glass-border);
    box-shadow:var(--shadow-md);}
table{
    width:100%;
    border-collapse:separate;
    border-spacing:1px 5px;}
thead{background:rgba(255,255,255,.08);}
th{ padding:12px;
    font-size:.77rem;
    text-align:left;
    font-family:var(--font-title);
    font-weight:700;}
/* Primeira coluna */
th:first-child, td:first-child{padding-left:12px;}
/* Última coluna */
th:last-child, td:last-child{padding-right:12px;}
td{ padding:20px 20px;
    border-top:7px solid rgba(255,255,255,.08);
    vertical-align:middle;}
td img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:90%;}
tbody tr{transition:background var(--transition-fast);}
tbody tr:hover{background:rgba(255,255,255,.06);}

/*==================================================================================================
34 • CONTADOR / TÍTULO DAS TABELAS
==================================================================================================*/
#playlist-counter{
    display:flex;
    justify-content:center;
    gap:var(--space-xl);
    margin-bottom:var(--space-xl);
    flex-wrap:wrap;}

.counter-card{
    min-width:180px;
    text-align:center;
    padding:12px;
    border-radius:var(--radius-lg);
    background:var(--color-glass);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow-md);}

.counter-card span{
    display:block;
    font-family:var(--font-title);
    font-size:1.8rem;
    font-weight:700;
    color:var(--color-accent);}

.counter-card small{
    color:var(--color-text-light);}


/*==================================================================================================
35 • EMPTY STATE
==================================================================================================*/
.empty-state{
    display:none;
    text-align:center;
    padding:64px 24px;}

.empty-state i{
    font-size:3rem;
    color:var(--color-accent);
    margin-bottom:18px;}

.empty-state h3{
    margin-bottom:12px;}

/*==================================================================================================
36 • MODAL - Janela sobreposta à página que exibe um conteúdo temporário, como a galeria de avatares.
==================================================================================================*/
.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.70);
    z-index:99999;}

.modal-content{
    width:min(95%,900px);
    max-height:90vh;
    overflow:auto;
    padding:24px;
    border-radius:var(--radius-lg);
    background:rgba(25,25,35,.95);
    backdrop-filter:blur(20px);}

/*==================================================================================================
37 • TOAST
==================================================================================================*/
#toast-container{
    position:fixed;
    right:25px;
    bottom:25px;
    display:flex;
    flex-direction:column;
    gap:18px;
    z-index:999999;}

.toast{
    padding:20px 24px;
    border-radius:var(--radius-md);
    background:rgba(30,30,40,.96);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-lg);
    animation:toastIn .35s ease;}


/*==================================================================================================
38 • FOOTER
==================================================================================================*/
#footer-main{
    padding:64px 0;
    text-align:center;}

#footer-logo{
    width:128px;
    margin:auto;
    margin-bottom:20px;}

#footer-main h3{
    margin-bottom:10px;
    font-family:var(--font-title);}

#footer-main p{ color:var(--color-text-light); margin-bottom:20px;}

/*==================================================================================================
39 • ANIMAÇÕES
==================================================================================================*/
@keyframes fadeUp{
    from{        opacity:0;        transform:translateY(40px); }
    to{        opacity:1;        transform:none; }}

@keyframes toastIn{
    from{        opacity:0;        transform:translateX(80px);    }
    to{        opacity:1;        transform:none;    }}

/*==================================================================================================
40 • RESPONSIVIDADE
==================================================================================================*/
@media(max-width:1024px){
    #header-navigation{        display:none;    }
    #mobile-menu-button{        display:block;    }}

@media(max-width:768px){
    :root{ --section-padding:64px; }
    #hero-title{        font-size:3.3rem;    }
    #hero-description{        font-size:1rem;    }
    #participant-form{        padding:24px;    }
    th, td{ padding:12px;        font-size:.9rem;    }}

@media(max-width:576px){    #header-logo span{        display:none;    }
    .button{        width:100%;    }
    #hero-buttons{    flex-direction:column;    }
    .counter-card{     width:100%;    }
    #toast-container{     left:18px; right:18px; bottom:18px; } }

#submit-area{margin-top:32px;  text-align:center;}
#submit-form{max-width:480px;  width:100%;}