/* ==================================================
   IMPORTAÇÕES DE FONTES E MENU
================================================== */
@import url('menu.css');
@import url('https://fonts.cdnfonts.com/css/akrobat');

/* ==================================================
   CONFIGURAÇÕES GERAIS E ESTILOS BASE DA CANDIDATURA
================================================== */
h1 {
    color: #00da88;
}

span {
    color: #ff0000;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Akrobat Light', sans-serif;
    color: white;
    text-align: center;
    background-size: cover;
    background-image: url("../img/background.png");
    overflow: auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* --- MENU --- */
#logo {
    position: absolute;
    width: 4.2vh;
    height: 2.95vw;
    top: 5%;
    left: 5%;
}

#logotext {
    position: absolute;
    top: 5.4%;
    left: 9%;
    font-family: 'Akrobat Bold', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.54vw;
    color: #00da88;
}

#logotext2 {
    position: absolute;
    top: 80%;
    left: 0%;
    font-size: 1.25vw;
    color: #FFFFFF;
}

/* --- LINHA DIVISÓRIA DO MENU --- */
#strich1 {
    position: absolute;
    width: 100%;
    border: 1px solid rgba(53, 53, 53, 0.6);
    top: 15%;
}

/* --- MENU DE NAVEGAÇÃO (DESKTOP) --- */
#home, #sobre, #regra, #status, #regelwerk {
    position: absolute;
    font-size: 1.04vw;
    color: #FFFFFF;
    text-decoration: none;
}
#home { left: 20%; top: 7%; }
#sobre { left: 33%; top: 7%; }
#regra { left: 45%; top: 7%; }
#status { left: 58%; top: 7%; }
#regelwerk { left: 72%; top: 7%; }

/* 
   #dc: CONTÊINER PARA ÍCONES (DESKTOP)
   Mantém a posição do antigo link “DISCORD” (left:85%; top:7%)
*/
#dc {
    position: absolute;
    left: 85%;
    top: 7%;
    display: flex;
    gap: 10px;      /* espaço entre ícones */
    align-items: center;
}
/* Tamanho/efeito nos ícones do desktop */
#dc img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.2s;
}
#dc img:hover {
    transform: scale(1.1);
}

/* Hover nos links do menu */
#home:hover, #sobre:hover, #regra:hover, #status:hover, #regelwerk:hover, #dc:hover {
    color: #00da88;
}

/* --- INDICADOR DE PÁGINA ATIVA NO MENU --- */
#homestrich {
    position: absolute;
    width: 2.4vh;
    height: 0.1vw;
    background: #00da88;
    box-shadow: 0 0 0.16vw #6DB9FF;
    top: 10%;
    left: 20%;
}

/* ==================================================
   CONTAINER PRINCIPAL DA PÁGINA DE CANDIDATURA
================================================== */
#page-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1400px;
    margin: auto;
    gap: 50px;
    flex-grow: 1;
    padding-top: 160px; /* Ajustado para alinhar abaixo do menu */
    padding-bottom: 80px; /* Evita que o conteúdo encoste no footer */
}

/* --- SEÇÃO DO FORMULÁRIO --- */
#form-section {
    flex: 1;
    background: rgba(0, 0, 0, 0.85);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    max-height: calc(100vh - 360px); /* Mantém entre o menu e o footer */
    overflow-y: auto;
    text-align: left;
    width: 50%;
}

/* --- SCROLLBAR PERSONALIZADA --- */
#form-section::-webkit-scrollbar {
    width: 8px;
}

#form-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

#form-section::-webkit-scrollbar-thumb {
    background: #00da88;
    border-radius: 10px;
}

#form-section::-webkit-scrollbar-thumb:hover {
    background: #008a66;
}

/* --- CAMPOS DO FORMULÁRIO --- */
#form-section label {
    display: block;
    font-size: 1rem;
    margin-top: 12px;
    color: white;
    font-weight: bold;
}

#form-section input,
#form-section select,
#form-section textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    margin-top: 5px;
    border: 1px solid #444;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transition: border-color 0.3s, background-color 0.3s;
}

#form-section input:focus,
#form-section select:focus,
#form-section textarea:focus {
    border-color: #00da88;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

/* --- BOTÃO DE ENVIO --- */
#form-section button {
    width: 100%;
    padding: 14px;
    font-size: 1.2rem;
    background: linear-gradient(90deg, #00da88, #008a66);
    color: white;
    border: none;
    border-radius: 6px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.3s, background 0.3s;
}

#form-section button:hover {
    background: linear-gradient(90deg, #008a66, #00da88);
    transform: scale(1.03);
}

/* --- SEÇÃO DO TEXTO DA CANDIDATURA --- */
#page-title-candidatura {
    flex: 1;
    padding: 20px;
    text-align: left;
    max-width: 500px;
}

/* --- TÍTULO E TEXTOS --- */
.page-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #00da88;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.page-title-white {
    color: white;
}

.page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
}

.page-text {
    font-size: 1rem;
    margin-top: 10px;
    text-align: justify;
    line-height: 1.6;
}

/* --- FOOTER --- */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.3);
}

copyright {
    font-family: 'Akrobat Light', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 1.0416666666666667vw;
    line-height: 1.25vw;
    color: #525252;
}

.swal2-popup {
    background: #121212 !important; /* Fundo escuro */
    color: #00ff88 !important;       /* Texto verde neon */
    border: 2px solid #00ff88;       /* Borda neon */
    border-radius: 8px;
}

.swal2-title {
    color: #00ff88 !important;
}

.swal2-html-container {
    color: #ffffff !important;
}

swal2-confirm {
    background: #00ff88 !important;
    color: #121212 !important;
    border-radius: 5px;
    padding: 10px 20px;
}

.swal2-confirm:hover {
    background: #00cc70 !important;
}

/* ==================================================
   RESPONSIVIDADE MOBILE PARA A PÁGINA DE CANDIDATURA
================================================== */
@media (max-width: 1024px) {
    #page-container {
        flex-direction: column;
        align-items: center;
        padding-top: 120px;  /* Reduz o espaço superior se necessário */
    }
    
    #form-section,
    #page-title-candidatura {
        width: 90%;
        max-height: none;
        margin: 10px 0;
    }
}

@media (max-width: 768px) {
    #logo {
        /* Sobrescreve o que está definido acima */
        width: 10vw;      
        height: auto;     
        top: 5%;          
        left: 35%;         
    }
    /* Ajusta os textos do menu e cabeçalho */
    #logotext {
        font-size: 5vw;
        left: 43%;
        top: 6%;
    }
    
    /* Títulos da candidatura ficam maiores para legibilidade */
    #page-title-candidatura .page-title {
        font-size: 6vw;
    }
    
    /* Ajusta os campos do formulário para melhor leitura */
    #form-section label,
    #form-section input,
    #form-section select,
    #form-section textarea,
    #form-section button {
        font-size: 1rem;  /* ou 0.9rem, conforme sua preferência */
    }
    
    /* Se houver elementos decorativos desnecessários, considere ocultá-los */
    #strich1 {
        display: none;
    }
}

/* ==================================================
   REGRAS ADICIONAIS DO MENU (extraídas do menu.css)
================================================== */

/* Ícone do Menu Hamburger (para dispositivos móveis) */
#menu-toggle {
    display: none;
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 28px;
    color: #00da88;
    cursor: pointer;
    z-index: 999;
}

/* Menu lateral oculto por padrão */
#menu-lateral {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: -5px 0 15px rgba(0, 218, 136, 0.8);
    z-index: 1000;
    padding: 20px;
}

#menu-lateral a {
    display: block;
    padding: 15px;
    color: #00da88;
    text-align: left;
    font-size: 18px;
    border-bottom: 1px solid #00da88;
    text-decoration: none;
}

#menu-lateral.active {
    display: block;
}

/* Em telas menores, esconde o menu superior e mostra o ícone do hamburger */
@media (max-width: 768px) {
    #nav {
        display: none;
    }
    #menu-toggle {
        display: block;
    }
}

/* 
   #dc-lateral: SE QUISER OS MESMOS ÍCONES NO MENU LATERAL
   (adicione <div id="dc-lateral"> no HTML do menu-lateral)
*/
#dc-lateral {
    display: none;        /* escondido em desktop */
    flex-direction: row;  /* ou column */
    gap: 10px;
}
#dc-lateral img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.2s;
}
#dc-lateral img:hover {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    #dc-lateral {
        display: flex; /* só aparece em mobile */
    }
}