body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
.form-section, #plano-template { display: none; }
.form-section.active { display: block; }

/* Estilos para os botões de seleção customizados */
.custom-radio, .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espaço entre a caixa e o texto */
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-radio:hover, .custom-checkbox:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Cria a caixa visual para o checkbox/radio */
.custom-radio::before, .custom-checkbox::before {
    content: '';
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    border: 2px solid #d1d5db; /* gray-300 */
    border-radius: 0.25rem;
    transition: all 0.2s;
}

/* Deixa o radio button redondo */
.custom-radio::before {
    border-radius: 50%;
}

/* Estilos quando o input está selecionado */
input[type="checkbox"]:checked + label .custom-checkbox {
    border-color: #B91C1C; /* red-700 */
    background-color: #FEE2E2; /* red-100 */
}
input[type="checkbox"]:checked + label .custom-checkbox::before {
    background-color: #B91C1C;
    border-color: #B91C1C;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

input[type="radio"]:checked + label .custom-radio {
    border-color: #B91C1C; /* red-700 */
    background-color: #FEE2E2; /* red-100 */
}
input[type="radio"]:checked + label .custom-radio::before {
    border-color: #B91C1C;
    /* Cria o efeito de ponto central */
    box-shadow: inset 0 0 0 4px #FEE2E2; /* Cor de fundo para criar o círculo */
    background-color: #B91C1C;
}

input[type="radio"], input[type="checkbox"] { display: none; }