/* container principal */
.signup-main {
    display: flex;
    justify-content: center;
    padding: 1.6rem 0.8rem; 
    background: url('../img/imagem_cadastro.jpg') center/cover no-repeat;
}

/* seção de formulário */
.signup-section {
    background: #1f1f1f;
    padding: 32px; 
    border-radius: 32px;
    max-width: 520px; 
    max-height: fit-content; 
    width: 100%;
    color: #f5f5f5;
}

/* título e link de login */
.signup-title {
    margin-bottom: 0.4rem;
    font-size: 1.4rem; 
}

.signup-login-link {
    margin-bottom: 1.2rem; 
    font-size: 0.72rem; 
}

.signup-login-link__anchor {
    color: #EB004B;
    text-decoration: none;
}

.signup-login-link__anchor:hover {
    color: #C1003F;
}

.password-input-wrapper {
    position: relative; 
    display: flex; 
    align-items: center; 
    width: 100%; 
}

.password-input-wrapper input {
    flex-grow: 1; 
    padding-right: 2.5rem; 
}

.toggle-password {
    position: absolute; 
    right: 0.3rem; 
    background: none; 
    border: none; 
    cursor: pointer;
    padding: 0.2rem; 
    display: flex; 
    align-items: center;
    justify-content: center;
    height: 100%; 
}

.toggle-password__icon {
    text-align: right;
    width: 1rem; 
    height: 1rem;
    filter: invert(30%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(80%); /* Exemplo: escurecer o ícone para contrastar com o fundo claro do input */
}



.signup-form__row {
    border: none;
    display: flex;
    gap: 0.8rem; 
    flex-wrap: wrap;
}


.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.8rem; 
    border: none;
    
}

.form-group--terms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.terms-content-wrapper{
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.terms-label {
    margin-left: 0;     
    font-size: 0.7rem; 
    line-height: 1.2;
}
.error-message{
    font-size: 0.85rem;
    font-weight:550;
    color: #ff2424;   
    min-height: 0.96em;
}

input[type="checkbox"]{
    margin: 0;
    flex-shrink: 0;
}

.terms-label a {
    color: #EB004B;
    text-decoration: none;
}


label {
    font-weight: 500;
    margin-bottom: 0.2rem; 
}

.label-hint {
    font-size: 0.6rem; 
    color: #ccc;
}

/* inputs, selects e botões */
input[type="text"],
input[type="email"],
input[type="password"],
select {
    height: 38.4px; 
    padding: 0.48rem 0.6rem; 
    border: none;
    border-radius: 0.4rem; 
    font-size: 0.8rem; 
    background: #ececec;
    color: #1f1f1f;
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: #EB004B;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: none
}


.gender-options {
    display: flex;
    gap: 1.2rem; 
    margin-top: 0.4rem;
}

.gender-options div {
    display: flex;
    align-items: baseline;
    gap: 0.24rem; 
}

.birthdate-selects {
    display: flex;
    gap: 0.4rem; 
    margin-top: 0.4rem; 
}

.birthdate-selects select {
    flex: 1;
}


.error-message {
    margin-top: 0.2rem; 
    font-size: 0.64rem; 
    color: #e40000;
    min-height: 0.96em; 
}

.success-message {
    margin-top: 0.8rem; 
    font-size: 0.72rem; 
    color: #5daf00;
}

.btn-submit {
    height: 44.8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.6rem; 
    background: #EB004B;
    color: #fff;
    font-size: 0.88rem; 
    font-weight: 600;
    border: none;
    border-radius: 0.48rem; 
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: #A10035;
}


@media (max-width: 384px) { 
    .signup-form__row {
        flex-direction: column;
    }
}