/* ==========================================
   FORM
========================================== */

form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* ==========================================
   FIELD
========================================== */

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ==========================================
   LABEL
========================================== */

label{

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

}

/* ==========================================
   INPUT
========================================== */

input,
select,
textarea{

    width:100%;

    padding:14px 16px;

    border-radius:10px;

    border:1px solid var(--border);

    background:rgba(255,255,255,.05);

    color:var(--text);

    outline:none;

    transition:var(--transition);

}

input::placeholder,
textarea::placeholder{

    color:rgba(255,255,255,.45);

}

/* ==========================================
   FOCUS
========================================== */

input:focus,
select:focus,
textarea:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 3px rgba(196,248,122,.15);

}

/* ==========================================
   TEXTAREA
========================================== */

textarea{

    resize:vertical;

    min-height:120px;

}

/* ==========================================
   FILE INPUT
========================================== */

input[type=file]{

    display:none;

}

/* ==========================================
   FILE BOX
========================================== */

.file-upload{

    border:2px dashed rgba(255,255,255,.20);

    border-radius:15px;

    padding:35px;

    text-align:center;

    cursor:pointer;

    transition:var(--transition);

}

.file-upload:hover{

    border-color:var(--secondary);

    background:rgba(255,255,255,.03);

}

/* ==========================================
   FILE ICON
========================================== */

.file-icon{

    font-size:3rem;

    margin-bottom:10px;

}

/* ==========================================
   HELP TEXT
========================================== */

.form-help{

    font-size:.85rem;

    color:var(--text-secondary);

}

/* ==========================================
   ERROR
========================================== */

.input-error{

    border-color:var(--danger);

}

.error-message{

    color:var(--danger);

    font-size:.85rem;

}

/* ==========================================
   SUCCESS
========================================== */

.input-success{

    border-color:var(--success);

}

.card-option {
    display: block;
    border: 2px solid #e0e0e0;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    color: #333; /* Texto interno do card em cinza escuro para ler no fundo branco */
}

/* Efeito ao passar o mouse */
.card-option:hover {
    border-color: var(--primary-roxo);
    background-color: #f9f5ff;
}

/* Estilo de quando o card está SELECIONADO */
.card-option:has(input:checked) {
    border-color: var(--primary-roxo);
    background-color: #f3e8ff;
    box-shadow: 0 4px 10px rgba(106, 13, 173, 0.2);
    font-weight: 600;
}

/* Caso o seu navegador não suporte :has, esta é a alternativa clássica */
.card-option input:checked + .card-content {
    /* Estilos extras se você tiver uma div interna */
}